Information Technology Reference
In-Depth Information
// und am nächsten Morgen nach der neuen Lieferung
brot.classList.toggle('frisch')
brot.classList.contains('frisch') => true
Im
1-2-3-4!-
Spiel werden wir
classList
zur Anzeige von
richtig
oder
falsch
bei
der Reihung verwenden. Bevor wir uns mit dem Kernstück des Spiels, der
Drag&Drop-Funktionalität beschäftigen, wollen wir noch kurz das Layout des
Spiels etwas anpassen und links von der Städteliste vier Bereiche hinzufügen,
in denen die tatsächliche Reihung stattfinden wird. Alle vier
li
-Elemente er-
halten analog zu
q
für
question
bei der Auswahl nun die Klasse
a
für
answer
sowie Unicode-Zeichen zur Nummerierung im Bereich von
૘
bis
૛
- sogenannte
DINGBAT NEGATIVE CIRCLED DIGITS:
<ol>
<li class=a>❶</li>
<li class=a>❷</li>
<li class=a>❸</li>
<li class=a>❹</li>
</ol>
Mit einigen wenigen zusätzlichen CSS-Formaten finalisieren wir die statische
Grundversion des Spiels. Abbildung 12.1 zeigt das Basis-Layout. Die Online-
Version finden Sie unter:
http://html5.komplett.cc/code/chap_global/1234_static.html
Abbildung 12.1:
Statisches Basis-Layout des 1-2-3-4!-Spiels