Forum Discussion
Turn off Labeled Graphic animation
I'm having an issue with the labeled graphic interactive block. I understand that the animated marker icons are meant to turn on when there is a continue block beneath them. I have no continue block...
I made a theme component that will turn off the animation, documented here:
https://theme-360.com/theme-component/remove-pulse-animation-on-labeled-graphic/
I also provide a downloadable XD file that shows all the states of the labeled graphic marker, and you can design your own and test with your images. Note that if you have a very light graphic with a white background, your learners may not see the default pulse animation at all. Did you know there are actually 4 states to a marker?
As a side note, I created a labeled graphic that outlines all the vehicles in the ongoing Michelle Troconis trial. Any true crimers here? My custom labeled graphic looks like numbered crime scene markers. A few livestreamers used the graphic in their shows- but nobody realized you can click the markers for detail info- I had removed the pulse animation! So if you are redesigning your markers to match your subject matter, make sure the user knows the markers can be clicked.
Here's a live link to the diagram- it uses the microlearning format with a single labeled graphic https://theme-360.com/rise/dulos/
Hi Phil,
How I implement your theme component?
Hi Susan I've got some videos I can link you to. But the basic steps are first to:
- download your web or scorm package, unzip it
- create a new folder called theme alongside the index.html file
- place custom.css file inside the theme folder
- add the link to custom.css in your index.html file
