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>

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

Ең қарапайым ой - бұл жауаптарды тікелей енгізу жолдарының 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 батырмасын басу арқылы аяқталуы үшін жасаңыз. Бұл жағдайда енгізу жолы жауапты дұрыстығына тексерсін.

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