Тест с опции за отговор в 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.