Timeline

Primary tabs

Submitted by H5P Group on Wed, 05/14/2014 - 11:16

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.

And more

Description

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.

Timeline.js project page

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.

Comments

tim

Tue, 11/07/2017 - 12:38

H5P's Timeline doesn't

H5P's Timeline doesn't support spreadsheet uploads. If you create a timeline on your site the data doesn't leave your database.

goty2001

Tue, 11/14/2017 - 14:12

questions re combining timeline & course presentation

Thanks. I'm using H5P in Moodle and am looking at using text links in a course presentation object to allow users to launch timeline objects...but encountering some issues:

1 - Using course presentation text links with (URLs pointing to the timeline objects) only seem to fire up new windows ... the setting to launch a timeline URL in the same window doesn't seem to work. Moreover each call, even to the same timeline, fires up another new window.

2 - if there's a solution to above ... can it be set to automatically launch a timeline in fullscreen mode?

3 - in Timeline, I use Flickr URLs (or similar - I presume this is necessary) to display images in the body. I'm getting them to display, however they appear to users as clickable .. and when clicked, a "Not Found -The requested URL /mod/hvp/<a data-flickr-embed........was not found on this server" appears (this issue is not related to the course presentation).

Any solutions (that a non/ex-programmer can implement) most welcome....

thomasmars

Wed, 11/15/2017 - 13:37

Hi,1) You can use the "text"

Hi,

1) You can use the "text" interaction and choose "Link" from the wysiwyg editor and set "Target" tab to "_top" in order to make the link open in the same window as a work-around.

2) A link can not trigger full-screen mode to my knowledge.

3) I'm not sure about this and I couldn't find a Flickr URL to try it out, I guess it depends on how the Flickr URL looks and if they are doing anything special with it.

Fri, 11/17/2017 - 10:27

Thanks

The _top works great although not being able to force fullscreen is a bit of a showstopper. On the question of the clickable image... I'm using the 'share' code supplied by Flickr, example:

<a data-flickr-embed="true" href="https://www.flickr.com/photos/153449026@N03/38354768742/in/datetaken/" title="1.4 The school mistress book cover 1824"><img src="https://farm5.staticflickr.com/4560/38354768742_89683d999e_q.jpg" width="150" height="15"

On a different matter - is it possible to customise Timelines using CSS that can be embedded withinh the Moodle topic or course that calls the Timeline - in other words somewhere where I don't need admin priveleges, and that wouldn't be overwritten if e.g. the Moodle theme was changed...

Mon, 11/20/2017 - 14:10

It should not be possible to

It should not be possible to insert the share code into the body by default, are you doing something special to accomplish this ?

You can customize any H5P content type by having a little developer experience and following the guide for visual changes in the H5P.org documentation. However you will need access to the server files/admin privileges, but they would not be overwritten on updates or theme change.

SOSUFVH

Fri, 11/17/2017 - 10:00

Pictures and eras

I am a very new Moodle and HP5 user trying to create a timeline. It's working out okay, but in the Strawberry example I see pictures besides each timeline-entry. The only option I get, is thumbnail pictures that are very small... how do I add larger pictures that could make the timeline a bit more interesting to look at?

Also: Is it possible to get a guide on how to use eras? I tried to make an entry in the field, but nothing showed on the timeline. Is it supposed to be either dates OR eras - and not both in the same time-line?

BV52

Mon, 11/20/2017 - 02:41

Welcome to H5P!

Hi SOSUFVH,

The images on the main part of the Timeline is hosted in through a link such as Wikipedia. You can see the complete list under "Assets/Media".

The eras serves as a marker at the buttom of the timeline. The dates are the entries that you will see in the main part of the content. You can check the test content I created for you :-)

-BV52

marbaque

Fri, 04/27/2018 - 18:30

Same question

Thank you BV52, but what is the point of adding boy text to eras if it won't show?

I guess this is more related to timeline.js issues than the content type itself.

Mon, 04/30/2018 - 05:58

Hi marbaque,Please see my

Hi marbaque,

Please see my answer here.

Mon, 12/11/2017 - 23:53

