Test me pyetje dhe përgjigje në kod HTML me JavaScript

Në këtë dhe në disa mësime të ardhshme ne do të merremi me krijimin e testeve me pyetje dhe përgjigje. Do të fillojmë me variantet më të thjeshta dhe gradualisht do t'i ndërlikojmë.

Le të supozojmë se fillimisht duam të bëjmë një grup pyetjesh, për secilën prej të cilave është e mundur vetëm një përgjigje. Le të themi se përgjigjet futen nga përdoruesi në inputet nën vetë pyetjet.

Le ta ilustrojmë me kod HTML:

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

Siç mund ta shihni, ne kemi pyetje dhe inpute për përgjigje. Mbetet të kuptojmë, ku do të ruajmë përgjigjet e sakta.

Gjëja më e thjeshtë që mund të vijmë është t'i ruajmë përgjigjet direkt në kodin HTML të inputeve, në ndonjë atribut data-:

<div id="test">
	<div>
		<p>pyetja 1?</p>
		<input data-right="përgjigja 1">
	</div>
	<div>
		<p>pyetja 2?</p>
		<input data-right="përgjigja 2">
	</div>
	<div>
		<p>pyetja 3?</p>
		<input data-right="përgjigja 3">
	</div>
</div>

Nuanca tjetër që duhet parashtruar: në çfarë momenti do të kryejmë kontrollin e përgjigjeve për korrektësinë? Këtu mund të propozohen dy variante: ose le të kontrollojë çdo input menjëherë pas shkrimit të përgjigjes në të nëse është e saktë, ose le të ketë një buton, duke klikuar mbi të cilin do të kontrollohen të gjitha përgjigjet në të gjitha pyetjet menjëherë.

Cilindo variant që të zgjedhim, le të themi, nëse përgjigja është e saktë, atëherë kufirin e inputit do ta ngjyrosim në ngjyrë të gjelbër, dhe nëse është e gabuar - në të kuqe. Le të krijojmë për këtë klasat përkatëse CSS:

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

Bëni që shkrimi i përgjigjes në input të përfundojë duke shtypur tastin Enter. Le të themi në këtë rast inputi menjëherë të kontrollojë nëse përgjigja është e saktë.

Modifikoni kodin tuaj në mënyrë që kontrollimi i përgjigjeve të kryhet duke klikuar në një buton.