SVG's for Custom Hotspot Question


About 5 years ago I published this blog explaining the workflow for such a question using shape buttons. The embedded example in that blog was of course a SWF output.  With release 11.5 the possibility to use SVG’s as buttons, and to control the clickable area, combined with multistate object made me feel it is time to update this old post.

Why a custom Hotspot Question?

The default hotspot question slide has several limitations. To me the most frustrating limitations are:
  • hotspots have to be rectangular
  • partial scoring is impossible
With a custom question you can have
  • hotspots with any shape
  • partial scoring, which still can be reported to a LMS
  • full control

Limitations of custom questions

  • developing custom question slides always takes more time
  • although the total score will be correct when using partial scoring, some quizzing system variables will consider each correct hotspot as separate question. You need to keep that in mind for the fields in the score slide (number of questions/correct questions not correct)
  • to the full functionality (Retake/Review) takes a lot of time.

In this post I will show a pretty simple example, no retake/review but with the possibility of having the score stored in the quizzing system variable cpQuizInfoPointsscored.


Have a look at this two-slide file (rescalable HTML5). On the first slide you will be asked to click 4 West-European countries. On a correct click, the country flag appears bottom left. You will not be able to click that country anymore. Move to the second slide (Next button) to see the final score.

Please be a bit patient when you see a ‘pink’ feedback (which is the correct style). It may be due to the amount of SVG’s on the slide, but it takes time to hear the audio and see the flag appear and animated.
If the embedded movie is too small for your device, you click this link.


Look at the screenshot, which shows the Timeline and the Properties, Actions tab for one of the non-correct SVG-buttons  (Luxemburg). In the Style tab, the option ‘Enable Click in Bounding Box’ is disabled to limit the clickable area to the shape of the SVG itself (see recent post). In the screenshot both groups (countries/flags) are expanded. 

For the SVG buttons (countries) Success message is activated and used to display feedback. Those messages have two different styles: grey for the wrong clicks, and pink for the correct ones. After the correct message, an audio clip sounds and the flag of that country will appear at the bottom left. Both for correct and incorrect SVG’s the state will change to the Visited state when clicked: That visited state is grayscale for incorrect clicks. No advanced actions needed so far.


The on enter event of the question slide triggers the simple action ‘Hide Gr_Flags’

Success event for the correct countries, needs an Advanced action. In this case a user variable will store the score. It is not really necessary because the clicks are reported and have a score, the system variable cpQuizInfoPointsscored will have the correct scoe as well. Have a look at the action for Belgium:

The first three commands are self-explanatory. Why did first apply the effect (line 4) to the group, and wait 0,1 sec before showing the flag? Because that will avoid flickering, a trick I learned from another user many months ago.

Duplicate that action, and edit it for the three other correct SVG’s.

Why did I not use a Shared Action?

If you are a fan, you know that I mostly use Shared actions when possible. This was also the case for this example.Of course, I created first a shared action. But a strange phenomenon appeared: the Effect was not applied for each instance of the shared action, only for the first one. I wanted the whole group to be animated after a correct answer. Yes, I could have ungrouped and changed the action, but then that meant another advanced action On Enter for the slide (where I now hide the group). Moreover I like to have the effect emphasize the whole group instead of one flag.

Still looking out for the reason of this non-consistent behavior. Really this is the first time I encounter a difference between an advanced and shared action behavior. Be sure, will update this post when I have an answer.