Current version: 1.1 ()
To set up a simple countdown timer on a survey page, simply insert this code into your page right where you want the timer to appear:
<div id="timer"></div>
<script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/timer_v1.1.js"></script>
<script type="text/javascript">
new Timer(10*60);
</script>
Replace the section highlighted in red with the time, in seconds, from which you wish the timer to count down. The timer above is set for 10 minutes (multiplied by 60 to convert to seconds). I could also have inserted it as 600 if I wanted to. But I didn‘t.
Customization
There are a number of ways to customize the timer. This is done by adding parameters to the basic Timer() function, separated by commas. The parameters must be listed in order, and only parameters on the end can be omitted. So, if you want to set the last parameter, you have to set all the parameters before it. If you want to use the defaults for all those parameters, just set them as 0 or null.
The full parameter list is as follows: Timer(seconds, message, redirect, position, corner, container)
Alert Message
By default, when the timer reaches zero, it will display a popup box saying, “Time is up. Please continue on to the next section.” You may change this message like so:
<div id="timer"></div>
<script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/timer_v1.1.js"></script>
<script type="text/javascript">
new Timer(10*60, 'This is the new message. Isn\'t it great?');
</script>
Please note that if you want to use single quotes in the message, you need to add a backslash ( \ ) in front of it. If you want a line break, you should insert “\n” (that’s a backslash and the letter n). But other than that, go wild!
Redirect
If you wish, you may set it so that the form on the survey page is automatically submitted and the participant sent to the next page when the timer reaches zero. By default, this is turned off, but to turn it on, insert this code:
<div id="timer"></div>
<script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/timer_v1.1.js"></script>
<script type="text/javascript">
new Timer(10*60, 0, 1);
</script>
Essentially, 0 turns it off and 1 turns it on. Easy peasy!
Positioning
By default, the timer will show up on the page exactly where you put it in your HTML code (‘static’ positioning). But sometimes you might want to put it in one of the corners. There are two ways to do this: Either you can put it in the corner of the page (‘absolute’ positioning), or the corner of the window (‘fixed’ positioning). With a fixed timer, it will always be visible, no matter where a participant is on the page, but with an absolutely positioned timer, it is anchored to the page, so when the participant scrolls down, the timer will disappear out of the window.
To change the position of the timer, you need to use two parameters:
<div id="timer"></div>
<script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/timer_v1.1.js"></script>
<script type="text/javascript">
new Timer(10*60, 0, 0, 'fixed', 'top-right');
</script>
This timer will be fixed to the top-right corner of the window, and will always be visible. Acceptable values for the first parameter: static (default), absolute, or fixed. Acceptable values for the second parameter: top-left (default), bottom-left, top-right, or bottom-right. The second parameter is only used if the first parameter is set to absolute or fixed.
Multiple Timers
This may not be useful for most, but if you wish to have more than one timer on the same page, the code must be changed a little bit.
<script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/timer_v1.1.js"></script>
First, place the code above somewhere near the top of the page (right underneath the <title> tag would be a good spot). It must appear in the code before either of the timers are created.
Then, place the following code sections on the page where you want the timers to display:
<div id="timer1"></div>
<script type="text/javascript">
new Timer(10*60, 0, 0, 0, 0, 'timer1');
</script>
<div id="timer2"></div>
<script type="text/javascript">
new Timer(5*60, 0, 0, 0, 0, 'timer2');
</script>
Note that each <div> tag must have a unique ID name; this can be named whatever you like, but the Timer() parameter must match it.
Anything More Complicated
I’ve tried to make the timer script as flexible as possible, but if you need something more complex, I can probably come up with something that will suit your needs. Just email me (Jeff Hughes) and ask! I can probably make time for it. (Ha!)
