Test med svaralternativer i HTML-kode på JavaScript
I tidligere leksjoner måtte svarene på testspørsmålene skrives inn i input-felt. I virkeligheten forekommer det imidlertid ofte også tester der man kan velge ett svaralternativ blant de foreslåtte. La oss lære å lage slike tester.
La oss igjen starte med en enkel variant, der spørsmål og svar lagres i HTML-kode, og deretter gradvis gjøre den mer kompleks.
Så, her er en test med svaralternativer:
<div id="test">
<div>
<p>spørsmål 1?</p>
<label>
<input type="radio" name="1" data-right>
alternativ 1
</label>
<label>
<input type="radio" name="1">
alternativ 2
</label>
<label>
<input type="radio" name="1">
alternativ 3
</label>
</div>
<div>
<p>spørsmål 2?</p>
<label>
<input type="radio" name="2">
alternativ 1
</label>
<label>
<input type="radio" name="2" data-right>
alternativ 2
</label>
<label>
<input type="radio" name="2">
alternativ 3
</label>
</div>
<div>
<p>spørsmål 3?</p>
<label>
<input type="radio" name="3">
alternativ 1
</label>
<label>
<input type="radio" name="3">
alternativ 2
</label>
<label>
<input type="radio" name="3" data-right>
alternativ 3
</label>
</div>
</div>
Som du ser, kan vi velge
svaralternativer ved hjelp av radioknapper. I tillegg
er radioknappen med det riktige
alternativet i hvert spørsmål merket med attributtet data-right.
Gjør slik at når ett av svaralternativene i et spørsmål velges, sjekkes dette svaret umiddelbart for riktighet.
Modifiser koden din slik at sjekking av svar utføres ved et trykk på en knapp.