The Essential Guide to HTML5

QUIZ

Code Explanation

Score: <input name="score" type=

"text" value="0"/>

Text label and then input field

Close form

Close paragraph
Close body
Close html

The first step to making this application your own is to choose the content of your quiz. It needs to be

pairs of values. The values here are names, held in text, but they could be numbers, or numbers and text.

You also could create img tags and use the information kept in the array to set the src values of img

elements. More complicated, but still doable is to incorporate audio. Start simple, with something

resembling the G20 facts, and then be more daring.

You can change the look of the application by modifying the original HTML and/or the created HTML. You

can modify or add to the CSS section.

You can easily change the number of questions, or change the four-question game to a four-question

round and make a new round happen automatically after a certain number of guesses or when clicking on a

button. You would need to decide if country/capital pairs are to be repeated from round to round.

You can also incorporate a time feature. There are two general approaches: keep track of time and simply

display it when the player completes a game/round successfully (see the memory games in Chapter 5) or

impose a time limit. The first approach allows someone to compete with themselves but imposes no

significant pressure. The second does put pressure on the player and you can decrease the allowed time

for successive rounds. It could be implemented using the setTimeout command.

Table 6-5 shows the code for the second version of the game, which includes changing a first selection to

tan, and the video. As was the case in other chapters with multiple versions, think about what is the same

in this game, and what we
ve changed or added.

Table 6-5. The Complete Code for the Second Version of the Quiz Application

Code Explanation

^

^