This could be an example where you want a user to find or identify specific areas on an image. There is a status bar at the bottom to indicate the progress of how close a user is to finishing the task. View help pages on creating multiple image hotspots.
This is an example of the image juxtaposition, which can be useful for displaying before and after images. This particular example shows the original image of President Obama shaking hands with former Indian prime minister Manmohan Singh, juxtaposed with an altered image to show him shaking hands with Iranian president Hassan Rouhani.
This is an example of creating hotspots on a 360 degree photo, and either providing text info on certain areas (the + button), or providing links for further viewing (the arrow buttons). Links can be to separate webpages, or other images.
Here’s a help video that can walk you thru the process for creating and editing H5P content for the Find Multiple Hotspots content module; otherwise, follow the help documentation below.
Example workflow for the Find Multiple Hotspots content type
Follow the above steps to access and create an
Add a title that will describe your content.
Add the background image you would like to use. The image will need to be on your computer, not in your wordpress media library.
Click on the hotspots tab.
Enter a task description, if desired.
Enter a hotspot name, if desired.
Choose either the circle or rectangle shape, and move it to where you want the hotspot to be on your image.
You can add a message to your viewer to say they have found the hotspot.
Repeat these steps for as many hotspots as you want to add.
After you are done, click on the blue Create button at the top right.
Copy the shortcode on the top right Shortcode box, which will looks something like this:
paste this code into an empty block area of any page or posting that you want to publish your H5P content.
An example of using multiple hotspots can be seen below.
On your Moodle page, turn on the Edit mode. The Edit mode button is found at the upper right of your screen. A red + button will appear when the mouse hovers over areas; click on the + button and add your activity.
In the window that appears, type “H5P” into the search bar and select the “H5P” option from the list of activities.
This will bring you to the activity creation page where you can name the activity and access other editing options. To create the actual H5P content select the “content bank” link to take you to your H5P content bank.
In your content bank you can see previously created H5P content along with an “ADD” button with a dropdown menu that allows you to select what kind of H5P content you wish to make.
After selecting the type of content you wish to make it will take you to the creation page for that content type. From here you can fill in the elements of your content. When you are finished creating your content you can press the “Save” button. This will create your new H5P content and add it to your content bank.
From here you can return to the activity creation page and press the file selection button which will open up the file picker.
In the file picker you can select “Content bank” on the left of the window to bring up the H5P content in your content bank. You can now select the H5P content that you just created and add it to your activity by selecting it. For information on the different types of H5P content in Moodle you can look at this page.
Selecting the file in the file picker will bring up another window with some more file options, press the “Select this file” button to select the file.
You can now select the “Save and return to course” button to create your new H5P activity.
For examples of H5P content check out these pages:
H5p.org is an open source platform that has a suite of learning resources that can be created within our blog system or on Moodle pages.
The organization has an abundance of great examples on their website that can be explored. Creating branching scenarios, image hotspots, quizzes, interactive timelines, and interactive images are just a few of what can be created using their services.
For instructions on creating H5P content view one of these pages:
