stopwatch for online exam

gabi456
gabi456 used Ask the Experts™
on
Hello

I am developing an online exam that i need to show the user a clock ticking down in time (needs to show seconds also).

For example, the exam is 30mins so i need it to start at 30 then tick down and when it reaches 0 to show a message that the time is up.

Also the time needs to pulled from the DB of which each exam has a time field and that it needs to be pulled from there.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Engineer
Commented:
Something like this perhaps?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coffee Timer</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<script type='text/javascript'>
  //------------------------------------------------------------------
  // Global variables
  //------------------------------------------------------------------
  var timerID  = null
  var started  = null
  var startVal = 225
 
  //------------------------------------------------------------------
  // Name: D2()
  // Role: Prepend a '0' (if necessary) to make a two digit number
  //------------------------------------------------------------------
  function D2( val ) {
    return ( val < 10 ) ? '0' + val : val;
  }
 
  //------------------------------------------------------------------
  // Name: field()
  // Role: Look for document element having specified ID attribute
  //------------------------------------------------------------------
  function field( id ) {
    var obj = document.getElementById( id );
    if ( !obj ) {
      alert( 'Specified element not found: id = "' + id + '"' );
    }
    return obj;
  }
 
  //------------------------------------------------------------------
  // Name: reset_clock()
  // Role: Reset timer field value
  //------------------------------------------------------------------
  function reset_clock( id ) {
    var obj = field( id )
    var ss  = field( 'startstop' )
    if ( obj ) {
      if ( timerID ) {
        clearTimeout( timerID )
        timerID = null
        started = null
      }
      obj.value = D2( parseInt( startVal / 60, 10 ) ) + ':' + D2( parseInt( startVal % 60 ) )
      if ( ss ) {
        ss.value  = 'start'
      }
    }
  }
 
  //------------------------------------------------------------------
  // Name: start_stop()
  // Role: Used to start/stop the specified timer
  //------------------------------------------------------------------
  function start_stop( obj, id ) {
    var timer = field( id )
    if ( timer ) {
      var val = timer.value;                // Current MM:SS value
      if ( obj && obj.type == 'button' ) {
        if ( obj.value == 'start' ) {
          if ( /^(\d{1,2}):(\d{2})$/.test( val ) ) {
            startVal = parseInt( RegExp.$1, 10 ) * 60 + parseInt( RegExp.$2, 10 )
          } else if ( /^(\d+)$/.test( val ) ) {
            startVal = parseInt( val, 10 )
            alert( 'startVal: ' + startVal )
          }
          obj.value = 'stop';               // change button from start -> stop
          started = ( new Date() ).getTime()
          showTimer( id )
        } else {
          clearTimeout( timerID )
          obj.value = 'start';              // change button from stop  -> start
          timerID   = null
          started   = null
        }
      } else {
        alert( 'Specified element missing, or of wrong type' );
      }
    }
  }
 
  //------------------------------------------------------------------
  // Name: showTimer()
  // Role: Used to update the specified timer field
  //------------------------------------------------------------------
  function showTimer( id ) {
    var obj = field( id )
    if ( obj && obj.nodeName == 'INPUT' ) {
      var curr = ( new Date() ).getTime()
      var diff  = ( curr - started ) / 1000
      var val = startVal - ( parseInt( diff ) )
      obj.value = D2( parseInt( val / 60 ) ) + ':' + D2( parseInt( val % 60 ) )
      if ( val > 0 ) {
        timerID = setTimeout( 'showTimer("' + id + '")', 100 );
      } else {
        var ss = field( 'startstop' )
        if ( ss ) {
          ss.value  = 'start'
        }
        timerID = null
        started = null
        alert( 'Done' )
      }
    }
  }
 
</script>
</head>
 
<body onload='reset_clock("clock")'>
<form name='dummy' action=''>
  <table border='1'>
    <tr>
      <td>
        &nbsp;<input type='button' value='&nbsp;reset' onClick='reset_clock("clock");'>
      </td>
      <td>
        <input type='button' value='start' id='startstop' onClick='start_stop(this,"clock")'>
      </td>
      <td>
        <input type='text' id='clock' size='4' value='03:45'>
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Open in new window

HonorGodSoftware Engineer

Commented:
You could easily change the default value (line 124) to be 30 minutes (i.e., '30:00')

Author

Commented:
I need it to be much more customized to my specific code eg, the timer starts automaticaly as the exam starts, no need for stop or start buttons etc...
HonorGodSoftware Engineer

Commented:
That's easily done.

Make the "input" (line 214) be "readonly", like this:

<input type='text' id='clock' size='4' value='30:00' readonly>

and have the countdown start when the page is loaded, and if the timer expires, instead of displaying an alert() message, issue the submit.
HonorGodSoftware Engineer

Commented:
I disagree.

http:#a24895135 provides the solution

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial