The Essential Guide to HTML5

QUIZ

Code Explanation

Action: <input name="out" type=

"text" value="RIGHT OR WRONG"/>

Score: <input name="score" type=

"text" value="0"/>

<video id="vid" controls=

"controls" preload="auto">

Video with controls

Source for the mp4 file

<source src="sfire3.theora.ogv" type=

'video/ogg; codecs="theora, vorbis"'>

Source for the ogv file

<source src="sfire3.webmvp8.webm" type=

"video/webm; codec="vp8, vorbis"'">

Source for the webm file

Your browser does not accept the video tag. Message to noncompliant browsers

To make this game your own, consider other questions from geography or even other entirely different

categories. As suggested earlier, you can make one or both of the pairs of information images. The video

treat can vary depending on the content or even the player
s performance.

You can identify links to web sites that discuss the facts or to Google map locations as mini-awards for

correct answers—or as clues.

You may not like the way the quiz blocks remain on the screen while the video is showing. You can remove

them using a loop that makes each element invisible. Look ahead to the Hangman application in Chapter 9

for ideas.