Question

This script is giving me problems. I’ve re written it several times but I’m missing something.

‘questions’ array refers to my objects. These objects are different questions with ‘a’ always being the correct answer.

The script works fine up to this point. The idea is to increment ‘n’ from 0 to scroll through my array, and provide the next question when a correct answer is clicked. ‘x’ is always the correct answer (it always holds ‘a’).

So I can increment ‘n’ just fine on correct guess; however, when I call the function ‘a()’ again, (after my alert ‘hi’ part), it is causing problems. I want to increment n, and call a() so I get the next question. Then I want to place the correct guess (x) in a random place (ie position 0, 1 or 2.)

Grateful for any help.

var questions = [q0,q1,q2,q3,q4,q5,q6,q7];

var n = 0;

function a(){
var y;
var z;

var x = Math.floor((Math.random() * 3))
if(x == 0){y = 1; z = 2}else if(x == 1){y = 0; z = 2}else{y = 0; z = 1}

$("#question_holder").text(questions[n].q);

    $(".answer_holder").eq(x).text(questions[n].a);
    $(".answer_holder").eq(y).text(questions[n].b);
    $(".answer_holder").eq(z).text(questions[n].c);


    $(document).ready(function(){

        $(".answer_holder").eq(x).click(function(){
            alert("hi");
                        n++;
            a();

                     /*this area needs to get the next question by incrementing
                     n, then generate a different value to x, to place it
                     in a different position. which it does. however,
                     in subsequent questions, you can click the wrong answer as if
                     it's correct, ie not 'a' or 'x'.*/
        });
    });
};

Answer 1

You have the $(document).ready() in the wrong place. Try something like this (caveat: this is completely untested):

function setupQuestion(n) {
    var x,y,z;

    x = Math.floor((Math.random() * 3))
    if(x == 0){y = 1; z = 2}else if(x == 1){y = 0; z = 2}else{y = 0; z = 1}

    $("#question_holder").text(questions[n].q);

    $(".answer_holder").eq(x).text(questions[n].a).data('answer', 'a');
    $(".answer_holder").eq(y).text(questions[n].b).data('answer', 'b');
    $(".answer_holder").eq(z).text(questions[n].c).data('answer', 'c');
}

$(document).ready(function() {
    var n = 0;
    $('.answer_holder').click(function() {
        if ($(this).data('answer') === 'a') { // Or whatever is the correct answer
            n++;
            if (n < questions.length) {
                setupQuestion(n);
            } else {
                // Do something else, the test is finished
            }
        }
        return false;
    });
    setupQuestion(n);
});

Note that I am not comparing on the text() function but rather the data() function. This is because the text as displayed to the user might be decorated in some way, making comparisons difficult. Simply using the answer index ‘a’ ‘b’ or ‘c’ is clearer.