FrogLMS Community

H5P Player Widget: Overview

We've introduced the ability to use H5P content within your Frog platform. H5P (HTML5 Package) enables you to create interactive learning content without needing to know how to code — think of it as similar to SCORM.

As part of this change, there are a few key updates:

• Within FrogDrive, there is now a new section called H5P Packages, allowing you to upload your H5P content to the Frog platform for use within your modules

• Within modules, there is a new H5P Player widget. This widget works with the various completion settings available, including “Score greater than passmark”. For this to work as expected, the H5P content must contain a quiz or assessment at the end to send a result back to the Frog platform.

• Within sites, there is a new H5P Player widget under the Activities section. This widget allows the H5P content to be played directly within the site.

H5P Player Widget: How-to

If you have H5P content you’d like to include in your modules, the first step is to upload it to your Frog platform. As an admin, navigate to FrogDrive. In the pop-up window, you’ll now see a new section called H5P Packages. Navigating to this section will display any H5P packages you have already uploaded.

To upload a new H5P package, go to the H5P Packages section, then select New > Install New H5P Package and choose the H5P files from your local device that you wish to upload.

Now let’s look at how to add your H5P packages to your modules. Navigate to a module and enter edit mode and you’ll see the new H5P Player widget available.

Drag and drop the H5P Player widget onto your module, then select the widget to view the available settings.

The first step is to select the H5P package you want to associate with the player. To do this, click the FrogDrive button.

The FrogDrive pop-up window will open to the H5P Packages section. Select the H5P package you want to include in your module, then click the Use button.

The H5P Player widget will link to the H5P content you selected in the previous step and will automatically set the widget’s title to match the name of the H5P content.

In this example, we can see that the Title field has been populated with terminal-drivingpart-1-1292496036468520067.

If you wish to change the content in the Title field, simply click into the field and enter your text. You can also choose to add text to the Description field if appropriate.

In this example, the title has been updated to Terminal Drive: Part 1 and a description has also been added.

The last option within the widget settings is to choose how you want this activity to be marked as completed for a learner. The standard completion settings below are available and will work with H5P content:

• Not Applicable
• Mark completed manually
• When H5P file has been opened
• Score greater than passmark

In this example, the completion setting Score greater than passmark has been selected, with a passmark of 70% set.

From a learner’s perspective, when viewing a module with H5P content, it will work the same way as SCORM content — the activity will display with an Open button to launch the H5P content.

After selecting the Open button, a new window will open, and the H5P content will load and start playing.

If your H5P content contains a quiz or assessment and you have used the Score greater than passmark completion setting, then the score will be populated for the activity within the Module Compliance Report.

In this example, we can see that the learner Elizabeth Chatters scored 100% on the H5P content.

Lastly, within sites, there is a new H5P Player widget under the Activities section. This widget allows the H5P content to be played directly within the site.

H5P Player Widget: Launching the H5P Player Widget

Drag and drop the H5P Player widget onto your site, then select the widget to view the available settings.

The first step is to select the H5P package you want to associate with the player. To do this, click the FrogDrive button.

The FrogDrive pop-up window will open to the H5P Packages section. Select the H5P package you want to include in your module, then click the Use button.

The H5P Player widget will link to the H5P content you selected in the previous step, and the name of the content will be displayed within the widget.

In this example, we can see that the H5P Player widget has the package terminal-drivingpart-1-1292496036468520067 selected.

The next setting available is Launch H5P settings, which lets you choose how the content should load. Two options are available:

• Embed in site – The H5P content will display directly within the site.
• New Window – The user will need to select an Open button, which will launch the H5P content in a new window.

The default option is set to New Window.

The last setting under the Advanced section is Auto-launch package. When selected, this option will automatically launch the H5P package as soon as the site is opened. By default, this option is not selected.

Below is an example of how the H5P Player widget will display to a learner within a site. In this example, the option to open the H5P content in a new window was selected, so the learner will need to click the Open button to launch the content.