초등 수학: 랜덤 시계 시각 읽기 퀴즈 웹앱 생성 COSTAR Prompt
1. Context (배경)
초등학교 3학년 '길이와 시간' 단원에서는 시, 분, 초 단위까지 시각을 정확히 읽는 법을 배웁니다. 학생들은 시계의 세 바늘(시, 분, 초)의 위치를 보고 숫자로 변환하는 연습이 필요합니다.
2. Objective (목표)
사용자가 시계 이미지를 보고 시, 분, 초를 입력하여 정답을 맞히는 10문제 구성의 인터랙티브 웹앱을 제작합니다.
문제를 풀 때마다 랜덤한 시각이 생성되어야 합니다.
10문제를 모두 풀면 결과 화면이 나타나야 합니다.
3. Style (스타일)
비주얼: HTML5 Canvas를 사용하여 교과서 스타일의 깔끔한 아날로그 시계를 직접 그립니다.
바늘 구분: 시바늘(검정/굵고 짧음), 분바늘(파랑/중간), 초바늘(빨강/가늘고 김)로 명확히 구분합니다.
UI: Tailwind CSS를 활용하여 둥근 모서리, 부드러운 그림자, 파스텔 톤 배경의 친근한 디자인을 적용합니다.
4. Tone (어조)
어린이 학습자를 위해 격려하고 칭찬하는 어조를 유지합니다.
점수에 따라 결과 메시지를 다르게 보여주어 동기를 부여합니다.
5. Audience (대상)
초등학교 3학년 학생 및 지도 교사.
6. Response (응답 형식 및 기술 요구사항)
단일 .html 파일로 모든 코드(HTML, CSS, JS)를 통합하여 작성하세요.
[핵심 기능 및 로직]
문제 생성: 1~12시, 0~59분, 0~59초 사이의 랜덤한 시각 10개를 생성합니다.
시계 드로잉(Canvas):
60개의 작은 눈금과 5분 단위의 굵은 눈금을 표시합니다.
숫자 1부터 12까지 시계 방향으로 배치합니다.
시바늘은 분의 진행 상태에 따라 조금씩 이동하게 계산합니다 (예: 1시 30분이면 시바늘은 1과 2의 정중앙).
입력 시스템: 시, 분, 초를 각각 입력할 수 있는 3개의 숫자 입력 칸을 제공합니다.
결과 처리:
0~3점: "아쉬워요! 다시 도전해 볼까요?" (빨간색 테마)
4~7점: "조금만 더 힘내요!" (주황색 테마)
8~9점: "참 잘했어요!" (초록색 테마)
10점: "당신은 시계 박사!" (파란색 테마 + 애니메이션 효과)
오답 노트: 결과 화면에서 틀린 문제 번호와 함께 '내가 쓴 답'과 '실제 정답'을 대조해서 보여줍니다.
사용성: 엔터 키를 누르면 다음 문제로 넘어가고, 첫 번째 입력 칸에 자동으로 포커스가 가도록 설정합니다.
