javascript - 我创建了一个测验，修改了我在网上找到的代码，但遇到了一个小问题

Question

我修改了此代码，以创建一个测验，用户通过选中单选按钮来回答问题。

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 循环有关，但我已经尽可能地调试了它，但我仍然不能看看如何修复它。

这一行if (this.numAnswer < 4)我认为问题出在哪里，因为在最后一个循环之后，它直接进入函数 showScore() ，我可能是错的，但如果我将循环更改为 (this.numAnswer <= 4)最后一道题需要重新选择，分数才正确。

有人可以帮我解决这个问题吗？

这里是代码笔，也许可以让它变得更容易:http://codepen.io/Addiosamigo/pen/fFHly

谢谢

Answer 1

问题似乎是您正确识别的 if 语句。代码之所以如此，是因为在最后一个答案中，您没有检查其可用性/更新分数。

您需要更改代码以确保即使在最后一个问题上也能进行​​分数检查。由于总是需要进行分数检查，最简单的解决方案可能是移动 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 中看到。 。该代码还删除了一些魔数(Magic Number)。