Adding a Quiz Timer, Fade Out/Skip to the next if timer reaches 0

javascript, jquery, setinterval

Solution

This is moderately tricky for a first jQuery project.

The knack (in this solution) is to factor out a `goNext` function that can be called in two ways - in response to a click event and in response to a 15 second `setTimeout()`, not `setInterval()`.

$(function(){
    var questionTimeout = null;

    function goNext($el) {
        clearTimeout(questionTimeout);
        var $next = $el.next();
        $el.fadeOut(500, function() {
            if($next.length > 0) {
                $next.fadeIn(500, function() {
                    questionTimeout = setTimeout(function() {
                        goNext($next);
                    }, 15000);
                });
            }
            else {
                afterLastQuestion();
            }
        });
    }
    function afterLastQuestion(){
        alert("last question complete");
        $start.show();
    }

    var $superContainer = $("#superContainer").on('click', '.next', function() {
        goNext($(this).closest('.slide-container'));
        return false;
    });

    var $start = $("#start").on('click', function(){
        $(this).hide();
        $superContainer.find(".slide-container")
            .eq(0).clone(true,true)
            .prependTo(superContainer)
            .find(".next").trigger('click');
        return false;
    });
});

DEMO

The process is started by clicking a "start" link, causing the first question to be cloned followed by a simulated click on the clone's "next" link. This ensures that the (actual) first question is treated in exactly the same way as all the others.

I also included a `afterLastQuestion()` function. Modify its action to do whatever is necessary after the last question is answered (or times out).

Problem

I'm really new to jQuery but familiar with some other languages. I recently bought a quiz type script and I'm trying to add a simple 15 second timer to each question. It's only a fun quiz, so no need to worry about users playing with the javascript to increase time etc. Basically, if a user does not pick a question within 15 seconds, it will automatically go on to the next question and the timer starts over again. Answers have the `.next` tag, and when chosen it moves onto the next question as the code below shows (hopefully). ``` superContainer.find('.next').click(function () { $(this).parents('.slide-container').fadeOut(500, function () { $(this).next().fadeIn(500) }); return false }); ``` The problem i have is if i use `setInterval`, i don't know how i can select the appropriate div again for fade it our and fade in the next one. I've tried the below code and a few similar scrappy idea's but it doesn't work, but maybe it will give a better idea of what I'm after though. ``` superContainer.find('.next').click(function () { $active_count = $count; countInterval = setInterval(function() { $active_count--; if($active_count <= 0){ clearInterval(countInterval); $active_count = $count; $(this).parents('.slide-container').fadeOut(500, function () { $(this).next().fadeIn(500) }); } $('.question-timer').html($active_count); }, 1000); $(this).parents('.slide-container').fadeOut(500, function () { $(this).next().fadeIn(500) }); return false }); ``` I've only been using JQuery a day or two so excuse any obvious mistakes and bad code! Let me know if you need any other code or information

Original source