Тест са опцијама одговора у HTML коду на JavaScript-у

У претходним лекцијама одговори на питања теста морали су да се уносе у поља за унос. У пракси, међутим, често постоје и тестови у којима можете одабрати један од понуђених одговора. Хајде да научимо да правимо такве тестове.

Хајде поново да почнемо са једноставнијом верзијом, када су питања и одговори смештени у HTML коду, а затим ћемо постепено усложњавати.

Дакле, ево теста са опцијама одговора:

html<div id="test">
  <div>
    <p>питање 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      опција 1
    </label>
    <label>
      <input type="radio" name="1">
      опција 2
    </label>
    <label>
      <input type="radio" name="1">
      опција 3
    </label>
  </div>
  <div>
    <p>питање 2?</p>
    
    <label>
      <input type="radio" name="2">
      опција 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      опција 2
    </label>
    <label>
      <input type="radio" name="2">
      опција 3
    </label>
  </div>
  <div>
    <p>питање 3?</p>
    
    <label>
      <input type="radio" name="3">
      опција 1
    </label>
    <label>
      <input type="radio" name="3">
      опција 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      опција 3
    </label>
  </div>
</div>

Као што видите, опције одговора можемо одабрати помоћу радио дугмади. Притом у сваком питању радио дугме са тачним одговором означено је атрибутом data-right.