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.
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.
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:
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:
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”.
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.
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.