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.
2. In the H5P tool, click Create new Learning Object.
3. Using the dropdown menu, set your Content Type to Find the Hotspot.
4. Add a Title that will be easy to remember and find.
5. Write a Description for your activity, to provide context for the object if you're sharing it with other staff.
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.
Step Two: Add Image and Hotspots
1. Under Background image, click the 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.
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.
3. Click the Hotspots tab to start placing hotspots on the image you've uploaded.
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.
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.
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.
7. Enter some Feedback for the hotspot based on whether it is a correct or incorrect answer. One or two sentences work best.
8. Click Done to place the hotspot on the image.
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.
You can edit, reorder and delete hotspots by clicking on them.
Click the pen icon if you need to Edit the details you have entered.
10. Keep placing hotspots until you have added all your desired answers to the image.
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.
12. Add some Feedback for clicks in blank areas.
13. Scroll down to the bottom of the page and click Save to finish creating your object.
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.
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.
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.