Test z opcjami odpowiedzi w kodzie HTML na JavaScript

W poprzednich lekcjach odpowiedzi na pytania testowe musiały być wpisywane w inputy. W praktyce jednak często spotyka się również testy, w których można wybrać jedną opcję odpowiedzi z proponowanych. Nauczmy się tworzyć takie testy.

Zacznijmy ponownie od prostej wersji, gdzie pytania i odpowiedzi są przechowywane w kodzie HTML, a następnie stopniowo będziemy komplikować.

A oto test z opcjami odpowiedzi:

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

Jak widzicie, opcje odpowiedzi możemy wybrać za pomocą przycisków opcji. Przy tym w każdym pytaniu przycisk opcji z poprawną odpowiedzią oznaczony jest atrybutem data-right.