Aggiunta di un timer Quiz, Fade Out/Skip to the next se il timer raggiunge 0

Question

Sono davvero nuovo di jQuery ma conosco altri linguaggi. Recentemente ho acquistato uno script di tipo quiz e sto cercando di aggiungere un semplice timer di 15 secondi a ciascuna domanda. È solo un quiz divertente, quindi non c'è bisogno di preoccuparsi degli utenti che giocano con javascript per aumentare il tempo ecc.

In pratica, se un utente non seleziona una domanda entro 15 secondi, passerà automaticamente alla domanda successiva e il timer ricomincia.

Le risposte hanno il tag .next e, quando selezionato, passano alla domanda successiva come mostra il codice sottostante (si spera).

superContainer.find('.next').click(function() { 

      $(this).parents('.slide-container').fadeOut(500, function() { 
       $(this).next().fadeIn(500) 
      }); 

      return false 
}); 

Il problema che ho è se io uso setInterval, non so come posso selezionare nuovamente il div appropriato per dissolvenza è il nostro e fade in quello successivo. Ho provato il codice qui sotto e qualche idea simile a quella di Scrappy ma non funziona, ma forse darà un'idea migliore di quello che sto cercando.

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

io ho solo usato JQuery un giorno o due in modo scusa per eventuali errori evidenti e il codice male! Fatemi sapere se avete bisogno di altri codici o informazioni

Answer 1

Questo è moderatamente difficile per un primo progetto jQuery.

Il talento (in questa soluzione) è fattore una funzione goNext che può essere chiamata in due modi - in risposta a un evento click e in risposta a un 15 secondi setTimeout(), non 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

Il processo viene avviato facendo clic su un link "start", causando la prima domanda da clonare seguito da un click simulato sul collegamento "Avanti" del clone. Ciò garantisce che la prima domanda (effettiva) sia trattata esattamente nello stesso modo di tutte le altre.

Ho anche incluso una funzione afterLastQuestion(). Modifica la sua azione per fare tutto ciò che è necessario dopo che l'ultima domanda ha avuto risposta (o è scaduta).

Answer 2

È possibile mantenere la domanda corrente in una variabile, reimpostandola su un clic next e nel timer, ad es.

var $current; 
superContainer.find('.next').click(function (e) { 

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

});​ 

Avrete solo bisogno di impostarla alla tua prima domanda su inizializzazione, e ricordarsi di resettare il timer su un next click

Inoltre, di solito è preferibile utilizzare e.preventDefault() piuttosto che return false.