Тэст з варыянтамі адказаў у 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.