Warning: Personal post – my new job

September 6, 2015

Once again I am breaking the editorial guidelines for this blog.  This post isn’t a tip, trick, useful software or hardware.  Last time I did this was in 2012, so I think I’m allowed one every three years.

willywonka

After 12 years of working for Cramlington Learning Village, I’ve moved on.

I’m thrilled to announced that I am joining FrogEducation as their Technical Customer Advocate.  My role is to work for and with Frog schools to help them get the most out of their platform.

I’m a huge fan of Frog, it has twice transformed CLV.  We embraced the concept of a VLE when we first bought Frog in 2008, creating a VLE which allowed teachers to push information to students and interconnect all our resources.  This was only 4 years after Facebook was founded, 3 years after YouTube, online learning was barely a concept in most UK schools.  Cramlington already had an intranet, containing hundreds of lesson plans – but this was a resource for teachers.  Frog3 flipped that by bringing our students online in a safe and secure portal.

In 2014, we upgraded to FrogLearn (still using Frog3 to manage it – recommended for upgrading schools at the time –  I don’t know if that’s still the case).  The effect was again transformative.  Frog3 (as good as it is) made lesson creation a slow process.  FrogLearn makes lesson plan writing easy.  Our staff (sorry, CLV’s staff) seem to have overwhelmingly embraced this, each writing dozens of lesson plans – last count was 3500 sites (1000 more since I spoke at Frog15).  These lesson plans sit within FrogDrive, but I helped created a department structure to aid in organising them and recreated the Accelerated Learning template first introduced to Cramlington in 1997 with the help of Alistair Smith.

You can watch me talk about it at Frog15:

It’s this experience and knowledge I hope to bring to all Frog schools and while I leave behind good friends and dedicated colleagues at CLV, I can’t wait to start!

future

 


FIXED: Frog’s Kerboodle widget

December 14, 2012

Kerboodle is an online subscription resource site.  Frog is our VLE.   And Frog’s official Kerboodle widget allows single-sign-on from Frog to Kerboodle.   So no different usernames or passwords to remember.

Kerboodle

Kerboodle’s Frog widget. Big, isn’t it.

Unfortunately, when I downloaded the official widget from Frog, we discovered a really odd issue.  For our students and teachers on Windows XP machines running IE8* the widget doesn’t appear as a button?    The image is there, but that’s it??  My best guess is that some obscure security setting prevents part of the widget code from running.

Boring background bit (and some name checking)

Fortunately, I was at a Microsoft event hosted at the impressive Harton Technology College in South Shields.   Sean O’Shea (@SeanOfTheNorth) from Microsoft had invited me there to have a look at Surface and Office 365 and both are really very cool.   But more about these in future posts.  Frog had a stand there and Frog’s partnership manager Adrian Bantin (@thebantin) was on hand.

Adrian is a really nice guy and when I explained the issue, he sent me the FDP code that sits behind the widget.

Solution

I found a solution.  This might not work for you, but it works for us.  I’ve also sent it to Frog so they can pull it apart and see if they like it.   But in the meantime, this seemed to be the code which caused the issue:

