Tutorial: Creating a timing control in Frog’s FDP

June 18, 2012

A while ago, I built a widget in Frog’s FDP which sets the content of a page based on the time of day.  This is really handy for us, as it allows access to Flash games and social networking outside of lessons, but switches them off during lessons.

I’ve spent some time trying to work out the best way to turn this into a widget for Frog, but the complexity needed to make it general and the instructions that would have to accompany it made it all seem like it would never really work.  So instead, ahead of Frog’s annual interNational Platform’s Conference, I thought I’d post this tutorial here.  I’ll be speaking at the conference, as well and I’m fairly certain there’ll be workshop videos posted shortly afterwards.

I’m quite pleased with the widget.  If only because it originally began life in PHP and I had to learn the FDP code in order to remake it.

The Code

First off, we need to set up the page.  Easiest way to do this is to get the skeleton code from Frog’s FDP generator

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> xmlns=”http://www.w3.org/1999/xhtml”      xmlns:frog=”http://fdp.frogtrade.com/ns/“> <head>  <title>Time of day</title>  <meta name=”frogLib” content=”1.0″ />  <frog:roles>  

 </frog:roles> <script>

//<![CDATA[

…. Our code goes here …..

//]]>

</script>

</head> <body> 

</body></html>

Next up, we need to create a function that’s going to be run when the page loads:

var GetTime = function(data) {

};

And run it

GetTime();

Now, inside the function we need to set up some variables:

var currentTime = new Date();

var dayNames = new Array(“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”);

var day = dayNames[currentTime.getDay()];

currentTime uses the new Date() function built into JavaScript to become an all encompassing date object.  This means you can tag onto it code like getDay() and it will bring back a number corresponding to current day of the week, e.g. Sunday = 0, Monday = 1, Tuesday = 2 etc…  I’ll also use currentTime to get the minutes and hours:

var mins = currentTime.getMinutes();

var hours = currentTime.getHours();

hours = hours*100;

So, I can get the name of current day by putting that number into the array dayNames I created.  I could do all this with just numbers and miss out this step but I find it’s easier later on. The reason I’m getting the days of the week is that our school runs a two-week timetable and on Wednesday finishes at 2pm for staff development.  Also, it allows the fun stuff to be accessible on weekends at any time.

The time of the day is going to be treated as numbers, with the hours as hundreds and minutes as units, e.g. 9:10am becomes 910:

var tim = hours+minutes;

We run a four period day with lessons 75 minutes long, so I now need to tell the function what the start and end times are:

var p1start = 900;

var p1end = 1015;

var p2start = 1035;

var p2end = 1150;

var p3start = 1150;

var p3end = 1305;

var p4start = 1350;

var p4end = 1505;

And on Wednesday’s these times are different:

if (day == “Wed”) {

p1start = 900;

p1end = 1015;

p2start = 1035;

p2end = 1150;

p3start = 1235;

p3start = 1400;

p4start = 1401;

p4end = 1402;

}

This IF statement simply changes the variables if the variable day is set to Wed.

The final variable needed is one I’ve named naughty.  This should give you an insight into my sense of humour.

var naughty = 0;

if (day == “Sat” || day == “Sun”) {

} else {

   if (tim>p1start && tim

        naughty = 1;

   }

   if (tim>p2start && tim

        naughty = 1;

   }

   if (tim>p3start && tim

        naughty = 1;

   }

   if (tim>p4start && tim

        naughty = 1;

   }

}

So, we set naughty to 0, then we check to see if today is on a weekend, if it is, naughty remains at 0.  If not, we now check to see if the current time, tim is during one of the lessons.  If it is, naughty is set to 1;

if (naughty<1) {

document.write(“Use document.write to add your code“);

} else {

document.write(“<center><BR>You cannot use this widget during lessons<BR><BR></center>”);

}

If naughty is set to 1, then the page returns a message saying:

You cannot use this widget during lessons

If naughty is set to 0, you can use embed Flash files, or iframes or whatever you wish simply using document.write to fill in the code.

Looking through this code, you’ll probably see why it would be so hard to wrap it up as a generic timing widget, given the different number of periods each school uses.  Hopefully, you can see how you’d be able to adapt this to suit your needs.

You could (as I have done previously) build the entire page using multiple IF bricks entirely within Frog’s toolkit and I’m sure non-Frog users can see how easy it is to run the code as pure JavaScript instead of being inside the FDP wrapper.  I’ve gone further with this and used the FDP preferences to control what appears in the non-naughty section, so I only have one html page which can display different content, but that’s adding a whole extra level of complexity.  I’ll turn that into another tutorial.

Here’s the code in full:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”       “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

xmlns=”http://www.w3.org/1999/xhtml”   xmlns:widget=”http://www.netvibes.com/ns/“>

<head>

<title>Game Timer</title> 

<meta name=”frogLib” content=”1.0″ /> 

<script>  

//<![CDATA[

var GetTime= function(data){

var currentTime = new Date();

var dayNames = new Array(“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”);

var day = dayNames[currentTime.getDay()];

var mins = currentTime.getMinutes();

var hours = currentTime.getHours();

hours = hours*100;

var p1start = 900;

var p1end = 1015;

var p2start = 1035;

var p2end = 1150;

var p3start = 1150;

var p3end = 1305;

var p4start = 1350;

var p4end = 1505;

if (day == “Wed”) {

p1start = 900;

p1end = 1015;

p2start = 1035;

p2end = 1150;

p3start = 1235;

p3end = 1400;

p4start = 1401;

p4end = 1402;

}

var tim = hours+mins;

var naughty = 0;

if (day == “Sat” || day == “Sun”) {

} else {

if (tim>p1start && tim

naughty = 1;

}

if (tim>p2start && tim

naughty = 1;

}

if (tim>p3start && tim

naughty = 1;

} if (tim>p4start && tim

naughty = 1;

}

}

if (naughty<1) {

   document.write(“Use document.write to add your code“);

} else {

document.write(“<center><BR>You cannot use this widget during lessons<BR><BR></center>”);

 }

};

GetTime();    

//]]>  

</script>

</head>

<body>

 

</body> </html>

Advertisements