Widgets for Moodle

It's often nice to be able to jazz up a Moodle site with little relevant things that make the site feel dynamic. A while back I wrote about this when I was experimenting with the twitter feeds from the professional societies for my Micro course. Thought it was worth revisiting this as a more general topic.

Let's use a recent example. For Senior Seminar, the instructors always make a big deal about the fact that we've synched our watches to the official regional time relative to GMT - it stressed to the students how serious we're going to be about timeliness. As I set up my Moodle site this year I thought it would be cool to get that clock embedded into the Moodle site as opposed to just having a link to it like I had in the past. The key term here is "widget" - it refers to a snippet of HTML code that you can insert into a site that allows something to be displayed. A quick search of "GMT time widget" found a myriad of options out there. 

Here's just one of many such links: http://weatherandtime.net/widgets-gallery.html

On this page I chose one of the forms that I like - the Apple apple sounds good. Now it let me choose the city, then it spits out a little HTML code that looks like this: 

"<script src="http://weatherandtime.net/swfobject.js" type="text/javascript" ></script><div id="div_clock_06" style="text-align:center; margin:auto auto;width:145px; height:185px;"><div style="padding:0px 1px 1px 1px;position:absolute; z-index:100; color:#239C34; text-align:center; width:145px;height:auto;"><a style="color:#239C34; text-decoration:none;font-size:12px;" href="http://weatherandtime.net/en/North-America/United-States/New-York-City-time.html" title="New York City time">New York City time</a></div><span id="swf_clock_06">&nbsp;</span></div><script type="text/javascript" language="Javascript">swfobject.embedSWF("http://weatherandtime.net/clock_06.swf", "swf_clock_06", "145", "185", "10","clock_06.swf", {city: "18103",lang:"en",color:"#239C34"}, {menu:"false",wmode:"transparent",allowScriptAccess:"always"}, {id:"clock_06",name:"clock_06"});</script>"

Now go ahead and copy that (except for the quotes on the end). Now go to your moodle site for your class, and 1) use the "add a block" function, choose "html" then 2) edit the block as follows: - in the "content" section, click on html which brings up a subwindow.Paste the html code into it and voila! you may need to refresh the page before it shows. I've embedded the code below so you can see what it should look like - These widgets exist for a ton of things - so just search for some whenever something pops into your head that you think would be useful for your course site.

New York City time