hotspots

Sep 08, 2021

Maureen Morales
By Maureen Morales

Hello everyone! Is there a way to edit the spinning inside of a hotspot?

I am using hotspots for some quiz questions, but users seem to get the impression that something is loading, so they pause instead of moving on.

I've added some instructions to the beginning of the assessments that I hope will help, but, I was curious to how "edit-able" hotspots are?

I am new to hotspots, so I would also appreciate some feedback on all of your favorite ways to use them!

Thank you all in advance!

5 Replies
Judy Nollet
over 2 years ago09/08/21 at 5:46 pm (UTC)

Hi, Maureen,

The best you can do is provide instructions (and maybe a screenshot), because that spinning cursor isn't editable. 

Another option: use 100% transparent objects instead of hotspots. With those, you could add a custom Selected state. Also, if you want the user to only be able to click 1, you can just group them in a Button Set. And another benefit: because objects can have states, you can track whether the user selected or visited them.  

Przemysław Hubisz
over 2 years ago09/10/21 at 8:34 am (UTC)

Hey. You can modify CSS to disable the animation.

Option 1

1. After publishing your course go to this folder:  html5\lib\stylesheets\

2. And add this line at the end:

.hotspot-marker{animation:none !important;color:#00ecf5 !important;border-left-color: unset !important;border-right-color: unset !important}

This will disable the spinning animation.

Option 2

If you don't want to do it every time you publish your course you can add a JavaScript trigger with this code. It will add a css to your course when the trigger is triggered.

var styles = `
.hotspot-marker{animation:none !important;color:#00ecf5 !important;border-left-color: unset !important;border-right-color: unset !important}
`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Sign In to Reply