224 Chapter 8—Web Storage and Offline Web Applications
approximately 300-line long JavaScript file. It is primarily the placeholders for
the elements to be filled that are encoded in HTML:Listing 8.1 Extract of the HTML code for the game “Click to tick!”
<!DOCTYPE html>
<html manifest=click2tick.appcache>
<head>
<meta charset="utf-8">
<title>Click to tick!</title>
<link rel="stylesheet" media="all"
href="click2tick.css">
<script src="click2tick.js"></script>
<script src="click2tick_game0001.js"></script>
<script src="click2tick_game0002.js"></script>
...
<div id="map">
<fieldset>
<legend>Map</legend>
<canvas>This game requires a canvas capable browser/canvas>
</fieldset>
<p id=mapUrl></p>
</div>
<div id="controls">
<fieldset>
<legend>Questions</legend>
<p>Choose a game:
<select id=selGame name=games></select></p>
<ul id="gameResults"></ul>
<h3 id="curQuestion"></h3>
</fieldset>
<fieldset>
<legend>Status</legend>
<p>You are <span id="onlineStatus" class=online></span></p>
<p id="localStorage"></p>
<p id="updateButton"><input type=button onclick="location.reload();"
value="Check for new games!"></p>
</fieldset>
</div>The listing starts with the familiar DOCTYPE definition and the subsequent refer-
ence to the appcache file where the content to be saved is referenced. For each
game, a dedicated JavaScript file is loaded—here, for example, the file named
click2tick_game0001.js.
In the second part of the listing you see a canvas element, a strong indication
that this is the interactive playing area. The select element with the ID selGame is
still empty but will contain the list of all active games when the game is started.
The other HTML elements with the IDs gameResults, curQuestion, onlineStatus,
and localStorage are placeholders, which will also later be filled by JavaScript