添加测验计时器，如果计时器为0，则淡入/跳过到下一个 [英] Adding a Quiz Timer, Fade Out/Skip to the next if timer reaches 0

问题描述

我真的是jQuery的新手，但熟悉其他一些语言.我最近购买了一个测验类型的脚本，并且试图为每个问题添加一个简单的15秒计时器.这只是一个有趣的测验，因此无需担心用户使用javascript来增加时间等.

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.

基本上，如果用户在15秒钟内未选择问题，它将自动转到下一个问题，计时器会重新开始.

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.

答案具有.next标记，并且选择后将其移至下一个问题，如下面的代码所示(希望如此).

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
});

我遇到的问题是，如果我使用setInterval，我不知道如何再次选择合适的div来淡化它并在下一个中淡出.我已经尝试了下面的代码和一些类似的草率想法，但是它没有用，但是也许可以更好地了解我所追求的目标.

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
});

我只用了一两天的JQuery，所以请原谅任何明显的错误和错误的代码！让我知道您是否需要其他代码或信息

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

推荐答案

对于第一个jQuery项目，这有点棘手.

This is moderately tricky for a first jQuery project.

(在此解决方案中)诀窍是分解出goNext函数，该函数可以通过两种方式调用-响应单击事件和响应15秒setTimeout()而不是setInterval(). /p>

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;
    });
});

演示

通过单击开始"链接开始该过程，从而导致克隆第一个问题，然后模拟单击克隆的下一个"链接.这样可以确保(实际)第一个问题与所有其他问题的处理方式完全相同.

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.

我还包括了afterLastQuestion()函数.修改其操作，以在回答最后一个问题(或超时)后做任何必要的事情.

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

这篇关于添加测验计时器，如果计时器为0，则淡入/跳过到下一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！