在 javascript 循环中返回多个反馈实例以获取测验反馈答案

【问题标题】：Returning multiple instances of feedback in a javascript loop for quiz feedback在 javascript 循环中返回多个反馈实例以获取测验反馈
【发布时间】：2018-12-09 11:38:59
【问题描述】：

这个测验效果很好，只是我无法让它返回所有的错误答案反馈——只有最后个错误答案反馈。例如，如果我为 #1 和 #2 输入答案“c”，它应该在底部显示 both“问题 1 - 答案：a”和“问题 2 - 答案：b”的页面。但是，它只返回“问题 2 - 答案：b”，因为它是最后一个不正确的答案，所以由于某种原因它没有返回所有反馈。

<!DOCTYPE HTML>
<html>
<head>
    <title>Quiz Questions And Answers</title>
</head>

<body>
    <center><h1>Quiz Questions</h1></center>
<p>
<form name="quiz">
<p>
    <b>Question 1.
    <br>What is the 1st letter of the alphabet?<br></b>
    <blockquote>
<input type="radio" name="q1" value="a">A<br>
<input type="radio" name="q1" value="b">B<br>
<input type="radio" name="q1" value="c">C<br>
</blockquote>

<p><b>
<hr>
Question 2.
<br>What is the 2nd letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q2" value="a">A<br>
<input type="radio" name="q2" value="b">B<br>
<input type="radio" name="q2" value="c">C<br>
</blockquote>
<p><b>


<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>

</form>
<p>

<form method="post" name="Form" onsubmit="" action="">
</form>

<script>
    var numQues = 2;
    var numChoi = 3;
    var answers = new Array(2);
    answers[0] = "a";
    answers[1] = "b";
function getScore(form) {

    var score = 0;
    var currElt;
    var currSelection;

for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    answered=false; 
for (j=0; j<numChoi; j++) {
  currSelection = form.elements[currElt + j];
  if (currSelection.checked) {
      answered=true;   
    if (currSelection.value == answers[i]) {
      score++;
      break;
    } else if (currSelection.value != answers[i]) {
        qreturn = "Question " + (i+1) +  " - Answer: " + answers[i];
        document.getElementById("qreturn").innerHTML = qreturn;
        //this is the incorrect answer feedback
        break;
    }
  } 
}
if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
}
var scoreper = Math.round(score/numQues*100);
form.percentage.value = scoreper + "%";
form.mark.value=score;
}
</script>

<p id="qreturn"></p>

【问题讨论】：

标签： javascript loops return

【解决方案1】：

您使用innerHTML = ...，这意味着每次迭代都会替换元素。所以使用必须使用+= 运算符或appendChild() 函数来显示所有答案。

固定代码

<html>
<head>
    <title>Quiz Questions And Answers</title>
</head>

<body>
    <center><h1>Quiz Questions</h1></center>
<p>
<form name="quiz">
<p>
    <b>Question 1.
    <br>What is the 1st letter of the alphabet?<br></b>
    <blockquote>
<input type="radio" name="q1" value="a">A<br>
<input type="radio" name="q1" value="b">B<br>
<input type="radio" name="q1" value="c">C<br>
</blockquote>

<p><b>
<hr>
Question 2.
<br>What is the 2nd letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q2" value="a">A<br>
<input type="radio" name="q2" value="b">B<br>
<input type="radio" name="q2" value="c">C<br>
</blockquote>
<p><b>


<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>

</form>
<p>

<form method="post" name="Form" onsubmit="" action="">
</form>

<script>
    var numQues = 2;
    var numChoi = 3;
    var answers = new Array(2);
    answers[0] = "a";
    answers[1] = "b";
function getScore(form) {
    document.getElementById("qreturn").innerHTML =''
    var score = 0;
    var currElt;
    var currSelection;

for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    answered=false; 
for (j=0; j<numChoi; j++) {
  currSelection = form.elements[currElt + j];
  if (currSelection.checked) {
      answered=true;   
    if (currSelection.value == answers[i]) {
      score++;
      break;
    } else if (currSelection.value != answers[i]) {
        qreturn = "Question " + (i+1) +  " - Answer: " + answers[i];
        document.getElementById("qreturn").innerHTML += '<div>'+qreturn+'</div>';
        //this is the incorrect answer feedback
        break;
    }
  } 
}
if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
}
var scoreper = Math.round(score/numQues*100);
form.percentage.value = scoreper + "%";
form.mark.value=score;
}
</script>

<p id="qreturn"></p>

【讨论】：

谢谢！我会在一分钟内接受你的回答。