JavaScript-de HTML kodunda sorag we jogap testi

Bu we birnäçe indiki sapaklarda biz siziň bilen sorag we jogap testlerini döretmek bilen meşgullanarys. Iň ýönekeý wariantlardan başlap, birtemiz kynlaşdyrarys.

Ilki bilen, hersine diňe bir jogap berip boljak soraglar toplumyny ýasamak isleýändigimizi aýdalyň. Jogaplary ulanyjy özüniň soraglarynyň aşagyndaky inputlara ýazyp girmelidir.

Aýdylanlary HTML kody bilen suratlandyray:

<div id="test">
	<div>
		<p>sorag 1?</p>
		<input>
	</div>
	<div>
		<p>sorag 2?</p>
		<input>
	</div>
	<div>
		<p>sorag 3?</p>
		<input>
	</div>
</div>

Görşüňiz ýaly, bizde soraglar we jogap bermek üçin inputlar bar. Gowy jogaplary nirede saklarymyzy oýlap tapmaly.

Oýlap tapyp boljak iň ýönekeý zat - bu jogaplary inputlaryň HTML kodunda, bir data- atributda saklamak:

<div id="test">
	<div>
		<p>sorag 1?</p>
		<input data-right="jogap 1">
	</div>
	<div>
		<p>sorag 2?</p>
		<input data-right="jogap 2">
	</div>
	<div>
		<p>sorag 3?</p>
		<input data-right="jogap 3">
	</div>
</div>

Oýlap görmeli indiki nýuans: hansi wagtda jogaplaryň dogrylygyny barlamaly? Bu ýerde iki wariant hödürlenip bolýar: ýa-da her input, jogap girizilmezden soň, şol jogabyň dogrymy-dälmi diýip derrew barlamaly, ýa-da basylanda ähli soraglaryň jogaplary barlanjak düwmäni goýmaly.

Haysy warianty saýlasak-da, jogap dogry bolsa, inputyň çägini ýaşyl reňke, ýalňyş bolsa - gyzyl reňke boýamaly. Bu üçin degişli CSS klaslaryny ýasaýaly:

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

Inputa jogap girizmek Enter düwmesine basylmak bilen tamamlanýan ýaly ediň. Bu ýagdaýda input jogabyň dogrylygyny derrew barlamaly.

Jogaplaryň barlanmagynyň düwmä basylanda ýerine ýetirilmegini üçin kodyňyzy üýtgediň.