Moodle: Developing an Interactive Timeline Widget

5 min read

(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,

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,, 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, 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:

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 in your browser and follow these steps:

  1. Under the Downloads section, find the link to the file. Download it to your computer.
  2. Open the file with the Unzip program available on your computer (the one built-in to Windows XP or later. Or Winzip, 7zip, or similar).
  3. Extract all the files in to a directory on your hard drive, for example, C:apps2Notepad2.
  4. In your new directory, click on the file Notepad2.exe with your right mouse button. Choose Create Shortcut from the context menu that appears.
  5. Name the shortcut Notedpad2, and copy it to the clipboard.
  6. 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.)
  7. 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.


Please enter your comment!
Please enter your name here