Question

我做了一个测验，计划是当你点击提交时，答案旁边会有一些文字，还有更多的信息。但现在，当我点击提交时，信息显示在答案下方而不是旁边。提交后，您可以在问题2回答1中看到问题。

演示：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;
    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> </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> <span id="demo"></span>
      <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" onclick="myFunction()" value="Submit" />

  </form>Your grade is: <span id="grade">__</span>
  <p id="grade2"></p>

</div>
<!-- close main 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() {
    document.getElementById("demo").innerHTML = "Hello World";
  }
</script>

hgf
<div> </div>

Answer 1

只需添加float：right; for span＃demo element

Answer 2

通过这些更改，“Hello World”文本显示在答案旁边。

为“demo”span标记添加css以保持内联。

span#demo {
    display: inline;
}
/* A small bonus */
.quizstyle {
    padding-right: 20%;
}

将其移至“行”div标记内。

<div class="row">
    <input name="sub" type="radio" value="33" />Answer 1
    <span id="demo"></span>
</div>

当然，你必须计算出其他细节（比如在你的行div和演示跨度之间增加足够的边距，为跨度提供足够的宽度以显示在同一条线上，减小它的大小，给它一些颜色，等），但这种方式达到了原来的要求。

虽然我没有使用任何奇怪的代码

2 个答案: