Multiple HotSpots

Sep 25, 2023

Hi,

I want learners to be able to keep track of how many hotspots out of 11 they have clicked on a single image. Example of the type of activity is within the course. On my image they have to spot 11 differences. 

Spot The Difference: Can You spot 8 differences between the two images in  26 seconds?

2 Replies
Martin Sinclair

Hello!

 Loads of ways to do this but here is one.

I actually think that Hotspots might not be the best feature to use for spot the difference. Which seems counter-intuitive but here is why...

Hotspots can't change state. So once the learner clicks on the first hotspot (and scores a point), there is nothing to stop them clicking it again and again, increasing their score. This could let them accidentally lose track of how many differences they have really found.

Instead, I suggest using shapes with 99% transparency (so it is barely noticeable). This means the shapes can be set to change state to Hidden once initially clicked, to avoid the problem above.

Here are the steps:

  1. Draw a shape (I have chosen ovals) in each 'hotspot location' and colour them white with 99% transparency.
  2. Create a variable (let's call it HotspotCounter) and triggers which read "When user clicks on Oval 1, add 1 to HotspotCounter. Repeat this trigger for each oval.
  3. On each oval, add a second trigger which reads "Change state of Oval 1 to Hidden when user clicks Oval 1"
  4. Elsewhere on the screen, insert a textbox to keep score. I have gone for "Score = %HotspotCounter% / 11 as I know the variable reference will be replaced by the number of hotspots they have found when published.
  5. Finally, as a bonus step - in a spot the difference game, it will be ruined becuase every time the mouse hovers over one of the ovals, it will change from a pointer cursor to a hand cursor. To avoid giving this clue, I have added a large transparent rectangle which covers the whole image. It has a trigger to play an incorrect sound when it is clicked. But basically it is there so the cursor is always a hand, and the learner isnt given that giveaway clue!


    Story file attached and you can see it in action here. As a demo, I have included two of the differences (the number 6 and 9 have been flipped, and the foot at the bottom of the picture is in a different position)

 

 

Nedim Ramic

Hi

I've started with Hotspots before Martin published his excellent idea to use the shapes instead. Anyway, I somehow managed to hide hotspots by moving them out of the screen after being clicked. My example is a bit different as the correct spots are circled after they're found. Also, the players starts with 5 lives. If they click the wrong hotspot, they will lose one life. When all lives are lost, they have an option to either add one more live or restart the game. The players are able to keep track of how many hotspots out of 8 they have clicked during the game. 

https://360.articulate.com/review/content/6a743839-773f-4752-85f0-a2e5cb840ab1/review