Web Storage und Offline-Webapplikationen - HTML5 - page 236

Im Spielverlauf werden fortlaufend Fragen nach Orten gestellt, die durch ei-
nen Mausklick auf der Luftbildkarte beantwortet werden können. Als Reaktion
auf den Mausklick erscheint ein Fähnchen, das den Ort markiert, auf den ge-
klickt wurde. Im gleichen Moment erscheint ein Kreissymbol an dem gesuch-
ten Zielort. Das Fähnchen und das Kreissymbol werden in der gleichen Farbe
dargestellt und transparent in der Karte eingezeichnet. Überschneiden sich die
beiden Symbole, so wurde das Ziel richtig markiert und die Frage erfolgreich
gelöst. Das Ziel wird zu der Liste bereits absolvierter Fragen hinzugefügt und
mit einem Haken-Symbol bei einer richtigen Antwort oder einem X -Symbol bei
einer falschen Antwort gekennzeichnet. Auch in dieser Liste werden die glei-
chen Farben wie in der Karte verwendet (vergleiche Abbildung 8.6).

Nachdem alle Fragen beantwortet wurden, spendet das Programm Lob oder
fordert gegebenenfalls zu einer Verbesserung auf. Die Grundlage für diese An-
merkungen ist die Prozentzahl der richtig beantworteten Fragen. Abschließend
kann man über das Auswahlmenü ein neues Spiel wählen oder die Seite neu
landen, um das aktuelle Spiel zu wiederholen.

8.5.2 Bedienung der Anwendung für Administratoren

Wie bereits eingangs erwähnt wurde, gibt es für das Spiel einen Modus, in dem
neue Ziele definiert werden können ( knappDran_creator.html ). Diese Adminis-
trationsoberfläche lädt die bekannte Kartenansicht von Google Maps und er-
möglicht nach dem Einstellen von Zoom-Faktor und Kartenausschnitt die De-
finition von mehreren Punkten auf diesem Kartenausschnitt. Bevor mit dem
Setzen der Punkte begonnen werden kann, muss der Kartenausschnitt mit der
Schaltfläche R ECORD fixiert werden. Für jeden Punkt wird eine Zeile JavaScript-

Code im rechten Teil des Browsers angezeigt. Dort stehen die Koordinaten in
Pixel und ein Bezeichner für den entsprechenden Punkt.

Da dieser Teil der Seite als contenteditable deklariert ist, können die Bezeich-
ner direkt in der HTML-Seite geändert werden (vergleiche Abbildung 8.7, der
umrahmte Bereich rechts). Nachdem alle Punkte erfasst und die Bezeichnun-
gen dafür angepasst wurden, muss der Administrator den JavaScript-Code ko-
pieren und in einer JavaScript-Datei speichern, die dann im HTML-Code des
Spiels im head -Bereich referenziert wird. Genauere Informationen zu diesem
Ablauf erhalten Sie auch im Einleitungstext der Administrationsseite.