Moodle: Developing an Interactive Timeline Widget

(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:\apps2\Notepad2\.
  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.


(For more resources on Moodle, see here.)

Creating the timeline data file

We will press on with creating the XML data file for our timeline widget, and we will be also using the editor that we just installed.

Time for action – creating the XML

Follow these steps to start creating our timeline file:

  1. On Windows, go to the desktop. Browse to the shortcut for Notepad2 and double-click to launch the editor.
  2. First press the Save icon, browse to a suitable location on your computer, perhaps My Documents, and choose a name for the timeline file. It should end with the extension.xml. I chose simile-invent.xml. Press the Save button.
  3. Returning to the editor, start typing the code that you see below. Note the use of angle brackets < , >, and </ to mark up the start and end of elements, the equals sign = for attributes, and the double-quote character " around attribute values. This is XML, which is a little like HTML, but more general in its use, and stricter in its syntax.

    <?xml version="1.0" encoding="utf-8"?> <data xml:lang="en"> <event> The Chinese invention... </event> <event> Charles Babbage... </event> </data>

  4. Finally, press the Save icon again.

What just happened?

We dived into XML and started to create our timeline file. We started by saving the file in Notepad2 with an .xml extension. The editor deduces what language (XML) it is displaying based on the file extension.

Let's dissect the code that we typed:

  • The line starting <?xml ...?> is termed as the XML prolog and tells the client, for example Internet Explorer, what version of XML and character encoding it is looking at. You should use UTF-8, which is a Unicode character encoding. This is widely adopted around the world, and allows you to type accented and non-Latin characters.
  • The next line contains the start of a data tag, denoted <data>. And it contains an attribute xml:lang="en". This tells us that the document is written in English (fr for French, de for German…). Well, we knew that! Still it is important to state it, so that for example a screen reader can correctly speak the document to a person who is blind.
  • The next three lines contain an event element, which starts with <event> and ends with </event>. And inside is some text. Now we're getting somewhere!
  • You will then see another event element, and </data> to close the data element. There can only be one outer-most or root element, in this case data. But there can be as many events as we wish.

This allowed us to see the syntax highlighting, as the following screenshot. As we can see, syntax highlighting helps us to distinguish between XML elements, attributes, values, text, and comments.

Text editors like Notepad2 allow you to edit the syntax highlighting schemes, for example by adjusting the colors, or by associating a scheme with an additional file extension.

As we will see it is useful to view the XML file as we create it in a browser. You can use most modern web browsers, including Mozilla Firefox, Internet Explorer, Opera, and Safari. Go to the menu bar in the browser, choose File | Open…, and browse to your XML file. Press the Open button.


When you view the XML file in a browser, you may see something like the following screen. Firefox displays a scary message.

XML Parsing Error: mismatched tag Expected: </event>. Location:… Line Number 8, Column 3:…

What just happened?

All modern browsers incorporate what is termed an XML parser. This is a program that analyses and interprets the XML. Whereas with HTML, browsers do their best to recover from badly formed markup, the XML Specification requires that XML parsers must stop at the first error and output an error message. This is called Draconian error handling.

The error above means that the final closing </event> tag is missing. Note that the line number and column are generally at the first point after the error that the software detects that something is a miss. Try working back from that point to find the error itself. And of course the visual appearance of errors will vary in different browsers.

Other common errors:

  • Not well-formed: This may mean that there is a missing angle bracket > at the end of a tag, or that an attribute is not correctly quoted.
  • Undefined entity: In order to display an angle-bracket (greater/less than symbol) or other characters correctly in the output they must be encoded as entities. There are only five character entities allowed in XML: &lt;, &gt;, &amp;, &apos;, &quot; (less than, greater than, ampersand, apostrophe, quote). HTML allows many more character entities (for example, &copy; for the copyright symbol)—these must be encoded as numerical entities, for example, &#169; in XML. Refer to this list,
  • No element found: The final closing tag </data> may be missing.

As you can probably see, Web browsers serve a useful purpose in checking the wellformedness of the XML, before we use our timeline file in Moodle. If all goes well and with a following wind you will see output as shown in the following screenshot:

Now seems an appropriate time to install the Timeline Widget filter.

Installing the Timeline Widget filter

Before long we will want to embed the timeline stored in our XML file. As you will probably not have the necessary permissions yourself, this is an appropriate point to ask your friendly IT support person to install the Timeline Widget filter on your behalf. You may wish to look over their shoulder.

Time for action – installing the filter

Ask your IT support person or system administrator to follow these steps:

  1. Visit the entry for the Timeline Widget filter in the Moodle plugins database,, (if you need to search, don't confuse it with the Timeline course format).
  2. Read the compatibility and installation notes. Download a Zip archive of the widget that is compatible with the version of Moodle on your server.
  3. Unzip the widget code and rename the resulting directory to timelinewidget. Copy it to the filter directory on your server, for example, /var/www/moodle/filter/timelinewidget/.
  4. On your local site, visit the Moodle Site Administration notifications page (there are currently no database changes for this fi lter, but it's best to check).
  5. Visit the Moodle Site Administration | Plugins (Modules) | Filters | Manage Filters page. You will see something like the figure below. Scroll down the list of filters to the disabled / grayed out filter named Timeline Widget (Timelinewidget in Moodle 1.9). Select On from the drop-down menu next to it (click on the closed eye to enable it in Moodle 1.9).

What just happened?

We found and downloaded the Timeline Widget filter from the Moodle website. The filter is available under the GNU General Public License. It is written by yours truly and incorporates the MIT SIMILE Javascript libraries. Our IT support copied the code to our Moodle installation, and enabled the filter in Moodle's administrator interface and will then have handed back to you.

Job done and thank you! We have started the timeline XML and installed the filter. Now we need to make a short diversion and plan an activity that will be linked to from within the timeline. We will call it a follow-on activity.


In this article, we learned how to create a timeline widget.

Specifically, we covered:

  • What a SIMILE Timeline looks like
  • Installing a syntax highlighting text editor, namely Notepad2
  • Creating and checking the timeline XML

You've been reading an excerpt of:

Moodle 2 for Teaching 4-9 Year Olds Beginner's Guide

Explore Title
comments powered by Disqus