Testas su klausimais ir atsakymais HTML kode naudojant JavaScript

Šioje ir keliose kitose pamokose mes kursime testus su klausimais ir atsakymais. Pradėsime nuo paprasčiausių variantų ir palaipsniui sudėtinsime.

Pirmiausia tarkime, kad norime padaryti klausimų rinkinį, kiekvienam iš kurių galimas tik vienas atsakymas. Tegul atsakymus įveda vartotojas į įvesties laukus po pačiais klausimais.

Pavaizduokime tai HTML kodu:

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

Kaip matote, mes turime klausimus ir įvesties laukus atsakymams. Belieka sugalvoti, kur saugosime teisingus atsakymus.

Paprasčiausia, ką galima sugalvoti - tai saugoti atsakymus tiesiai įvesties laukų HTML kode, kokiame nors data- atribute:

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

Kitas niuansas, kurį reikia apgalvoti: kuriuo momentu mes atliksime atsakymų teisingumo patikrinimą? Čia galima pasiūlyti du variantus: arba tegul kiekvienas įvesties laukas iškart po atsakymo į jį įvedimo patikrina ar teisingas šis atsakymas, arba tegul yra mygtukas, kurį paspaudus bus patikrinti atsakymai į visus klausimus vienu metu.

Kad ir kurį variantą pasirinktume, jei atsakymas teisingas, įvesties lauko rėmelį dažykime žalia spalva, o jei neteisingas - raudona. Sukurkime tam atitinkamus CSS klases:

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

Padarykite taip, kad atsakymo įvedimas į įvesties lauką baigtųsi paspaudus klavišą Enter. Tegul šiuo atveju įvesties laukas iškart patikrina atsakymo teisingumą.

Modifikuokite savo kodą taip, kad atsakymų patikrinimas būtų atliekamas paspaudus mygtuką.