CODEWITHSUNDEEP
javascriptjquery
pixo-drone
pixo-drone

Reputation: 83

Value from Math.random is causing problems when I call the function inside itself

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'.*/
        });
    });
};

Upvotes: 2

Views: 95

Answers (2)

leftclickben
leftclickben

Reputation: 4614

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.

Upvotes: 2

talkol
talkol

Reputation: 12887

Your logic is a bit strange here.. what you are trying to do is register a new click event every time a() runs. I think you want to register one click event for all answer_holder elements, and in the event handler check which element this is and handle it accordingly

Notice the following:

$(document).ready(function(){ - the function defined in this handler is supposed to run once your page is loaded.. I don't think you want to use it inside a(). It is usually only used in global scope (outside all functions)

$(".answer_holder").eq(x).click(function(){ - this event handler registers your function depending on the value of x. I suggest you register an event handler for all $(".answer_holder"), without depending on x (in the global scope). And inside that event handler (in the function), you check which element triggered the event (using $(this) - it returns the element that was clicked)

Upvotes: 3

Related Questions