Возврат нескольких экземпляров обратной связи в цикле javascript для обратной связи по викторине - PullRequest
0 голосов
/ 30 июня 2018

Этот тест прекрасно работает, за исключением того, что я не могу заставить его вернуть все сообщения о неправильном ответе - только последний ответ о неправильном ответе. Например, если я введу ответ «с» для № 1 и № 2, он должен сказать оба «Вопрос 1 - Ответ: а» и «Вопрос 2 - Ответ: б» в нижней части страница. Однако он возвращает только «Вопрос 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>

1 Ответ

0 голосов
/ 30 июня 2018

Вы используете 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>
...