Tuesday, February 14, 2012

Add a countdown timer to your site

by Alan Regan

Add a countdown timer to your class or project site


A dissertation professor wanted to express the importance of planning ahead. On the home page of her class site, she wanted an obvious countdown timer -- something big, bold, and real-time. Something that would eliminate the possibility of: "Oh, I wasn't aware it was due so soon."

There are many ways to accomplish this task. I will be using code created by Robert Hashemian from his site http://www.hashemian.com/  To help our Pepperdine faculty, I placed the source code within our Courses/Sakai service to reduce the possibility of service interruption.

Example:  Open example countdown timer.


Part One: Create your HTML page in Resources

  1. Go to Resources in your class or project site.
  2. Click Add and select Create HTML Page.
  3. Enter the text you want your students to see on your home page.
  4. Click Source at the top left of the rich text editor.
  5. Place your cursor in the text where you want to insert your timer.
  6. Copy the following code:

    <p>
<font size="5">
<script language="JavaScript">
TargetDate = "04/20/2012 5:00 AM UTC-0800";
BackColor = "paleturquoise";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script><script language="JavaScript" src="https://courses.pepperdine.edu/access/content/user/alan.regan/public/countdown.js">
</script>
</font>
</p>


  7. Paste the code.
  8. Modify the date and time to your desired countdown "TargetDate." (NOTE: UTC-0800 sets the format to US Pacific time.)
  9. Click Source again.
  10. Click Continue.
  11. Enter a Name for the page (e.g. Home Page).
  12. Click Finish.

Part Two: Copy the link to your new HTML page

  1. Click Actions next to your new HTML page.
  2. Select Edit Details.
  3. Scroll down.
  4. Click Select URL (for copying) next to "Web address (URL)."
  5. Copy the highlighted text.

Part Three: Modify your Home tool

  1. Click Home in your site's left menu.
  2. Click Options.
  3. Scroll to the bottom.
  4. Place your cursor in the box next to "Site Info URL."
  5. Paste the HTML page link in the "Site Info URL" box.
  6. Click Update Options.
Your revised Home tool should now display your HTML page and your countdown timer.

If you consider yourself pretty handy with HTML and want to modify the color scheme of the script, feel free. You can find color names at the following W3Schools.com site. 

IMPORTANT: You cannot enter the above code directly onto your Home page's text editor. You must use the HTML page method for the code to render properly. If you follow the above steps, it will work correctly.
    Posted by at