如何在測驗中解釋點擊其他答案時消失？

Question

我一直在努力一段時間，因爲我不是專業人士。 問題：測驗。當你點擊答案A然後提交後，你會在答案A旁邊得到一個 解釋。然後當你點擊答案B並提交你時， 會在答案B旁邊得到解釋，但答案A的解釋A仍然存在。 這必須消失。

這裏是鏈接：https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview

<style> 
    .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%; 
    } 
</style> 


<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; 

    <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 
<script> 
    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; 
    } 
</script> 

hgf 
<div> </div> 

Answer 1

您可以給每個解釋添加一個類名「解釋」，並在每次調用myFunction（）時清除它們的文本。

這裏的工作演示https://plnkr.co/edit/9TIwKXIxP8A01DeKVWuG?p=preview

<style> 
    .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%; 
    } 
</style> 


<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 class="explanation" id="demo"></span></div> 
     <div> </div> 
     <div class="row"> 
     <input name="variable" type="radio" value="0" />Leprosy <span class="explanation" id="demo2"></span></div> 
     <div class="row"> 
     <input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3"></span></div> 
     &nbsp; 

    <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 
<script> 
    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 explanations = document.querySelectorAll(".explanation"); 
      for(var x = 0; x < explanations.length; x++) { 
       explanations[x].innerHTML = ""; 
      } 

      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; 
    } 
</script> 

hgf 
<div> </div> 

Answer 2

在HTML中添加類所有<input name="variable">（注意，你不能有多個input複製name屬性）：

<input class="variable" ...> 

添加行在您的myFunction()中獲取未檢查的輸入：

function myFunction() { 
    var notChecked = document.getElementsByClassName('variable'); 
    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; 
    } 
    for (var i = 0, len = notChecked.length; i < len; i++){ 
     notChecked[i].parentNode.lastChild.innerHTML = ''; 
    } 
    checked.parentNode.lastChild.innerHTML = answer; 
}