Creating an H5P Timeline in Moodle

One of the many H5P interactive content types that you can create in Moodle is the Timeline. The Timeline content type allows you to create an interactive timeline showing dates, periods and eras with audio, video, and/or text attached to each point or period on the timeline. This article will walk you through the specifics of creating the timeline content.

To begin access the H5P Content bank from the Moodle left side menu, click on the Add button and select Timeline from the drop-down menu (for detailed information on accessin the H5P Content bank, see the article Creating and Inserting H5P Content).

Adding Timeline Headline Content

To begin with, enter the following overall timeline information.

  • Title - name of the timeline. This will not display in the timeline itself, but will be attached to the file itself, such as when it is accessed through the content bank.
  • Headline - the timeline name or title of the first item on the page displayed when the timeline is first opened.
  • Body  - this is where the text describing the timeline and its contents is entered.
  • Default zoom level - you can set the timeline to show more or less content based on this setting. If you wish to show a narrow section, use increasingly positive numbers, to show more of the timeline, use negative numbers to zoom out.
  • Background image - the optional image file chosen here will be displayed behind all of the content displayed for each point or period on the timeline.
  • Height - the number entered here will modify the vertical space occupied by the timeline. The horizontal dimension will be determined by the available space in the window it is displayed in.
  • Asset - you may optionally choose to link media files to the timeline start page by entering a URL to media such as YouTube or Vimeo videos, Soundcloud audio, Flickr images, or Google maps.
    • Media - the URL of the media
    • Caption - text to accompany the media
    • Credits - source attribution for the media

​​Adding Timeline Events

Once the timeline headline information has been setup, you will move on to entering timeline events. Each event will have the following available fields.

  • Start date - enter the beginning date for the event. Four-digit year is required, and may be followed by two-digit month and day, separated by commas.
  • End date -  enter an optional end date here in the same format as above.
  • Headline - type in the required title of the event here
  • Body text - optional description text for the event is entered here.
  • Tags - each event may optionally have a tag, which groups it on the same line/level of the timeline as other events with the same tag
  • Asset - attach media here as with the Headline content described above

To add additional events to the timeline, click on the Add item button to display a new set of fields to fill out.

Adding Timeline Eras

In addition to the individual timeline events added with Add item, you may optionally add Eras to the timeline to highlight specific spans of time in which events occurred. Eras can be given the same information as the items above, with the exception of Assets, as they are merely represented on the timeline, and do not appear above it.