Forum Discussion
Change Marker colors to show what the user has already clicked
I see there is a way to change the color of the active marker, is there a way in either Rise or Storyline to make the marker remain in a secondary color after the next one is clicked in order for the user to know if they have already been on that marker?
5 Replies
In storyline you can add a visited state to the marker, but not in Rise
Bob, in Rise I use CSS to restyle the markers, in this example the 'visited' state is recolored and checkmark replaces the automatic numbering. I've documented the states here: https://theme-360.com/theme-component/labeled-graphic-states/
The default state actually contains the pulse animation, and this is turned off after the user has clicked on that marker, there definitely is a visited state in Rise. But if you are using a light colored image, the user may not notice the pulse animation at all.
Hi Phil, I watched your video but I am not sure how to edit the CSS in Rise. I’ve done it using Html but not the style sheet. Any tips? I want to add numbers higher than 9!
My best recommendation is to create a new folder alongside your index.html file, I usually call it theme and place your new css file in there, this makes it easy to copy all your custom code to other exported courses and keeps it separate from the Rise files. Then add the link to your css file to the index.html file, before the closing </head> tag.
<link type="text/css" rel="stylesheet" href="theme/myfile.css">
Hi Articulate Team,
Has there been any update on the ability to change Labeled Graphic marker colors after a learner has visited them in Rise 360?
I see that this discussion was started two years ago, and several workarounds have been suggested, including modifying the exported course's CSS to customize the marker's visited state.
Unfortunately, these workarounds don't apply to my situation because I'm publishing my courses directly through Rise 360 and sharing them using the generated Share link rather than exporting them to an LMS or hosting them externally. I don't have access to modify the underlying CSS or HTML of the hosted course.
This is an important feature for the interactive technical training I'm developing. Some of my Labeled Graphics contain numerous markers, and learners need a clear visual indication of which ones they've already selected. Without this functionality, it's difficult for learners to track their progress, particularly when navigating complex application screenshots.
Storyline 360 already supports visited states, allowing markers to change appearance after they've been selected. I would really like to see this same functionality available natively in Rise 360.
Ideally, authors should be able to:
- Customize the default, active, and visited marker colors.
- Automatically change a marker's color once a learner has selected it.
- Optionally display a checkmark or another visual indicator for visited markers.
- Have these settings work with Rise 360 Share links without requiring custom CSS, HTML modifications, or LMS publishing.
Are there any plans to introduce native visited-state customization for Labeled Graphics in Rise 360? If so, is there an estimated timeline?
This would significantly improve the usability of Labeled Graphics and eliminate the need to rebuild these interactions in Storyline simply to provide learners with a visual indication of their progress.
