title: How to create a timer per question using JavaScript
body: <p>I will like to achieve something in a quiz system.</p>
  
  <p>Right about now I have a quiz system that works perfectly well. It closes the quiz after 10:00 min is elapsed.</p>
  
  <p>But what I want now is, for each of the question there should be a timer. 
  So Question 1 would have 10 secs, Question 2 would also have 10 secs down to Question 20.</p>
  
  <p>So when you fail to answer any question within ten seconds, it automatically takes you to the next question.</p>
  
  <p>Right about now, what happens is that you must click on the next question button before it takes you to the next question, which is what I want to change.</p>
  
  <p>Below is the code that does the timer and submit after 10 min</p>
  
  <pre><code>&lt;script&gt;
           //function that keeps the counter going
          function timer(secs){
              var ele = document.getElementById("countdown");
              ele.innerHTML = "Your Time Starts Now";         
              var mins_rem = parseInt(secs/60);
              var secs_rem = secs%60;
  
              if(mins_rem&lt;10 &amp;&amp; secs_rem&gt;=10)
                  ele.innerHTML = " "+"0"+mins_rem+":"+secs_rem;
              else if(secs_rem&lt;10 &amp;&amp; mins_rem&gt;=10)
                  ele.innerHTML = " "+mins_rem+":0"+secs_rem;
              else if(secs_rem&lt;10 &amp;&amp; mins_rem&lt;10)
                  ele.innerHTML = " "+"0"+mins_rem+":0"+secs_rem;
              else
                  ele.innerHTML = " "+mins_rem+":"+secs_rem;
  
              if(mins_rem=="00" &amp;&amp; secs_rem &lt; 1){
                  quiz_submit(); 
              }
              secs--;
           //to animate the timer otherwise it'd just stay at the number entered
           //calling timer() again after 1 sec
              var time_again = setTimeout('timer('+secs+')',1000);
          }
      &lt;/script&gt;
  
  
  &lt;script&gt;
  setTimeout(function() {
          $("form").submit();
      }, 600000);
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the code that does the onclick to next question</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $('.cont').addClass('hide');
      count=$('.questions').length;
      $('#question'+1).removeClass('hide');
  
  
      $(document).on('click','.next',function(){
          last= parseInt($(this).attr('id'));     
          nex = last+1;
          $('#question'+last).addClass('hide');
  
          $('#question'+nex).removeClass('hide');
      });
  
      $(document).on('click','.previous',function(){
          last = parseInt($(this).attr('id'));     
          pre = last-1;
          $('#question'+last).addClass('hide');
  
          $('#question'+pre).removeClass('hide');
      });
  
      setTimeout(function() {
          $("form").submit();
      }, 120000);
  &lt;/script&gt;
  </code></pre>
  
  <p>Please note that I fetch my questions with Php Mysqli</p>