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.
Click the "Get started" button to explore all of the possible ways to use 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.
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.
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
Media: https://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
Headline: Origins
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.
Assets
Media: https://upload.wikimedia.org/wikipedia/commons/5/55/Pomological_Watercolor_POM00004368.jpg
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.
Assets
Media: https://upload.wikimedia.org/wikipedia/commons/c/c1/Aardbei_Karina.jpg
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.
Assets
Media: https://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
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.
Comments
benchen
Thu, 05/04/2017 - 04:49
Permalink
Dates BCE
Is it possible to enter dates BCE (Before Common Era, as in BC or Before Christ)?
fnoks
Thu, 05/04/2017 - 08:56
Permalink
To enter dates before the
To enter dates before the common era, just use a negative value for the year.
manfredsteger
Tue, 01/16/2018 - 15:05
Permalink
BCE
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?
BV52
Wed, 01/17/2018 - 13:33
Permalink
Hi mansfredsteger,I checked
Hi mansfredsteger,
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.
-BV52
goty2001
Fri, 07/28/2017 - 10:31
Permalink
assets
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....
thomasmars
Tue, 08/01/2017 - 09:34
Permalink
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.
psylentan
Thu, 08/24/2017 - 17:36
Permalink
An idea
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!
BV52
Fri, 08/25/2017 - 06:08
Permalink
Nice idea psylentan. Please
Nice idea psylentan. Please head over to the Feature Request page for a better chance of this getting implemented.
cbrathlie
Wed, 09/27/2017 - 12:01
Permalink
Tidslinje om Lars Jacobsen Hætta
Denne tidslinja er en oppgave fra NDLA: http://ndla.no/nb/node/150474?fag=52253
sachi 842
Fri, 10/06/2017 - 03:43
Permalink
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:
https://www.screencast.com/t/wLrQo3pF
https://www.screencast.com/t/xwkmzj7a2
could anyone help me?
BV52
Fri, 10/06/2017 - 04:54
Permalink
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!
-BV52
sachi 842
Fri, 10/06/2017 - 17:26
Permalink
information about the problem
Hello BV5
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
https://www.screencast.com/t/qECopPNaTpo
2. The platform I am using:
- Moodle 3.1+
3. Mobile or desktop
- at the moment I am working on desktop
4. Browser
- 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
thomasmars
Mon, 10/16/2017 - 14:24
Permalink
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.
Irith Herman
Wed, 03/07/2018 - 19:38
Permalink
Timeline Styling
How can I change the design of the timeline.
Change a font, align the title to the right side and increase the images?
BV52
Thu, 03/08/2018 - 02:41
Permalink
Hi Irith, The easiest way is
Hi Irith,
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.
-BV52
Irith Herman
Sun, 04/08/2018 - 10:50
Permalink
Timeline Styling
Hi
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.
Thanks
Irith
tim
Mon, 04/09/2018 - 14:25
Permalink
Hi Irith, could you send the
Hi Irith, could you send the link again?
Irith Herman
Mon, 04/09/2018 - 15:00
Permalink
this is the link
http://www.amit.org.il/seventyisrael/
tim
Wed, 04/11/2018 - 14:45
Permalink
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.
ms_adham
Wed, 06/27/2018 - 05:13
Permalink
TImelines
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)
Thanks
Mona
BV52
Wed, 06/27/2018 - 10:12
Permalink
Hi Mona,Image upload is not
Hi Mona,
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.
-BV52
gerhardbeck
Tue, 03/26/2019 - 08:57
Permalink
era?
What is the function of an "era"? It's not explained
BV52
Wed, 03/27/2019 - 07:13
Permalink
Hi Gerhard,The era is
Hi Gerhard,
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.
-BV52
gerhardbeck
Wed, 03/27/2019 - 14:54
Permalink
Thanks
Thanks!
bproust
Wed, 05/29/2019 - 16:51
Permalink
media
hi,
Is it possible to call a video hosted at jwplayer rather than on youtube?
thank you very much
br
bruno
BV52
Thu, 05/30/2019 - 05:43
Permalink
Hi bruno,This is possible if
Hi bruno,
This is possible if you can get the source URL for the video it usually ends with .mp4.
-BV52
bproust
Mon, 06/03/2019 - 11:00
Permalink
MP4 link don't work
Hi,
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
thanks,
Bruno
BV52
Tue, 06/04/2019 - 05:15
Permalink
Hi Bruno,I'm afraid that
Hi Bruno,
I'm afraid that jwplayer's API is not fully compatible with Timeline.
-BV52
bproust
Tue, 06/04/2019 - 09:12
Permalink
html code
Hi,
But Is it not possible to access the html code of the editor to directly integrate the code?
bruno
BV52
Wed, 06/05/2019 - 04:17
Permalink
Hi Bruno,I'm afraid I'm not
Hi Bruno,
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.
-BV52
Meeraya.M
Fri, 07/05/2019 - 00:14
Permalink
Pictures
Hi there,
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)?
Thanks,
Meeraya
BV52
Fri, 07/05/2019 - 07:14
Permalink
Hi Meeraya,This is possible
Hi Meeraya,
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.
-BV52
xjuleyx
Mon, 09/16/2019 - 01:21
Permalink
dates in timeline
hi,
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?
xjuleyx
Tue, 09/17/2019 - 00:09
Permalink
the problem was
i had a date from the beginning of the timeline to the end
BV52
Tue, 09/17/2019 - 18:17
Permalink
Hi xjuleyx,I'm afraid not.
Hi xjuleyx,
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.
-BV52
kaleighschott
Tue, 09/08/2020 - 02:55
Permalink
Creating a Timeline
I would like to create a timeline but it is not coming up as one of my options under "new content." How can I gain access to creating a timeline?
BV52
Tue, 09/08/2020 - 18:43
Permalink
Hi kaleighschott,To provide a
Hi kaleighschott,
To provide a best possible experience for new users and to ensure that people use H5P.org only for trying out H5P (we've had more traffic than our server can handle lately, ref also the warnings when you create content, embed content and view the content) we are experimenting with which content types should be available here.
Check the getting started page for information on how you can use all the content types and use H5P for real. We unfortunately are not able to provide free hosting, only free software :) Hopefully you'll consider supporting the H5P Core Team by using H5P.com.
-BV
soobahkdo
Thu, 09/17/2020 - 20:10
Permalink
Display / Compare Two Timelines
Hello,
We have a use case where we would like to display / compare two timelines.
Vertically would be fine.
For example:
Timeline 1 would include important historical events like wars, famines, depresion, stock market crash, droughts, etc.
Timeline 2 would include important events in a particular person's life and their age at the time of the event.
The timeline comparision would coorelate the historcial events at a particular time with the person's life events and their age to illustrate how old the person was when they were going through a major historical event in a particular year/date.
A vertical timeline with the center line being the chronological year and which would allow users to scroll through the historial events on the left of the timelien and and/or scroll through the person's life events on the right would be fine.
Since both sets of timeline events would be centered around the year/date when they occurred, scolling the left or right timeline would always present the coorelated events from the other timeline at that point in time.
Can anyone recommend a solution for this type of comparision display?
Thanks,
Phil D
worthiph
Fri, 10/06/2023 - 03:19
Permalink
Display / Compare Two Timelines
Hi Phil D, I would like to do the same kind of timeline, in my case a vertcial timeline with New Zealand events on the left and UK and international influences on the right.
Did you come up with a solution?
Philip W
Darrah Carr
Wed, 01/27/2021 - 07:00
Permalink
Timeline
Hello - I just joined H5P because I wanted to use the Timeline in my upcoming course. But, when I go to click on "Add Content," the Timeline option is not coming up as one of the 28 types of Content. Please advise and thank you.
BV52
Wed, 01/27/2021 - 17:46
Permalink
Hi Darrah,To provide a best
Hi Darrah,
To provide a best possible experience for new users and to ensure that people use H5P.org only for trying out H5P (we've had more traffic than our server can handle lately, ref also the warnings when you create content, embed content and view the content) we are experimenting with which content types should be available here.
Check the getting started page for information on how you can use all the content types and use H5P for real. We unfortunately are not able to provide free hosting, only free software :) Hopefully you'll consider supporting the H5P Core Team by using H5P.com.
-BV
jesemy
Tue, 02/09/2021 - 16:50
Permalink
Links and PopUp Windows
I really have been enjoying building a timeline for students with H5P! I do have a question about adding links in an event description. I see the different options on how the link should open..new window, self, popup, etdc. I'd like for the link to popup but have been unable to get it to work. I've set all the parameters except for screen location because I'm not sure what to put there. Can you suggest something? I have it check as being movable. If I can put a location, will it work then? Right now, the link opens in the same window.
Thanks in advance!
Nancy
Neo College
Sat, 07/31/2021 - 23:48
Permalink
Hi! Thanks for this activity!
Hi! Thanks for this activity! Very original!
Could you please tell me where does the era content go? I wrote some text but I cannot find it.
Web-Betty
Thu, 08/11/2022 - 17:32
Permalink
Wikipedia links not loading
In my timeline I'm creating, only the first Wikipedia link (in the first timeline event) is displaying. In subsequent events the links show "loading" and never appear. I have confirmed that the links are accurate. Here is my timeline.
Any help is greatly appreciated.
Web-Betty
Thu, 08/11/2022 - 17:32
Permalink
Wikipedia links not loading
In my timeline I'm creating, only the first Wikipedia link (in the first timeline event) is displaying. In subsequent events the links show "loading" and never appear. I have confirmed that the links are accurate. Here is my timeline.
Any help is greatly appreciated.
Scott Goodell
Fri, 07/14/2023 - 20:02
Permalink
timeline no longer available?
Hi, new user here looking to make a historical timeline. I see the tutorial page that explains how to make one in detail. However, when I try to create new content, TIMELINE is not among the list of options. Am I missing something?
BV52
Mon, 07/17/2023 - 18:39
Permalink
Hi Scott,Where are you
Hi Scott,
Where are you creating your content?
If it is here in H5P.org
To provide a best possible experience for new users and to ensure that people use H5P.org only for trying out H5P (we've had more traffic than our server can handle lately, ref also the warnings when you create content, embed content and view the content) there are limited content types that are available.
Check the getting started page for information on how you can use all the content types and use H5P for real. We unfortunately are not able to provide free hosting, only free software :) Hopefully you'll consider supporting the H5P Core Team by using H5P.com.
If you are using H5P.com and are the administrator of the account you can enable the content by going to Manage Organization -> Settings -> Content type settings.Please reach out to your administrator if you are not one.
-BV