widget.onLoad = function(){

var link = widget.createElement(‘a’,{‘onClick’:’javascript:openKerboodle();’,’style’:’cursor: pointer;’});    

link.setHTML(‘<img src=”http://appstore-misc.frogdev.co.uk/resources/images/uwa/kerboodle/logo.png” /></br>’);  

widget.setBody(link);                

}

Now, I think what’s happening is that this line:

var link = widget.createElement(‘a’,{‘onClick‘:’javascript:openKerboodle();‘,’style’:’cursor: pointer;’});

isn’t rendering in the browser.   But there’s more than one way to skin a cat or in this case call a Javascript function.  Which is what this code is doing.  It’s saying when you click on the image, run the function openKerboodle().

Another way of doing exactly the same thing is:

onClick=”javascript:openKerboodle();“>

This method is more traditional, the code goes inside the body tag instead of inside an onLoad function and most importantly (seems to) work.

Full code

xmlns=”http://www.w3.org/1999/xhtml”      

xmlns:frog=”http://fdp.frogtrade.com/ns/”      

xmlns:widget=”http://www.netvibes.com/ns/“>    

<head>        

<title>Kerboodle</title>        

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

// <![CDATA[
src
=”
// ]]>https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>

    <script>            

 <![CDATA[

                widget.onLoad = function(){                                   

openKerboodle = function(){                        

 UWA.Data.getText(‘http://www.kerboodle.com&#8217;, function(data){displayHtml(data);});                    

};               

  }

                displayHtml = function(data){                    

window.open(data);                               

}

 ]]>    

</script>

</head>

<body>

openKerboodle();”> http://appstore-misc.frogdev.co.uk/resources/images/uwa/kerboodle/logo.png /> </a>

</body>

</html>

Here’s a link to the text version, just in case the browser corrupts the code.  Make sure you download the file.  For some reason, the code doesn’t show up in the MediaFire browser.

 

 

*Can’t use other browsers.   Please don’t bore me with how wonderful Chrome and Firefox are.   Don’t care, not my department.  We’re stuck with IE.


Google Forms – passing user details from a VLE

November 27, 2012

The tutorials for how to do this already exist on Google Docs, but whenever I see a survey posted on our VLE, this extra is never included.

Getting started

I’m assuming if you’re reading this you already know how to set up a Google form.  I’m assuming that not because I want to make anyone (including me) an ass, let alone recite a cliché.  No I’m assuming, gentle reader, that you know how to make a form in Google for two reasons:

  1. You want more functionality from your forms
  2. It’s really easy

    Create a form in Google Docs

    This is the current Create button in Google. By the time this post is published I fully expect Google to have changed the design completely

Quick primer

Just in case, I’m going too fast:

  • log into Google Docs
  • click on the Create button
  • click Form

Once your Form is opened you can set about adding questions in all sort of styles, from text entry and paragraphs to multi-choice, scales etc… But let’s be honest, you know all this.

Get to the “fun” bit

Alright, I went as fast as I could.  So, assuming (there I go again) you’re using a similar set up to Cramlington, where surveys are posted as links inside notices and do not require our students to be logged into Google Docs, you will have no idea who the student is who is completing your survey.Easiest solution is to include a username field.   Generally our students are honest and will fill this out, but that’s assuming they spell correctly and include the tutor code part of their username.   It would be so much simpler to just pass those details from our VLE.

Fortunately, we use the Frog VLE which exposes the user’s username in a simple Frog tag: [user_username]

This username can be added to the Google Form address in the following manner:

https://docs.google.com/spreadsheet/viewform?formkey=lots of letters&entry_0=[user_username]&

What does that do?

The actual address of the form is:

https://docs.google.com/spreadsheet/viewform?formkey=lots of letters

There’s a link to the form at the bottom of the edit page.  The rest comprises of:

& tells your browser that the formkey variable has ended.

entry_0 is a new variable and corresponds to the first field in the form.  If you put entry_1 you could set the second variable in the list and so on.

[user_username] is our Frog tag

You can see the example for yourself here:

And that’s it.  Simple.

Now all I have to do is make our 100+ teachers read my blog.


Creating custom fields in Frog forms

October 7, 2012

Frog’s forms are great.  They might not be as simple to use as their Google counterparts, but the results are always user tagged for easy reference and they come with an export button.

Export a database as a CSV

Google can suck it

Alright, maybe I’m over playing their usefulness, but while it is possible to get usernames to automatically pass into Google, it’s a lot easier in Frog.

The only real issue with Frog forms though is that you’re limited to the bricks in the toolkit and the formatting they offer.

The Form Bricks

It’s like they want you to fail

You get everything you need to make a survey or question set, but sometimes you want a different layout for a question than the ones available.

Example

Recently, I wanted to have a survey where users could rate along a line.  You’ve all seen the sort of thing, 1 – 6 strongly agree to strongly disagree.  This would normally be achieved using a radio set:

A Frog Radio Set brick

You can recreate the functionality of this question type, but not the look, as the options can only appear vertically.  That’s when I remembered a trick I employed with Frog forms a few years ago before the hidden field brick was available.

The Trick

Frog bricks are essentially packets of html pre-coded that you can drop in and a page will build.   I know this because if you view the source of any Frog page, you can find the html behind each brick.

Code example

The relevant section of the source code for the radio set example. CTRL + F will be your best friend here.

If you view the full size version of the picture, you’ll see the HTML code which creates the radio set.  This is the relevant bit:

<table border=0><TR><TD align=right valign=top>Radio Set Example</TD><TD width=250>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’1′>&nbsp; option 1<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’2′>&nbsp; option 2<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’3′>&nbsp; option 3<BR></TD></TR></TABLE>

Those of you familiar with HTML will recognise this is standard radio but code, although, note the name of the radio options:

name=’frg_Radio_Set_Example’ 

Frog’s bricks place frg_ in front of any option name you create.  All of this is leading up to the actual trick, which is that you can use an HTML brick inside a Frog form as long as your field name starts with frg_

The catch

Actually, no you can’t. If you drop in a form field inside an HTML brick with frg_ on the front and test the form, your field isn’t passed into the results.  Which is strange because I swear it used to be.

The Fix

Studying the source code again, I did spot another line of code, just underneath the end of table tag:

<input type=hidden name=form_details[] value=’frg_Radio_Set_Example’>

The field name frg_Radio_Set_Example matches the radio set name, so I tried adding it to the HTML brick and tested the form.   Success!  I’ve no idea what it does, but clearly it’s important (at least for the radio set brick).

So my final code for the HTML brick looks like:

<table border=”0″ width=”500″>
<tr>
<td valign=”bottom” rowspan=”2″>
Strongly agree
</td>
<td align=”center”>1</td>
<td align=”center”>2</td>
<td align=”center”>3</td>
<td align=”center”>4</td>
<td align=”center”>5</td>
<td align=”center”>6</td>
<td valign=”bottom” align=”right” rowspan=”2″>
Strongly disagree
</td>
</tr>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’1′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’2′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’3′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’4′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’5′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’6′>
</td>
</tr>
</table>
<input type=hidden name=form_details[] value=’frg_rating_example’>

And what it looks like:

Radio buttons in Frog created with an HTML brick

And once again Google can suck it

I like to imagine Larry Page reading my blog just asking “why?”.

Hey we can all dream.

Of course in reality, if Larry Page even did read this blog, I’ve probably blown any chance of ever working for Google all for a really, really weak joke.


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>


Using Frog to manage digital signage

March 17, 2012

Like lots of schools, we have a number of televisions placed around the site to pass on information and celebrate the school in a bright colourful way.

We use the MagicInfo Pro system, which allows a single user to control the TVs either as if a single display, as individuals or in groups.

MagicInfo Pro

The system has worked quite well for a while, (mainly because I had nothing to do with it).  It was all controlled by one of our Assistant Heads.  It really only came to my attention when he left.

The problem with the software is that only one user had been set up to manage it.  Others could manage the system, but any change made by one user effectively undid the work of the other user.  What was needed was a content management system allowing multiple users to set the content for different sections of the same display.

Sound familiar?

This is where Frog comes in.  Rather than having to train multiple staff on a new system and explain the dangers of being able to undo others work, we set up MagicInfo to point to several Frog pages via iframes.

We have a page containing all of our current Whole School notices.  An autoscroll script in an html brick on the page keeps the moving before jumping back to the top to start again.  This allows any teacher to post a notice for display onto the screens.

The other section of the screen is linked to another Frog page.  This one points to a streaming feed of BBC News, courtesy of the very handy widget demo-ed at the Frog Conference and found in the Widget Store.  (Sorry, I don’t know who made that widget, but thank you.)

Content on our Digital Signage

Updating

What’s made setting this up worth it was the ease of which anyone with editing rights can alter the pages:

Want to replace to the News programme with photos congratulating a sports group?  No problem, just create a PowerPoint of the photos and use iSpring Free to make it a looping presentation.

Want the student radio station to broadcast over the screens at lunchtimes?  No problem, let’s make a Flash file which picks up the time of day and switches the content to another page and let’s have the same Flash file switch the content back at the end of lunch.  (If anyone wants to know make their own Flash file or just use mine, drop me a line here – I might even try to make it into a Frog widget).

Controlling the digital signage through Frog has also allowed us to set up one screen to be controlled by the Drama department and another by the Sixth Form.  The teachers involved have full editing control over their bits, while not affecting the others.

The digital signage used to be a not-insignificant chunk of one person’s time.  Each week they created new content, changed messages and generally refreshed the digital signage.  Now the entire system is constantly renewed automatically.  The News feed and student radio keeps it dynamic.  Add to this, the ability to drop in slideshows with only about 5 minutes work and we have a digital signage system doing exactly what it should.


My job

July 23, 2010

Cramlington made it official yesterday, elevating me to the lofty role of VLE Coordinator.

A VLE (when used best) is the portal for everything the school does.  Like The Force and Gaffa tape, it binds us together; providing a one-stop shop for lessons, homeworks, notices and safe social networking.  While many platforms are little more than file storage, a VLE should be so much more.   Teachers can pull down resources for the class, and push out work to the students.  As gateway, a VLE can be the launching pad to encourage research and collaboration and independent learning.  A communal meeting point, it can bring a school together through shared experience.

We use Frog as our Virtual Learning Environment which can be used “out of the box” but like all products pushing it to its limits takes additional effort.   I’m very pleased and honoured not only by the school’s senior team for this promotion but also from the reaction of the teaching staff which has been positive to say the least.

 Don’t worry loyal readers 🙂  I’m sure my new duties won’t interfere with writing this blog and more 20 tips and poor english real soon!