Create and edit H5Ps

H5P allows you to easily and quickly create rich interactive multimedia content within a Blackboard (Bb) learning site. If you are unfamiliar with what a H5P looks like, please see the following article: Create interactive content with H5P. This document will guide you on the following:

Create new H5P content

The following steps cover the process of creating a H5P object and inserting this into a Bb item in a learning site. 

First time users

Your H5P account is created the first time that you log into H5P through a Blackboard/MySCU learning site.


  1. Insert an item.
    On the Bb page where you wish to create a H5P choose Build Content > Create > Item.



  2. Add H5P content.
    Enter a name for your item and then click on the + Plus button (circled in red below).



    Click on Additional Tools > Add H5P Content
  3. Create a folder.
    Before you start creating H5Ps (and for good housekeeping), click on New Folder and name it with the UNIT CODE that you are working on.



  4. Choose a H5P content type.
    Now, click on Add Content to view the list of content types. 


    On the
    Select content type page, click on Details to find out about each content type, see screenshots and explore example content.


    Click on the content type you wish to add to your site. In this example, we will be using the Summary interactive.
    Type Summary into the Search for Content Types field to find this interactive type. Cl
    ick on Details to view the Summary content type. 
     


    Click the Content Demo button to learn more about this content type and to see some examples of its use. The summary interaction is a useful way for students to test their understanding by choosing statements they believe are correct. 
    Click the Use button (lower right) to choose this H5P type. 



  5. Click on the Tutorial link underneath the Summary heading to learn about how to use this content type.


    Changing content types

    If you change your mind you can click at the top of the page on the content type you have selected, and choose a different content type. Please note that changing content types will delete any work on the existing H5P interactive. 

  6. Enter a suitable title in the Title field. For unit work, it is recommended to follow the naming convention 'Unit Code_Module_Number_actno' (eg. WXYZ2001_m03_act3_1). This will ensure that you can easily search for your H5P in the future.
    Follow the steps in the Tutorial to finish creating a summary H5P interactive. You can use the example statements about berries in the tutorial or write your own statements related to a unit you are working on.

Saving and publishing for student use

When you have finished creating your H5P, scroll to the bottom of the H5P window to save and publish it. The following options cover the most common use case where you wish to create a H5P for students. For more information about publishing see:  Publishing a H5P.

  1. Under Display Options ensure that Toolbar Below Content is unticked to prevent students from sharing and copying the H5P.


  2. Under Publish ensure that Protected is selected.


  3. Under Folder, find the unit folder you created previously, then click on Save and Insert to add the interactive to Bb as an item.
  4. Add text or instructions for students to the Bb Item to set the context and explain the relevance of the H5P activity to the unit. Also, ensure that you have given the Bb Item a suitable descriptive Name.
    When you are finished click on the Submit button (bottom right) to save the H5P and the Bb Item.

Edit existing H5P content on your site

After you have already saved H5P content, you can later return to edit it by clicking on the Edit button.

This loads the H5P editor in the content editor window, where you are able to make simple changes.
Click Save to ensure that any changes you make are saved.


A note about sizing

Sizing a H5P

By default, a H5P added to a Blackboard Item using the + Plus button has a width of 779px and a height of 600px. This may not suit certain types of H5P content and leave scroll bars or wasted white space. If you prefer that the H5P fills the entire width of the browser window, follow the process outlined in the Publish using links and embed code article. Alternatively, you may edit the HTML code to set a custom height, but that is outside the scope of this article.


(Please note - it's better to refer to the Online version rather than export, as it's always up to date)