HTML and CSS Reference
In-Depth Information
Next we need to present questions to the player and provide feedback, something different each time. In
this example, the player sees the country and capital names in blocks on the screen, and then clicks on
the appropriate blocks to indicate a possible match. This means we need a way to generate JavaScript to
detect mouse clicks on specific blocks and then reposition the first block clicked on to be next to the
second block. We want a correct pairing to be indicated by a change in color as well as text, and an
increase in the score.
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.
HTML5, CSS, and JavaScript features
Now lets delve into the specific features of HTML5, CSS, and JavaScript that provide what we need to
implement the quiz. I again build on what has been explained before, with some redundancy just in case
you skipped around in your reading.
Storing and retrieving information in arrays
You may remember that an array is a sequence of values and that a variable can be set up as an array.
The individual components of an array can be any data type—including other arrays! Recall that in the
memory games in Chapter 5, we used an array variable named
pairs
in which each element was itself an
array of two elements, the matching photo image files.
var pairs = [
["allison1.jpg","allison2.jpg"],
[ "grant1.jpg","grant2.jpg"],
["liam1.jpg","liam2.jpg"],
["aviva1.jpg","aviva2.jpg"],
["daniel1.jpg","daniel2.jpg"]
The
pairs
array had 5 elements, each of which was an array. The inner arrays consisted of two elements
and each of these elements was a string of characters, the name of an image file.
In the quiz application, we will again use an array of arrays. For the quiz show, we set up a variable named
facts
as an array to hold the information about the G20 members. Each element of the
facts
array is
itself an array. My first thought on creating the application was that these inner arrays would each hold two
elements, the country name and the capital city name. Later, I added a third element to hold whether or not
this country/capital pair had been chosen in this round of the quiz. This meant that the inner arrays had
three different elements: two character strings and a Boolean (true/false) value.
The individual components of an array are accessed or set using square brackets. Arrays in JavaScript
are indexed starting from zero and ending at one less than the total number of elements in the array. One
