Forum Discussion
hotspots
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!
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.
Thank you so much, Judy! I am going to try the transparent object!
hello again.. ok so now I am having problems with the transparent object!
when I preview it, the selected state doesn't show.
A problem with an object's state isn't something that can be diagnosed without seeing the file.
I suggest you upload a .story file with just the slide in question. That'll make it easier for someone to troubleshoot.
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)
