如何仅在测验中显示相关答案 [英] How to only show a relevant answer in a quiz e

问题描述

我有一个测验，您可以在提交后看到有关答案的一些信息，无论是错误的还是正确的。点击提交后，显示所有3个关于答案的信息文本，而不仅仅是单击答案。
你怎么能这样做，当你点击答案A时，就会看到信息A？
而不是信息ABC

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 =;如果（结果== 0）{result2 =我不认为你学习了。 }; if（result == 33）{result2 =你需要花更多时间，再试一次。 };如果（结果== 66）{result2 =我认为你可以做得更好，再试一次。 }; if（result == 99）{result2 =优秀！ }; document.getElementById（grade2）。innerHTML = result2;返回false; //不刷新页面;只需在这里留下} //结束提交函数function myFunction（）{document.getElementById（demo）。innerHTML =八角形是一个8边的物体; document.getElementById（demo2）。innerHTML =麻风是慢性感染; document.getElementById（demo3）。innerHTML =Yes！this is correct;}

  .quizbox {width：58％; max-width：950px;边框：1px灰色实心;保证金：汽车;填充：10px; border-radius：10px; border-width：5px;边框颜色：＃00A7AE;保证金率：7％; text-align：center;位置：相对;背景：＃73B7DB;}。row {text-align：left;白颜色; margin-left：10％;} span＃demo，＃demo2，＃demo3 {display：inline;颜色：绿色;保证金率：30％; float：right; width：50％;}  

< div class = quizbox> <！ - 打开主div - > < H1>测验和LT; / H1> < form id =form1action => < div class =row> < h3>飞蛾是什么顺序的成员？< / h3>< / div> < div class =row> < input name =variabletype =radiovalue =0/> Octagon< span id =demo>< / span>< / div> < DIV> < / DIV> < div class =row> < input name =variabletype =radiovalue =0/>麻风病< span span =demo2>< / span>< / div> < div class =row> < input name =variabletype =radiovalue =33/>鳞翅目< span id =demo3>< / span>< / div> &安培; NBSP; < div class =row> < h3>问题2< / h3>< / div> < div class =row> < input name =subtype =radiovalue =33/> Answer 1< / div> < div class =row> < input name =subtype =radiovalue =0/> Answer 2< / div> < div class =row> < input name =subtype =radiovalue =0/> Answer 3< / div> &安培; NBSP; < div class =row>< h3>问题3< / h3>< / div> < div class =row> < input name =contype =radiovalue =0/> Answer 1< / div> < div class =row> < input name =contype =radiovalue =33/> Answer 2< / div> < div class =row> < input name =contype =radiovalue =0/> Answer 3< / div> < p为H. < input type =submitonclick =myFunction（）value =Submit/> < / p为H. < / form>您的成绩是：< span id =grade> __< / span> < p id =grade2>< / p>< / div><！ - close quizbox div - >< span> fdf< / span>
fdf fdf fd fd

  function myFunction（）{
 
 var checked = document.querySelector（input [name ='variable']：checked）; 
 var value = checked.parentNode.lastChild.id; 
 var answer; 
 switch（value）{
 case'demo'：
 answer =一个八边形是一个8边的物体; 
休息; 
 case'demo2'：
 answer =麻风病是一种慢性感染; 
休息; 
 case'demo3'：
 answer =是的，这是正确的; 
休息; 
} 
 checked.parentNode.lastChild.innerHTML = answer; 
} 
  

更好地使用css来显示/隐藏正确的答案

I have a quiz where you can see some information about an answer whether it is wrong or right after you submit. After you click on submit, all 3 informatic texts about the answers are shown instead of just for the answer u clicked. How can you make it that when you click answer A, information A is seen ? And not Information 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

解决方案

Try this:

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

But better use css for display/hide right answers

这篇关于如何仅在测验中显示相关答案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！