Test med spørgsmål og svar i HTML-kode på JavaScript

I denne og flere følgende lektioner skal vi lave tests med spørgsmål og svar. Vi starter med de enkleste versioner og gradvist gøre dem mere komplekse.

Lad os til at starte med lave et sæt spørgsmål, hvor der kun er ét svar muligt for hvert. Lad svarene indtastes af brugeren i inputfelter under selve spørgsmålene.

Jeg illustrerer det skrevne med HTML-kode:

<div id="test">
	<div>
		<p>spørgsmål 1?</p>
		<input>
	</div>
	<div>
		<p>spørgsmål 2?</p>
		<input>
	</div>
	<div>
		<p>spørgsmål 3?</p>
		<input>
	</div>
</div>

Som du kan se, har vi spørgsmål og inputfelter for svar. Tilbage er at finde på, hvor vi skal gemme de korrekte svar.

Den enkleste ting, man kan finde på, er at gemme svarene direkte i HTML-koden for inputfelterne, i en eller anden data- attribut:

<div id="test">
	<div>
		<p>spørgsmål 1?</p>
		<input data-right="svar 1">
	</div>
	<div>
		<p>spørgsmål 2?</p>
		<input data-right="svar 2">
	</div>
	<div>
		<p>spørgsmål 3?</p>
		<input data-right="svar 3">
	</div>
</div>

Den næste nuance, der bør tænkes over: hvornår skal vi udføre kontrollen af svarenes korrekthed? Her kan man foreslå to muligheder: enten lade hvert inputfelt straks ved indtastning af svar kontrollere om svaret er korrekt, eller lad der være en knap, ved tryk på hvilken alle svar kontrolleres på én gang.

Ligegyldigt hvilken mulighed vi vælger, lad os, hvis svaret er korrekt, farve inputfeltets ramme grøn, og hvis det er forkert - rød. Lad os lave de tilsvarende CSS-klasser til dette:

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

Sørg for, at indtastning af svar i inputfeltet afsluttes ved at trykke på Enter-tasten. Lad inputfeltet i dette tilfælde straks kontrollere svarets korrekthed.

Modificer din kode, så kontrollen af svar udføres ved at trykke på en knap.