Using the H5P Image Hotspot Tool

Image hotspots are useful for creating fast and simple infographics. Use any image and enrich it with points of interest and in-depth information about the details depicted.
The student interacts with the image to get more information about a particular topic and engage with it in a visually ordered way.
The H5P Image Hotspot Tool creates an image-based test where the student is required to find the correct spot on an image.
Hotspots can reveal text, images, and videos when clicked.

Please see Inserting H5P in VU Collaborate for more information on how to place a completed H5P into a VU Collaborate space.

To see an instructional video on Using the H5P Image Hotspot Tool in VU Collaborate, see below.

 

Below are the steps for using the H5P Image Hotspot tool:

• Create a New Image Hotspot Object
• Add Hotspots and Media
• Preview and Publish Image Hotspot

 

Step One: Create a New Image Hotspot Object

---

1. In the VU Collaborate Learning Space, choose the module you want the H5P to be in, click on New then New Document.

2. Click the Insert Stuff icon and from the list of options select the H5P Learning Object.

3. Click on Add Content.

4. Scroll through the content types provided to locate Image Hotspots and click on Details for more information on the selected H5P or click on the title (Image Hotspots) to immediately start creating your H5P.

 

By clicking on Details, a summary of the tool and an option for a demonstration will appear as 'Content demo'. If satisfied with your tool selection, click Use.
If you do not require this step, click on the title of the H5P content you wish to use.

  

 

Step Two: Add Hotspots and Media

---

1. Write the title in the Title field. For example, ABC1000 Baking Muffins - Session 2.

2. Under Background image, click the green plus icon to choose the image that you will place hotspots on for this interactive. Make sure you also add some Alternative text (a short description of the picture) to aid accessibility of the H5P.

3. Click the Hotspot colour dropdown to open a colour picker. This determines what colour the hotspots (appearing as small icons) will be. When you've found a colour you're happy with, click Choose. 

If you select black, for example, the hotspot will appear like this . Remember to choose a colour that will be clearly visible against your background image.

4. Now that your image is in place, you can start creating hotspots. Click anywhere on the image preview to place a hotspot.

4. The Cover entire background image tickbox appears in each hotspot and is unchecked by default.
If you are adding a video or image (see 2.1 Adding a Video to a Hotspot and 2.2 Adding an Image to a Hotspot) you may want to tick this so that students can see or focus on your content better.
Leave it unchecked to generate a smaller popup for this hotspot's content.

5. Enter a Header for the popup. This is the title of your content, and optional - though helpful for adding extra context where needed.

6. Click the Content menu and select the content type you want to add to the hotspot from the dropdown. There are three content types you can add to a hotspot: Text, a Video or an Image. For the purposes of this guide, we're going to start with Text.

7. Enter your Text in the text field that will appear when the student clicks the hotspot. Try to keep it short - 3-4 sentences is best - so that the popup won't take over the screen.

8. When you're finished with your text item, click ADD HOTSPOT to add another hotspot.

 

You will have to enter a new hotspot position and header each time (steps 4-6) you add a hotspot.

2.1 Adding a Video to a Hotspot

You can add a video to a hotspot by uploading it from your computer or adding a link to a video hosting site.

1. Click the Content menu and select Video from the list and write the title of the video.

 

2. Click the (+) plus sign in a dashed rectangle border to add your video.

 

3. A pop-up window will appear where you can choose to upload a video file or enter a link to the video you want to include. When you have added the right video, click Insert. 

 4. Under the Visuals tab, you can choose to upload a Poster image for your video. This is a static image that will display if the video is not playing. Click the green plus icon to browse for a poster image on your computer. The poster image is optional, and will not work if you have your video set to autoplay.

 

5. Below the poster image upload area, you can choose whether to fit the video to the space (this will resize the video to fit if you have Cover entire background image ticked for this hotspot), and show or hide video player controls (play, pause, and navigate) in the video. These are ticked by default, and it is recommended you leave these options ticked if you're not sure.

• If you untick Fit video player to use all available space, the video will retain its original size and aspect ratio.
• If you untick Show video player controls, the student won't be able to pause or rewind the video.
  
  

 

6. Under the Playback tab, you can choose whether the video automatically plays when the hotspot is clicked, or choose to loop the video. Both options are unticked by default.

• Tick the box next to Auto-play video to play the video as soon as it opens.
  

  If you leave the auto-play option unticked and also disable video player controls, the video will not play.

• Tick the box next to Loop video to make the video automatically replay when it finishes.
  
  

 

Once you have configured your video, it's ready to go. Don't forget to add your copyright if the video is yours, or an attribution if it's from an external source.

2.2 Adding an Image to a Hotspot

You can add an image to a hotspot by uploading it from your computer.

1. Click the Content menu and select Image from the list.

 

2. Click the green plus icon to browse for and upload your image.

 

3. Enter some Alternative text for your image. This will help students using text-to-voice software understand what the image depicts.

 

4. You can choose to enter some Hover text to add extra context, but this is optional. (Hover text may not work on mobile devices).

5. You can click the Add item button to insert another content type into any hotspot.

 

 At the bottom of the screen you can adjust your H5P's settings (you can leave these settings by default or make alterations):

1 - Display options: (previously 'Display and copyright buttons') What options do you want to be visible for the user, for example you can tick the display download button to enable students/staff to download the H5P to their own computer. You can also tick the Display embed button, which allows the user to embed the H5P into their HTML editor in VU Collaborate for example.

2 - Publish: This option allows you to make the H5P Unpublished (content can not be inserted into VUC), Protected (content can be inserted into VUC) or Public (visible to the public using a content link and the content can be inserted into LMS and be embedded). Protected is the default setting and it is recommended to leave this setting as it is.

3 -  Folder: (previously 'My Content') All your content will be saved in one spot, within a root folder.

4 - Collaborators: (previously 'Authors') In this setting you can add and search for other collaborators and give them access to edit your H5P's. For example, if you are teaching a unit with another staff member and you would like them to have access to edit your H5P's, then you can use the search field to locate another staff member by typing in their full name. 

5 - Sharing: (previously called 'Select value') This is where you share your H5P with others, so they can view and clone your content. There is a folder allocated for each college, for example 'Arts and Education', select your College.

Note: To know more about Sharing and Collaborators, please see H5P Sharing and Collaboration.

6 - LTI Settings : (previously 'Send Score to LMS) In this section you can link your H5P directly to VU Collaborate and also link it to your gradebook. It is recommended to leave this setting as it is, and NOT send the results to the gradebook.

 

After adjusting your H5P object, you can click Save and Insert or Save.

 

Step Three: Preview and Publish Image Hotspot

---

Before the object is inserted into the space, preview it for any possible errors. You can check your settings and elements for broken links or inappropriate sizing prior to sharing the object in your space.

1. In the main H5P object menu, click Insert to open a preview of your new object.

 

 2. Click around in your new object to see how students can interact with it, and check videos are working correctly. The hotspots will appear as the chosen icon you had selected during Step Two: Add Hotspots and Media. Finally click Insert.