我创建了一个测验,修改了我在网上找到的代码,但是我遇到了一些问题

时间:2014-09-08 11:51:23

标签: javascript for-loop

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

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

由于

1 个答案:

答案 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的行动中看到。该代码还删除了一些神奇的数字。