Cavablarla testin HTML kodunda JavaScript ile həyata keçirilməsi

Əvvəlki dərslərdə test suallarına cavablar inputlara daxil edilməli idi. Həyatda isə, çox vaxt təklif olunan cavablardan birini seçə biləcəyimiz mətnlər də olur. Gəlin bu cür testlərin necə yaradılacağını öyrənək.

Gəlin yenə sadə variantdan başlayaq, suallar və cavablar HTML kodunda saxlanılır, və sonra tədricən mürəkkəbləşdirəcəyik.

Beləliklə, cavab seçimləri olan bir test:

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

Gördüyünüz kimi, cavab variantlarını radio düymələri ilə seçə bilərik. Eyni zamanda hər sualda düzgün variantı olan radio düyməsi data-right atributu ilə işarələnib.