Trivia

Aufgabe

So prüft JavaScript eine Antwort

Warten, bis die Seite geladen ist: Das <script>-Element im Codegerüst steht im <head>, läuft also, bevor der Browser die Fragen im <body> kennt. Code, der Elemente der Seite sucht, gehört deshalb in document.addEventListener('DOMContentLoaded', function() { … });.
Element finden: document.querySelector('…') liefert das erste Element, das zu einem CSS-Selektor passt, etwa '#id', '.klasse' oder 'input'.
Auf den Klick warten: element.addEventListener('click', function() { … }); führt die Funktion bei jedem Klick auf das Element aus.
Rückmeldung geben: In dieser Funktion ändert element.style.backgroundColor = 'red'; die Farbe, und element.innerHTML = '…'; setzt den Text eines Elements.

Beispiel: Ein Klick auf den Button färbt ihn gelb und schreibt „Geklickt!“ in den leeren Absatz darunter.

<button id="knopf">Klick mich</button>
<p id="rueckmeldung"></p>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let knopf = document.querySelector('#knopf');
        knopf.addEventListener('click', function() {
            knopf.style.backgroundColor = 'yellow';
            document.querySelector('#rueckmeldung').innerHTML = 'Geklickt!';
        });
    });
</script>

Mehr dazu steht in den Notizen zur Vorlesung.

Demo

So könnte Ihre Seite aussehen, bevor jemand eine Antwort gibt:

Beispiel einer Trivia-Seite mit einer Multiple-Choice-Frage und einer Freitextfrage

Aufgabenmaterial

Für diese Aufgabe werden Sie ein von uns zur Verfügung gestelltes Codegerüst vervollständigen.

Aufgabenmaterial herunterladen

Öffnen Sie VS Code entsprechend Ihrem Setup, klicken Sie auf Ihr Terminalfenster und führen Sie cd aus. Die Eingabeaufforderung Ihres Terminalfensters sollte ungefähr wie folgt aussehen:

Führen Sie den Befehl

wget https://dev.inf.zone/download/exercises/12/trivia.zip

aus, um die ZIP-Datei trivia.zip in den aktuellen Ordner herunterzuladen.

Nun können Sie

unzip trivia.zip

ausführen, um die ZIP-Datei in den Ordner trivia zu entpacken.

Sie benötigen die ZIP-Datei nicht mehr, daher können Sie den Befehl

rm trivia.zip

ausführen und bei der Aufforderung mit „y“ gefolgt von der Eingabetaste antworten, um die heruntergeladene ZIP-Datei zu entfernen.

Geben Sie nun den Befehl

cd trivia

ein und drücken Sie anschließend die Eingabetaste, um in dieses Verzeichnis zu wechseln (d. h., es zu öffnen). Ihre Eingabeaufforderung sollte nun wie folgt aussehen:

trivia/ $

Falls alles erfolgreich war, führen Sie den folgenden Befehl aus:

ls

Sie sollten nun die Dateien index.html und styles.css sehen.

Falls es zu Problemen kommt, wiederholen Sie dieselben Schritte und versuchen Sie herauszufinden, wo ein Fehler aufgetreten sein könnte!

Datei	Inhalt
`index.html`	Überschrift „Trivia!“, darunter die Abschnitte „Part 1: Multiple Choice“ und „Part 2: Free Response“, jeweils mit einem `TODO`-Kommentar für Ihre Frage. Im `<head>` ein leeres `<script>`-Element für Ihr JavaScript.
`styles.css`	fertige Gestaltung, u. a. für `button` und `input[type="text"]`. Dürfen Sie beliebig ändern.

Spezifikation

Part 1: Multiple Choice

Fügen Sie in index.html unter „Part 1“ eine Multiple-Choice-Frage Ihrer Wahl ein.
Der Text der Frage steht in einer h3-Überschrift.
Jede Antwortmöglichkeit ist ein button. Es gibt mindestens drei, genau eine davon ist richtig.

Part 2: Free Response

Fügen Sie unter „Part 2“ eine Freitextfrage Ihrer Wahl ein.
Der Text der Frage steht in einer h3-Überschrift.
Die Antwort wird in ein input-Feld eingegeben und mit einem button bestätigt.

Rückmeldung per JavaScript

Aktion	färbt sich …	Text unter der Frage
Klick auf einen Button mit falscher Antwort	der Button rot	„Falsch!“
Klick auf den Button mit der richtigen Antwort	der Button grün	„Richtig!“
falsche Eingabe, dann Bestätigungsbutton	das Eingabefeld rot	„Falsch!“
richtige Eingabe, dann Bestätigungsbutton	das Eingabefeld grün	„Richtig!“

Optional

Passen Sie das Design in styles.css an.
Fügen Sie weitere Fragen hinzu.

Hilfestellung

Klicken Sie auf die folgenden Tipps, um einige Ratschläge zu erhalten. Versuchen Sie aber zunächst, selbst so weit wie möglich zu kommen.

Elemente auswählen

Verwenden Sie document.querySelector, um ein einzelnes HTML-Element abzufragen.
Verwenden Sie document.querySelectorAll, um alle HTML-Elemente abzufragen, die zu einem Selektor passen. Die Funktion gibt eine NodeList zurück, die Sie wie ein Array mit for (let element of liste) { … } durchlaufen können.
Findet querySelector nichts (Ergebnis null), läuft Ihr Code vermutlich, bevor die Seite geladen ist. Siehe oben: DOMContentLoaded.

Testen

Testen Sie vor allem im Browser. check50 (unten unter „Korrektheit“) prüft nur das Grundgerüst, da die Implementierungen sehr unterschiedlich ausfallen können.

Starten Sie im Ordner trivia einen Webserver, der Ihre Webseite bereitstellt, und öffnen Sie die Adresse, die er ausgibt:

http-server

Testen Sie für jede Frage eine falsche und die richtige Antwort und vergleichen Sie Farbe und Text mit der Tabelle in der Spezifikation.

Korrektheit

Führen Sie in Ihrem Terminal den folgenden Befehl aus, um die Korrektheit Ihrer Arbeit zu überprüfen:

check50 -l inf-zone/exercises/2026/trivia

Abgeben

Geben Sie im Ordner trivia ab:

inf upload trivia

Danach sehen Sie, welche Tests Ihr Programm besteht und ob die Übung für die Bonuspunkte zählt. Wie Sie inf installieren und sich anmelden, steht unter Abgeben mit inf.

Diese Seite als Markdown: ansehen herunterladen

Homepage