Test mit Fragen und Antworten in HTML-Code mit JavaScript

In dieser und in den nächsten Lektionen werden wir uns mit der Erstellung von Tests mit Fragen und Antworten beschäftigen. Wir beginnen mit den einfachsten Varianten und werden diese schrittweise erweitern.

Nehmen wir zunächst an, wir möchten einen Fragesatz erstellen, bei dem für jede Frage nur eine Antwort möglich ist. Die Antworten sollen vom Benutzer in Input-Felder unter den Fragen selbst eingegeben werden.

Ich veranschauliche das Geschriebene mit HTML-Code:

<div id="test">
	<div>
		<p>Frage 1?</p>
		<input>
	</div>
	<div>
		<p>Frage 2?</p>
		<input>
	</div>
	<div>
		<p>Frage 3?</p>
		<input>
	</div>
</div>

Wie Sie sehen, haben wir Fragen und Input-Felder für Antworten. Es bleibt zu überlegen, wo wir die richtigen Antworten speichern.

Das Einfachste, was man sich vorstellen kann, ist, die Antworten direkt im HTML-Code der Input-Felder in einem data- Attribut zu speichern:

<div id="test">
	<div>
		<p>Frage 1?</p>
		<input data-right="Antwort 1">
	</div>
	<div>
		<p>Frage 2?</p>
		<input data-right="Antwort 2">
	</div>
	<div>
		<p>Frage 3?</p>
		<input data-right="Antwort 3">
	</div>
</div>

Die nächste Nuance, die durchdacht werden sollte: Zu welchem Zeitpunkt führen wir die Überprüfung der Antworten auf Richtigkeit durch? Hier kann man zwei Varianten vorschlagen: Entweder soll jedes Input-Feld sofort nach der Eingabe einer Antwort prüfen, ob diese richtig ist, oder es soll einen Button geben, bei dessen Klick alle Antworten auf alle Fragen auf einmal geprüft werden.

Egal für welche Variante wir uns entscheiden, lassen Sie uns festlegen: Wenn die Antwort richtig ist, dann färben wir den Rand des Input-Felds grün, und wenn sie falsch ist - rot. Erstellen wir dafür die entsprechenden CSS-Klassen:

.right {
	border: 1px solid green;
}
.wrong {
	border: 1px solid red;
}

Sorgen Sie dafür, dass die Eingabe einer Antwort in das Input-Feld durch Drücken der Enter-Taste abgeschlossen wird. In diesem Fall soll das Input-Feld die Antwort sofort auf Richtigkeit prüfen.

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