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:

html<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.