Creating H5P Interactive Content

Overview

H5P is now available for MGH Institute instructors. H5P allows you to create interactive content right within D2L. This interactive content includes flashcards, drag and drop activities, image hotspots, timelines, and more. H5P interactive content is best used for providing students with quick ways to informally assess their knowledge and reinforce important content. Like D2L, H5P is responsive across platforms, so students can use the activities on their computer or mobile device. 


Step 1. On your D2L Home page, click the H5P Content Creator link in the D2L Help Resources widget. This will take you to a new page. 

Click the H5P Content Creator link in the D2L Help Resources Widget

Step 2. On the new page, you will see a link labeled Create H5P Content. Click this link to create a new H5P Activity. This page will also display your existing “Created H5P Content”. You will be able to view, edit, and delete this previously created content on this page. 

Click the Create H5P Content link

Step 3. Once you click Create H5P Content, you will be taken to a new page. On this new page, you will see the H5P content creator. To begin, enter a (a) “Title” for your new activity and (b) select a “Content type” from the dropdown.  

Enter a title and select a content type for your H5P content

Step 4. Fill in the information required for your Content type. This will vary depending on your content type. For more information on the different types of H5P content, please see the H5P Tutorials for authors page

Step 5. Once you are done entering the Content information, you can hit the Save button immediately underneath your title to create the content. 

Click the Save button to finish creating your content

Step 6. After you create your content, you will be taken to the main H5P page on D2L. You will now see your newly created activity in the “Created H5P Content” area. Click on the name of your activity to view it. 

Select your previously created H5P content

Step 7. Test out your activity to make sure it behaves how you intend it to. When you have confirmed that the activity is correct and are ready to post it to your course, click the <> Embed link in the bottom left corner of the activity. This will open a pop-up window. 

Click the Embed link in the bottom left corner of your H5P content

Step 8. In the pop-up window, you will see an embed code that begins with “<Iframe”. Copy this entire code ending with “</script>”. 

Copy the embed code for your H5P content

Step 9. Go to your course and the module you would like to add the activity to. Then click the blue Upload/Create button and select Create a File from the dropdown. 

Go to the Content area of your D2L course and Create a File

Step 10. (a) Title your File. Then, (b) click the </> icon in bottom right corner of the text editor. This will open a pop-up window.

Title your content and then click the </> icon in the bottom right hand corner

Step 11. Paste the copied embed code between the “<body>” and “</body>” tags. Then click the blue Save button in the bottom left corner of the window. This will close the pop-up window. 

Paste the embed code between the two <body> tags

Step 12. Finally, click the blue Save and Close button to finish posting the interactive content to your course. 

Click Save and Close to make the H5P activity available in your course