Тест с вариантами ответов в 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.