Backgrounds

Can the H5P Timeline tool allow different background images for different dates? (I've seen them on timeline.js examples, but not yet in a H5P version)

Tue, 12/12/2017 - 06:57

I'm sorry goty2001 this is

I'm sorry goty2001 this is not possible as of the moment.

vital

Wed, 12/13/2017 - 16:47

Eras

Hello,

We are testing H5P Timeline for a big project in our university. We use Moodle. I have two questions :

- When I fill the data when creating a timeline, I see that for eras I can enter the start date and end date, the headline the text and the tag. But when I look at the timeline I only see the dates and the headline, I can't see the text body and tag.

- Is it possible for me (maybe changing some css file) to put the era headline vertically (so it takes less place)

Thank you in advance for your help.

Greetings,

Fri, 12/15/2017 - 14:41

Hi,I'll get back to you about

I'll get back to you about the first question. It may be a bug.

For the second question, yes you can edit the css to have vertical headlines. You will need to know how to use the H5P development environment in Drupal (read up on the documentation) and then you will need to edit this dependency:

https://github.com/h5p/timelinejs

Fri, 12/15/2017 - 15:17

Hi vital,The first question

Hi vital,

The first question is indeed a bug. A report has been filed and you can follow the progress here.

JRDingwall

Thu, 12/14/2017 - 21:28

Dates vs Eras and Era Text

The dates in timeline are very simple to work with for denoting events or spans of time. At the bottom of the editor there are also "Eras" you can add. I can see in full screen more that the "Era Header" or title appears along the bottom of the timeline in view mode, but why does the text for the area not appear anywhere? https://h5p.org/node/157165?feed_me=nps

Fri, 12/15/2017 - 15:15

Hi JRDingwall,Thank you for

Hi JRDingwall,

Thank you for reporting this. I have filed a bug report and you can follow the progress here.

eddyc123

Fri, 12/22/2017 - 15:30

H5P - Moodle Integration - Timeline - No ability to set times

Hi there,

I've just started using this plugin for Moodle (it's great!) and I have created a D-Day Landings timeline. I can see where you can enter the date but where can you enter the time of an event? Most of my events happen on the same day but there is no where I can see to add the time of the event? I mean the times show up on the bottom timeline scroller so surely I can set times for these events as they just sit on top of each otherwise :(

Any ideas?

Sat, 12/23/2017 - 05:44

Hi eddyc123,I'm sorry but

Hi eddyc123,

I'm sorry but this is not possible as of the moment. I think this has some uses and it could open a lot of possiblities for this content. I suggest that you head over to the Feature Request forum and post this there.

paulraper

Fri, 03/02/2018 - 12:04

Error when trying to upload content onto Moodle and WordPress

Validating h5p package failed.

The file "timeline.js" is missing from library: "H5P.Timeline-1.1"Get help

The file "js/storyjs-embed.js" is missing from library: "TimelineJS-1.1"Get help

Fri, 03/02/2018 - 15:07

Hi paulraper,Please check my

Hi paulraper,

Please check my answer here.

Fri, 03/30/2018 - 17:07

Eras Title and Content

Question about Timeline under Moodle. Would it be possible to enter html code in the Era Header? The reason is that I would like to display some informations about the eras somewhere on the Timeline. A possible solution is to put a <div title='blablabla'>Era Title'</div> but it works only if I type that code directly in the database mdl_hvp table, not if I type it in the field when creating the Timeline. So the question is is it possible to make the field 'Era Title' (or header) accept html code ?
The second question is 'Where are the files Timeline.js and Timeline.css' ? I can't find them anywhere on the server but if I export a timeline I can find them in the h5p archive...

Thank you in advance for any help...

Best Regards,

Vital,

Wed, 04/04/2018 - 09:25

Hi Vital, great to hear that

Hi Vital, great to hear that you're using making content with timeline :)

1. Yes it is possible and will require changes to the code here:
https://github.com/h5p/h5p-timeline/blob/master/timeline.js

You will need to understand how the H5P editor works and how to add a field to use CKEditor.

2. See the link in point 1. This documentation should help:
https://h5p.org/developers

Fri, 04/27/2018 - 18:27

about age

I have a doubt about the item ERAS. This one has the possibility to add body text to explain it, however in the timeline I can only see the headline, and I can't find the option to show the content of the ERAS.

Mon, 04/30/2018 - 05:55

Hi marbaque,You are correct

You are correct you can place text in the "body text" but it is not appearing in the finished content. I have filed a bug report regarding this and you can follow the progress here.

allofthequestio...

Wed, 05/23/2018 - 04:58

Minutes not years

Hi there, love the look and feel of timeline for interactive learning. Is it possible to update the settings so that you could choose minutes/seconds rather than a date? This would allow you to demonstrate a sequence of events in that same interactive way, highlighting the importance of time & the sequence, but would mean you could do more small scale events

Wed, 05/23/2018 - 14:11

Hi,Thanks a lot for

Thanks a lot for contributing your ideas on how to make H5P better! We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful. In order for your feature request to attract as much interest as possible make sure it follows the below guidelines:

It is clear from every perspective how the feature will work. We recommend describing the feature with one or more user stories, for instance “As an author I want it to be possible to pick between different effects for the check answer animation so that the learners will see a variety of effects and also I can adapt the effects to my target audience(I’ll be using pink unicorns which works really well for both my target audience which are 4 year old girls and venture capitalists)”
If the feature can be illustrated with images or videos it always helps
Make it clear what content types this is relevant for, and or if this is a new content type

Make sure you post the feature in the Feature Request forum.

Catherine Mclean

Tue, 05/29/2018 - 16:11

Adding images to body text

I must have missed something, as I can't seem to find an easy way to add an image to the body text in the timeline. I can obviously add thumbnails but they're so small I want something a bit larger to appear next to the body text once saved.

Many thanks

Catherine

Wed, 05/30/2018 - 05:59

Hi Catherine,The images in

Hi Catherine,

The images in the body of a Timeline needs to be hosted in a different website such as Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

Wed, 05/30/2018 - 11:49

OK. I've tried adding links

OK. I've tried adding links to Flickr but I'm still getting the small error tile instead of the picture when I view the Timeline. Would it be a browser issue? I'm currently using Chrome.

Example: I'm trying to add this image https://flic.kr/p/pP1TKz so that it appears next to the body text.

otacke

Wed, 05/30/2018 - 11:58

Hi Catherine!You'll have to

Hi Catherine!

You'll have to set the link to the image, not to the page containing the image.

Best,
Oliver

Wednesday

Fri, 06/01/2018 - 07:10

linking to flikr images

I came here because I was having the identical issue. Having worked through it to find a solution I thought I'd add a note here:

I'm a complete flikr noob - I literally just made an account to build my H5P timeline (!) so I may be missing something obvious that a more proficient flikr user can point out, but the issue I see is that flikr makes it really hard to find any address for an actual image file! Here's what I had to do to get one:

go to the image on flikr
click the Share (onward arrow) icon
on the Embed tab copy the code
paste the code into the MediaURL field in your H5P document
now delete everything in that code that isn't the image address!*
Press [Save] in H5P and check how the image looks in context.

* Look at my example following. You just want the piece between [ <img src=" ] & [ " width = ].
Just look for the img tag or the address ending .jpg to spot the right address.

Fri, 06/01/2018 - 08:00

Thank you for the input

Thank you for the input Wednesday :-)

