views:

115

answers:

1

Hello everyone,

I'm trying to figure out the best way to create a timer that is associated with typing within a specified form field.

Whenever someone starts typing the timer starts. When the person stops typing for a restroom break, phone call, etc. the timer pauses and continues where it left off when the person starts to type again. Once the person is done typing they hit the submit button and the time gets recorded.

Someone had suggested a JS OnFocus but that won't stop the timer when someone leaves their desk for a minute or two. Someone else also suggested a time out limit but what happens if it times out and the person returns to finish their typing.

Any suggestions on the coding or where to look would be appreciated.

  • JJ
+1  A: 

I think your title is a little misleading although your post is tagged correctly. None of this (unless you use AJAX) will be in PHP. Your best be would probably to use timeouts with keyup or keydown events -- restart the timeout timer every time the event is fired. If the time runs out, you stop the global timer that keeps track of everything. I'm not sure I fully understand

Someone else also suggested a time out limit but what happens if it times out and the person returns to finish their typing.

Isn't that the idea? They would take some sort of break during which the timer would pause and then resume when they return? If that is the case, it will be very difficult to determine what a "break" is versus what a "finished" is. In that case you would need to define some constant timeout after which it is assumed they are done. Otherwise, you will probably need some sort of "I'm done" button or event that either is clicked or fired based on some user action.

Edit in response to your comment: Basically, you have a couple of options. You will need at least one AJAX call if you want to store the time data on the server. This will fire when the "Done" button gets clicked. You will need JS handlers to handle the keydown/keyup events. These can either trigger AJAX calls which in turn start/stop timers on the server written in PHP. Alternatively you could have these start/stop timers on the client implemented in JS. Basically, the way I see it, (this is pesudocode, not actual JS)

function keyDownHandler{
  resumeGlobalTimer();
  restartTimeOutTimer();
}

function timeout(){
  pauseGlobalTimer();
}

function resumeGlobalTimer(){
  if (globalTimerIsRunning)
     //global timer wasn't paused, do nothing
  else{
    someTimer.resume();
    globalTimerIsRunning = true;
  }
}

So basically, when a key is pressed, you start a timer that waits to see if another key is pressed within the time limit and it also calls a function that resumes the global timer. If a key is pressed within the time limit, that timeout timer is reset to the starting value and starts ticking down again. If it times out, it assumes the person walked away and pauses the global timer. The resume function checks to make sure the timer isn't already running (ie, not paused) and then attempts to resume it.

At the end of everything, an AJAX call will upload the final global value to PHP.

Hope this helps!

Chris Thompson
I wouldn't say misleading. I'd actually chalk that up to me not knowing any better in regards to should it be PHP or Javascript. Originally I tagged it as PHP but a mod came and changed it.Regarding the time outs... let's say someone types for a minute straight then walks away long enough for the timeout to occur. When they come back and start typing again, I want the timer to start where it left off. The only time a timer is DONE is when the user hits "Submit" or as you put it an, "I'm done" button.So Chris, you think this could definitely be done in JS but also maybe AJAX?
jfj3rd
Sorry, didn't mean to sound accusatory :-) There aren't enough characters in my comment so I'm going to edit my response.
Chris Thompson