JavaScript жана HTML кодунда суроо-жооптор тести

Бул жана кийинки бир нече сабактарда биз сиздер менен суроо-жооптор тесттерин түзөбүз. Эң жөнөкөй варианттардан баштап, аялына чейин тартиптүү түрдө татаалдаштыра беребиз.

Башында, ар бирине бир гана жооп берилүүчү суроолор топтомун түзгүбүз келсин деп коёлу. Жооптор колдонуучу тарабынан суроолордун астындагы инпуттарга киргизилсин.

Жогоруда айтылгандарды HTML коду менен иллюстрациялайын:

<div id="test">
	<div>
		<p>1-суроо?</p>
		<input>
	</div>
	<div>
		<p>2-суроо?</p>
		<input>
	</div>
	<div>
		<p>3-суроо?</p>
		<input>
	</div>
</div>

Көрүп тургандай, бизде суроолор жана жооп берүү үчүн инпуттар бар. Туура жоопторду кайда сактайбыз деген суроо калат.

Ойлонуп табууга боло турган эң жөнөкөй нерсе - жалпысынан бир data- атрибутунда жоопторду түздөн-түз инпуттардын HTML кодуна сактоо:

<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 баскычы басылып бүтсүн. Ушул учурда инпут жооптун тууралыгын дароо текшерип турушсун.

Баскыч басылганда гана жооптор текшерилсин деп, сиздин кодду өзгөртүңүз.