Forum Discussion

BobNeedler's avatar
BobNeedler
Community Member
5 months ago

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?

  • In storyline you can add a visited state to the marker, but not in Rise

  • PhilFoss's avatar
    PhilFoss
    Community Member

    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!

    • PhilFoss's avatar
      PhilFoss
      Community Member

      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">