HTML and CSS Reference
In-Depth Information
Testing and uploading the application
The random feature of the game does not impact the testing. If you wish, you can substitute fixed choices
after the
Math.random
coding, do the bulk of the testing, and then remove these lines of code and test
again. The important thing to do for this and similar games is to make sure your testing involves both
correct guesses and incorrect guesses. You also need to click on the country name first and then the
capital, and then do it the other way. Check the color changes and the scores. If you add a
new round
feature, make sure that the score remains or is reset as you want.
Warning: The player can cheat! There is no check to prevent the player from repeating a correct
move. See if you can make this improvement in the coding. You can add a new element to the inner
arrays in
facts
to mark a correctly answered question.
The basic G20 game is complete in the HTML file (which you can download from
www.friendsofed.com/downloads.html
). The game with the video reward requires you to download the
video from the Friends of Ed site or use your own. To play your own choice of video, you must:
•
create or acquire the video
•
produce the different versions, assuming you want to support the different browsers
•
upload all the files to the server
You may need to work with your server staff to make sure the different video types are properly specified.
This involves something called the
htaccess
file. HTML5 still is new and this way of featuring video on web
pages may be new to the server support crews.
Alternatively, you can identify video already online and use absolute URLs as the
src
attributes in the
source elements in the video elements.
Summary
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
