Posts Tagged ‘Teaching’

Live Countdown Timer using Javascript

October 10th, 2009

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.

Countdown from:

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">&nbsp;</div>
 </div>
 </body>

</html>

6 comments »

Posted in Teaching, Time Savers, Tutorials, Wordpress

Tags:

Learning Event Generator

September 26th, 2009

The learning event generator is something which I was shown on the first day of my PGCE. It was demonstrated and was intriguing to say the least! It would be an interesting way to allow the children we teach to decide their own activities.

I have been in a coding mood today so thought that I would bash together a tiny little PHP script to emulate the same thing. Yes it’s basic but works from two text files which are defined in the first few lines of the file itself. It’s not the most elegant bit of code I have ever written but if you know anything about PHP or have a web server then why not have a fiddle and see what you can make it do?

Consider this… it doesn’t have to be learning events. Why not use it as a kind of ‘What shall we do tomorrow?’ kind of thing. eg: ‘Do a 5 mile run with a friend dressed as a horse’ or ‘Do go out and get a bit merry’.

The Code

<?php

$cwd = getcwd();
$outcome_source = $cwd . '/' . 'activities.txt';
$method_source = $cwd . '/' . 'methods.txt';

$outcomes = file($outcome_source);
$methods = file($method_source);

$outcome = trim($outcomes[array_rand($outcomes)]);
$method = trim($methods[array_rand($methods)]);

echo 'Do ' . $outcome . ' as a ' . $method . '.';

?>

The Download

The file is available as a download here: Learning Event Generator (1.23 kB)

References

The original idea is available on the following website and is credited to John Davitt

No comments »

Posted in Personal Blog, Teaching, Tutorials

Tags: