Pubquiz Amsterdam
Das Ziel
Zum Schluss die Seite, die deine Besucherinnen am längsten festhält: ein Quiz zu deinem Thema. Die Antwort erscheint erst auf Klick.
So könnte das aussehen
Wie es gemacht ist
Für „Antwort erst auf Klick zeigen" brauchst du kein JavaScript. HTML kann das selbst:
<details>
<summary>Die Frage</summary>
<p>Die Antwort.</p>
</details>| Element | Bedeutung |
|---|---|
<details> |
ein Bereich, der auf- und zugeklappt werden kann |
<summary> |
die immer sichtbare Zeile – hier die Frage |
| alles Weitere | erscheint erst beim Aufklappen |
Der Zustand lässt sich im CSS abfragen: details[open] trifft nur die aufgeklappten. So kann eine geöffnete Frage anders aussehen als eine geschlossene.
Nimm den einfachsten Weg, der funktioniert. Dasselbe ließe sich mit JavaScript bauen – mit mehr Zeilen, mehr Fehlerquellen und dem Nachteil, dass es ohne JavaScript gar nicht mehr geht.
<details> funktioniert immer: in jedem Browser, beim Ausdrucken, im Vorleseprogramm. Diese Frage – „geht das auch ohne?" – lohnt sich bei jeder Aufgabe.
Deine Aufgabe
a) Erstelle die Datei quiz.html mit Grundgerüst, Navigation und CSS-Einbindung.
b) Schreib sechs Fragen zu deinem Thema. Gute Quizfragen haben eine überraschende Antwort – „Wie viele Einwohner hat X?" ist langweilig, „Warum stehen die Häuser schief?" nicht.
c) Bau jede Frage als <details> mit <summary> ein.
d) Gestalte die Fragen in deinen Farben und lass eine geöffnete Frage anders aussehen als eine geschlossene.
e) Verlinke die Seite in deiner Navigation – auf allen Seiten.
f) Lass jemanden dein Quiz spielen und sieh zu, ohne zu helfen. Wo zögert die Person? Das sind die Stellen, an denen deine Formulierung noch nicht klar ist.
Tipp 1: Alle Fragen sind offen
Dann steht in deinem HTML das Attribut open:
<details open>Das ist die Startstellung „aufgeklappt". Lass es weg, dann sind die Fragen zu.
Tipp 2: Ich will das kleine Dreieck ändern
summary {
list-style: none; /* Standarddreieck weg */
}
summary::before {
content: "❓ ";
}
details[open] summary::before {
content: "💡 ";
}Achte darauf, dass weiterhin sichtbar bleibt, dass man klicken kann. Ein Element, das aussieht wie normaler Text, klickt niemand an.
Tipp 3: Für Mutige – ein Punktezähler mit JavaScript
Wenn du es ausprobieren willst: Diese wenigen Zeilen zählen mit, wie viele Fragen aufgeklappt wurden.
<p id="stand">0 von 6 Fragen angesehen</p>
<script>
const fragen = document.querySelectorAll("details");
const stand = document.getElementById("stand");
for (const frage of fragen) {
frage.addEventListener("toggle", () => {
const offen = document.querySelectorAll("details[open]").length;
stand.textContent = offen + " von " + fragen.length + " Fragen angesehen";
});
}
</script>Das <script> gehört ans Ende des <body> – sonst sucht es nach Elementen, die es noch gar nicht gibt.
Beachte, dass das Quiz ohne dieses Skript weiterhin vollständig funktioniert. Nur der Zähler fehlt dann. So sollte man JavaScript immer einsetzen: als Zugabe, nicht als Voraussetzung.
Geschafft
Deine Webseite hat jetzt:
- eine Startseite mit Text, Bild, Listen, Karte und Video,
- eigene Seiten für Orte oder Dinge, untereinander verlinkt,
- eine Navigation auf jeder Seite,
- eine gemeinsame CSS-Datei mit deinen Farben,
- Töne und ein Quiz.
Und jetzt?
- Ins Netz stellen. Mit GitHub Pages kostenlos möglich. Sprich vorher mit deiner Lehrkraft – für eine veröffentlichte Seite gelten eigene Regeln.
- Auf dem Handy prüfen. Öffne die Entwicklerwerkzeuge mit
F12und schalte auf die Handy-Ansicht. Was rutscht, was ist zu klein zum Antippen? - Weitermachen. Der Lernpfad Webentwicklung geht tiefer: Flexbox und Grid, Media Queries, semantische Struktur.