초등 수학: 시간 단위 변환(분-초) 퀴즈 웹앱 생성 COSTAR Prompt
https://gemini.google.com/share/6fcbb66e6aad
1. Context (배경)
초등학교 3학년 '길이와 시간' 단원에서는 시간의 단위인 '초'를 배우고, 1분=60초의 관계를 이해해야 합니다. 학생들은 분 단위를 초로, 초 단위를 분과 초로 변환하는 60진법 계산에 익숙해질 필요가 있습니다.
2. Objective (목표)
교과서 73쪽 유형의 문제를 무한히 연습할 수 있는 인터랙티브 퀴즈 웹앱을 제작합니다.
예시 문제 1: 1분 40초 = ( )초
예시 문제 2: 130초 = ( )분 ( )초
3. Style (스타일)
비주얼: 따뜻한 오렌지 계열(#f97316)의 테마를 사용하여 수학 과목에 대한 친근감을 높입니다.
UI: Tailwind CSS를 활용합니다. 큼직한 숫자 입력창(Input), 진행 바(Progress Bar), 부드러운 애니메이션 효과를 포함합니다.
구성: 단일 HTML 파일로 모든 로직을 포함합니다.
4. Tone (어조)
어린이 눈높이에 맞춘 응원 멘트("할 수 있어요!", "시간 박사님!")를 사용합니다.
오답 시에도 정답과 비교하며 원리를 설명하는 다정한 어조를 유지합니다.
5. Audience (대상)
초등학교 3학년 학생 및 60진법 계산 연습이 필요한 기초 학습자.
6. Response (응답 형식 및 기술 요구사항)
하나의 HTML 파일 안에 모든 코드(HTML, CSS, JavaScript)를 작성하세요.
[핵심 기능 및 로직]
랜덤 문제 생성 (10문제):
유형 A (분/초 → 초): 1~3분 사이의 랜덤 '분'과 0~50초 사이의 10단위 '초'를 생성하여 합산합니다.
유형 B (초 → 분/초): 61~210초 사이의 랜덤 '초'를 생성하여 60으로 나눈 몫과 나머지를 계산합니다.
인터랙티브 UI:
현재 진행 상황을 알려주는 상단 프로그레스 바.
문제 유형에 따라 입력 칸 개수가 유동적으로 변함 (1개 또는 2개).
'Enter' 키 지원으로 빠른 문제 풀이 가능.
결과 및 피드백:
10문제 풀이 후 점수 공개.
오답 노트 기능: 틀린 문제의 '내가 쓴 답'과 '실제 정답'을 한눈에 비교할 수 있는 리스트 제공.
점수대별 맞춤형 격려 메시지 (0~3점/4~7점/8~9점/10점).
접근성: 모바일에서도 잘 보이도록 반응형 레이아웃을 적용하고, 터치 입력이 쉽도록 입력창 크기를 충분히 확보합니다.
