HTML and CSS Reference
In-Depth Information
Chapter 6
Quiz
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
Introduction
This chapter demonstrates how HTML elements can be created dynamically and then positioned and
repositioned on the screen. This is in contrast not only to drawing on a canvas element but also to the old
way of creating static web pages. Our goal is to produce a quiz in which the player must match the names
of countries and capital cities. We will use an array of arrays to hold the necessary information and build
on the game to give more feedback to the player, including playing a video clip as a reward for getting the
correct answers. The ability to display video directly (or
natively
) using HTML5 is a big improvement over
the old system, which required using the
<object>
element and third-party plug-ins on the players
computer. In our game, the video serves only a minor role, but the fact that developers and designers can
use HTML5 and JavaScript to produce a specific video at a specific point in the running of an application is
very important.
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.
