How to show 1 answer at a time in a quiz

时间:2017-06-19 14:05:49

标签: javascript

Right now after you click for example answer A and click submit, There appears some explanation after Answer A. And when you click answer B, explanation B pops up. But explanation A still remains. How to fix this ?

      document.getElementById("form1").onsubmit = function(e) { 
          e.preventDefault();
          variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
          sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
          con = parseInt(document.querySelector('input[name = "con"]:checked').value);
    
          result = variable + sub + con;
    
          document.getElementById("grade").innerHTML = result;
          var result2 = "";
          if (result == 0) {
            result2 = "I don't think you studied."
          };
          if (result == 33) {
            result2 = "You need to spend more time. Try again."
          };
          if (result == 66) {
            result2 = "I think you could do better. Try again."
          };
          if (result == 99) {
            result2 = "Excellent!"
          };
          document.getElementById("grade2").innerHTML = result2;
    
          return false; // required to not refresh the page; just leave this here
        } //this ends the submit function
      function myFunction() {
    
                var checked = document.querySelector("input[name = 'variable']:checked");
                var value = checked.parentNode.lastChild.id;
                var answer;
                switch (value) {
                  case 'demo':
                    answer = "An octagon is an object with 8 sides to it";
                    break;
                  case 'demo2':
                    answer = "Leprosy is a chronic infection";
                    break;
                  case 'demo3':
                    answer = "Yes ! this is correct";  
                    break;
                }
                checked.parentNode.lastChild.innerHTML = answer;
        }
      .quizbox {
        width: 58%;
        max-width: 950px;
        border: 1px gray solid;
        margin: auto;
        padding: 10px;
        border-radius: 10px;
        border-width: 5px;
        border-color: #00A7AE;
        margin-top: 7%;
        text-align: center;
        position: relative;
        background: #73B7DB;
      }
      
      
      .row {
        text-align: left;
        color: white;
        margin-left: 10%;
      }
      
      span#demo, #demo2, #demo3 {
        display: inline;
        color: green;
        margin-right: 30%;
        float:right;
        width:50%;
      }
    <div class="quizbox">
    
      <!-- open main div -->
      <h1>Quiz</h1>
      <form id="form1" action=" ">
          <div class="row"> <h3>Moths are a member of what order?</h3></div>
          <div class="row">
            <input name="variable" type="radio" value="0" />Octagon <span id="demo"></span></div>
          <div> </div>
          <div class="row">
            <input name="variable" type="radio" value="0" />Leprosy <span id="demo2"></span></div>
          <div class="row">
            <input name="variable" type="radio" value="33" />Lepidoptera <span id="demo3"></span></div>
          &nbsp;
         <div class="row"> <h3>Question 2</h3></div>
          <div class="row">
            <input name="sub" type="radio" value="33" />Answer 1  </div> 
          <div class="row">
            <input name="sub" type="radio" value="0" />Answer 2</div>
          <div class="row">
            <input name="sub" type="radio" value="0" />Answer 3</div>
          &nbsp;
          <div class="row"><h3>Question 3</h3></div>
          <div class="row">
            <input name="con" type="radio" value="0" />Answer 1</div>
          <div class="row">
            <input name="con" type="radio" value="33" />Answer 2</div>
          <div class="row">
            <input name="con" type="radio" value="0" />Answer 3</div>
       <p> <input type="submit" onclick="myFunction()" value="Submit" /> </p>
      </form>Your grade is: <span id="grade">__</span>
      <p id="grade2"></p>
    
    </div>
    <!-- close quizbox div -->
    
    
    <span>fdf</span> <span>fdf</span><span>fdf</span>
    fd

    
    hgf
    <div> </div>

0 个答案:

没有答案