Test med svarsalternativ i HTML-kod med JavaScript

I tidigare lektioner skulle svaren på frågorna i testet skrivas in i inputfält. I verkligheten förekommer det dock ofta även tester där man kan välja ett svarsalternativ bland de som föreslås. Låt oss lära oss att skapa sådana tester.

Låt oss återigen börja med en enkel variant, där frågor och svar lagras i HTML-kod, och sedan gradvis komplicera det.

Så, här är ett test med svarsalternativ:

html<div id="test">
  <div>
    <p>fråga 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>fråga 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>fråga 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 ni ser kan vi välja svarsalternativen med hjälp av radioknappar. Samtidigt är radioknappen med det korrekta alternativet i varje fråga markerad med attributet data-right.