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.
Would you like to create content like this on your own?
Get startedRegister 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.
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.
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
BV52
Fri, 03/15/2019 - 07:51
Permalink
Hi,You can check this page.
Hi,
You can check this page.
-BV52
Hello World
Fri, 03/15/2019 - 12:52
Permalink
illustration left from the text, how to do that?
In your example of timeline about the strawberry, a picture is shown left to the text. Each slide shows another picture. I 'm not referring to the thumbnail. How do I organise a picture in each slide?
BV52
Thu, 03/21/2019 - 02:39
Permalink
Hi,In each date that you
Hi,
In each date that you enter you should see there "Asset" under that you will have media. You can enter the URL of the image there.
-BV52
Skolazazivot
Tue, 04/30/2019 - 20:18
Permalink
How do I make a BC timeline?
How do I make a BC timeline?
BV52
Wed, 05/01/2019 - 03:47
Permalink
Hi Skolazazivot,You need to
Hi Skolazazivot,
You need to place a negative/minus sign before the year to get BC.
-BV52
Skolazazivot
Tue, 04/30/2019 - 20:19
Permalink
Timline BC
How do I make a BC timeline?
Skolazazivot
Tue, 04/30/2019 - 20:20
Permalink
Timeline BC
How do I make a BC timeline?
Styrling Rohr
Tue, 05/14/2019 - 19:41
Permalink
Trouble with linking media in assets
Hi,
I am trying to link to media (wikipedia, youtube, and google maps) as assets, but the google maps and wikipedia will not load in the timeline. I have copied the url exactly and the youtube videos do load. Any ideas? Thank you.
BV52
Mon, 05/20/2019 - 04:56
Permalink
Hi Styrling,Thank you for
Hi Styrling,
Thank you for reporting this, I filed a bug report and you can follow the progress here.
-BV52
bproust
Wed, 05/29/2019 - 16:54
Permalink
Media
Hi,
Is it possible to call a video hosted at jwplayer rather than on youtube?
Thank you
bruno
BV52
Thu, 05/30/2019 - 05:48
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
aharkless
Fri, 07/26/2019 - 23:44
Permalink
Hello, the images on the
Hello, the images on the timeline are not showing up. Any ideas on what could be causing it.
BV52
Mon, 07/29/2019 - 17:20
Permalink
Hi aharkless,I created a
Hi aharkless,
I created a separate post for you here.
-BV52
Karine Bender
Tue, 10/22/2019 - 14:42
Permalink
Bonjour, Super outil !!!Merci
Bonjour,
Super outil !!!
Merci !!!
vital
Tue, 10/22/2019 - 16:36
Permalink
Change B.C.
Hello,
Can you please tell me what file I must modify to change B.C. on Timelines (Our users want to have the Latin equivalent 'ACN' instead) ?
Thank you in advance for your help.
1stepto
Tue, 10/29/2019 - 18:34
Permalink
Can't change dates on timeline
Hi,
does anyone have an idea why I can't change dates on the timeline? If I change any dates and save the changed work, everything reverts back to the original dates. Tested several times with a timeline originally set up in March with H5P on Moodle 3.7 ...
Cheers, Susan
BV52
Tue, 10/29/2019 - 18:52
Permalink
Hi Susan,Would you mind
Hi Susan,
Would you mind posting this in the forums. There is a higher chance of it getting answered there, it is also more flexible in terms of what can be done (i.e attach file). When posting I suggest that you attach your content as well so that we can check. Also if I mayh ask does this happen only to the timeline and specifically only for changing the date?
-BV
1stepto
Tue, 10/29/2019 - 21:19
Permalink
Hi BV
Hi BV,
thanks for getting back to me, I'll post in the forums. And yes, it happens specifically for changing the date, have tested several times.
Regards, Susan
mirjami
Tue, 12/17/2019 - 14:17
Permalink
Translation for B.C.
Hi,
is it possible to get the term B.C. into translations? Or somehow get it translated into user's language?
Thank you in advance!
quote5
Sat, 05/09/2020 - 08:54
Permalink
Eras are completely overlapping
I've created a timeline ad added some eras. But the text label for the eras overlap. Meanign they display in the same horizontal space. Unlike the events that kind of organize themselves so you can read them more easily.
Is this the expected behaviour? It looks like an error.
Thanks! Otherwise this is great interactive content.
BV52
Mon, 05/11/2020 - 15:29
Permalink
Hi quote5,I guess this is
Hi quote5,
I guess this is more of a design flaw more than an error or a bug. Eras in most cases span a good number of years even centuries and have several dates within them this is why the labels are on the same horizontal space. This of course is not true in all cases as mentioned the labels overlap. I think the best course of action is post a feature request. 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 learner 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.
-BV
quote5
Tue, 05/26/2020 - 12:13
Permalink
Thanks. I created one here
Thanks. I created one here:
https://h5p.org/node/885102
For some reason the images in the post aren't appearing.
This really feels more like a bug, not a feature. If the events overlapped it would clearly be broken. I am guessing no one tested the eras.
Thanks for all your work!
BV52
Tue, 05/26/2020 - 19:19
Permalink
Hi quote5,You have a point
Hi quote5,
You have a point but I guess we can at least agree to disagree.
Can you try to edit the post or add a comment to add the images. If it still doesn't work, can you provide me a link where I can download it and I'll see what I can do.
-BV
Alex_Guz
Sat, 08/01/2020 - 05:35
Permalink
Extending the allowed time to billions of years.
I know it sounds crazy but... can someone point me in the direction for modifying the allowed times? I need to go back 4.6 billion years (beginning of Earth.)
It seems like I can use 7 digits: 99,000 B.C. (99000,01,01)
Any help will be appreciated.
Thank you
petzi
Thu, 10/01/2020 - 13:18
Permalink
I have checked by trial &
I have checked by trial & error the time range (using WordPress): The maximum range I get is -271000 to 275000 years. To get this long-range period you must not add month and days, just the year.
You have to wait a little bit as H5P needs time to generate this very long timeline. There is no waiting if your events have only extreme dates on one of the range maximums and do not span a very long range of time.
petzi
Thu, 10/01/2020 - 13:20
Permalink
Max. -271000 to 275000
I have checked by trial & error the time range (using WordPress): The maximum range I get is -271000 to 275000 years. To get this long-range period you must not add month and days, just the year.
You have to wait a little bit as H5P needs time to generate this very long timeline. There is no waiting if your events have only extreme dates on one of the range maximums and do not span a very long range of time.
petzi
Thu, 10/01/2020 - 13:21
Permalink
Max. time range: -271000 to 275000
I have checked by trial & error the time range (using WordPress): The maximum range I get is -271000 to 275000 years. To get this long-range period you must not add month and days, just the year.
You have to wait a little bit as H5P needs time to generate this very long timeline. There is no waiting if your events have only extreme dates on one of the range maximums and do not span a very long range of time.
achiyap
Sun, 01/10/2021 - 14:09
Permalink
English
I want to try this!
marbaque
Tue, 04/20/2021 - 23:48
Permalink
Editor width
I am having this issue using H5p on Wordpress, where the editor width is very narrow. I am using Pressbooks on a local server and it is not especific to this content type, it happens in others too.
BV52
Wed, 04/21/2021 - 19:20
Permalink
Hi marbaque,By any chance you
Hi marbaque,
By any chance you are using Firefox to create contents? If so there is a bug with editing contents using Firefox.
-BV
marbaque
Wed, 04/21/2021 - 21:23
Permalink
Hello BV52,You know what?
Hello BV52,
You know what? Actually, I am. So that must be it.
Thank you for the hint!
KOdea
Mon, 10/11/2021 - 21:30
Permalink
Accessibility
Has this been tested with any screen readers?
marbaque
Tue, 08/30/2022 - 15:42
Permalink
Change fonts
Hello, I would like to change fonts (I am using Wordpress), is that possible? I tried adding some custom CSS but it is not applying to the h5p content.
ajimgar
Sat, 10/22/2022 - 11:54
Permalink
Thumbnail on Media. Not viewing correctly
Good morning.
Why is the thumbnail on media inside timeline activities not properly shown? I mean, if you set image size under 32x32 as described on the uploading section, it does not recognize de real size, and resizes, losing part of the image, as you can see below.
I would apprecciate any comment on this thread.
Thanks in advance and best regards,
Alfonso Jiménez.
JULIANA MARQUES...
Fri, 07/21/2023 - 15:48
Permalink
Miniatura não carrega
"O arquivo que você está tentando enviar pode ser muito grande."
Arquivo com tamanho de 10, 20 e 30 px, recebo a mesma mensagem, não permitindo carregar.
Uso H5P no moodle.
Thumbnail does not load
"The file you are trying to upload may be too large."
File with size 10, 20 and 30 px, I get the same message, not allowing to load.
I use H5P in moodle.
Pages