WebFund 2013F: Assignment 3

Solutions for this assignment are available here.

In this assignment you will be modifying and extending letterpaint-demo, the same code you had in [WebFund 2013F: Tutorial 8|Tutorial 8]. The client-side code is from this HTML5 canvas tutorial. This assignment has 40 points (and 10 bonus points) and is due on November 14th.

Please submit your answers as a single zip file called "<username>-comp2406-assign3.zip" (where username is your MyCarletonOne username). This zip file should unpack into a directory of the same name (minus the .zip extension of course). You may omit the node_modules directory to save space. This directory should contain:

• your modified version of letterpaint-demo (one version with all code changes) and
• a text file called "answers.txt" at the top level with the first four lines saying "COMP 2406 Assignment 3", your name, student number, and the date. This file should briefly outline and document the code changes you made to answer each question.

No other formats will be accepted. Submitting in another format will likely result in your assignment not being graded and you receiving no marks for this assignment.

Note that your visible changes to the interface should "blend in" with the current interface. Points may be deducted if any visual element is particularly jarring or out of place.

1. [2] Add a quit button as described in Tutorial 8.
2. [2] Make the info screen be dismissed when you click anywhere on it (rather than just by clicking on the info button again). Make sure only clicks in the info screen dismiss it. For example, clicks on the sound toggle button should still work.
3. [6] Change the application to use jQuery rather than the default browser DOM methods. You will need to change references to the document object and the event handlers at a minimum. Use the native browser canvas-related objects, however.
4. [6] Add a counter to the bottom right that tracks the score. The score should be calculated as one point added for every correct trace. Do not deduct anything for mistakes.
5. [10] Add a 10 second timer that is set when the user is first shown the letter. Cancel the timer when the player finishes tracing successfully or goes out of bounds. If the timer goes off, add text to the top left of the screen (under the bar) that says random motivational statements (at least three) such as "You can do it!" that appear for two seconds then disappear. After the message disappears reset the timer so another motivational message will appear in 10 seconds. (Note the timings are arbitrary, so feel free to adjust to make the game more playable.)
6. [10] Display the current high score for all users in the bottom left corner of the screen, saying "High score: 20" if the high score is 20. This high score should be updated using jQuery AJAX access methods in the background, with both the clients and servers pushing updates as they happen. If the current score is higher than the high score, the client informs the server. If the high score on the server goes up, it informs all active clients that there is a new high score. Alternately, you can "fake" this by just having the high score be updated every time the player's score changes. (Note you'll still need to do an AJAX call in the background.)
7. [4] Modify the quit button so that it displays an info-like screen that tells the user how they did and gives options of "Continue Game" and "Really Quit". If the user has the current high score it should say "Congratulations! You got the high score of 20!". If the player does not have the current high score, display a message saying "You got a score of 20. Good job!".
8. [BONUS 10] Make the game better. Be sure to explain both why it is better and how you coded your improvements in your written answer.