Multiple Timers in Quiz with jQuery

Question

I'm on a quiz, where you can pick an answer out of four answer possibilities (like who wants to be a millionaire). I want to add a counter of 7secs per question to it, if the counter ends, a button to the next question should appear.

I already have my basic code with jQuiz, but my problem is now, that I use always the same counter instance. So the timer of the first question is fine, but if you answer the next question and have some time left of the first one, both counters are displayed at the same time. I think my problem will be solved when I have multiple timer instances, but I don't know how to do this.

Here my code. Sorry about the bad structure, I'm a jQuery newbie.

---

$('.btn, .nxt').click(function(){
    $(this).addClass("checked");
    next(this);
    var el = $('#progress');
    el.width(el.width() + 116 + 'px');
});

function next(elem){
    $(elem).parents('.questionContainer').fadeOut(300, function(){
        var interval = window.setInterval(function() {
            var counter = 0;
            clearInterval(interval);
        });
        var counter = 0;

        timer();
        $(elem).parents('.questionContainer').next().fadeIn(300); 
        $('.nxt').hide();
    });
};

function timer(){
    var counter = 7;
    var interval = window.setInterval(function() {
        counter--;
        $(".counter").html(counter);
        if (counter == 0) {
            $(".counter").html('');
            $('.nxt').show();
            clearInterval(interval); 
        }
    }, 1000);    
};​

---

Answer 1

I'm new at Stackoverflow and it's too hard for me to edit code in this textarea... Added fixed JS to jsfiddle.

Try to add your HTML to the same fiddle and test JS, hope it would work.

There are some fixes about structure (caching selections mostly) and added array for timers (with comments) you were asking for.

It'll be easier to debug when you add HTML :)

var quizObj = {
    quizTimers: [], //timers array
    $counter: $(".counter"),
    $buttons: $('.btn, .nxt'),
    $progress: $('#progress'),
    next: function(elem){
         $(elem).parents('.questionContainer').fadeOut(300, function(){ 
            //clears the FIRST timer id in the timers array and removes it from array
            clearInterval(quizObj.quizTimers.shift());

            quizObj.timer();
            $(elem).parents('.questionContainer').next().fadeIn(300);
            $('.nxt').hide();
        });   
    },
    timer: function() {
        var counter = 7;
        var interval = window.setInterval(function() {
            counter--;
            $(".counter").html(counter);
            if (counter == 0) {
                $(".counter").html('');
                $('.nxt').show();
                clearInterval(interval);
            }
        }, 1000);   

        quizObj.quizTimers.push(interval);
    }
}

quizObj.$buttons.click(function(){
    $(this).addClass("checked");
    quizObj.next(this);
    quizObj.$progress.width(quizObj.$progress.width() + 116 + 'px');
});