JavaScript-те HTML кодында жауап нұсқалары бар тест

Алдыңғы сабақтарда тест сұрақтарына жауаптар енгізу жолдарына енгізілуі керек еді. Алайда, шын өмірде ұсынылған нұсқалардың бірін таңдауға болатын тесттер де жиі кездеседі. Осындай тесттерді қалай жасауға болатынын үйренейік.

Қайтадан қарапайым нұсқадан бастайық, яғни сұрақтар мен жауаптар 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 атрибутымен белгіленген.

Сұрақтың бір жауабын таңдаған кезде, сол жауаптың дұрыс болғаны тексерілетіндей етіп жасаңыз.

Түймені басқан кезде жауаптардың тексеруі орындалатындай етіп кодыңызды өзгертіңіз.