Test me zgjedhje përgjigjesh në kod HTML me JavaScript

Në mësimet e mëparshme përgjigjet për pyetjet e testit duhej të shkruheshin në inpute. Në jetën reale, sidoqoftë, shpesh hasen teste ku mund të zgjedhësh një përgjigje nga disa të propozuara. Le të mësojmë të krijojmë teste të tilla.

Le të fillojmë përsëri me një variant të thjeshtë, ku pyetjet dhe përgjigjet ruhen në kod HTML, dhe pastaj do ta ndërlikojmë gradualisht.

Pra, ja një test me zgjedhje përgjigjesh:

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

Siç e shihni, zgjedhjet e përgjigjeve mund t'i zgjedhim duke përdorur butona radio. Në këtë rast në çdo pyetje butoni radio me përgjigjen e saktë është shënuar me atributin data-right.

Bëni që kur të zgjidhet një nga përgjigjet e një pyetjeje, ajo përgjigje të kontrollohet menjëherë për saktësi.

Modifikoni kodin tuaj në mënyrë që kontrollimi i përgjigjeve të kryhet duke klikuar në një buton.