stopwatch for online exam

gabi456 used Ask the Experts™

on 2009-07-20

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.

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

View Solution Only

HonorGodSoftware Engineer

Verified Expert

Commented: 2009-07-20

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

gabi456

Author

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

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.

Commented: 2009-08-13

I disagree.

http:#a24895135 provides the solution

stopwatch for online exam

Premium Content

Premium Content

Explore our Suite of Services