Getting the last values used in a quiz with jQuery

Question

I'm trying to do a dynamic quiz in order to learn Javascript/jQuery/html and CSS. I got stuck because I just added a back button, with this back button the user can go back an see his last answer and also change it, if the last answer was correctly answered it does score--; but if is not answered correctly it doesn't reset any value, in order to avoid people to get infinite scores. My real problem is that I'm using a lastValue variable to store the last radio button checked so when you go back it can compare, but it just work well if you go back once, then lastValue doesn't update so the behaviour is weird. This is the piece of code I'm using to compare the values:

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);
        }
    }
    

}

I also leave the the js fiddle demo so you can check the rest of the code and variables. While I was writing this I just thought about storing the values of the responses in an array and then just every response answered I can store that value in the array and then when you push the button back you can get that value in order to compare, then you can just delete that value if the answer is answered again. I'm not sure if this is a complicated way; I'll appreciate if someone can tell me or suggest me an easy way!

js fiddle: http://jsfiddle.net/xtatanx/Wn8Qg/2/

js fiddle result full screen: http://jsfiddle.net/xtatanx/Wn8Qg/2/embedded/result/

Answer 1

I would recommend storing all answers, like this:

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();
          }
       }
    }
}