Telling Time

Prompt

Code in html, css, and javascript a self-contained, embeddable, and complete analog clock to help primary grade students practice as they learn to tell time. Accuracy is essential so place the top 12 at 0 degrees with the other primary numbers placed every 30 degrees surrounding the face. Ensure that 3 is at 90 degrees, 6 is at 180 degrees, and 9 is at 270 degrees. Ensure that the minute intervals hash marks are located evenly distributed every 6 degrees. Use a white clock face with black numbers and hash marks. Make the hour hand easy to distinguish from the minute hand.

Prompt

Now let's take this to another level by making it a game for primary grade students. Add a scoreboard and a streak counter. Show fireworks after every 5 correct responses and after 20 correct total responses at each level, play a church bell chime celebration. At level 1, have students tell times to the correct 5 minutes. Create times like 1:25, 2:30, 9:45, etc. For level 2, have students tell time to the correct 1 minute. Create times like 3:37, 11:42, 4:53. At level 3, keep the same parameters as level 2, but add a 20 second timer. As the analog clock changes times, ensure that it only rotates clockwise, never counterclockwise. Add an input area for players to key in their time value. Make the clock face have the same color theme, but add a navy blue, white, black, and gray theme surrounding the clock. 

Coded with Gemini Gem "Coding Partner"

I still had to request code in html, css, and javascript and create a self-contained, complete, and embeddable activity even though I included all that in the Gem's instructions.