Toets met vrae en antwoorde in HTML-kode op JavaScript

In hierdie en in 'n paar volgende lesse sal ons ons besig hou met die skep van toetse met vrae en antwoorde. Ons sal begin met die eenvoudigste weergawes en dit geleidelijk aan moeiliker maak.

Laat ons vir eers 'n stel vrae wil maak, waar slegs een antwoord op elke vraag moontlik is. Laat die antwoorde deur die gebruiker ingevoer word in die invoervelde onder die vrae self.

Laat ek dit wat geskryf is illustreer met HTML-kode:

<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>

Soos jy kan sien, het ons vrae en invoervelde vir antwoorde. Dit bly om uit te dink waar ons die korrekte antwoorde sal stoor.

Die eenvoudigste wat ons kan bedink - is om die antwoorde reg in die HTML-kode van die invoervelde te stoor, in een of ander 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>

Die volgende nuans wat ons moet oorweeg: op watter tydstip sal ons die antwoorde vir korrektheid nagaan? Hier kan ons twee opsies voorstel: of laat elke invoerveld dadelik sodra 'n antwoord daarin ingevoer is, nagaan of hierdie antwoord korrek is, of laat daar 'n knoppie wees, waarop gedruk word om alle antwoorde vir alle vrae gelyktydig te nagegaan.

Watter opsie ons ook al kies, laat ons, as die antwoord korrek is, die rand van die invoerveld groen kleur, en as dit verkeerd is - in rooi. Laat ons die toepaslike CSS-klasse hiervoor skep:

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

Maak dit so dat die invoer van 'n antwoord in die invoerveld voltooi word deur die Enter-sleutel te druk. Laat in hierdie geval die invoerveld dadelik die antwoord vir korrektheid nagegaan.

Wysig jou kode sodat die nagaan van antwoorde uitgevoer word deur op 'n knoppie te druk.