Forum Discussion

JuliaGottsch928's avatar
JuliaGottsch928
Community Member
2 months ago

Problems with states: "visited" state doesn´t work

I have a slide here with tabs interaction and the corresponding layers. The buttons are assigned with the following states: Normal, On Mouse Touch and Visited. But unfortunately the visited state doesn´t appear in gray colour as they should be. 

Can anyone give me a tip what´s wrong?

And further question: there is audio on every layer. Is there a way to ensure that the additional buttons cannot be clicked until the current layer's audio has ended?

  • Hi JuliaGottsch928 just to add my 2 cents. Placing a semi-transparent shape over the buttons isn't good for accessibility as it only blocks people who use a mouse from accessing the buttons. People using keyboard to access the content will still be able to access buttons under a semi-transparent shape.

    The way the content is structured also causes some issues for accessibility, which can be easily resolved. On each layer, you have duplicated the buttons. I don't think this is necessary, as the buttons are present on the base layer, which can be used when the other layers are opened.

    To prevent users from selecting the buttons temporarily, you would have to either:

    1. Set the buttons to a disabled state temporarily, or
    2. Use a variable to determine if the button will either a. Show the target layer, or b. Display a message saying the button isn't available yet.

    I've put together a demo with #1. For the visited state, I just added a small tick icon. There are two key layers added which just run triggers, either Disable ALL (buttons) or Enable ALL (buttons). The enable all checks the variable values you are setting to determine whether the button should be enabled to Normal or Visited.

    Using the base layer with the buttons allows you to remove multiple duplicates of triggers and buttons and keep the layers focused on the unique content.

    • JudyNollet's avatar
      JudyNollet
      Super Hero

      SamHill : Thanks for pointing out the accessibility issues with semi-transparent shapes. 

      JuliaGottsch928 : Here's another option to do it mostly Sam's way but without variables:

      • Add the tick icons as separate objects on the slide, with an Initial State of Hidden. 
      • On each button, add a trigger that changes the state of the corresponding tick icon to Normal when the button is clicked. Or have the trigger run at the end of the associated timeline.
      • Use the "when [icons] = Normal" to determine that all layers have been viewed.
      • JuliaGottsch928's avatar
        JuliaGottsch928
        Community Member

        Dear Sam & Judy,

        Thanks a million for the quick and great help. I would never have come up with the solution on my own, thank you so much!

  • An object with a Visited state will automatically change to that state when it is clicked.

    The reason you're not seeing all the buttons as Visited is because there is a full set of buttons on every layer. Thus, a given button will only show as Visited on the layer where it was clicked.

    The solution: only use the set of buttons on base. 

    [Note: I deleted info from this comment about using semi-transparent shapes to prevent clicking. As Sam pointed out, that doesn't disable keyboard navigation. See Sam's reply for how to disable/enable the buttons while audio plays.]