Mon, 06/04/2018 - 11:43

Thanks for the Flickr advice - it worked first time when I tried it! :)

It's a shame Flickr doesn't have more medical based photos though - otherwise I'd use it for all of the images I'm trying to find.

Thanks again.

Tue, 06/05/2018 - 01:54

Flikr photos

Great, glad it worked for you.

I simply created a Flikr account for myself, and uploaded the exact images I wanted in my H5P presentation myself. You can organise these into albums if, like me, you are planning multiple presentations. You just want to be mindful of any copyright issues I suppose (I was lucky that wasn't a problem for what I happened to be planning).

martina mosing

Tue, 07/31/2018 - 12:55

Flickr photos

I did the same (setting up a flickr account and uploaded my photos in order to be able to "fill" the timeline in H5P) and it somehow does not work for me - the link I get from flickr when I use the share option is very short. This is what I get: https://www.flickr.com/photos/159872460@N04/shares/2T4783

Am I doing something wrong? I just don't find any other option with the share button...

Can you help please?

Wed, 08/01/2018 - 07:31

Hi Martina,Flickr may have

Hi Martina,

Flickr may have changed how they create the embed code. Nonetheless I found another way to do this:

1. Click on the expand icon for the image.

2. Once expanded right click the image and click copy image address. You should have something loke this https://farm2.staticflickr.com/1793/43728698362_9324c6b198_m.jpg.

3. Use this in the media URL.

I hope this helps. If you have further questions feel free to post in the forums.

Tue, 07/31/2018 - 11:42

timeline

I wanted to create a time line in my H5P account, but did not get this as an option as a content type. Do I need to install anything specifically to be able to create a time line within my account?

Thanks for your help!

Tue, 07/31/2018 - 11:48

FOUND IT ;-)

