Aufgabe 21 - Kleines Quiz

Aufgabe 21 - Kleines Quiz

Worum geht es?

Sie kombinieren fast alles aus diesem Jahr zu einem Quiz mit Auswertung: Arrays, Funktionen, Verzweigungen und das DOM (siehe Kapitel DOM und Events, Arrays, Funktionen).

In dieser Übung üben Sie:

• Modellieren: Quizfragen als Datenstruktur (Array) ablegen.
• Verbinden: Daten, Logik und Oberfläche zusammenspielen lassen.
• Validieren: Benutzereingaben prüfen, bevor sie verarbeitet werden.

Benötigte Unterlagen

• VS Code, Browser; Projekt mit index.html, style.css, script.js.

Arbeitsaufträge

Teil A - Daten

1. Legen Sie mindestens fünf Quizfragen in einem Array ab. Pro Frage brauchen Sie: den Fragetext, drei Antwortmöglichkeiten und die Nummer der richtigen Antwort. Verwenden Sie parallele Arrays oder, falls schon bekannt, kleine Objekte.
2. Das Thema ist frei wählbar, aber jugendfrei und schultauglich.

Teil B - Ablauf

1. Die Seite zeigt immer eine Frage samt drei Antwort-Buttons.
2. Nach dem Klick: Rückmeldung richtig/falsch (kurz sichtbar, z. B. farbige Markierung), dann die nächste Frage.
3. Punkte mitzählen; nach der letzten Frage eine Auswertung anzeigen: erreichte Punkte, Prozentsatz und ein Kommentar (ab 80 % “Super!”, ab 50 % “Passt”, darunter “Nochmal üben”).
4. Ein Button Nochmal spielen setzt alles zurück.

Teil C - Struktur

1. Trennen Sie die Logik in Funktionen: zeigeFrage(index), pruefeAntwort(gewaehlt), zeigeAuswertung().
2. Kein duplizierter Code für die drei Antwort-Buttons: eine Funktion, drei Aufrufe (oder eine Schleife).

Abgabe

Projektordner. Das Quiz muss vollständig durchspielbar sein, inklusive Neustart.