Geek Answers Handbook

Adding a polling timer, Fade Out / Go to the next if the timer reaches 0

I am really new to jQuery but am familiar with some other languages. I recently bought a quiz type script and I am trying to add a simple 15 second timer to each question. This is just a fun poll, so no need to worry about users playing with javascript to increase time, etc.

In principle, if the user does not ask a question within 15 seconds, he will automatically proceed to the next question and the timer will start again.

The answers have a .next tag, and when it is selected, it moves on to the next question, as the code below is (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 do not know how I can select the appropriate div again to fade it out and disappear in the next one. I tried the code below and some similar patchwork ideas, but it doesn’t work, but maybe this will give a better idea of ​​what I need.

 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 used jQuery only a day or two to justify any obvious errors and bad code! Let me know if you need any other code or information.

+7
source share
2 answers

This is very difficult for the first jQuery project.

The skill (in this solution) is to separate the goNext function, which can be called in two ways - in response to a click event and in response to setTimeout() for 15 seconds, and 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 on the "Start" link, which leads to the cloning of the first question, followed by a simulated click on the "Next" clone link. This ensures that the (actual) first question is handled exactly the same as everyone else.

I also included the afterLastQuestion() function. Change its action to do everything you need after answering the last question (or timeout).

+3
source

You can save the current question in a variable by dropping it on the next click and in the timer, for example.

 var $current; superContainer.find('.next').click(function (e) { e.preventDefault(); $(this).parents('.slide-container').fadeOut(500, function () { $(this).next().fadeIn(500); $current = $(this).next(); }); });​

You just need to set it to your first initialization question and remember to reset your timer on the next click

In addition, it is usually preferable to use e.preventDefault() rather than return false .

0
source

More articles:


All Articles