(For more resources on Moodle, see here.)
Introducing the SIMILE timeline widget
The Massachusetts Institute of Technology (MIT) has developed various visualization and data manipulation tools as part of the SIMILE project. One of these is a free/open source timeline JavaScript widget, which takes time-based data as input and creates an interactive timeline that scrolls from left to right and contains popup panes and links. A timeline for the life and career of Monet is as follows:
You can view more examples on the web site, http://simile-widgets.org/timeline/.
In order to use the timeline widget we need these components:
- The Moodle timeline filter, containing the SIMILE timeline Javascript libraries
- A timeline data file, in XML or JSON (Javascript Object Notation) format
- Photographs to show in the popup panes
- A web page to host the timeline
We will deal with installing the filter later, but first we must decide on the subject for our timeline. If you visit the home of SIMILE, http://simile-widgets.org/timeline/, you will be able to explore timelines for the assassination of John F. Kennedy, the life of Claude Monet, and other examples. Timelines can be granular to the minute or hour, as in the case of the assassination. Or they can be spread over centuries or millennia—this is currently the limit for the widget.
A suitable subject for our young audience would be significant or important inventions. This can encompass subjects as diverse as printing, paper, penicillin, steam, and the computer. And these inventions originate in different parts of the world, which adds an extra dimension to the subject.
Now that we have our subject, a search on Google reveals some useful links, including a list of the top 10 inventions, http://listverse.com/2007/09/13/top-10-greatestinventions/. We may or may not agree with a list like this, but it acts as a useful starting point and aide memoire. There are pictures here, and more information and images on other websites including Wikipedia.
To progress from ideas to our timeline, we need to create an XML data file. One of the easier tools to help us produce the XML is a syntax highlighting text editor, which we will install now.
If you already have a text editor on your computer that you think is suitable, skip this section.
Installing a text editor
We have our subject, so the next step is to install some editing software to help us create our XML timeline file. Though most operating systems including Windows contain simple text editors, it will be helpful to install an editor that features syntax highlighting for various computer languages including XML.
Some general-purpose text editors are:
- Notepad2 for Windows, a simple open-source editor, distributed under a BSD license (http://opensource.org/licenses/bsd-license.php). It is a small download, less than 300 kilobytes, from http://flos-freeware.ch/notepad2.html.
- Notepad++ for Windows, distributed under a GPL license. Download it from http://notepad-plus-plus.org.
- TextWrangler for Mac OS X, distributed under a Freeware license (not open-source), http://barebones.com/products/textwrangler/.
- Most flavors of Linux and Unix include the vi or vim text editor. Or use Emacs or your favorite editor.
We will carry on and install Notepad2 for the examples in this article.
Time for action – installing Notepad2
To install Notepad2 on Windows, visit the website http://flos-freeware.ch/notepad2.html in your browser and follow these steps:
- Under the Downloads section, find the link to the notepad2.zip file. Download it to your computer.
- Open the file notepad2.zip with the Unzip program available on your computer (the one built-in to Windows XP or later. Or Winzip, 7zip, or similar).
- Extract all the files in notepad2.zip to a directory on your hard drive, for example, C:apps2Notepad2.
- In your new directory, click on the file Notepad2.exe with your right mouse button. Choose Create Shortcut from the context menu that appears.
- Name the shortcut Notedpad2, and copy it to the clipboard.
- Now in Windows Explorer on Windows 7, go to the directory C:Users{USER}SendTo (or on Windows XP, go to the directory C:Documents and Settings{USER}SendTo). In each case {USER} is your username. Paste a copy of the shortcut in the directory. (Note, you will probably see a shortcut for Notepad, the basic editor included in Windows in this directory. You may want to delete it to avoid confusion.)
- Go to your Desktop and paste the shortcut there as well.
Whew! Notepad2 is a little fiddly to set up, but don’t worry, its easy to use.
What just happened?
We downloaded and installed a text editor for Windows called Notepad2. This has a feature called syntax highlighting, which as we will see helps us to write the XML file for our timeline widget.
Note that the shortcuts we created are useful in different contexts. The SendTo shortcut is useful when we wish to edit a file—simply select it in Windows Explorer, right-click, and choose SendTo | Notepad2 in the context menu. The Desktop shortcut is useful for creating new files.
We also found that there are many alternatives for Windows, Mac OS X, and other operating systems. These included Notepad++ for Windows, TextWrangler for Mac OS X, and vi/vim and Emacs for Linux.
We have added a shortcut for the editor to the SendTo menu in Windows, as shown below:
Now that we have a text editor we can create the timeline XML.
