Küsimuste ja vastustega test HTML-koodis JavaScriptis

Selles ja mõnes järgnevas tunnis hakkame tegelema küsimustega testide loomisega. Alustame kõige lihtsamatest variantidest ja järk-järgult keerukust suurendama.

Alustuseks oletame, et tahame teha küsimuste komplekti, mille iga kohta on võimalik ainult üks vastus. Laske vastused sisestatakse kasutaja poolt input-väljadele küsimuste alla.

Illustreerin kirjeldatut HTML-koodiga:

<div id="test">
	<div>
		<p>küsimus 1?</p>
		<input>
	</div>
	<div>
		<p>küsimus 2?</p>
		<input>
	</div>
	<div>
		<p>küsimus 3?</p>
		<input>
	</div>
</div>

Nagu näete, on meil küsimused ja input-väljad vastuste jaoks. Jääb üle vaid välja mõelda, kus hoiame õigeid vastuseid.

Kõige lihtsam, mida võib ette kujutada, on hoiustada vastused otse input-väljade HTML-koodis, mõnes data- atribuudis:

<div id="test">
	<div>
		<p>küsimus 1?</p>
		<input data-right="vastus 1">
	</div>
	<div>
		<p>küsimus 2?</p>
		<input data-right="vastus 2">
	</div>
	<div>
		<p>küsimus 3?</p>
		<input data-right="vastus 3">
	</div>
</div>

Järgmine nüanss, mida tuleb läbi mõelda: mil hetkel teostame vastuste õigsuse kontrolli? Siin võib pakkuda kaht varianti: kas iga input-väli kontrollib kohe pärast vastuse sisestamist, kas see on õige, või olgu olemas nupp, mille vajutamisel kontrollitakse kõikide küsimuste vastused korraga.

Ükskõik kumba varianti me ei valiks, teeme nii, et kui vastus on õige, siis värvime input-välja piirjooned roheliseks, ja kui vale - punaseks. Loome selleks vastavad CSS-klassid:

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

Seadke sisse nii, et vastuse sisestamine input-väljale lõpeks klahvi Enter vajutamisel. Olgu sel juhul input-väli kohe kontrollib vastuse õigsust.

Muutke oma koodi nii, et vastuste kontrollimine toimuks nupu vajutamisel.