Creating a ‘FrogLearn Widget’

First things first.  You can’t actually create a FrogLearn widget and have it appear in the sidebar, but this hack lets you come close in terms of functionality.

meme_morpheus

What it is

In a nutshell, I built a webpage which allows users to set up a date countdown.  Pressing the submit button generates a URL which can be pasted into a FrogLearn Embed a Website widget.

Frog's Embed a Website widget

Embed a Website

What you need

In this example, I created a webpage with jQuery embed and code to run a date countdown.  It’ s not my countdown code.  I got it from trulycode.com.   I’ve just adapted it into a form so that anyone can quickly set up an event countdown.

You can download the web page here

When you first open the page, you’ll see this form, with instructions:

Form to add a date

Filling in the form, adding  title, date and time and clicking Create a countdown sends you to the same page (with  few variables added).  The page now looks like this:

Countdown display

And that’s it!

If you copy the address of the webpage and paste that address into the Embed a Website widget, you’re able to create a customised, easy to edit “widget”.

Summary

Hopefully you can see the potential for this kind of hack.   It’s not limited to just this one resource.   By creating a simple form which generates a URL, we can start to add some Frog3 type customisation into FrogLearn.

Notes:

I’ve adapted this quite heavily so that the page will run locally.  All the CSS is on the page and it points to Google’s hosted jQuery.  This means it needs to be connected to the internet.  If you have your own server, then I’d suggest installing jQuery and repointing the links.

Feel free to adapt the code, although if you’re going to put it on your own blog, then a link back to here would be nice.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: