JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<body>

  <form id="quizForm" method="post" onsubmit="quiz_function(); return false;">
    <br> Begin quiz: Enter Name
    <input type="text" id="Name" value="">
    <div id="Name_result"></div>
    <br>
    <input type="submit" value="Submit">
    <label>

      <div class="section1">
        <fieldset>
          <p class="question1">1. What is your Zodiac Sign?</p>
          <ul class="answers1">
            <input type="radio" id="q1a" name="set1" value="Aries (March 21-April 19)">
            <label for="q1a">Aries (March 21-April 19)</label>
            <br/>
            <input type="radio" id="q1b" name="set1" value="Taurus (April 20-May 20)">
            <label for="q1b">Taurus (April 20-May 20)</label>
            <br/>
            <input type="radio" id="q1c" name="set1" value="Gemini (May 21-June 20)">
            <label for="q1c">Gemini (May 21-June 20)</label>
            <br/>
          </ul>
        </fieldset>
      </div>
      <div id="set1_result"></div>

      <div class="section2">
        <fieldset>
          <p class="question2">2. What do you fear?</p>
          <ul class="answers2">
            <input type="radio" id="q1a" name="set2" value="Darkness">
            <label for="q1a">Darkness</label>
            <br/>
            <input type="radio" id="q1b" name="set2" value="Spiders">
            <label for="q1b">Spiders</label>
            <br/>
          </ul>
        </fieldset>
      </div>

    </label>
  </form>

</body>

JavaScript

function quiz_function() {
  name_value = document.getElementById('Name').value;
  document.getElementById('Name_result').innerHTML = name_value;
  
  set1_value = document.querySelector('input[name="set1"]:checked').value;
  //set1_possible_answers = document.getElementsByName('set1');
  //set1_value = '';
  //for(var i = 0; i < set1_possible_answers.length; i++){
  //	window.alert(rates[i].value)
  //  if(set1_possible_answers[i].checked){
  //      set1_value = rates[i].value;
  //  }
	//}
  document.getElementById('set1_result').innerHTML = set1_value;
  
  //if (document.getElementById('r1').checked) {
  //  rate_value = document.getElementById('r1').value;
  //}
}