Lego Lego - 4 months ago 13
Javascript Question

How to make explanations in quiz disappear when clicked on another answer?

I have been struggling for a while with this since I'm not a pro.
The issue: A quiz. After you click answer A and then submit, you will get an
explanation next to answer A. When you then click answer B and then submit you
will get an explanation next to answer B but explanation A about answer A remains.
This has to disappear.

Here is the link: 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 Source

You can give each explanation span a class name of "explanation" and clear their texts each time you call myFunction().

Here's a working demo 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>