-1

I am developing a quiz game in which I want each questions (total 5 questions) to be automatically changed after 20 seconds. Please provide me html codes and also provide code for 20 seconds countdown for each questions.

**

How the countdown can be toggled (paused/resumed on click) ?

**

Rajat Jaiswal
  • 9
  • 4
  • Possible duplicate of [How can I change text after time using jQuery?](http://stackoverflow.com/questions/8630722/how-can-i-change-text-after-time-using-jquery) – Morishiri Sep 17 '16 at 14:41
  • can you provide relevent code with this, atleast html. you only showing the question – caldera.sac Sep 17 '16 at 14:44
  • Please read on what StackOverflow is for. We don't create programs for everyone, instead we help (!) solving specific problems. – jkemming Sep 17 '16 at 15:45

1 Answers1

1

Try this :

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .question {
            display: none;
        }
        .count {
            position: absolute;
            top: 100px;
        }
    </style>
</head>
    <body>
        <h1 class="question">I am Question 1</h1>
         <h1 class="question">I am Question 2</h1>
         <h1 class="question">I am Question 3</h1>
         <h1 class="question">I am Question 4</h1>
         <h1 class="question">I am Question 5</h1>
        <h3 class="count">CountDown : 19 </h3>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      
        <script>
          
$(document).ready(function(){
    
    var total = $(".question").length;
    var cur = 1;
    var cou = 19;
    
    $(".question").eq(0).show().delay(18000).hide(2000);
    
    var timer = setInterval(function(){
        
        fun();
        
    },20000)
    
    function fun(){
        
        $(".question").eq(cur).show().delay(18000).hide(2000);
        
        cur += 1;
        
        if(cur >  total) {
            
            alert("done");
            clearInterval(timer);
            clearInterval(countTimer);
        }
    }
    
    var countTimer = setInterval(function(){
      
      cou -= 1;
    
    $(".count").text("CountDown : " + cou);
    
    
    if(cou === 0)
        cou = 20;
    
    
    
},1000);

    
})
            
        </script>
    </body>
</html>
Ehsan
  • 12,655
  • 3
  • 25
  • 44