Timeline JS

Timeline JS is a very simple timeline tool that can easily produce media rich timelines including images, video and audio simply by adding the URL of the piece of media that you wish to use.

In order to use the tool you need a Google Sheets account (or Google Suite account (as Google Apps is now called)) as it works by filling in a Google spreadsheet which you then publish to the net. The tool is free to use and the great thing about it, being based on Google Sheets, several children can work collaboratively on one timeline at the same time. 

I used to use a timeline tool called Dipity to do this type of work in class but it seems to be pretty unstable these days so this tool is much better.

Here's just one idea that I've done with collaborative timelines: we were studying Victorians so the class were split into groups with each class being required to add different aspects of Victorian life to the timeline - inventions, events in the life of Victoria, scientific discoveries etc.

Using Timeline JS

  1. Go to the Timeline JS website and download the spreadsheet template;
  2. Put the spreadsheet in a shared folder in your Google Drive that the children can access and rename it to something pertaining to your topic;
  3. Open the sheet and go to Files > Publish to the web. Make sure that the entire document is published as a web page and the box at the bottom is ticked to automatically republish changes (see illustration below);
  4. Copy and paste the link given to you by Google Sheets (the link is that shown in the box in the Publish to the web dialogue box illustrated below) into the Timeline website (section 3);
  5. Now drop the Options link in the Timeline JS website and set attributes such as move navigation to the top, start at end of timeline, change font etc (I particularly like the # deep linking option which allows you to link directly to any slide in your timeline);
  6. Copy the embed code from Timeline JS and paste it into your blog post under the Text tab in the normal way and publish the page. Your timeline is now online in your blog and ready to have all the information added by the children.

Editing the Spreadsheet

Once the children have been given access to the spreadsheet they need to focus on the following columns:

Columns A, B and C for the date of the event (or column I);

Column J, Headline: This is the title of your slide;

Column K, Text: This is the text of your slide and can include weblinks to articles or blogposts. 

Column L, Media: this could be a link to an image (e.g. Flickr image), a link to a Youtube or Vimeo video, sound clip, Wikipedia page, Google Map location etc. Simply get the URL of your chosen resource and paste it into the column, no need for any embed codes etc;

Column M, Media Credit: a column to add the link to the source of the image (normal copyright rules apply;

Column N, Media Caption: a caption for your uploaded image etc;

Column R, Background: this can either be in the form of an image (paste the image URL (e.g. an image from a Flickr account, or from Wikipedia into the column) or a simple hex colour code (a six digit code preceded by a #). Here's a basic list;

Note: because you have already published the timeline to your blog changes will automatically be made as children update the spreadsheet. If you wanted to, you could wait until the timeline spreadsheet is finished before publishing to the web and embedding into your blog (3 to 6 above). I don't recommend this, however as children cannot see the changes they are making to the spreadsheet.

Example of a timeline built with Timeline JS

Here's a link to a blogpost with a timeline that I have built: http://irontwit.creativeblogs.net/race-history/

Most of the images on the timeline are stored in my Flickr account. Where I didn't have an image I pasted the Google Maps location of the event.

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk