222 Chapter 8—Web Storage and Offline Web Applications
In the course of the game, the user is asked to find specific places and can click
on the map to guess the location of the desired place. In response to each mouse
click, a little flag appears on the map, marking the location the user clicked on. At
the same time, a circle marks the correct target location. The flag and the circle
have the same color and are drawn transparently onto the map. If both symbols
overlap, the target was correctly marked and the task was solved. The target is
added to the list of targets found and ticked off with a check mark for a correct
answer or an X symbol for an incorrect answer. This list also uses the same colors
as on the map (refer to Figure 8.6).
Once all questions have been answered, the program rewards the user with
praise or encourages the user to do better next time. The comments are based on
the percentage of correct answers scored. The user can then choose a new game
from the selection menu or reload the page to try the current game again.8.4.2 Using the Application: As an Administrator
As mentioned previously, the game has a mode where you can define new targets
(click2tick_creator.html). This admin interface loads the familiar map view of
Google Maps and allows you to set the zoom factor, choose a map section, and
then define several points on the map. Before you can start placing the points,
you need to fixate the map section via the Record button. For each point, a line
of JavaScript code is displayed on the right side of the browser, listing the coordi-
nates in pixels and an identifier for the relevant point.
This part of the page is declared as contenteditable, so the identifiers can be
modified directly in the HTML page (see Figure 8.7, the bordered area on the
right). After all points have been marked and the identifiers adapted, the admin-
istrator has to copy the JavaScript code and save it in a JavaScript file, which is
then referenced in the game’s HTML code in the head area. More details on how
this works can be found in the introductory text of the admin site.