Been done? Yes of course it has! However you don’t learn anything unless you get stuck in and have a go yourself and that is exactly what I did during an empty half hour period I had the other day (slow lecture). Whilst at university I am doing a lot of timed tasks (ten minutes etc.. as opposed to days) and the timers used are always a mobile phone timer or horrible Powerpoint countdown presentation. I wanted to write something which is simple to build on to create a JS version to ultimately integrate into online resources and lessons (Eg: this task will take you ten minutes. Click here to turn on the timer…).
The code at the bottom of this post is the raw HTML file I wrote. I obviously made it into a Wordpress plugin as well. see below example.
Example
Yes, it’s basic but it works well for demonstrative purposes.
Usage
write sb_countdown in square brackets in a post or page and you will get the above example. If you want to edit the text or style it then just open the plugin file and right near the top is a few defines to get you going. I didn’t spend a lot of time on it so didn’t create an admin page. I may well do in the future though.
The Download
SB JS Countdown Timer (1.42 KB)Raw HTML Version
<html>
<head>
<title>Countdown Timer</title>
<style>
body {
font-family: tahoma;
}
#countdown_div {
font-weight: bold;
font-size: 56px;
}
#body_wrapper {
padding: 10px;
margin: 20px;
}
</style>
<script>
function do_countdown() {
var start_num = document.getElementById("value").value;
var unit_var = document.getElementById("countdown_unit").value;
start_num = start_num * parseInt(unit_var);
var countdown_output = document.getElementById('countdown_div');
if (start_num > 0) {
countdown_output.innerHTML = format_as_time(start_num);
var t=setTimeout("update_clock(\"countdown_div\", "+start_num+")", 1000);
}
return false;
}
function update_clock(countdown_div, new_value) {
var countdown_output = document.getElementById(countdown_div);
var new_value = new_value - 1;
if (new_value > 0) {
new_formatted_value = format_as_time(new_value);
countdown_output.innerHTML = new_formatted_value;
var t=setTimeout("update_clock(\"countdown_div\", "+new_value+")", 1000);
} else {
countdown_output.innerHTML = "And... Stop!";
}
}
function format_as_time(seconds) {
var minutes = parseInt(seconds/60);
var seconds = seconds - (minutes*60);
if (minutes < 10) {
minutes = "0"+minutes;
}
if (seconds < 10) {
seconds = "0"+seconds;
}
var return_var = minutes+':'+seconds;
return return_var;
}
</script>
</head>
<body>
<div id="body_wrapper">
<form id="countdown_form" onsubmit="return do_countdown();">
Countdown from: <input style="width: 50px;" id="value" />
<select id="countdown_unit">
<option value="1">Seconds</option>
<option value="60">Minutes</option>
<option value="3600">Hours</option>
</select>
<input type="submit" value="Go" />
</form>
<div id="countdown_div"> </div>
</div>
</body>
</html>
Hmmm… Another brainwave! That’s a clever one, turning it into a WP plugin.
As it turns out, I’m thinking about setting up a few pages with timed exercises! Now, I’m a bit of a n00b with JS so I’m not sure where to put something that is triggered when the counter hits zero – such as proceeding to a different page, where e.g. questions related to the shown text are presented. Something like that.
Could you point me in the right direction to do that?
It’s ok. If you don’t know a lot about JS then it’s not immediately obvious what to do. If you want to just time out a page then a timed redirect would do the job. However using my plugin you can display the actual countdown which is a nice bonus I think.
To go to a different page then simply look in my code for the ‘else’ after ‘if (new_value > 0) {’ where it should be a combination of JS and a PHP constant. Simply bin that line and replace it with ‘document.location=”http://www.yoururl.com”;’
Let me know if it doesn’t make sense and I shall post some example code.
thanks
Sean