Spielende

Der letzte Schritt: das Ende des Spiels.

• Auch die letzte Frage bekommt den Button Nächste Frage. Ein Klick darauf beendet das Spiel: Die Punkte, die Frage und ihre Antworten machen dem Ergebnis Platz, Du hast 3 von 4 richtig., in einem Absatz mit der Klasse ergebnis, mit den Zahlen des Spielers.
• Unter dem Ergebnis startet ein Button Nochmal spielen das Spiel von vorn: wieder die erste Frage, nichts gewählt und die Punkte zurück auf 0.

Ein Tipp: Nach der letzten Frage ist der Index fragen.length, eins hinter dem Ende des Arrays, und fragen[index] ist undefined. Dann zeigst du stattdessen das Ende: ein if mit einem frühen return, bevor etwas den Text der Frage liest. Lass die useState-Zeilen über diesem if stehen: React braucht sie in jedem Render, in derselben Reihenfolge.

Das ist das ganze Projekt. Dein Quiz hält drei Werte im State: den Index der Frage, die gewählte Antwort und die Punkte. Alles andere, die Rückmeldung, die deaktivierten Buttons, der Button „Nächste Frage“ und der Endbildschirm, wird beim Rendern daraus abgeleitet. Eine Frage hinzuzufügen heißt jetzt nur noch, ein Objekt in fragen.js einzutragen: Probiere es aus. In der nächsten Lektion, State teilen, bekommen deine Apps mehrere Komponenten, die denselben State brauchen, und du siehst, wo dieser State leben sollte.