Wed, 08/01/2018 - 05:44

Hi Martina,I'm glad you found

I'm glad you found what you are looking for. If you have further questions feel free to post in the forums.

jkoelb

Wed, 08/15/2018 - 20:09

Apparently I can't find the

Apparently I can't find the Contet "Timeline" either. When I click "Select content type" I get 29 options but none of them is the "Timeline"-Content. I'm using Safari and Chrome on Mac OSX 10.13.6 and I'm pretty confused right now…

Thu, 08/16/2018 - 08:19

Hi jkoelb,Welcome to H5P!The

Hi jkoelb,

The content types offered up for testing on H5P.org are supposed to give new users examples of what H5P can do. Drag and drop for instance is a content type that is more difficult to use, and for this reason, it is not enabled by default.

I recommend that you check out the tutorials for these content types.

Visit https://h5p.org/access-to-all-content-types to get access to all content types

If you are using one of the 3 supported frameworks (Drupal, Wordpress or Moodle), you can download the sample from this page and upload it to the H5P editor.

fineflan

Thu, 11/01/2018 - 16:23

YouTube video fullscreen button not working in Timeline

So I used a YouTube video instead of a picture in one of the timeline cards, but the embedded YouTube video cannot be played in fullscreen mode. When you click the fullscreen button, it says "fullscreen is unavailable". Is there any way to make the fullscreen button on YouTube videos workable in Timeline?

Fri, 11/02/2018 - 04:48

Hi fineflan,The full sceen

Hi fineflan,

The full sceen mode should work. Do you have a sample content that we can check?

Sat, 11/03/2018 - 09:29

Probably a browser issue

Hi, BV52, thanks for the quick reply! I tested it some more and it seems to be a browser issue. The fullscreen button works on Chrome, but not on Edge or Safari. Sample content

Mon, 11/05/2018 - 03:30

Hi fineflan,Thank you for the

Thank you for the additional information and you are correct it works only for Chrome. I have created a bug report and you can follow the progress here. Would you mind providing me the version of Edge so that I can add it to the report.

Mon, 11/05/2018 - 12:00

Edge version

Microsoft Edge 40.15063.674.0

Thank you!

Tue, 11/06/2018 - 01:58

Hi fineflan,Thank you I have

Thank you I have updated the bug report with the information you provided.

alpa

Tue, 01/22/2019 - 09:03

link direct to milestone

Hi, i´m using it on wordpress and it works fine. Now i want to link back to the timeline from another site. For this i use url-links. When linking to the site of the timeline, this starts at the beginning. Is it possible to link direct to a milestones?

Wed, 01/23/2019 - 03:16

Hi Alpa,Afaik this is not

Hi Alpa,

Afaik this is not possible since H5P are contained in an Iframe. Although I may be mistaken so if anyone has implemented something similar feel free to post your comments.

Hello World

Thu, 03/14/2019 - 18:37

where can I find the tutorials of Timeline?

I can't find the tutorial for the Timeline

You are here