Test met vragen en antwoorden in HTML code met JavaScript

In deze en in de komende lessen gaan we ons bezighouden met het maken van tests met vragen en antwoorden. We beginnen met de eenvoudigste varianten en zullen geleidelijk complexer worden.

Laten we om te beginnen een set vragen willen maken, waarop slechts één antwoord mogelijk is per vraag. Laat de antwoorden door de gebruiker worden ingevoerd in invoervelden onder de vragen zelf.

Ik zal het geschrevene illustreren met HTML code:

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

Zoals je ziet, hebben we vragen en invoervelden voor antwoorden. Het enige dat overblijft is te bedenken waar we de juiste antwoorden zullen opslaan.

Het eenvoudigste wat je kunt bedenken is om de antwoorden rechtstreeks in de HTML code van de invoervelden op te slaan, in een of andere data- attribuut:

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

Volgend detail dat overwogen moet worden: op welk moment zullen we de controle uitvoeren van de antwoorden op juistheid? Hier kunnen we twee opties voorstellen: ofwel laat elk invoerveld direct na het invoeren van een antwoord controleren of het correct is, of laat er een knop zijn, waarop geklikt wordt om alle antwoorden in één keer te controleren.

Welke optie we ook kiezen, laten we, als het antwoord correct is, de rand van het invoerveld kleuren in groen, en als het incorrect is - in rood. Laten we hiervoor de bijbehorende CSS klassen maken:

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

Zorg ervoor dat het invoeren van een antwoord in een invoerveld wordt voltooid door op de toets Enter te drukken. Laat in dit geval het invoerveld direct het antwoord op juistheid controleren.

Pas je code zo aan dat de controle van de antwoorden wordt uitgevoerd door op een knop te drukken.