Create the timeline
- 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.
- Once you have logged into Google
Account you will see the file appear in your Google Drive inbox:
- Click to open the spreadsheet has
loaded click ‘Use this template’ (top left corner).
- Once the spreadsheet has loaded click File from the menu option (top left) and select ‘Make a copy…’ and then rename the file.
- 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.
- 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.
- 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>
- 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.
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.
If you have a title slide, put “title” in the blank in this column. Otherwise, leave it blank.
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.
- Once you have added your content
to the spreadsheet go to the File menu and select Publish to the
- 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
- Navigate to the Timeline
JS website and paste it
into step 3 - ‘Make a timeline’ process.
- Click Preview your timeline in the above website link, which will display your timeline.
- If you are happy with the preview
of your timeline copy the embed code which you can use in Moodle, a
website or blog.
- Keep updating your timeline spreadsheet and the changes will be reflected in the data visualisation.
Embed timeline into Moodle course
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.