HTML коди дар JavaScript бо саволҳо ва ҷавобҳо тест

Дар ин ва дар чанд дарси оянда мо бо шумо эҷоди тестҳои бо саволҳо ва ҷавобҳоро оғоз мекунем. Аз варианти хеле содда оғоз карда, ба таври оҳиста мураккаб мекунем.

Бигзор аввал мо дастаи саволҳоро созем, барои ҳар кадом танҳо як ҷавоб имконпазир аст. Бигзор ҷавобҳо аз ҷониби корбар дар вурудии зери худи саволҳо ворид карда мешаванд.

Чизҳои навишташударо бо коди HTML тасвир мекунам:

<div id="test">
	<div>
		<p>савол 1?</p>
		<input>
	</div>
	<div>
		<p>савол 2?</p>
		<input>
	</div>
	<div>
		<p>савол 3?</p>
		<input>
	</div>
</div>

Чунон ки шумо мебинед, мо саволҳо ва вурудҳо барои ҷавобҳоро дорем. Боқӣ монд, ки дар куҷо мо ҷавобҳои дурустро нигоҳ медорем.

Соддатарин чизе, ки метавонед фикр кунед - ин нигоҳ доштани ҷавобҳо дар худи HTML коди вурудҳо, дар баъзе атрибутҳои data- мебошад:

<div id="test">
	<div>
		<p>савол 1?</p>
		<input data-right="ҷавоб 1">
	</div>
	<div>
		<p>савол 2?</p>
		<input data-right="ҷавоб 2">
	</div>
	<div>
		<p>савол 3?</p>
		<input data-right="ҷавоб 3">
	</div>
</div>

Нюанси навбатӣ, ки бояд фикр карда шавад: дар кадом лаҳза мо санҷиши ҷавобҳоро барои дурустӣ иҷро мекунем? Дар ин ҷо метавонед ду вариантро пешниҳод кунед: ё бигзор ҳар як вуруд ҳамон лаҳза ворид кардани ҷавоб ба он дурустии ин ҷавобро санҷад, ё бигзор як тугма бошад, ки бо фишурдани он ҷавобҳо барои ҳамаи саволҳо якбора санҷида шаванд.

Кадоме аз вариантҳоро ки интихоб накунем, биёед, агар ҷавоб дуруст бошад, пас ҳудуди вурудро ба ранги сабз ранг кунем, ва агар нодуруст бошад - ба сурх. Барои ин синфҳои мувофиқи CSS-ро созем:

.right {
	border: 1px solid green;
}
.wrong {
	border: 1px solid red;
}

Чунон кунед, ки ворид кардани ҷавоб дар вуруд бо фишурдани калиди Enter анҷом ёбад. Бигзор дар ин ҳолат вуруд ҳамон лаҳза дурустии ҷавобро санҷад.

Коди худро тағйир диҳед, то санҷиши ҷавобҳо бо фишурдани тугма иҷро шавад.