How to make Javascript count-up timer ?

**k12onos** · 03-26-2012, 01:08 PM

Hi everyone

I'm trying to create a quiz using php & html forms. I am planning to count the time used by the user to complete the form using javascript, and then posting it in the database together with the score.

I've been searching around for an answer but most of them is the "count down and submit results when time is up" type.

I want the timer to count how much time it takes for the user to finish all the questions, and then together with the "submit" button for the questions it will pass on the time used to be stored in the database.

Could anyone give me some pointers? Any help would be very much appreciated

**vwphillips** · 03-26-2012, 02:19 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<input id="tst" />
<input type="button" name="" value="Start" onmouseup="timer.start('tst');" />
<input type="button" name="" value="Stop" onmouseup="timer.stop('tst');" />
<input type="button" name="" value="Continue" onmouseup="timer.tick('tst');" />

<script type="text/javascript">
/*<![CDATA[*/

var timer={

 init:function(id){
   this[id]={
   obj:document.getElementById(id)
  }
 },

 start:function(id){
  var obj=this[id];
  obj.srt=new Date();
  clearTimeout(obj.to);
  this.tick(id)
 },

 stop:function(id){
  clearTimeout(this[id].to);
 },

 tick:function(id){
  this.stop(id);
  var obj=this[id],sec=(new Date()-obj.srt)/1000,min=Math.floor(sec/60),sec=sec%60;
  obj.obj.value=min+':'+(sec>9?sec:'0'+sec);
  obj.to=setTimeout(function(){ timer.tick(id); },1000);
 }
}

timer.init('tst');
/*]]>*/
</script>


</body>

</html>

**k12onos** · 03-26-2012, 02:58 PM

Hi, thank you for your reply, but I'm still not sure of some things.. Do you mind helping me?

How do I make the timer start by itself when the page loads, and stop by itself (and pass on the total time required using POST. I'm not sure which variable would act as the "time used") when user click the submit button in the quiz form?

**Nile** · 03-26-2012, 05:30 PM

Code:

<script type="text/javascript">
var timer = {
    init: function() {
        this.startTime = (new Date()).getTime();
        return this;
    },
    stop: function() {
        // returns time difference (in seconds: getSeconds()) between start time and time that this function was called

		var difference = new Date();
		difference.setTime((new Date().getTime()) - this.startTime);
		return difference.getSeconds();
    }
};
var count = timer.init();
</script>

<form onsubmit="this['timerField'].value = count.stop()" method="post" action="http://google.com">
	<input type="hidden" name="timerField" />
	<input type="submit" />
</form>

**k12onos** · 03-27-2012, 02:58 AM

Hi Nile, thanks a lot for the reply

It worked but if the user take more than one minute time, the minute is disregarded and only the seconds are taken into account.

For example, 1 minute and 9 seconds time used will be returned as 9 seconds.

Is there anyway to prevent this?

**k12onos** · 03-27-2012, 11:10 AM

I worked around it and I managed to get this:

Code:

<script type="text/javascript">



function secondize(n)
{
if (n!=0) 
  {
  n= n / 1000;
  }
return n;
}



var timer = {
    init: function() {
        this.startTime = (new Date()).getTime();
        return this;
    },
    stop: function() {
        // returns time difference (in seconds: getSeconds()) between start time and time that this function was called

		var difference = new Date();
		var timeUsed=secondize(difference.setTime((new Date().getTime()) - this.startTime));


		return timeUsed;
    }
};
var count = timer.init();

</script>

There isn't anything wrong with the code right? now it always display the time as second, even with the decimals. Since I'm doing this for a timed quiz it's perfect

Thanks a lot for helping me !