1

我正在尝试进行动态测验以学习 Javascript/jQuery/html 和 CSS。我被卡住了，因为我刚刚添加了一个后退按钮，使用这个后退按钮，用户可以返回查看他的最后一个答案并更改它，如果最后一个答案被正确回答，score--;但如果没有正确回答，它不会重置任何值，以免人们得到无限的分数。我真正的问题是我正在使用一个lastValue变量来存储最后一个选中的单选按钮，所以当你返回时它可以比较，但是如果你返回一次它就可以很好地工作，然后lastValue不会更新，所以行为很奇怪。这是我用来比较值的一段代码：

function backQuestion(){
    if (number == 9){
        $('#myForm').css('display', 'inline-block');
        $('#question').css('display', 'block');
        $('#next').css('display', 'inline-block');
        $('#score').css('display', 'none');
    }

    if(number > 0){
        number --;
        addQuestionAndAnswers();
        if (lastValue == allQuestions[number].answer){
            score --;
            console.log('your score after going back is: ' + score);
            console.log('the last value is: ' + lastValue);
            console.log('this is the value of number: ' + number);
        }else{
            //lastValue = 
            console.log('your score after going back is: ' + score);
            console.log('the last value is: ' + lastValue);
            console.log('this is the value of number: ' + number);
        }
    }
    

}

我还留下了 js fiddle 演示，以便您可以检查其余的代码和变量。当我写这篇文章时，我只是想将响应的值存储在一个数组中，然后每个响应都回答我可以将该值存储在数组中，然后当您按下按钮时，您可以获得该值以便进行比较，那么如果再次回答答案，您可以删除该值。我不确定这是否是一种复杂的方式；如果有人能告诉我或建议我一个简单的方法，我将不胜感激！

js小提琴：http: //jsfiddle.net/xtatanx/Wn8Qg/2/

js小提琴结果全屏：http: //jsfiddle.net/xtatanx/Wn8Qg/2/embedded/result/

4

1 回答 1

1

我建议存储所有答案，如下所示：

http://jsfiddle.net/Wn8Qg/4/

$(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');

    var answers = new Array(allQuestions.length);

    next.click(on_click_next);
    back.click(on_click_back);

    populate();

    function populate() {
        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]);

        $(":radio").prop('checked', false);

        if (answers[number] !== null)
            $(":radio").eq(answers[number]).prop('checked', true);
    }

    function on_click_next(){
        if($(":radio:checked").length == 1)
        {
            answers[number] = $(":radio:checked").val();

            number++;

            if (number < allQuestions.length) {
                populate();
            } else {
                displayResult();
            }
        }else{
            alert('please select an answer before proceed');
        }

        function displayResult(){
            var score = get_score();
            currentQuestion.text(allQuestions.length);

            $('#question, #alternatives').hide();
            $('#next').hide();
            $('#score').show();
            $('#score').text('Your score is: ' + score + 'pts');
        }
    }

    function get_score()
    {
        var result = 0;
        for(var i = 0; i < answers.length; i++)
            if (allQuestions[i].answer == answers[i])
                result++;

        return result;
    }

    function on_click_back()
    {
        if (number == allQuestions.length)
        {
            $('#question, #alternatives').show();
            $('#next').show();
            $('#score').hide();

            number--;

            populate();
        }
        else
        {
          if(number > 0)
          {
              number--;
              populate();
          }
       }
    }
}
于 2013-03-31T22:39:20.530 回答