This H5P content has been created using the Pressbooks H5P plugin. It can be embedded in any website that allows for the use of an iFrame.

Use the Embed button below the content and copy the code to your institution’s site.

Below are instructions for embedding the content in several common formats for your institution’s use.

Learning Management Systems

Blackboard

1. Navigate to the content area in the course where you’d like to add this content. Click on Build Content and choose Create Item in the dropdown menu:
   
2. In the Content Information section, add in the Name/Title for your content Item. Then, in the text box editor, click on the Source Code icon [<>] to switch to the HTML editor. A pop-up window should appear with the HTML editor.
   
3. In the Source code pop-up window, paste in your iFrame embed code.
4. Click on the Save button in the bottom right-hand corner of the window.
   
5. Choose the settings for your new item.
6. Click on the Submit button at the bottom right-hand side of the screen to add the changes to your course content.

Canvas

There are two ways to embed H5P into a Canvas course: use the embed code tool or insert the code in HTML view.

Using the Embed Code Tool

1. Navigate to where you want to insert your embed code and place your cursor in the text box.
2. To get to the embed code tool, you can either:
   • Click on the Insert menu and select Embed.
     
   • Or click on the Embed icon in the toolbar [2]. Note: If your browser window is too narrow, you may need to click on the More Tools (3 dots) icon [1] first and then click on the Embed icon [2].
     
3. When the Embed pop-up appears, paste the code in the Embed Code box, and then click on Submit.
   
4. Once you have submitted, the embedded content should appear in the text box.
5. When you are returned to the main page, click on Save or Save and Publish to finalize your changes.
   

Inserting Embed Code in HTML View

1. Navigate to where you want to insert your embed code and place your cursor in the text box.
2. Either click on the View menu and select </> HTML Editor
   
   Or click on the </> icon in the toolbar located just below the text box.
   
3. Paste your embed code in the text area provided, and then click on Save.
   

Moodle

1. Navigate to the content area where you want to add your embed code.
2. Click on the </> icon in the tool bar to switch to HTML view.
   
3. Paste your embed code in the text box.
4. Click on Save and return to course or Save and display to apply your changes.
   
   

Brightspace by D2L

(See Brightspace by D2L: Embedding objects into content)

1. Navigate to the content area where you want to add your embed code.
2. Click on Insert Stuff, then scroll down to the bottom and select Enter Embed Code.
   
   
   
3. In the text box, paste your embed code. Then click on the Next button to preview your content.
   
4. Click on Insert to add the code to your content.
   
5. Click on Publish to complete your changes.
   

Web Content

H5P content can also be used on websites and HTML pages.

WordPress

To embed H5P content in a WordPress blog post:

1. Click on the Embed link below the content you want to embed.
   
2. Copy the code.
   
3. In the WordPress blog post editor, switch to Text editor and paste in the code.
   
4. Switch back to Visual editor to see the content you just embedded.
   
5. Continue editing the blog post, and save as usual.

Pressbooks

To embed H5P content on a Pressbooks page:

1. Click on Embed below the content you want to embed.
   
2. Copy the code.
3. In the Pressbooks editor, switch to Text editor, and paste in the code.
   
4. Switch back to Visual editor to see the content you just embedded.
   
5. Continue editing the content, and save as usual.

Pressbooks Using the H5P Plugin

Alternatively, you can also add the H5P activity to your library of activities to share from there. Please ensure that the H5P plugin is activated in your Pressbook.

1. From the Admin panel, choose Plugins.
2. Click on Activate under H5P.

Adding the H5P Activity to Your Library

Once you have activated the H5P plugin, you can follow the steps below to download the H5P content, upload to your library, and add the activity to your Pressbook.

Downloading the H5P File

You can save your H5P file to your local machine with two simple steps:

1. Click on the Reuse button at the bottom of the activity.
2. Click on Download.

The file is now saved on your local machine.

Uploading the H5P File to Your Content Library

1. Open the H5P plugin in the Admin tab of the Pressbook you want to install it in.
2. Click on Add New.
3. Open the Upload tab.
   
4. Find the file and upload it.
5. Click on Save.

Adding the H5P activity to your Pressbook

The visual editor will have an Add H5P button next to the Add Media button.

You can use this button to add the shortcodes for H5P activities. To add an H5P activity you’ve created:

1. Navigate to the location on the page where you would like add the activity.
2. Click on the Add H5P button.
3. Find the activity you’d like to add to your book and click on Insert.
   
4. Save the chapter and view the web version to see your embedded activity.

Drupal

1. Navigate to the content page/area where you want to add your embed code.
2. Click on the Source icon in the tool area to open the HTML view.
3. Paste your embed code in the text area.
4. Click on the Source icon again to switch back to Rich Editor view.

Editing or Adapting an H5P Activity

This H5P content is adaptable and editable for reuse. You may wish to customize or change any of the content to fit your context.

To obtain an editable version of the H5P content:

1. Save the H5P file to your local machine by clicking the Reuse button below the content.
2. Click on Download.

The file is now saved on your local machine.

Note: You can’t open the H5P file on your machine. It must first be uploaded to a site supporting H5P.

Uploading the H5P file

Now that you have downloaded the H5P content, you can upload it to your instance of H5P or to the H5P plugin in a Pressbook.

1. Open your H5P plugin or instance.
2. Click on Add New.
3. Open the Upload tab.
   
4. Find the file and upload it.
5. Click on Save.
6. Edit the H5P activity.