H5P and course menus in Moodle / Totara

We wanted to create a menu – initially left-hand side of main H5P but could be right-hand side if wanted.

I searched to see if others have embedded H5P content into other Moodle resources such as books / pages / labels but I didn’t want to go down the embed route as the overall goal was to create a better flow between different H5P activities rather than tweak an existing Moodle format if possible.

So I used 5 steps to make a menu block which would have a similar look and feel to Moodle book and use similar navigation.

1. Go to course and press Turn Editing On button / link.

2. Add an HTML block from the Add a block dropdown menu

addblock moodle menu screenshot

3.Press Configure HTML block (the little grey cog) and add hyperlinks to the relevant activities. Make sure the HTML block is set to appear on all course pages so when a learner is in an H5P activity it still appears. It can also be set to appear at the top of the screen:

configurehtmlblock

4. Add in the H5P activities.

h5pactivity

5. Open the HTML block again (I left mine open in an existing tab so I didn’t have to keep re-opening) and paste in the H5P activity hyperlinks, ensuring they are set to open in new window

opennewwindow

Keep adding any other H5P activities until it is finished. This is how an example looks to a learner in our learning hub, they can still navigate using the menu without having to leave this page / activity.

h5pmenu

 

 

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s