Kindergarten Counting

Prompt

Write the html, CSS and JavaScript code necessary for an interactive, self-contained and embeddable game for students in kindergarten who are learning counting skills. Create a drag and drop scenario in which players are presented with the first three numbers in a counting order series. Players will drag and drop the next three numbers in the series. Create a number bake panel with six possible digits that could be dragged into the series presented to them, three numbers are correct and three are distractors. If the player drags an incorrect number into the series, make that number return to the number bank. If the digit is dragged into the correct location, let it stay there. When the player has supplied all the correct numbers in the series, provide a celebration screen with confetti and a trumpet sound. Keep the number series generated less than 30 and more than zero. As play continues, increase the level of challenge while ensuring that each series is always less than 30. Randomize the series presented for endless, non-repetitive game play. Use a pleasing monochrome blue theme for the game with a legible black font. Add a timer that begins when the first digit is dragged onto the playing area. The timer counts down from 20 seconds. Grant a point for each series correct. Game ends when player has 10 points. Use a font like Quicksand or Montserrat that is easy for young readers to recognize. Add a reset button at the bottom of the play area to start a new game.

Iteration #2

The drag and drop events don’t always work. Double check the code to ensure that drop events happen accurately all the time.

Iteration #3

The drag and drop features don't work at all on the desktop browser. Fix them so they work on a desktop browser. Also, arrange the first 5 problems to be one though ten and low teen numbers. Arrange the next 3 to be in the twenties, and the last 2 should be in the thirties.

Iteration #4

I have embedded the code in a Google Site. The drag and drop still won't  accept a dropped element. Previously, it worked in the iPad OS. Now, in Google Chrome on a desktop computer, the dragged element won't drop in to place. Check and double check the code to accept a dropped element.

Iteration #5

The drop still fails. Review why the drop element does not remain in the dropped zone.

Iteration #6

The dropped element is still not accepted as a drop in the published site. Fix it again.