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

I denne og de neste flere leksjonene skal vi jobbe med å lage tester med spørsmål og svar. La oss starte med de enkleste variantene og gradvis gjøre dem mer komplekse.

La oss først si at vi ønsker å lage et sett med spørsmål, for hver av dem er det kun mulig med ett svar. La svarene skrives inn av brukeren i input-feltene under selve spørsmålene.

La meg illustrere det skrevne med HTML-kode:

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

Som du ser, har vi spørsmål og input-felter for svar. Det som gjenstår er å finne ut hvor vi skal lagre de riktige svarene.

Det enkleste man kan tenke seg er å lagre svarene direkte i HTML-koden til input-feltene, i et eller annet data- attributt:

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

Neste nyanse som bør tenkes gjennom: På hvilket tidspunkt skal vi utføre kontrollen av svarene for riktighet? Her kan man foreslå to varianter: enten la hvert input-felt umiddelbart ved innskriving av svar sjekke om dette svaret er riktig, eller la det være en knapp, ved trykk på denne vil svarene på alle spørsmål bli sjekket samtidig.

Uansett hvilken variant vi velger, la oss, hvis svaret er riktig, fargelegge kantlinjen til input-feltet i grønn farge, og hvis feil - i rød. La oss lage tilsvarende CSS-klasser for dette:

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

Gjør slik at innskriving av svar i input-feltet avsluttes ved å trykke på Enter-tasten. La i dette tilfellet input-feltet umiddelbart sjekke svaret for riktighet.

Modifiser koden din slik at kontrollen av svar utføres ved å trykke på en knapp.