HW7: A JavaScript Math Quiz App

For this homework you will build a stand-alone math quiz/drill program. If you have ever visited the Khan Academy you will see that, in addition to all the cool videos, Kahn also has a webapp for practicing math. For this homework you will build JavaScript application that asks the user simple math questions, and provides him with feedback on his progress. Note that this will be a stand-alone application, independent of the survey webapp we have been developing (for now?). You will be using jQuery for this and jQueryUI if you want.

There are a few things that we know, from educational and video game research, about how to build these types of apps.

1. Students should be given immediate feedback. So, you should immediately tell the user if his answer is right or wrong, and give him the correct answer.
2. Achievements (badges, medals, etc.) keep them hooked. So, we are going to have a lot of them.
3. You can never have too much eye candy.

Specifically, you will implement the following features.

1. When loading the page the user is asked whether we wants to practice addition, subtraction, or multiplication.
2. In this game the user is asked one question at a time. They all consist of a problem using the digits 0 to 9. For example: 4 + 2 = __. The user answers the question by typing in the number and hitting enter.
3. Rather than generating numbers from a flat random probability, which generates too many 0,1, and 5s, pick them randomly from this list: [0,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4,5,5,6,6,6,6,6,7,7,7,7,7,8,8,8,8,8,9,9,9,9,9].
4. Do not ask subtraction questions for which the answer is a negative number.
5. If the answer is wrong, the program tells the user he was wrong and tells him the right answer. If we was right the program tells him. In both cases the user is immediately presented with the next question.
6. The app show the latest 2 questions and their answer. You should show both the answer the user gave and the correct answer, if different. Correct answers should look different than wrong answers (different color, strikethru, etc.). Below these (or above) we see the current question. When a new question appears it should smoothly scroll the oldest question off. The is no scroll bar, this is an automatic scrolling.
7. There is a clock that countdowns the 10 seconds the user has to answer the question. If the user does not answer within the 10 seconds then the answer is considered wrong, the right answer is shown and a new question appears.
8. There is a bar that keeps track of the number of consecutive correct answers.
9. There are achievements that appear, and fade away slowly, for different events:
   1. when the user gets 10, 20, 30,....consecutive correct answers.
   2. when the user correctly answers 10 questions in less than 20 seconds total, 20 in less than 40 seconds, and so on. Basically, he is averaging less than 2 secs per answer (that might be too hard, feel free to change the exact time to what you think is a good number).
   3. when the user has had a total of 10 correct (not necessarily consecutive) answers, 20, 30, and so on
10. Each one of the 3 type of achievements above should appear with a different animation. Try to be creative. Use jQueryUI if you want, or even a jQuery sound plugin, if you want (not required). Remember, you cannot have too much eye candy when giving out achievements.

This homework is due on Monday, March 14 @11am, you can turn it in here.

Required Reading

• Mozilla Developer Network DOM documentation
• jQuery documentation.
• jQuery UI documentation.