A 10 year old stop-motion animation artist teamed up with me to create a mini-game to pract...

A 10 year old stop-motion animation artist teamed up with me to create this mini-game to practice single digit multiplication or addition.

Answer the five questions to help the pipe-cleaner guy in his quest for treasure!

We are hoping to create more episodes in future and would love to hear your feedback:send us an email.

You can play on top of this screen or check out the full screen version:

Addition orMultiplication

The program is very simple. One interesting thing about it is that it alternates between two HTML video elements - while one is being displayed, the other one is hidden and being loaded.

The video files are very small (about 200kB each), but they still could cause annoying buffering issues (delays) without this mechanism.

There is an HTML5 Canvas on top of the videos that is used to display questions, answers and messages.

The entire code is below. Here's a quick overview:

[1-15] HTML setup. The page consists of two video controls and a Canvas. They're all located in the upper left corner of the screen. The Canvas is on top of the videos.

[17-37] Declare variables.

[39-46] This function clears the Canvas when the countdown counter reaches the value of 1. This is used to clear the correct answer after a delay.

[48-62] Randomize a new question plus three incorrect answers, calculate the correct answer using the mathematical operator (+/*).

[64-77] Display the question in a comic speech bubble (67) and the four boxes with answers on the Canvas.

[79-104] When the current video finishes playing:

- switch out the videos (hide the current one and display the buffer)

- load the next video file in the buffer video(85-86)

- the current video becomes the buffer, and vice versa (88-94)

- randomize and display a new question (95-97)

- If all videos completed, display the victory message (98-103)

[106-125] Resize the videos and the Canvas to full screen. This is mainly needed if the player rotates their mobile device (horizontal/vertical). I could not use the native fullscreen capability as in some cases there is no way to get rid of the video controls.

[127-137] Reset all variables when a new game starts and show the red 'play' button (135).

[139-142] Start the first game.

[144-175] When the player clicks:

[146-150] if it's the beginning of the game, play the first video.

[151-152] if there is a question of the screen, get the Y coordinate of the click and:

[153-160] if the correct answer was clicked, play the next video and the 'correct' bleep. Clear the question and the boxes, redraw the correct answer in white. Start the countdown to clearing the correct answer (159).

[161-165] otherwise play the 'incorrect' bleep and redraw the incorrect answer in red.

[168-174] if this was the last video, restart the game.

[177-179] set up event listeners.

[180] kick off the timer mechanism.

Check out these programming tutorials: