Atsakymų variantų testas HTML kode naudojant JavaScript

Ankstesnėse pamokose testo atsakymai turėjo būti įvedami į įvesties laukus. Tačiau realiame gyvenime dažnai susiduriame su testais, kuriuose galima pasirinkti vieną atsakymo variantą iš siūlomų. Išmokime kurti tokius testus.

Pradėkime nuo paprasto varianto, kai klausimai ir atsakymai saugomi HTML kode, o vėliau palaipsniui jį komplikuosime.

Taigi, štai atsakymų variantų testas:

<div id="test">
	<div>
		<p>klausimas 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			variantas 1
		</label>
		<label>
			<input type="radio" name="1">
			variantas 2
		</label>
		<label>
			<input type="radio" name="1">
			variantas 3
		</label>
	</div>
	<div>
		<p>klausimas 2?</p>
		
		<label>
			<input type="radio" name="2">
			variantas 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			variantas 2
		</label>
		<label>
			<input type="radio" name="2">
			variantas 3
		</label>
	</div>
	<div>
		<p>klausimas 3?</p>
		
		<label>
			<input type="radio" name="3">
			variantas 1
		</label>
		<label>
			<input type="radio" name="3">
			variantas 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			variantas 3
		</label>
	</div>
</div>

Kaip matote, atsakymų variantus galime pasirinkti naudodami radijo mygtukus. Be to, kiekviename klausime radijo mygtukas su teisingu variantu pažymėtas atributu data-right.

Padarykite taip, kad pasirinkus vieną iš klausimo atsakymų, šis atsakymas būtų iškart patikrinamas ar teisingas.

Modifikuokite savo kodą taip, kad atsakymų tikrinimas būtų vykdomas paspaudus mygtuką.