Find the Hotspot
Primary tabs
A free HTML5 based question type allowing creatives to create an image based test where the learner is to find the correct spot on an image. Use this content type with H5P in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress.
Would you like to create content like this on your own?
Get startedRegister on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.
Description
This content type allows end users to press somewhere on an image and get feedback on whether that was correct or incorrect according to the task description.
The author uploads an image and defines various hotspots corresponding to details or sections of the image.
Hotspots can either be defined as correct or incorrect, and the author provides appropriate feedback text in both cases. The author can also define a feedback if the end user presses somewhere which is neither defined as a correct nor incorrect hotspot.
New to H5P? Read the installation guide to get H5P on your own site.
Comments
finn
Fri, 05/04/2018 - 12:05
Permalink
Question set?
Are there plans to have find the hotspot or find multiple hotspots to be included in question set? I try to make a topgraphic quiz and it would open up a whole new world to have this included. :)
Maybe someone can try if this is possible?
Greetings,
Finn
Guillermo Blanco
Fri, 05/25/2018 - 10:13
Permalink
Moodle problem visualizing the H5P content
Hi, I have a configuration problem I think that impact the H5P content in my site. I installed manually the previous version of H5P in a 3.5 moodle version. I had some errors but then all went well. The I update the version with the new H5P and since then no content appears. I tried to desinstall H5P and reinstall it but I still have the same result. I activate the debug and have the following error messages
[Error] Failed to load resource: L’opération n’a pas pu s’achever. (kCFErrorDomainCFNetwork erreur 303).
[Error] Unable to find constructor for: H5P.DragText 1.6
error (h5p.js:861)
newRunnable (h5p.js:784)
(fonction anonyme) (h5p.js:132)
each (jquery.js:2:5343)
each (jquery.js:2:2099)
init (h5p.js:92:83)
(fonction anonyme) (h5p.js:2136)
c (jquery.js:2:7944)
fireWith (jquery.js:2:8741)
ready (jquery.js:2:3359)
H (jquery.js:2:782)
[Error] TypeError: undefined is not an object (evaluating 'instance.on')
on (h5p.js:1773)
(fonction anonyme) (h5p.js:205)
each (jquery.js:2:5343)
each (jquery.js:2:2099)
init (h5p.js:92:83)
(fonction anonyme) (h5p.js:2136)
c (jquery.js:2:7944)
fireWith (jquery.js:2:8741)
ready (jquery.js:2:3359)
H (jquery.js:2:782)
[Error] Failed to load resource: L’opération n’a pas pu s’achever. (kCFErrorDomainCFNetwork erreur 303).
I have a beta site (3.5) and I don't have any problem, so i figure it's a problem with the env... couldn't find were and I'm stuck :) need some help if possible!, thanks
thomasmars
Wed, 05/30/2018 - 14:14
Permalink
Hi, please make sure you
Hi, please make sure you follow our guide for setting up PHP properly: https://h5p.org/installation/configure-php.
When you've made sure PHP is set up properly, if you're still getting error messages follow the troubleshooting PHP guide and post your PHP errors and troubleshooting results here.
Guillermo Blanco
Fri, 05/25/2018 - 10:16
Permalink
MOODLE: problem visualizing H5P content
The site hosting my site is a french hosting service called ovh if that helps, thanks
nadavkav
Sun, 06/03/2018 - 10:42
Permalink
Translation
Hello H5P team,
I am tring to translate this question, but when I donwload it it seems to be H5P.ImageMultipleHotspotQuestion which I can not find on github.com/h5p
I only find https://github.com/h5p/h5p-image-hotspot-question which does not seem to be the same question.
Please advise
Nadav
BV52
Mon, 06/04/2018 - 09:10
Permalink
Hi nadavkav,Multiple hotspot
Hi nadavkav,
Multiple hotspot was not created by the core team instead it was created by lukemuller. You can see the repository here https://github.com/lukemuller/h5p-image-multiple-hotspot-question.
-BV52
nadavkav
Mon, 06/04/2018 - 09:27
Permalink
Thanks :-)
Thanks :-)
piyon
Mon, 09/24/2018 - 17:19
Permalink
'H5P.DragNDrop is not a constructor.'
Hi, I'm trying to setup Drupal-8 with the latest OpignoLMS (still beta) prebuilt, which includes H5P. Everything seems to be okay up to the point where I tried to use H5P with the latest hotspot (which I also updated trough the update links on the H5P-panel) and on console I got the following error. I also updated my nginx config with
add_header X-Frame-Options "SAMEORIGIN";so the image uploading works fine now, but it seems it can not open the toolbar. Do you got any info or clues on this?
H5P.DragNDrop is not a constructor.
here are the drill-down details of the error:
DragNBar http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:747:16 ImageHotspotQuestionEditor.prototype.createDragToolbar http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:7149:20 ImageHotspotQuestionEditor.prototype.createToolbar http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:7134:5 ImageHotspotQuestionEditor.prototype.createEditor http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:7028:5 ImageHotspotQuestionEditor.prototype.initQuestion http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:6934:5 ImageHotspotQuestionEditor http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:6900:5 ns.processSemanticsChunk http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:226:25 C.prototype.appendTo http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:59:5 ns.processSemanticsChunk http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:234:5 ns.Form.prototype.processSemantics http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor-form.js:89:3 ns.LibrarySelector.prototype.loadSemantics/< http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor-library-selector.js:165:7 ns.libraryRequested http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:85:3 success http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-editor/scripts/h5peditor.js:137:11 c http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js:2:7852 fireWith http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js:2:8658 k http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js:4:14013 r http://akademi.piyononline.com/profiles/opigno_lms/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js:4:18226thomasmars
Thu, 10/04/2018 - 11:18
Permalink
Seems like DragNDrop is not
Seems like DragNDrop is not loaded. You can check if it is properly installed on your server, and check your PHP error log for any further errors that could give an indication of why the library is not being loaded.
lgvtheory
Sat, 12/08/2018 - 11:58
Permalink
hotspot correct & incorrect images not showing correctly
Hi,
when I insert the shortcode for a hotspot image into a wordpress page the ticks and crosses do not show correctly
when i test it in the dashboard area it works fine
I am using shortcode which is inserted into a test box with wpbakery/visual composer
Any help would be much appreciated
BV52
Mon, 12/10/2018 - 07:37
Permalink
Hi lgvtheory,I created a
Hi lgvtheory,
I created a separate post here.
-BV52
Wednesday
Thu, 05/23/2019 - 08:17
Permalink
use of the X icon
Hi Falcon.
Just a little bit of feedback for your consideration:
When the user clicks an incorrect hotspot and the response bubble pops up, the point of interaction is marked with a red X in a light red circle. This looks like an interactive element, in fact, it is similar to the "close window" X that appears in the top right corner of the box responding to a correct answer!
What I am finding is my students are clicking the X (to no effect) rather than the refresh icon to try again.
Rather than changing this red cross for another icon, a simple solution might be to simply make it function as anticipated (do the same thing as the refresh/reload icon). What do you think?
BV52
Fri, 05/24/2019 - 05:25
Permalink
Hi Wednesday,I think you have
Hi Wednesday,
I think you have valid points and good suggestions. If you don't mind please post these in the feature request forum. In order for your feature request to attract as much interest as possible make sure it follows the below guidelines:
It is clear from every perspective how the feature will work. We recommend describing the feature with one or more user stories, for instance “As an author I want it to be possible to pick between different effects for the check answer animation so that the learners will see a variety of effects and also I can adapt the effects to my target audience(I’ll be using pink unicorns which works really well for both my target audience which are 4 year old girls and venture capitalists)”
If the feature can be illustrated with images or videos it always helps
Make it clear what content types this is relevant for, and or if this is a new content type
Make sure you post the feature in the Feature Request forum.
-BV52
Wednesday
Fri, 05/24/2019 - 09:25
Permalink
OK
I have done this now. thanks
BV52
Mon, 05/27/2019 - 02:58
Permalink
Thank you Wednesday.
Thank you Wednesday.
Pages