Test met antwoordopties in HTML-code op JavaScript

In de vorige lessen moesten de antwoorden op de testvragen worden ingevoerd in invoervelden. In het echte leven zijn er echter ook vaak tests waarin je één antwoordoptie uit de voorgestelde kunt kiezen. Laten we leren hoe we dergelijke tests kunnen maken.

Laten we weer beginnen met een eenvoudige variant, waarin de vragen en antwoorden in de HTML-code zijn opgeslagen, en dan geleidelijk complexer worden.

Dus, hier is een test met antwoordopties:

html<div id="test">
  <div>
    <p>vraag 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      optie 1
    </label>
    <label>
      <input type="radio" name="1">
      optie 2
    </label>
    <label>
      <input type="radio" name="1">
      optie 3
    </label>
  </div>
  <div>
    <p>vraag 2?</p>
    
    <label>
      <input type="radio" name="2">
      optie 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      optie 2
    </label>
    <label>
      <input type="radio" name="2">
      optie 3
    </label>
  </div>
  <div>
    <p>vraag 3?</p>
    
    <label>
      <input type="radio" name="3">
      optie 1
    </label>
    <label>
      <input type="radio" name="3">
      optie 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      optie 3
    </label>
  </div>
</div>

Zoals je kunt zien, kunnen we de antwoordopties selecteren met behulp van radioknoppen. Hierbij is in elke vraag de radioknop met het juiste antwoord gemarkeerd met het attribuut data-right.