0

我正在做一个动态测验，因为我想学习 javascript、jquery、html 和 css。

每次答案正确时，我的测验都应该给 score 变量加 1 分。它似乎工作正常，但是当我正确回答10 个问题时，它会显示 9 个正确答案。

如果有人可以帮助我，我将不胜感激。

这是我的html：

<body>
<header>
    <hgroup>
        <h1>This is my Dynamic Quiz</h1>
        <h2>Using html5 / css / javascript</h2>
    </hgruop>
</header>

<section id='description'>
    <p>This quiz is compossed by 10 questions, you have to answer at least 7 from 10 to pass the exam.</p>
    <h2>Lets start!</h2>
</section>

<div id='questions-number'>
    <p>Question <span id='current-question'>1</span> of <span>10</span> </p>
</div>

<section id='questions'>
    <p id='question'></p>

    <form id='myForm'>
        <input type='radio' name='quiz' id='0' value='0'/><label id='answer0'>answer0</label></li></br>
        <input type='radio' name='quiz' id='1' value='1'/><label id='answer1'>answer1</label></br>
        <input type='radio' name='quiz' id='2' value='2'/><label id='answer2'>answer2</label></br>
        <input type='radio' name='quiz' id='3' value='3'/><label id='answer3'>answer3</label></br>
    </form> 
</section>
<div id='score'></div>
<div id='back'>
    back
</div>
<div id='next'>
    next
</div>

这是我的 js 文件

$(document).on('ready', ready);
function ready(){
var allQuestions =
[
    {
        question: "Whats my real name?",
        choices: ["Jhonnatan", "Alberto", "Tatan","Jaime"],
        answer: 0
    },

    {
        question: "Who is Colombia's president?",
        choices: ["Alvaro Uribe", "Andres Pastrana", "Juan Manuel Santos","Tatan"],
        answer: 2
    },

    {
        question: "My favorite super heroe?",
        choices: ["Batman", "Flash", "Tatan","Javascript"],
        answer: 3
    },

    {
        question: "Wich sports do i practice?",
        choices: ["Climbing", "Swimming", "Programming","Running"],
        answer: 0
    },

    {
        question: "Whats my dad's name?",
        choices: ["Alberto", "Jorge", "Javier","Jose"],
        answer: 1
    },

    {
        question: "Whats my favorite color?",
        choices: ["Red", "Purple", "Blue","All"],
        answer: 2
    },

    {
        question: "My favorite alcoholic drink",
        choices: ["Vodka", "Aguardiente", "Rum","Tekila"],
        answer: 3
    },

    {
        question: "Whats my favorite kind of music?",
        choices: ["Hardcore", "Reggaeton", "Salsa","Programming"],
        answer: 0
    },

    {
        question: "How many qestions has this quiz??",
        choices: ["20", "8", "10","12"],
        answer: 2
    },

    {
        question: "My favorite programming lenguage?",
        choices: ["Ruby", "Arduino", "Python","Javascript"],
        answer: 3
    }
];

var score = 0;
var number=0;
var question = $('#question');
var choice1 = $('#answer0');
var choice2 = $('#answer1');
var choice3 = $('#answer2');
var choice4 = $('#answer3');
var next = $('#next');
var back = $('#back');
var currentQuestion = $('#current-question');

next.on('click', changeQuestion);
addQuestionAndAnswers();    
back.on('click', backQuestion);



function addQuestionAndAnswers() {
    currentQuestion.text(number + 1);
    question.text(allQuestions[number].question);
    choice1.text(allQuestions[number].choices[0]);
    choice2.text(allQuestions[number].choices[1]);
    choice3.text(allQuestions[number].choices[2]);
    choice4.text(allQuestions[number].choices[3]);
    console.log('funcionando!');
}


function changeQuestion(){
    if($("#myForm input[type='radio']:checked").length == 1){
        if(number<9){
            if($("#myForm input[type='radio']:checked").val() == allQuestions[number].answer){
                number = number +1;
                score ++;
                addQuestionAndAnswers();
            }else{
                number = number +1;
                addQuestionAndAnswers();
            }
        }else{
            displayResult();
    }
        console.log('checked answer');
    }else{
        alert('please select an answer before proceed');
    }



    function displayResult(){
        currentQuestion.text('10');
        $('#myForm').css('display', 'none');
        $('#question').css('display', 'none');
        $('#next').css('display', 'none');
        $('#score').css('display', 'inline-block');
        $('#score').text('Your score is: ' + score + 'pts');


    }
}

function backQuestion(){
    if(number > 0){
        number = number -1;
        addQuestionAndAnswers();
    }


}
}

[编辑]

这是 jsfiddle 演示 :)

http://jsfiddle.net/xtatanx/Wn8Qg/1/

4

1 回答 1

1

看看你在哪里增加分数：

if (number < 9) {
    if ($("#myForm input[type='radio']:checked").val() == allQuestions[number].answer) {
        number = number + 1;
        score++;  // only gets incremented here!!!
        addQuestionAndAnswers();
    } else {
        number = number + 1;
        addQuestionAndAnswers();
    }
} else {
    displayResult();
}

因此，当您提交最后一个问题时，它不会检查答案。您应该重新安排这部分代码，可能是这样的：

// first, check answer
if ($("#myForm input[type='radio']:checked").val() == allQuestions[number].answer) {
    score++;  // increment score for correct answer
}
// then, move to next question OR show results
if (number < 9) {
    number = number + 1;
    addQuestionAndAnswers();
} else {
    displayResult();
}

You have another bug too: if you answer a question correctly, then go back to it, then click next, it adds to your total score again! So you can get infinite points if you want.

于 2013-03-31T00:22:15.693 回答