H5P Interactives

Create simple, fun and interactive online learning activities.

Using the H5P Timeline Tool

This guide uses a H5P object. For getting started on placing H5P into a space, please see Inserting H5P in VU Collaborate.

The Timeline content type allows you to place a sequence of events in a chronological order. For each event, you can add images and text. You may also choose to include assets from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud. This rich media object arranges all of your items in a specified order to explain complex events, evolutions and historical precedents related to your course content. The tool creates a timeline of dates that you define, that students can click different items to read brief descriptions of people, places, events or anything else you add. This helps students see the information set out visually and learn the order of particular events.

H5P.org also offer their own tutorial for this object.

 

Below are the steps to use the H5P Timeline Tool

 

Step One: Create a New Timeline Object


1. In the Learning Space choose the module you want the H5P to be in, click on New then New Document.

 

new new documentv1

 

2. In the Insert Stuff menu, scroll down and click H5P Learning Object.

 

Insert Stuff

 

h5p learning object

 


3. In the H5P tool, click Add Content.

 

dd content

 

4. Using the dropdown menu, set your Content Type to Timeline. You may need to scroll down to find this option.

 

 h5p category list with timeline tool selected

 

Note: If you click on Details, a summary of the tool and an option for a demonstration will appear. If satisfied with your tool selection, click Use.

 

Preview of object with demo button and use button highlighted

 

5. Add a Title for the new object that will be easy to remember and find.

 

title

 

Step Two: Add Content 


The timeline tool is best used to describe a sequence of events. For this example, we will use the first Australian prime ministers to create a timeline with text, images, an introduction video, and links to external resources.

 

1. Add a Headline for your timeline. This will appear on the first page of the timeline as the title of the timeline.

 

headline field with example headline

 

2. Write some body text for the first page of your timeline. This should be a brief introduction to the content of the timeline.

 

h4

 

You can add hyperlinks into any text field while creating the timeline by clicking the Link icon. This is useful for directing students to external resources relevant to the content.

 

body text with highlighted hyperlinked word

 

3. The Default zoom level, Background image and Height are settings that will affect the whole object. If this is your first time creating a Timeline with H5P, it is recommended that you leave these as default.

 

default zoom level

 

4. On the first page, and every subsequent item you add to your timeline, there will be an Asset tab where you can add audio, images and video from external sources. Click the Asset tab to open it.

 

Asset button highlighted with dropdown fields for media, credits and caption

 

2.1 Adding Assets

1. Under Media, enter the link to the media you want to include.

 

h8

 

2. Add Credits to attribute the media to its source.

3. Add a Caption that will accompany the media. This should include the title and maybe a short description.

 

2.2 Add an Item to the Timeline

Timelines are made up by individual items that you enter the details for. H5P will automatically generate empty text fields for your first item, but you will have to click the Add Item button to create additional items. Items are made up of a date and headline, with the option to include text and media.

1. Enter your Dates to determine where the item will fall on your timeline.

2. Enter a Headline for the item, which will appear when the student is navigating through the timeline.

 

date

 

3. Add some Body text to describe the person, event or other important date.

 

 body text

 

This will appear beside any media you choose to add, and can include links to external resources.

 

4. Add a media Asset to the new item by entering the URL in the Media field. In addition to video, audio and images, H5P Timelines support media from Google Maps and Twitter.

 

h10

 

5. Click Thumbnail to add a small image that will appear in the overview of the timeline.

Note: Thumbnails will appear 32x32 pixels, but H5P will shrink images you upload from your computer that are larger.

6. Add Credit for the media.

 

7. Click the Add item button and repeat steps 1-6 again to populate your timeline with plenty of interactive information.

 

add item

 

8. You can also add eras to your timeline. Click Add Item below Eras to create a span of time to be included in the timeline. 

 

eras add item

 

9. Fill in the specifics of your era and add images or media as needed. 

 

era start date

 

 

Step Three: Preview and Publish H5P Timeline


At the bottom of the screen you can adjust your H5P's settings (you can leave these settings by default or make alterations):

1 - Display options: (previously 'Display and copyright buttons') What options do you want to be visible for the user, for example you can tick the display download button to enable students/staff to download the H5P to their own computer. You can also tick the Display embed button, which allows the user to embed the H5P into their HTML editor in VU Collaborate for example.

2 - Folder: (previously 'My Content') All your content will be saved in one spot, within a root folder.

3 - Publish: This option allows you to make the H5P Unpublished (content can not be inserted into VUC), Protected (content can be inserted into VUC) or Public (visible to the public using a content link and the content can be inserted into LMS and be embedded). Protected is the default setting and it is recommended to leave this setting as it is. 

4 - Collaborators: (previously 'Authors') In this setting you can add and search for other collaborators and give them access to edit your H5P's. For example, if you are teaching a unit with another staff member and you would like them to have access to edit your H5P's, then you can use the search field to locate another staff member by typing in their full name. 

5 - Sharing: (previously called 'Select value') This is where you share your H5P with others, so they can view and clone your content. There is a folder allocated for each college, for example 'Arts and Education', select your College.

Note: To know more about Sharing and Collaborators, please see H5P Sharing and Collaboration.

6 - Send Score to LMS: (previously 'Send to Gradebook') In this section you can link your H5P directly to VU Collaborate and also link it to your gradebook. It is recommended to leave this setting as it is, and NOT send the results to the gradebook. \

 

title new h5p 

 

1. Click Save and Insert. A preview of the H5P object will appear. 

In the preview area, you can see all of the elements of your new object as they will appear to the student. Our prime ministers example has an introduction video and an entry with a thumbnail for each item. Information that has been entered for each item is displayed at the top of the page, and an overview of the timeline is shown at the bottom, with options to zoom in and out on the left. There is also a small coloured era. 

 

Save and insert

 

timeline preview

 

2. The H5P object is now ready to add to your space. Click Insert to add the interactive video to the document.

 

insert

 

3. Alternatively, you can click Save.

 

h5p save

 

4. Then click Insert.

 

h5p insert


Further Support

Visit the VU Collaborate Help site at https://vucollaboratehelp.vu.edu.au for up to date information and resources on blended learning or email This email address is being protected from spambots. You need JavaScript enabled to view it..

Contact ITS Service Desk on (03) 9919 2777 or via self-service http://servicedesk.vu.edu.au for further technical support.