In this chapter, we will cover
• creating HTML by code
• positioning and repositioning HTML elements
• responding to clicks of the mouse
• arrays of arrays
• playing video
The basic information for the quiz consists of country and capital city name pairs for the G20 countries.
(Note: the European Union is one of the entries.) The program chooses at random four country/capital pairs and presents them in boxes on the screen. Figure 6-1 shows an opening screen.
Figure 6-1. An opening screen for the quiz
Players attempt to match a country and its capital by clicking first on one and then the other, and the blocks change color to indicate success. Figure 6-2 shows the correct matching of Canada and Ottawa, and Figure 6-3 shows a second match. Notice that the blocks have been colored in and the Score goes to 1 and then to 2.
Figure 6-2. One pair correctly matched
181 Figure 6-3. A second successful match
Now the player makes a mistake by pairing Riyadh with Australia. Figure 6-4 shows the result: the program moves the Riyadh block, but the Action field indicates WRONG. The Score is still 2, and the blocks remain white.
Figure 6-4. After two correct and one incorrect plays
This quiz program allows the player to try again, as shown in Figure 6-5.
Figure 6-5. Choosing the correct match for Riyadh
The second version of the quiz provides more feedback to the player. Clicking on a country or capital turns its color to tan, as in Figure 6-6. If the attempted match is correct, the blocks become gold as in the first game. If not, the color changes back to white.
Figure 6-6. A first selection changes color.
Matching all four correctly results in a short video clip. Figure 6-7 shows the start of the video.
183 Figure 6-7. After success, a video clip
A game or, indeed, any application, must communicate effectively with the user. Sometimes, you may want to be subtle, but a good rule is to provide feedback for every user action, or at least think carefully and make a conscious decision to not provide direct feedback. The color changes are feedback. The video is feedback: the player who completes the game gets a visual reward.
This program should be considered a starting point. As designer, you will need to make decisions on retries, game completion, hints, and so forth. I decided to make this game a random selection of 4 questions from a set of 20. You could consider these sets of 4 questions rounds in a longer game. You could present one country along with several alternatives for its capital. And you could use images (img elements with the src values set by code) in place of names. See the “Building the Application and Making It Your Own” section for more ideas.
Our quiz program creates HTML elements that change and move around the screen as a result of player action. It also uses arrays of arrays to hold information, and it includes video that plays at a specific point in the game. Its hard to imagine a sophisticated game nowadays that wouldnt include such elements.
Moreover, this program suggests the potential of games for education, certainly an area worth exploring.
A quiz requires a way to store information or, to use a fancier term, a knowledge base. We need a way to choose specific questions to ask, hopefully randomly, so the player sees a different set of challenges each time. Since what were storing is simply pairs of names, we can use a simple technique.
Notice that we are not using the <canvas> element. We could have, and you can read the Comment below for a comparison of dynamically created HTML markup and the canvas. The Hangman application in Chapter 9 includes dynamically generated HTML elements and drawing on a canvas element.
Since video is such an important advance for HTML5, I wanted to demonstrate it in an example. A critical aspect of using video as a “reward” for a successful game is the need to hide the video until that point in the game and then start playing it. What makes this more challenging is that currently not all browsers accept the same video encodings. Still, as mentioned earlier, the new capability in HTML5 means that developers can make very precise use of video without relying on third-party plug-ins.