Թեստ պատասխանների տարբերակներով HTML կոդում JavaScript-ի միջոցով

Նախորդ դասերում թեստի հարցերի պատասխանները պետք է մուտքագրվեին input դաշտերում: Սակայն կյանքում հաճախ հանդիպում են նաև տեքստեր, որոնցում կարելի է ընտրել մեկ պատասխանի տարբերակ առաջարկվողներից։ Եկեք սովորենք ստեղծել այդպիսի թեստեր։

Եկեք նորից սկսենք պարզ տարբերակից, երբ հարցերն ու պատասխանները պահվում են HTML կոդում, իսկ հետո աստիճանաբար բարդացնենք։

Ահա թեստ պատասխանների տարբերակներով.

<div id="test">
	<div>
		<p>հարց 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			տարբերակ 1
		</label>
		<label>
			<input type="radio" name="1">
			տարբերակ 2
		</label>
		<label>
			<input type="radio" name="1">
			տարբերակ 3
		</label>
	</div>
	<div>
		<p>հարց 2?</p>
		
		<label>
			<input type="radio" name="2">
			տարբերակ 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			տարբերակ 2
		</label>
		<label>
			<input type="radio" name="2">
			տարբերակ 3
		</label>
	</div>
	<div>
		<p>հարց 3?</p>
		
		<label>
			<input type="radio" name="3">
			տարբերակ 1
		</label>
		<label>
			<input type="radio" name="3">
			տարբերակ 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			տարբերակ 3
		</label>
	</div>
</div>

Ինչպես տեսնում եք, պատասխանների տարբերակները մենք կարող ենք ընտրել ռադիո կոճակների միջոցով: Ընդ որում յուրաքանչյուր հարցում ճիշտ տարբերակով ռադիո կոճակը նշված է data-right ատրիբուտով։

Կատարեք այնպես, որ հարցի պատասխաններից մեկը ընտրելիս այդ պատասխանը անմիջապես ստուգվի ճիշտ լինելու համար։

Փոփոխեք ձեր կոդն այնպես, որ պատասխանների ստուգումը կատարվի կոճակի սեղմման դեպքում։