Archive for the ‘Tutorials’ category

« Older Entries
Newer Entries »

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>

2 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:

PHP File Rename Script

September 26th, 2009

Ever downloaded an archive of files and all of them had file names about 200 characters wrong with the same string in each? It’s more common that you might think… If you look at any audio archives you may have acquired, the chances are that the file names will have the quality in it (192 or 128 etc..). Additionally if you have video files the resolution or quality might be present.

I, for one, don’t really care what the quality is in the file name and would prefer it to be readable. I spend a lot of time removing this extraneous data so decided to make a short PHP script to remove certain strings on mass.

See the following code which can be run from the command line using the following format:

php -f <filename> <text_to_remove> [int live_mode=0]

Code

#!/usr/bin/php

  [int live_mode=0]';
    exit;
} else {
    $remove = $argv[1];
}

$live_mode = (int)$argv[2];

if ($dir = scandir($cwd)) {
    foreach ($dir as $file) {
        $path = $cwd . '/' . $file;

        if (!in_array($file, $ignore)) {
            if (!is_link($path) && !is_dir($path)) {
                if (strpos($file, $remove) !== false && $file != $_SERVER['SCRIPT_FILENAME'] && $file != $remove) {
                    $output .= 'Renamed "' . $path . '" to "' . $cwd . '/' . trim(str_replace($remove, '', $file)) . '"' . "\n";

                    if ($live_mode) {
                        $new_path = $cwd . '/' . trim(str_replace($remove, '', $file));
                        rename($path, $new_path);
                    }
                }
            }
        }
    }

    if ($output) {
        $output = ($live_mode ? 'LIVE':'TEST') . ' MODE' . "\n\n" . 'Text to remove from filenames was "' . $remove . '"' . "\n\n" . $output;
    } else {
        $output = 'There were no matches by your criteria: "' . $remove . '"';
    }    

    echo $output . "\n\n";
}

?>

Download

To download the code in file form click the following link: File Rename Script (783 bytes)

No comments »

Posted in PHP, Time Savers, Tutorials