我已修改此代码,创建一个用户通过选中单选按钮来回答问题的测验。
var totalScore = 0;
var numAnswer = 0;
//an array with objects that hold the questions
var allQuestions = [{question: ["Q1: Who was the Top Goalscorer in the 1998 World Cup?"],
choices: ["Ronaldo", "Davor Sukor", "Zinedine Zindane", "Thierry Henry"],
correctAnswer:1},
{question: ["Q2: Where was the 1998 World Cup Final Held?"],
choices: ["Parc des Princes", "Stade Velodrome", "Stade de France", "Stade de Gerland"],
correctAnswer:2},
{question: ["Q3: What was the score in the 1998 World Cup Final?"],
choices: ["2-0", "2-1", "3-0", "3-1"],
correctAnswer:2},
{question: ["Q4: Who won the 2002 World cup?"],
choices: ["France", "Holland", "Brazil", "Germany"],
correctAnswer:2},
{question: ["Q5: Who was the Top Goalscorer in the 2002 World Cup?"],
choices: ["Vieri", "Ronaldo", "Klose", "Ballack"],
correctAnswer:1}];
//create the questions created by the array, first unselecting all radiobuttons
function createQuestions() {
for (var i = 0; i < 4; i++) {
document.getElementById("answer" + i).checked = false;
}
var quizQuestion = document.getElementById("questions");
quizQuestion.innerHTML = allQuestions[this.numAnswer].question[0];
createOptions();
}
//change the innerHTML of the label by calling it's ID
function createOptions() {
for (var o = 0; o <= allQuestions[0].choices[o].length; o++) {
document.getElementById("a" + o).innerHTML = allQuestions[this.numAnswer].choices[o];
}
}
//create an HTMLcollection using document.forms and check selected radiobutton and
//corresponding value.
function checkAnswers() {
var methods = document.forms.radioAnswers.elements.choice;
if (this.numAnswer < 4) {
for (var i = 0; i < methods.length; i++) {
if (methods[i].checked) {
answer = methods[i].value;
}
}
//check if answer is correct answer.
if (parseInt(answer) === allQuestions[this.numAnswer].correctAnswer) {
this.totalScore += 1;
}
this.numAnswer += 1;
createQuestions();
} else {
showScore();
}
}
function showScore() {
var printTotalscore = document.getElementById("questions");
printTotalscore.innerHTML = "Your total score is: " + this.totalScore;
var removeRadio = document.getElementById("questions_form").style.display="none";
var removeButton = document.getElementById("next").style.display="none";
}
window.onload = createQuestions();
我已经完成了代码,我知道它正在使用一系列for循环来创建问题,为问题答案创建HTML并最终跟踪问题的数量。
关于最后一个问题,分数没有正确更新,就像其他问题一样,我认为它与最终for循环有关但我已尽可能多地调试它但我仍然可以& #39;看看如何解决它。
这一行if (this.numAnswer < 4)
是我认为问题所在,因为在最后一个循环后它直接进入函数showScore()
,我可能是错的,但如果我将循环更改为{{ 1}}需要再次选择最后一个问题,然后分数是正确的。
有人可以帮我解决这个问题吗?
这可能会让代码变得更容易:http://codepen.io/Addiosamigo/pen/fFHly
由于
答案 0 :(得分:2)
问题似乎是您正确识别的if语句。代码的行为方式是这样的,因为在最后一个答案中你没有检查它的vadility / update分数。
您需要更改代码以确保即使在最后一个问题上也会执行分数检查。由于需要始终执行分数检查,最简单的解决方案可能是移动if语句以仅涵盖显示结果的下一个问题的逻辑。
for (var i = 0; i < methods.length; i++) {
if (methods[i].checked) {
answer = methods[i].value;
}
}
//check if answer is correct answer.
if (parseInt(answer) === allQuestions[this.numAnswer].correctAnswer) {
this.totalScore += 1;
}
// Move the if statement to here
if (this.numAnswer < 4) {
this.numAnswer += 1;
createQuestions();
} else {
showScore();
}
这可以在 - http://codepen.io/anon/pen/ezgtD的行动中看到。该代码还删除了一些神奇的数字。