javascript - 如何在测验中仅显示相关答案

Question

我有一个测验，您可以在提交后看到有关答案的一些信息，无论答案是错误还是正确。单击“提交”后，将显示所有 3 个有关答案的信息文本，而不仅仅是您单击的答案。如何才能让点击答案A时看到信息A呢？而不是信息 A B C

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() {
  document.getElementById("demo").innerHTML = "An octagon is an object with 8 sides to it";
  document.getElementById("demo2").innerHTML = "Leprosy is a chronic infection";
  document.getElementById("demo3").innerHTML = "Yes ! this is correct";
}

.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

Answer 1

试试这个:

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

但最好使用 css 来显示/隐藏正确答案