HTML and CSS Reference
In-Depth Information
Code
Explanation
Action: <input name="out" type=
"text" value="RIGHT OR WRONG"/>
Score: <input name="score" type=
"text" value="0"/>
</form>
</p>
<video id="vid" controls=
"controls" preload="auto">
Video with controls
<source src="sfire3.mp4" type='video/
mp4; codecs="avc1.42E01E, mp4a.40.2"'>
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
</video>
Closing tag
</body>
</html>
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 players 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.
