Monday, 7 September 2015

Add visually-rich interactive timelines with Timeline JS to your Moodle Course


Timeline JS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.
Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, Wikipedia entries, and many other media types.

Create the timeline

  1. Click here to open the JS Google Spreadsheet template you will need to create your timeline. Please note that you will need to login to Google account to access the file. If you have never used Google Drive then you will see a confirmation screen (see below). Click Continue to attach your Gmail account to create a Google Drive.

  1. Once you have logged into Google Account you will see the file appear in your Google Drive inbox:
  2. Click to open the spreadsheet has loaded click ‘Use this template’ (top left corner).
  1. Once the spreadsheet has loaded click File from the menu option (top left) and select ‘Make a copy…’ and then rename the file.
  1. Amend the existing content in the example with your own dates, titles, links and information to your timeline. Leave the headings in row 1 as they are.
Start date and end date - 
  • To specify a year only: set your event for January 1 of that year with no specified time.
  • To specify a month only: set your event for the first day of the month with no specified time.
  • To specify a day: fill in all spaces as normal and choose to specify a time.
  • Note: if your event happened on January 1 of the year, you need to include a time to let Timeline JS know you want the date displayed. Similarly, if your event occurred on the first day of a month, you need the time or it will display with the month only.
  • Although adding an end date is an option, it’s not necessary. Leave it blank if you don’t want to include an end date.

Headline -
  • Including a link: If you are referencing an ongoing project at your newspaper, you may want to include links to past stories in the headline.
  • Adding links needs to be done in HTML. Here’s the code, just copy and paste: <a href=”www.yourURLhere.com”>Your headline text here</a>
Text -
Include a few lines of text about the event. Timelines work best when they centre around a project that is date-driven, with each event on the timeline leading up to a climax. Including major events and minor events with context is the best way to go.


Media - 
Only put what you really need so you do to overwhelm your viewer.
  • Wikipedia: include a link to the Wikipedia article. Timeline JS pulls in the title of the article and the first few lines and displays them next to your date, headline and text.
  • Video: you can pull video from YouTube, Vimeo or Dailymotion with the link.
  • Block quotes: These can be great if you want to feature a specific story. Using a bit of HTML, you can input some text and have a quote from a source to go alongside the text. You can also add a link to the article in the text section (see code above). To feature a quote in the media section use the following code in the media field: <blockquote>”This is where your quote goes.”</blockquote>
  • Website: grabs the front of a website. Paste a link in the media field. Remember that websites changes so if you want the page as displayed you may be better suited to insert a screen capture instead.
  • Google Map: add a link to the map in the media field.
  • Flickr photo: add a link to the photo in the media field.
  • Tweeter: paste a link to the individual tweet (not the user’s profile) in the media field. Timeline JS will display the tweet along with the person’s profile picture, name and username in the media section with your text to the right.
  • SoundCloud: add a link to the track in the media field.
  • Mobile pictures: to include an Instagram picture or a twitter picture, paste the link to the individual status into the media field.
  • A document: any type of Google document (PDF, DOC, PPT, PSD). Add a link in the media section and make sure to publish the document to the web.

Media Credit -


This section gives creators an easy way to credit the sources of the media in their timelines. For Flickr or YouTube media, credit the account at the least or the person who made the video if you know his name. If you use audio, credit who is speaking.

Media Caption -

Most of the time, you don’t need a media caption. Use it if you need to specify who is in a picture or video.

Type -
If you have a title slide, put “title” in the blank in this column. Otherwise, leave it blank.

Tags -
In Timeline JS, there is a general slider at the top and a smaller timeline at the bottom with more dates included. Adding tags in this section divides up the bottom section into rows. If you have two tags, there will be two rows with each post aligning its self vertically with the correct rows. The tag will also appear at the top of the event next to the date in the slide. You can have up to six tags.


  1. Once you have added your content to the spreadsheet go to the File menu and select Publish to the web.
  1. Copy the spreadsheet URL/web address link in the Publish to the web pop up box. Ensure the Automatically republish when changes are made has been selected. You only need to do the embedding and publishing once. After that, you can update the spreadsheet (via Google Drive) and it will automatically update the timeline.
  1. Navigate to the Timeline JS website and paste it into step 3 - ‘Make a timeline’ process.
  1. Click Preview your timeline in the above website link, which will display your timeline.
  2. If you are happy with the preview of your timeline copy the embed code which you can use in Moodle, a website or blog.
  1. Keep updating your timeline spreadsheet and the changes will be reflected in the data visualisation.

Embed timeline into Moodle course



  1. Navigate to your course and select Turn Editing On

2. Click on the Add an activity or resource.

3. Then select Label option, and click Add button.

4. Click on the Toolbar option to display all the options available for creating a label.

5. Click on Edit HTML Source option.

6. Paste the embed code from step 10 in previous section in the HTML source editor pop up box and then click update.

7. Click on Save and Return to course to finish.


Twitter: @SOASBLETech

No comments:

Post a Comment