单击提交按钮后，如何在测验中的答案旁边放置文本

Question

这个想法是，当有人点击提交并例如问题 1 错误时，错误答案后会有一些信息，例如：......是一种哺乳动物。

到目前为止，我尝试了一些东西并查找了一下，我无法真正让它工作。

<style>
  .quizbox {
    width: 58%;
    max-width: 950px;
    border: 1px gray solid;
    margin: auto;
    padding: 10px;
    border-radius: 10px;
    margin-top: 7%;
    text-align: center;
    position: relative;
  }
  
  .quizstyle {
    padding-right: 50%;
  }
  
  .row {
    text-align: left;
    margin-left: 10%;
  }
</style>
<div class="quizbox">
  <!-- open main div -->
  <h1>Quiz</h1>
  <form id="form1" action=" ">
    <div class="quizstyle">
      <h3>Moths are a member of what order?</h3>
      <div class="row">
        <input name="variable" type="radio" value="0" />Octagon</div>
      <div class="row">
        <input name="variable" type="radio" value="0" />Leprosy</div>
      <div class="row">
        <input name="variable" type="radio" value="33" />Lepidoptera</div>
      &nbsp;
      <h3>Question 2</h3>
      <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;
      <h3>Question 3</h3>
      <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>
    </div>
    <input type="submit" value="Submit" />
  </form>Your grade is: <span id="grade">__</span>
  <p id="grade2"></p>
</div>
<!-- close main div -->
<script>
  document.getElementById("form1").onsubmit = function() {
    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
</script>

Answer 1

请在下面找到解决方案。我希望它对你有用。

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

<style>
  .quizbox {
    width: 58%;
    max-width: 950px;
    border: 1px gray solid;
    margin: auto;
    padding: 10px;
    border-radius: 10px;
    margin-top: 7%;
    text-align: center;
    position: relative;
  }
  
  .quizstyle {
    padding-right: 50%;
  }
  
  .row {
    text-align: left;
    margin-left: 10%;
  }
</style>
<div class="quizbox">
  <!-- open main div -->
  <h1>Quiz</h1>
  <form id="form1" action=" ">
    <div class="quizstyle">
      <h3>Moths are a member of what order?</h3>
      <div class="row">
        <input name="variable" type="radio" value="0" />Octagon</div>
      <div class="row">
        <input name="variable" type="radio" value="0" />Leprosy</div>
      <div class="row">
        <input name="variable" type="radio" value="33" />Lepidoptera</div>
      &nbsp;
      <h3>Question 2</h3>
      <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;
      <h3>Question 3</h3>
      <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>
    </div>
    <input type="submit" value="Submit" />
  </form>Your grade is: <span id="grade">__</span>
  <p id="grade2"></p>
</div>
<!-- close main div -->