H5P Guides

Timeline Tutorial

The Timeline content type allows you to place a sequence of events in chronological order. For each event, you may add images and texts. You may also include assets from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

Not using H5P yet?
Click "Get started" button to explore all possible ways for using H5P

Example

Here's the Timeline content we'll create in this tutorial:

When to use Timeline

You can use a Timeline content type for a content where you want to present a sequence of events in chronological order.

Step 1: Topic

The topic of this content is the History of berries

Step 2: Creating a timeline

Select the New content option and choose Timeline from the list of Content types:

Step 3: Timeline Editor

The Timeline editor should now appear. It consists of three main parts:

  • Title,
  • Timeline and
  • Dates

Step 4: Title

Type the following text in the Title field: History of berries

Step 5: Timeline

This part consists of content for a starting slide and some overall settings for the entire timeline.

HeadlineHistory of strawberries 
Body text: The strawberry plant is a member of the Rosaceae family and the genus Fragaria. Against the common belief that strawberry is a fruit, the fleshy red outgrowth is actually the receptacle of the strawberry flower.
Source: http://www.buzzle.com/articles/history-of-strawberries.html

Background image:
We will leave this blank since we want to use a different image on each slide

Asset
Mediahttps://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Half_a_strawberry.jpg/320px-Half_a_strawberry.jpg
Credits: Author: Jeff Kubina. License:  Creative Commons Attribution-Share Alike 2.0 Generic. URL: http://commons.wikimedia.org/wiki/File:Half_a_strawberry.jpg

You should get this:

Step 6: Dates

Next, we will add dates to our timeline. In Dates section fill in the 1st group with the following content:

Start date-234
End date-234
HeadlineOrigins
Body textThe history of Strawberries goes back over 2,200 years. The growth of wild strawberries in Italy can be traced back to 234 BC.
Assets
Mediahttps://upload.wikimedia.org/wikipedia/commons/5/55/Pomological_Watercolor_POM00004368.jpg
CreditLicense: Public domain. URL: https://commons.wikimedia.org/wiki/File:Pomological_Watercolor_POM00004368.jpg

You should get something like this:


To add a new Date item, click Add item button below the Dates group:

In the same way, fill in all the other dates with the following content:

Start date0023
End date0079
HeadlineEarly mentions of Strawberries
Body textLatin writers such as Apulius had cited the strawberry for its medicative purposes. Other writers such as Virgil and Ovid mentioned strawberry only in association with other wild fruits. Pliny (23-79 A.D.) was the last-known writer to mention this fruit.
Assets
Mediahttps://upload.wikimedia.org/wikipedia/commons/c/c1/Aardbei_Karina.jpg
CreditAuthor: Maksim. License:  Creative Commons Attribution-Share Alike 3.0 Unported. URL: http://commons.wikimedia.org/wiki/File:Aardbei_Karina.jpg

___________________

Start date: 1200
End date: 1300
HeadlineMiddle ages
Body text: In the thirteenth century, a famous Greek doctor 'Nicholas Myrepsus' had mentioned Strawberries in his paintings.
Assets
Mediahttps://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Bosch%2C_Hieronymus_-_The_Garden_of_Earthly_Delights%2C_central_panel_-_Detail_Strawberry.jpg/319px-Bosch%2C_Hieronymus_-_The_Garden_of_Earthly_Delights%2C_central_panel_-_Detail_Strawberry.jpg
CreditAuthor: Hieronymus Bosch. License: Public domain. URL: http://commons.wikimedia.org/wiki/File:Bosch,_Hieronymus_-_The_Garden_of_Earthly_Delights,_central_panel_-_Detail_Strawberry.jpg

You can add as many dates as you want to your Timeline.

Step 7: Finishing up

When you are done adding dates, save the node/article to view your finished Timeline.
You should now have the same result as the example on top of the page.  
Feel free to leave any comments or suggestions on how to improve this tutorial.