{"id":403,"date":"2025-10-23T12:13:41","date_gmt":"2025-10-23T10:13:41","guid":{"rendered":"https:\/\/www.rezeau.org\/wp-h5p\/?page_id=403"},"modified":"2025-10-23T19:26:43","modified_gmt":"2025-10-23T17:26:43","slug":"timeline-documentation","status":"publish","type":"page","link":"https:\/\/www.rezeau.org\/wp-h5p\/timeline-documentation\/","title":{"rendered":"TIMELINE Documentation"},"content":{"rendered":"\n

Current version: 0.2.1 dated 26 september 2023<\/h2>\n\n\n\n

History<\/h2>\n\n\n\n

The original Timeline project is to be found on the Northwestern University Knight Lab site<\/a>. and more specifically on their Timeline page<\/a>. <\/p>\n\n\n\n

The current H5P Timeline content<\/a> is based on an outdated version of the Knight Lab TimelineJS. In that content, the Wikipedia and Google maps media types don’t work, and that bug will never be fixed. Also, it is not possible to insert media files (audio, image, video) from a local machine, as it is possible for most of the other H5P contents.<\/p>\n\n\n\n

A much better <\/strong><\/em>H5P Timeline, based on the latest available Knight Lab TimelineJS3 version has been created by NDLANO, the NORWEGIAN DIGITAL LEARNING ARENA, available on their NDLA Github site<\/a>. That version is not currently officially available on the H5P site.<\/p>\n\n\n\n

NDLA Timeline Papi Jo <\/strong>is based on the NDLA version, with a few changes and improvements aiming at making it look as much as possible like the original KnightLab Timeline software.<\/p>\n\n\n\n

Tutorial<\/h2>\n\n\n\n

When to use Timeline<\/h4>\n\n\n\n

You can use a Timeline content type for a content where you want to present a sequence of events in chronological order.<\/p>\n\n\n\n

Step 1: Topic<\/h4>\n\n\n\n

For this tutorial we shall take the example of the NDLA Timeline Papi Jo Template content, which takes as its starting theme the History of strawberries<\/a> H5P example.<\/p>\n\n\n\n

Important<\/strong>.- In this tutorial you will previously need to download these 2 image files on your own computer. Proceed as usual, right-click on each image, Save image as, etc. and do remember where you save them on your machine!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Step 2: Creating a timeline<\/h4>\n\n\n\n

Select the\u00a0New content\u00a0option and choose\u00a0NDLA Timeline Papi Jo<\/em> from the list of\u00a0Content types.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3: Timeline Editor<\/h4>\n\n\n\n

The Timeline editor should now appear. It consists of 8 parts:<\/p>\n\n\n\n

Title, Title slide, Timeline items, Tags, Eras, Behavioral settings and Language<\/p>\n\n\n\n

Step 4: Title<\/h4>\n\n\n\n

Enter a title in the Title field, as for any other H5P content, e.g. NDLA Timeline Papi Jo My own content<\/em><\/p>\n\n\n\n

Step 5: Title slide<\/h4>\n\n\n\n

You can optionally <\/em>create a Title slide, containing a title, a description text and a Media of your choice. You can also display a background for that Title slide, consisting either of a colour or an image. Click on the Show title slide<\/strong> check box and enter this data:<\/p>\n\n\n\n