Tests ar jautājumiem un atbildēm HTML kodā, izmantojot JavaScript

Šajā un vairākās nākamajās nodarbībās mēs ar jums nodarbosimies ar testu ar jautājumiem un atbildēm izveidi. Sāksim ar vienkāršākajiem variantiem un pakāpeniski tos sarežģīsim.

Lai sākumā mēs vēlamies izveidot jautājumu kopumu, katram no kuriem iespējama tikai viena atbilde. Lai atbildes tiek ievadītas lietotāja input laukos zem pašiem jautājumiem.

Ilustrēšu rakstīto ar HTML kodu:

<div id="test">
	<div>
		<p>jautājums 1?</p>
		<input>
	</div>
	<div>
		<p>jautājums 2?</p>
		<input>
	</div>
	<div>
		<p>jautājums 3?</p>
		<input>
	</div>
</div>

Kā jūs redzat, mums ir jautājumi un input lauki atbildēm. Atlika izdomāt, kur mēs glabāsim pareizās atbildes.

Vienkāršākais, ko var izdomāt - ir glabāt atbildes tieši HTML kodā input laukos, kādā data- atribūtā:

<div id="test">
	<div>
		<p>jautājums 1?</p>
		<input data-right="atbilde 1">
	</div>
	<div>
		<p>jautājums 2?</p>
		<input data-right="atbilde 2">
	</div>
	<div>
		<p>jautājums 3?</p>
		<input data-right="atbilde 3">
	</div>
</div>

Nākamā nianse, kas jāizdomā: kādā brīdī mēs veiksim atbilžu pareizības pārbaudi? Šeit var ieteikt divi varianti: vai nu lai katrs input lauks uzreiz pēc atbildes ievadīšanas tajā pārbauda vai atbilde ir pareiza, vai arī lai ir poga, uz kuras nospiešanas tiks pārbaudītas atbildes uz visiem jautājumiem uzreiz.

Neatkarīgi no tā, kuru variantu mēs izvēlēsimies, ja atbilde ir pareiza, tad input lauka apmali krāsosim zaļā krāsā, bet ja nepareiza - sarkanā. Izveidosim tam atbilstošus CSS klases:

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

Izdariet tā, lai atbildes ievade input laukā pabeigtos nospiežot taustiņu Enter. Lai šajā gadījumā input lauks uzreiz pārbauda atbildi uz pareizību.

Modificējiet savu kodu tā, lai atbilžu pārbaude tiktu veikta, nospiežot pogu.