H5P Interactives

Create simple, fun and interactive online learning activities.

Using the H5P Image Hotspot Question Tool

This guide uses a H5P object. For getting started on placing H5P into a space, please see Inserting H5P in VU Collaborate.

This H5P question type requires students to click somewhere on an image to answer a particular question. This is useful as a quick one-off visual test of knowledge related to course content, such as anatomy definitions or geographic locations.

To create the object, you upload an image and define various hotspots corresponding to details or sections of the image. Hotspots can either be defined as correct or incorrect and should include appropriate feedback text in both cases. You can also define a feedback if the end user presses somewhere which is neither defined as a correct nor incorrect hotspot. Immediate feedback and scores are given to reinforce students’ learning. Students have the opportunity to answer the question multiple times until they get it right.

Step One: Create a New Image Hotspot Question Object


1. In the Insert Stuff menu, click to open the H5P Learning Object.

the insert stuff menu with h5p learning object highlighted

2. In the H5P tool, click Create new Learning Object.

The create new learning object button highlighted

3. Using the dropdown menu, set your Content Type to Find the Hotspot.

the content type menu with find the hotspot selected

4. Add a Title that will be easy to remember and find.

The title field highlighted with a sample title for the object entered

5. Write a Description for your activity, to provide context for the object if you're sharing it with other staff.

the description field with a red ellipsis indicating where text should go

6. Enter your relevant Discipline/Area and College in the fields provided.

7. The H5P options that appear at the bottom of the screen determine the accessibility of the tool. Set your preferences before you Save.

Select Shared to enable other staff to copy this learning object to use in their spaces.

Select Send Grades to VU Collaborate if you have a grade item enabled and would like the marks to be sent straight through to a connected gradebook.

Display action bar and frame will allow users to navigate via the action bar.

Download button enables users to download the learning tool.

Embed button enables users to embed your learning tool elsewhere.

Copyright button will assign your copyright to this tool.

The keywords field and h5p options area with all boxes ticked

Step Two: Add Image and Hotspots


1. Under Background image, click the green plus icon green plus icon to choose the image that you will place hotspots on for this interactive. For example, this could be a model from your course content.

background image section with green plus icon highlighted

2. Add a Title for the question. This won't be shown to students -- titles help you identify particular questions if you link it to a grade item as part of an assessment, or a quiz. The object will automatically generate the title "Image hotspot question" which you can edit for clarity if you're making more than one of this question type.

the title field with image hotspot question predefined as the default text

3. Click the Hotspots tab to start placing hotspots on the image you've uploaded.

the hotspots tab highlighted next to the background image tab. A sample image of four berries - a raspberry, a blackberry, a strawberry and a cherry has been uploaded for the purpose of the task

4. In the Hotspots tab, enter your Task description. This will explain to the student what they need to do to answer the question, so make it a short, direct instruction.

the hotspot tab with a larger version of the berries picture, and above the image, a task description field highlighted with an example task entered. The text reads which one of these berries is named after a town in Turkey?

5. Click one of the buttons in the bar above the image to place a circular or square hotspot. Choose the shape that's going to cover the most area of the object in your image - for our example, we're going to use a circle.

Two highlighted buttons, one featuring a circle, the other a square, on the left-hand side of the bar appearing right above the sample image

6. A pop-up box will open for the details of this new hotspot. Tick the Correct tickbox if this hotspot is a correct answer (you can have as many correct answers as you like) or leave it unticked for an incorrect answer.

a pop up with hotspot options, the correct tickbox unchecked and highlighted

7. Enter some Feedback for the hotspot based on whether it is a correct or incorrect answer. One or two sentences work best.

the popup with some sample feedback entered into the feedback field

8. Click Done to place the hotspot on the image.

the pop up box with the blue done button highlighted in the bottom right-hand corner

9. The hotspot will appear on the image. Click and drag it to the corresponding part of the image based on your feedback. Remember, the hotspot won't be visible to students.

a new circular hotspot in the centre of the background image

You can edit, reorder and delete hotspots by clicking on them.

the circular hotspot moved over the cherry on the right-hand side of the background image

Click the pen icon icon01 pen if you need to Edit the details you have entered.

the edit icon highlighted in the four-option menu that pops up when the hotspot is clicked

10. Keep placing hotspots until you have added all your desired answers to the image.

the same background image of berries as before, with four hotspots placed on the image, one on each berry

11. Adjust the size of each hotspot by dragging it at the corners, so that it covers the whole answer area. This is important, as the hotspots you've placed won't be visible to students.

the same image with four hotspots as before, but all of the hotspots have been resized to cover the whole area of their corresponding berry

12. Add some Feedback for clicks in blank areas.

the Feedback field below the background image is highlighted and some text has been entered. The text reads There's no hotspot here, try clicking somewhere else.

13. Scroll down to the bottom of the page and click Save to finish creating your object.

the save button highlighted in the bottom left-hand corner of the screen

 

Step Three: Preview and Publish Image Hotspot Question


Before the object gets inserted into the space, previewing it for any possible errors is a good idea.

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

the main h5p object menu with the new image hotspot question object at the top and the insert button highlighted on the right of the object

2. Click around and test the answers and elements you've created. If you need to start again, click Refresh Preview at the top of the preview screen.

a preview of the finished object with the refresh preview button at the top of the screen highlighted

3. Once you've finished checking all of your elements work correctly, click Insert to add the question to the document (or other embeddable area) you are working on. If there's something you need to change, click Back to return to the main H5P menu where you can Clone, Edit or Delete the object.

the insert button next to the back and cancel buttons in the bottom left-hand corner of the preview, insert is highlighted