You are here

Timeline

Primary tabs

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.

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.

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?

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....

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...

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.

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?

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)

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:

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

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 :(

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.

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...

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.

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

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

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.

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.

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).

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...

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…

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.

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?

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.

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?