PDA

View Full Version : 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
<!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
<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:


<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 !

Nile
03-27-2012, 11:57 PM
That should work. My code didn't because getSeconds only got the remaining from the leftover fraction of an hour.