Mtihani wa Majibu ya Chaguo kwenye Msimbo wa HTML kwa kutumia JavaScript

Katika masomo yaliyopita, majibu ya maswali ya mtihani yalipaswa kutiwa kwenye sehemu za kuingizia data. Katika maisha ya kawaida, hata hivyo, mara nyingi kuna pia maandishi ambayo unaweza kuchagua jibu moja kutoka kwa yaliyopendekezwa. Wacha tujifunze kuunda mitihani kama hii.

Wacha tuanze tena na toleo rahisi, ambapo maswali na majibu yamehifadhiwa kwenye msimbo wa HTML, kisha tutaendelea kuongeza ugumu hatua kwa hatua.

Kwa hiyo, huu ni mtihani wa majibu ya chaguo:

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

Kama unavyoona, tunaweza kuchagua chaguo za majibu kwa kutumia vitufe vya redio. Wakati huo huo katika kila swali, kitufe cha redio kilicho na chaguo sahihi kimewekewa alama na kitendo data-right.

Fanya ili wakati jibu moja la swali linapochaguliwa, jibu hilo lipimwe haraka kwa usahihi.

Badilisha msimbo wako ili ukaguzi wa majibu ufanyike kwa kubonyeza kitufe.