Quiz

In this chapter, we implemented a simple quiz that asked a player to match the names of countries and capitals. The application used the following programming techniques and HTML5 features:

creating HTML during runtime using document.createElement, document.getElementById, and document.body.appendChild

setting up event handling for the mouse click event using addEventListener

changing color of objects on the screen using code to change CSS settings

an array of arrays to hold the quiz content

for loops for iterating over the array

do-while loops to make a random choice of an unused question set

substring for determining a correct match

video and source elements for displaying video encoded in formats acceptable by different browsers

You can make use of dynamically created and repositioned HTML along with the drawing on canvas that you learned in the previous chapters. The implementation of Hangman, described in Chapter 9, does just that. You can use video as a small part of an application, as was done here, or as the major part of a web site. In the next chapter we return to drawing on canvas as we build a maze and then travel through it.