CODEWITHSUNDEEP
jquery
Viet
Viet

Reputation: 6943

jquery pass var between functions without using global var or var outside function

I need to pass currentQuest.options to showResult function without declaring a global var or a var outside of those functions.

Is it possible? I've read other similar questions but all the correct answers are using a global var.

var pool = {
        q1: {
            question: "This is question number 1",
            options: ["Option 1", "Option 2", "Option 3", "Option 4"],
            answer: 0, //answer uses property option key
            used: false
        },
        q2: {
            /*...*/
        },
        /*...just more q here...*/
    }

    //choose a random question
    function randomQuest(obj) {
        var keys = Object.keys(obj);
        return obj[keys[keys.length * Math.random() << 0]];
    }

    //show question and options
    function showQuest() {
        var currentQuest = randomQuest(pool);
        $(".answer").html(""); //clear old answer
        $(".question").html(currentQuest.question);
        $(".options").html(currentQuest.options);
        currentQuest.used = true; //mark question used

        console.log(currentQuest.question);
        console.log("used? ", currentQuest.used);
    }

    function showResult() {
        $(".question").html("");
        $(".options").html("");
        var x = currentQuest.answer;
        $(".answer").html("Here is the answer " + currentQuest.options[x]); //how to pass currentQuest here?
    }

    function timer() {
        var seconds = 4;
        var interval = setInterval(function() {
            seconds--;
            $(".timer").html("<p>Time remaining: " + seconds + " s</p>");       
            if (seconds == 0) {
                clearInterval(interval);
                showResult();
            }   
        }, 1000);
    }

    //when click start game
    $(".btn").on("click", function() {
        timer();
        showQuest();
    });

The logic is: when button clicked -> start the timer, show the first question (randomly chosen from the pool) when timer hits 0, show result, wait a few seconds, reset timer, show another question, start timer again.

Upvotes: 1

Views: 42

Answers (1)

Ghasan غسان
Ghasan غسان

Reputation: 5857

You can use function parameters to achieve this.

function showQuest(currentQuest) {
    $(".answer").html(""); //clear old answer
    $(".question").html(currentQuest.question);
    $(".options").html(currentQuest.options);
    currentQuest.used = true; //mark question used

    console.log(currentQuest.question);
    console.log("used? ", currentQuest.used);
}

function showResult(currentQuest) {
    $(".question").html("");
    $(".options").html("");
    var x = currentQuest.answer;
    $(".answer").html("Here is the answer " + currentQuest.options[x]); //how to pass currentQuest here?
}

function timer(currentQuest) {
    var seconds = 4;
    var interval = setInterval(function() {
        seconds--;
        $(".timer").html("<p>Time remaining: " + seconds + " s</p>");       
        if (seconds == 0) {
            clearInterval(interval);
            showResult(currentQuest);
        }   
    }, 1000);
}

//when click start game
$(".btn").on("click", function() {
    var currentQuest = randomQuest(pool);
    timer(currentQuest);
    showQuest(currentQuest);
});

Edit: please try this method to get a random index.

// From MDN
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomQuest(obj) {
    var keys = Object.keys(obj);
    return obj[keys[getRandomInt(0, keys.length)]];
}

Upvotes: 3

Related Questions