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.
Click "Get started" button to explore all possible ways for using H5P
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:
- Timeline and
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.
Headline: History 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.
Background image: We will leave this blank since we want to use a different image on each slide
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
Body text: The history of Strawberries goes back over 2,200 years. The growth of wild strawberries in Italy can be traced back to 234 BC.
Credit: License: 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 date: 0023
End date: 0079
Headline: Early mentions of Strawberries
Body text: Latin 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.
Credit: Author: 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
Headline: Middle ages
Body text: In the thirteenth century, a famous Greek doctor 'Nicholas Myrepsus' had mentioned Strawberries in his paintings.
Credit: Author: 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.
Thu, 05/04/2017 - 04:49
Is it possible to enter dates BCE (Before Common Era, as in BC or Before Christ)?
Thu, 05/04/2017 - 08:56
To enter dates before the
To enter dates before the common era, just use a negative value for the year.
Tue, 01/16/2018 - 15:05
Hi, ty for the information it helps alot but i try to make a timeline for the Big Bang about 13,7 Billion years ago and the timeline won't show up. H5P timeline draws everything until year 100 000 B.C., is there an intentional limitation?
Wed, 01/17/2018 - 13:33
Hi mansfredsteger,I checked
I checked on this you are correct. There seems to be a limit to how far the timeline can go back. H5P-Timeline provides a container to a timeline created by Knightlab. The problems looks like an actaul timeline object and their repository is located here. Unfortunately reading through their message in the repository they have no plans for future developments for this content.
Fri, 07/28/2017 - 10:31
would like to see tutroial explore all the ways of getting assets like videos, images, and links displayed optimally in the body of the timeline - especially assets that may exist only on in-house drives (not youtube) etc....
Tue, 08/01/2017 - 09:34
There's limited resources for
There's limited resources for creating detailed tutorials on the content types, if you're interested in this and have explored it somewhat I would love it if you could put together a tutorial to help others in the same situation. Including assets should be done through either uploading the file or pointing to a publicly available direct link to the source file.
Thu, 08/24/2017 - 17:36
this is a real good content type! thank you so much
I'm wondering if there's a way to edit the dates and call them steps?
I'm building a block that describes a process and I'd like to name the dates as steps...
When you'd manage to make this it would be a nice feature!
Fri, 08/25/2017 - 06:08
Nice idea psylentan. Please
Nice idea psylentan. Please head over to the Feature Request page for a better chance of this getting implemented.
Wed, 09/27/2017 - 12:01
Tidslinje om Lars Jacobsen Hætta
Denne tidslinja er en oppgave fra NDLA: http://ndla.no/nb/node/150474?fag=52253
Fri, 10/06/2017 - 03:43
I could not use h5p in my moodle 3.1+
I installed this module, but when I am going to use it, I get the following errors:
could anyone help me?
Fri, 10/06/2017 - 04:54
Hi sachi 842,In order give
Hi sachi 842,
In order give your bug report the best chance of getting answered, please include the following information:
The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!
Fri, 10/06/2017 - 17:26
information about the problem
1.Steps to crecreate the bug:
- go to any course and turn on edition
- in any topic click on Add an activity or resource
- select h5p interactive content
- when I go to create the content I see then following
2. The platform I am using:
- Moodle 3.1+
3. Mobile or desktop
- at the moment I am working on desktop
- I am working with chrome
5. H5P plugin version
- H5P 1.5
6.H5P content type version
- any content. I am trying to create course presentation and timeline
Mon, 10/16/2017 - 14:24
Unable to communicate
Like the error message says, it seems like you are unable to communicate with the H5P.org API, which is necessary for finding new content types. This can be caused by several different factors, but most likely your server setup.
You can check if your setup is missing any of the required extensions by visiting the H5P settings page in Moodle, then click to disable the "Use H5P Hub" option, and re-enable it. You will get a dialog explaining what is wrong with your setup if the plugin is able to detect it. See https://h5p.org/installation/configure-php for more information.
If you are not able to resolve it this way you need to do a bit more digging into the problem. Check your PHP error log when the server fails like this for any indications on what is wrong. If you don't know how to do this consult https://docs.moodle.org/33/en/Debugging and any php error debugging guides online. If you post your php errors and your phpinfo() information here we might be able to help you further.
A temporary solution can be to completely disable the H5P Hub. This will make your plugin not contact the H5P.org API, so it will not matter if you have a communication error. This can be done by unchecking the "Use H5P Hub" checkbox in the H5P Settings. Be aware that this is not recommended and will make it much harder for you to get new libraries and keep up to date on the latest content types.
Wed, 03/07/2018 - 19:38
How can I change the design of the timeline.
Change a font, align the title to the right side and increase the images?
Thu, 03/08/2018 - 02:41
Hi Irith, The easiest way is
The easiest way is to use a PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for more details.
Sun, 04/08/2018 - 10:50
I was able to change its font size and color.
Could not resize photos.
Another problem: There is an arrow on the right(.vco-slider .nav-next .icon) when pressed , It does not go forward. Only when you push the bar forward , the arrow go back.
This is the page.
Mon, 04/09/2018 - 14:25
Hi Irith, could you send the
Hi Irith, could you send the link again?
Mon, 04/09/2018 - 15:00
this is the link
Wed, 04/11/2018 - 14:45
I think you may have to
I think you may have to rewrite your changes so that the CSS doesn't affect the arrows. I'm assuming that changing the alignment of elements has propogated to the arrows and stacked them.
Wed, 06/27/2018 - 05:13
How can I add a picture to my timeline other than the small thumbnail on the timeline?
I want to add a photo next to the headerline and body text of each period (similar to the example on h5p.org)
Wed, 06/27/2018 - 10:12
Hi Mona,Image upload is not
Image upload is not supportedin this content. To add an image it needs to be hosted in a different site. You can find the list under Assets -> Media.
Tue, 03/26/2019 - 08:57
What is the function of an "era"? It's not explained
Wed, 03/27/2019 - 07:13
Hi Gerhard,The era is
The era is basically a collection of several years. The easiest example I can give you is if you have several dates inserted accross several centuries you can group them by centuries using the era option.
Wed, 03/27/2019 - 14:54
Wed, 05/29/2019 - 16:51
Is it possible to call a video hosted at jwplayer rather than on youtube?
thank you very much
Thu, 05/30/2019 - 05:43
Hi bruno,This is possible if
This is possible if you can get the source URL for the video it usually ends with .mp4.
Mon, 06/03/2019 - 11:00
MP4 link don't work
Yes I tested a direct link in MP4 but it does not work directly in the frieze. The thumbnail is truncated and the video launches into a new tab unlike a Youtube link.
my link : https://content.jwplatform.com/videos/N77G9PN1-n86M0iRi.mp4
Tue, 06/04/2019 - 05:15
Hi Bruno,I'm afraid that
I'm afraid that jwplayer's API is not fully compatible with Timeline.
Tue, 06/04/2019 - 09:12
But Is it not possible to access the html code of the editor to directly integrate the code?
Wed, 06/05/2019 - 04:17
Hi Bruno,I'm afraid I'm not
I'm afraid I'm not sure. Maybe someone in the community has implemented something similar and they could provide us some tips on how they did it.
Fri, 07/05/2019 - 00:14
Is there any way to put a photo into the timeline (different pics in each individual date) where it is visible (not just in the thumbnail)?
Fri, 07/05/2019 - 07:14
Hi Meeraya,This is possible
This is possible by placing the link to the image under "media". Please note that the content type was created by Knightlab and it doesn't follow the usual format of other content types.
Mon, 09/16/2019 - 01:21
dates in timeline
in the strawberrie example are the dates in the timeline in different heights. When i create a timeline all dates are at the top of the timeline. can i change that?
Tue, 09/17/2019 - 00:09
the problem was
i had a date from the beginning of the timeline to the end
Tue, 09/17/2019 - 18:17
Hi xjuleyx,I'm afraid not.
I'm afraid not. The markers for the dates are automatically placed by the content and only changes whenever the the date entries overlap each other.