Multiple-Choice-Test in HTML-Code mit JavaScript

In den vorherigen Lektionen mussten die Antworten auf die Testfragen in Input-Felder eingegeben werden. Im wirklichen Leben gibt es jedoch oft auch Tests, bei denen man eine Antwortmöglichkeit aus den vorgegebenen auswählen kann. Lassen Sie uns lernen, solche Tests zu erstellen.

Lassen Sie uns wieder mit einer einfachen Variante beginnen, bei der Fragen und Antworten im HTML-Code gespeichert sind, und sie dann schrittweise verkomplizieren.

Hier ist also ein Test mit Antwortmöglichkeiten:

<div id="test">
	<div>
		<p>Frage 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			Variante 1
		</label>
		<label>
			<input type="radio" name="1">
			Variante 2
		</label>
		<label>
			<input type="radio" name="1">
			Variante 3
		</label>
	</div>
	<div>
		<p>Frage 2?</p>
		
		<label>
			<input type="radio" name="2">
			Variante 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			Variante 2
		</label>
		<label>
			<input type="radio" name="2">
			Variante 3
		</label>
	</div>
	<div>
		<p>Frage 3?</p>
		
		<label>
			<input type="radio" name="3">
			Variante 1
		</label>
		<label>
			<input type="radio" name="3">
			Variante 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			Variante 3
		</label>
	</div>
</div>

Wie Sie sehen können, können wir die Antwortmöglichkeiten mit Hilfe von Radio-Buttons auswählen. Dabei ist in jeder Frage der Radio-Button mit der richtigen Antwort durch das Attribut data-right markiert.

Sorgen Sie dafür, dass bei der Auswahl einer der Antworten einer Frage diese Antwort sofort auf Richtigkeit überprüft wird.

Modifizieren Sie Ihren Code so, dass die Überprüfung der Antworten durch einen Klick auf einen Button ausgeführt wird.