Creating a Media-rich, interactive timeline

Demo: Part apart b (This is one video split into two parts)

 embedding the timeline on homepage (or any post)

Check your group conversation page for the links to your Google sheet and other links.

 

Steps

Preparation

For each event/time period, you will need to prepare:

Events (time points): What are the times to share in order to tell your story?

 

Media: media could be an image or a video

To recall the image to the timeline, they must be web-accessible. Either copy the url of an online image. Or upload the image to WordPress (add>media) and copy the URL of that image. Or use DropBox/OneDrive/GoogleDrve. (Make sure their share setting is in a way that everyone with link can view the file.

 

Type :  you might want to separate different categories.  Create a very short list for your group. These are different aspects of your group project. For example, for Industrial Revolution: technology; culture; infrastructure; etc.  OR for Ancient Toilet group, it could be : Roman; Greek; etc.

 

Spreadsheet entry

Watch the demo for Timeline here: Part apart b (This is one video split into two parts).

Use the files posted to your Canvas Group Discussion.

 

NOTE:

Do NOT leave an empty row

DO NOT delete any column

DO NOT change column labels on the first row

 All entries must have at least a start year

your slides are arranged chronologically, regardless of their order in the spreadsheet.

 

 TIPS

Find color number  here  • pick the color you like. Copy HEX#

Use <br/> for going to the next paragraph. (It may not work more than once per slide.)

 

Q&A

http://timeline.knightlab.com/#help

 When using the Google Spreadsheet to configure your timeline, if you put the word title in the type column, that slide will be put at the front, regardless of the values in the date columns. See the Google Spreadsheet documentation for more information.

TimelineJS’s text fields (headline, text, caption, and credit) all accept HTML markup. A full tutorial on HTML is outside the scope of this FAQ, but here are a few basics:

Wrap paragraphs in <p></p> tags to create line breaks.

Wrap text in <b></b> tags for bold text and <i></i> for italics