A free HTML5 based content type allowing creatives to create interactive timelines. All you need is this content type and H5P.com or the H5P plugin in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress to start creating.
Would you like to create content like this on your own?Get started
Register on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.
This is Timeline.js developed by Knight Lab, packaged as an H5P content type in order to make timelines easily editable, shareable and reuseable.
The Timeline content type allows you to place a sequence of events in a 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.
Learn how to create a Timeline in this tutorial.
The H5P content on this page is licensed under Creative Commons Attribution 4.0 International unless another Creative Commons license is specified under rights of use. The author of the content is H5P Group
New to H5P? Read the installation guide to get H5P on your own site.
Thu, 08/11/2016 - 11:28
sorry, H5P filter was try-out from another attempt, not working
H5P is NOT implemented as Moodle filter (yet). Would be a killer app for Moodle users when it was..
Fri, 08/12/2016 - 09:33
Hi,Since I am not that
Since I am not that familiar with Moodle, could you describe what a Moodle filter is, and how it would benefit H5P for Moodle users?
Fri, 08/12/2016 - 10:34
filter in Moodle
Students (and teachers) can use a WYSIWYG editor in many places in Moodle.
For example: in an assignment, in a forum etc.
For security reasons Moodle does not allow to insert code in the editor.
If you try it, Moodle removes your code before it switches to view-mode..
There are two "filter" work arounds:
1. You can add a switch to start the entering of special code,
for example: $$ means "I will now enter TeX code" and you stop the entry also with $$
2. the other filter type is to attach a file with the chain symbol like in word.
Depending of the extension of the file - in your case .h5p - Moodle takes the file and does embed it in a player.
Some players also accept extra params, for example for height and width etc.
(Some filters also add a button in the toolbar to start the embed mechanism for that filter type.)
There is one third party filter where you can fill-in the code which is wrapped around the identified file: Generico.
So if we would know the embed code for H5P we also could use that filter, maybe?
Find the explanation here: https://moodle.org/plugins/filter_generico
I hope this helps, Ger
(to warn you: I am not a programmer but an horrible informatics-tourist)
Tue, 08/16/2016 - 08:20
Thank you for your
Thank you for your clarification. In WordPress and Drupal it is possible to do what you are asking for, so I guess it should be doable in Moodle as well. Relevant issue is found here
Thu, 07/21/2016 - 16:33
Hi, I was reading in the TimeLine JS documentation that it is possible to use iFrames if you are using a differnt type of media asset. I was wondering if there's a way to do it in the H5P timeline as well.
Fri, 07/22/2016 - 11:07
Hi, unfortunately, this isn't
Hi, unfortunately, this isn't supported in the current version. But I don't think it should be too difficult to add support for it.
Wed, 08/10/2016 - 17:43
Thanks for the reply. Do you
Thanks for the reply. Do you think there's a chance to add support for it in the near future? or if maybe there's something we can do ourselves to add it?
Thu, 08/11/2016 - 10:26
Hi, if you are a developer,
Hi, if you are a developer, or have access to one, you could always make a pull request in GitHub. Read about how to contribute here
Tue, 08/16/2016 - 09:24
promising moodle filter
Thanks for the link, yes that is promising..
Thu, 08/18/2016 - 02:25
Just tried to create a timeline dating back to 30,000 BC - couldn't figure out how to input anything before 0000,01,01. Any work around to create timelines for Ancient History?
Thu, 08/18/2016 - 08:22
Hi,Have you tried putting in
Have you tried putting in -30000 as date? It should work.
Thu, 03/09/2017 - 11:20
Add other h5p content
is it possible to add other H5P-content (e.g. an Ifram embedder) via shortcode (or any other way) as an asset to a timeline?
That would be awesome!
Fri, 03/10/2017 - 08:45
Hi,That would be really neat,
Thu, 03/23/2017 - 14:44
How to insert a picture in the body text in Timeline
Hi! I am wondering if there is anyone who knows if its possible to insert a picture in the body text in Timeline?
Thu, 03/23/2017 - 21:44
You can't add it inside the
You can't add it inside the body text, but it is possible to add images from e.g. flickr (located inside the Asset-group in the editor). I have made an example here: https://h5p.org/node/61979
Thu, 04/06/2017 - 00:08
Three timeline questions
I have input body text into an "era" in my timeline, and I can see the title and time span of the era, but how do I display the era body text? It does not appear the same way regular dates seem to work.
Is it possible to somehow put more than one asset into a date item?
Are there plans to upgrate the body text editor to either a rich text or html editor?
Mon, 04/10/2017 - 23:52
Hi,I'll try to answer the
I'll try to answer the last two. Only bad news I'm afraid :/ It is not possible to put several assets into one date as far as I know, and there are no plans regarding the body text editor. The good news is the anyone in the community may pick this up, improve and contribute the improvements :)
Sun, 06/04/2017 - 18:55
My thumbnails appear as very small images in the bottom half of the timeline but not in the upper part. The captions appear and the copywrite info, but there seems to be a gap where the larger image should go.
Tue, 06/06/2017 - 10:28
Hi eveb, could you add a
Hi eveb, could you add a screenshot that describes your problem?
Wed, 08/30/2017 - 17:52
I have this problem too?Did
I have this problem too?
Did you find a solution?
Wed, 06/07/2017 - 06:33
cloning of timelines no longer works?
unable to clone timelines saved in h5p account, has the feature been removed? with existing timelines - clone button is there but saving always comes up with an error - help please?
Wed, 06/07/2017 - 06:47
Hi lkalache,I know the clone
I know the clone option is a very helpful tool to help in efficiency. Sorry it has been temporarily disabled because it is causing some problems. We hope to get it back up and running as soon as possible.
Tue, 06/13/2017 - 03:23
Timeline now restricted use?
thanks for the response - I note now that you cannot create timelines at all now, as the content type says an administrator has placed it under 'restricted use'. Can you explain what this means please - my understanding from previous posts was that the ability to clone existing timelines was being looked at.. but it seems the entire tool now requires permission to be used at all??
just looking for some clarification please,
Wed, 06/14/2017 - 07:47
You can get access by going to this page: https://h5p.org/access-to-all-content-types
Fri, 06/09/2017 - 13:56
Please can i have access to
Please can i have access to this?
Thu, 08/31/2017 - 09:13
You can get access by going
You can get access by going to this page: h5p.org/access-to-all-content-types
Fri, 06/09/2017 - 14:10
Hi, Can I have access to this and all options please? Thanks!
Mon, 06/12/2017 - 09:14
Access has been granted
Access has been granted
Fri, 06/30/2017 - 15:03
WP - BJ Lazy Load plugin prevents the timeline showing on sitte
I recently installed the BJ Lazy Load plugin on my site, and found out that is prevents the Timeline from showing up in the site using the shortcode (the timeline appears fine in the admin).
You can take a look at this page has the timeline shortcode, and you can see that the timeline is not displayed. When I turn off
that plugin - the timeline displays fine.
Do you know what the problem could be? BTW, I have a multiple choice h5p activity that isn't affected by that plugin.
Thanks for any hint or direction!
Thu, 07/06/2017 - 15:17
Tue, 07/25/2017 - 13:21
Embeded Videos in Timeline
Is there a possibility to embed short videos directly to the timeline (like picture or text boxes - example: the video will appearing next to a short text [like an image]) or is there only the possibility to use them via vimeo or YouTube?
Wed, 07/26/2017 - 18:03
Embedded Videos in Timeline
... Dan did you solve the question about embedding videos ...how? I want to add videos & images to the body and resize them etc... wondering if that's possible?
Wed, 07/26/2017 - 20:11
Yeah. Well there are several solutions. If you are using the timeline as additional feature for your homepage you can change the size of the timeline via the timeline homepage or the embedded html code (timeline code).
If you want to put videos (I prefer gifs) or picture as a background, just go to your Google document and add the Link in the background field. Your timeline will look great afterwards!
If you want to add videos make sure it's online as an YouTube or vimeo video or as an video all ready embedded on your homepage or another homepage. If so, you have the possibility to use the link of the embedded Video and just put it in your Google doc.
I don't know if there is a possibility to resize the images or videos in the timeline.
Thu, 07/27/2017 - 10:38
Embedded Videos in Timeline
Great thanks Dan ... I'm new to this and will be giving it a go next week and so I am just prepping what I can ... just one clairification when you say google doc .... is that google drive i.e. I can embed videos in the timeline body if I have them on a local Google Drive (if they're not youtube etc) .. does that sound right?
Thu, 07/27/2017 - 12:14
Embedded Videos in Timeline
Well not exactly.
I was talking about the website https://timeline.knightlab.com/. Scroll down on this page and you will find the steps to create your own timeline. This includs, that you have to open and safe a google spreadsheet document.
If you are up to these points, just read my comment again and you will be able to adjust your background etc.
I actually dont know if its possible to add the videos from Google Drive. I've just tried it with videos, wich are embedded on other websites as an .mp4 or .mov.
Just try it out next week and give me a response if it worked with Google Drive videos.
Mon, 08/07/2017 - 11:55
Background Colour of Timeline
I was wondering if there will be an option to change the background colour of the timeline (the lower section, where the dates are shown). I know there is a possibility for the topic but not for the timeline.
Thanks for responds
Mon, 08/07/2017 - 16:34
Hi Dan, The easiest way is to
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.
Tue, 08/29/2017 - 22:42
Am I correct in understanding I have to use Flickr URLs to get images displaying in Timeline pages (the upper 'topic' part)???
If so, how can I make them non-clickable? Currently, when theyre clicked, the go to Flickr!! While I've seen that happen in a couple of sample timelines, most of the images are not clickable..
If Flckr URLs are not necessary - how else can I get an image to display. (I'm working in H5P in Moodle)
Thu, 08/31/2017 - 09:08
Have you tried downloading
Have you tried downloading the images and then uploading them to timeline?
Wed, 08/30/2017 - 17:41
No images displaying?
I've made a timeline and added images as assets but when I go to look at the timeline none of the images are being displayed? This happens on both the embedded web version and the moodle plugin?
Wed, 08/30/2017 - 17:56
No images displaying?
Link to image example
Thu, 08/31/2017 - 05:38
Hi e-learning,The image is
The image is not accessible without your permission. Although I took the liberty of creating my own sample.
Only Media - Example from above
Media and Thumbnail - Combining both
@e-learning and @goty2001 please confirm if the "Only Thumbnail" example is the concern.
Thu, 08/31/2017 - 10:26
Hi there, thanks for getting
Hi there, thanks for getting back to me. Yes, it's the only thumbnail 'version' that I can produce?
Thu, 08/31/2017 - 10:40
I've just been playing and I
I've just been playing and I guess just uploading an image from desktop will only create a thumbnail version? I've manged to link out to a flickr photo that does display large on the timeline but I can't link out to a wikipedia photo? It just displays the copyright? It seems pretty inconsistent.
Thu, 08/31/2017 - 09:12
I suspect this is not a link
I suspect this is not a link to an image file. Please have a look at the following discussion:
Wed, 11/01/2017 - 20:46
How to put Centurys and a.c/b.c in the time line
Is there any way that I can put e.g V century b.c in my timeline? I need it for a presentation of the history of art.
Thu, 11/02/2017 - 02:50
Hi begogga,This is not
This is not possible as of the moment but I think this feature will add a lot of value to this content. Please head over to the feature request forum and post your suggestion there.
Thu, 11/02/2017 - 09:55
It is possible :), ref my
It is possible :), ref my comment below.
Thu, 11/02/2017 - 09:47
You can define BC dates in
You can define BC dates in the timeline, just add negative numbers for the year. Eg: -2000 for start date, and -1000 for end date will be year 2000BC -> 1000BC. I have created an example here:
Mon, 11/06/2017 - 14:35
creating a timeline - spreadsheet or manual?
If I want to create a timeline in Moodle should I use the google spreadsheet method, or build it manually... is one preferred over the other? And If I use the spreadsheet - does the resulting package get uploaded and reside thereafter on the knightlab site?