Test med frågor och svar i HTML-kod med JavaScript

I den här och flera kommande lektioner kommer vi att ägna oss åt att skapa tester med frågor och svar. Vi börjar med de enklaste varianterna och kommer gradvis att göra dem mer komplexa.

Låt oss först säga att vi vill göra en uppsättning frågor, för var och en av vilka endast ett svar är möjligt. Låt svaren matas in av användaren i inputfält under själva frågorna.

Låt mig illustrera det skrivna med HTML-kod:

<div id="test">
	<div>
		<p>fråga 1?</p>
		<input>
	</div>
	<div>
		<p>fråga 2?</p>
		<input>
	</div>
	<div>
		<p>fråga 3?</p>
		<input>
	</div>
</div>

Som du ser har vi frågor och inputfält för svar. Återstår att fundera ut var vi ska lagra de korrekta svaren.

Det enklaste man kan tänka sig är att lagra svaren direkt i HTML-koden för inputfälten, i något data- attribut:

<div id="test">
	<div>
		<p>fråga 1?</p>
		<input data-right="svar 1">
	</div>
	<div>
		<p>fråga 2?</p>
		<input data-right="svar 2">
	</div>
	<div>
		<p>fråga 3?</p>
		<input data-right="svar 3">
	</div>
</div>

Nästa nyans att tänka på: när ska vi utföra kontrollen av svarens korrekthet? Här kan man föreslå två alternativ: antingen låt varje inputfält omedelbart vid inmatning av svar kontrollera om det är rätt svar, eller låt det vara en knapp som vid klick kontrollerar svaren på alla frågor på en gång.

Oavsett vilket alternativ vi väljer, låt oss, om svaret är korrekt, göra inputfältets kant grön, och om det är felaktigt - röd. Låt oss skapa motsvarande CSS-klasser för detta:

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

Gör så att inmatning av svar i inputfältet avslutas genom att trycka på tangenten Enter. Låt i detta fall inputfältet omedelbart kontrollera svaret på korrekthet.

Modifiera din kod så att kontrollen av svaren utförs genom att klicka på en knapp.