Eine Frage und ihre Antworten

Zeit für das nächste Projekt! Dieser Checkpoint setzt State, Ereignisse und Bedingungen ein, zusammen mit allem, was du davor gelernt hast. Wie beim letzten Checkpoint sagen die Anweisungen, was die Seite tun soll, und wie du es schreibst, ist dir überlassen.

Das Projekt. Du baust ein Quiz über Tiere. Die App stellt eine Frage, der Spieler klickt auf eine der Antworten, und die App sagt, ob sie richtig war. In drei Übungen zeigst du eine Frage und prüfst die Antwort, dann zählst du die Punkte und gehst zur nächsten Frage weiter, und zum Schluss beendest du das Spiel mit dem Ergebnis und einem Button zum erneuten Spielen.

Die Dateien. Die Fragen stehen in fragen.js, einem Array von Objekten mit dem text der Frage, ihren antworten und der richtigen Antwort in richtig. App.jsx importiert sie schon: fragen[0] ist die erste Frage. style.css hat Stile für die unten genannten Klassen.

Die Aufgabe. Zeige die erste Frage: ihren Text in einem h2 und darunter jede ihrer Antworten als Button, in der Reihenfolge des Arrays. Setze die Buttons in ein div mit der Klasse antworten.

Wenn der Spieler auf eine Antwort klickt, zeige Richtig! in einem Absatz mit der Klasse rueckmeldung, falls es die richtige war, und sonst Falsch! Die richtige Antwort ist 8., mit der richtigen Antwort statt der 8. Danach kann der Spieler seine Meinung nicht mehr ändern: Deaktiviere alle Antwort-Buttons.

Ein Tipp: Beim Klick ändert sich, welche Antwort der Spieler gewählt hat. Halte das im State fest, am Anfang null für „noch nichts gewählt“. Ob die Rückmeldung erscheint, was sie sagt und ob die Buttons deaktiviert sind, lässt sich beim Rendern daraus ableiten.