Forum Discussion

JennyAnnRowe's avatar
JennyAnnRowe
Community Member
2 months ago
Solved

Click to Reveal Issue

Hello community, 

I wonder if one of you can help me understand why my click to reveal interactions are not working as expected.

Here is what I expect to happen: When an object is selected, it changes its state to Selected and its associated popup object appears. Objects should be able to be selected more than once, so the user can return to objects they have alread viewed, if desired. The user should be able to select the objects in any order. 

Here is what is actually happening: When an object is selected, it sometimes triggers its associated popup to appear. An object cannot be selected more than once. It's like the interaction gets stuck after the first one or two objects are selected. 

My file is attached. The issue is on slide 2.2.

Thank you, community, for your help!!

  • In the file you uploaded, slide 2.2 doesn't have any triggers to show popups when the buttons are clicked, so it's hard to troubleshoot that issue. However, I noticed that the "Info" shapes (which I assume are the "popups") are all on the base. If you trigger one to show, it will stay on unless there's a trigger to hide it again. And any shape that is above another shape will cover it. That would make it look like the button isn't showing the associated shape, even when it is.

    • To fix that, you could add triggers to all the buttons to hide all the "other" shapes, plus the one to show the associated shape. (What a pain!)
    • And easier fix is to put each piece of info on its own layer. By default, opening one layer hides other layers. So only 1 would show at a time.

     

    Other issues:

    You don't need any triggers to change the state of an object to Selected. That will happen automatically. For more info, see https://community.articulate.com/discussions/discuss/primer-take-advantage-of-built-in-states/777134 

    If you put all the buttons into a button set, only one can be in the Selected state at a time. For more info, see https://community.articulate.com/kb/user-guides/storyline-360-working-with-button-sets/1134508

    Most of the Instructions button is under the "black square wavy top" picture. Even though you can see through the transparent top of that picture, that prevents the user from clicking the button underneath. Thus, only the top portion of that button is clickable. To fix that issue, either crop the top of the picture or move the button above the picture in the timeline.

5 Replies

  • JennyAnnRowe's avatar
    JennyAnnRowe
    Community Member

    Hi again Judy, 

    Thanks for your quick response!


    You are correct - the popups are the info shapes. I see what you are saying about the shapes being hidden. Aha! So you are saying to use layers instead of states for this type of interaction. Hmm. I thought I had build an interaction using states before on a differnt lesson and it worked as expected, but I might be misrembering. 

     I am not aware that I have any buttons??  The triggers are tied to the textboxes on the left. 

    Do I have triggers for the states of the textboxes that the user selects to reveal the info shapes? I know the triggers are built into the standard states so I thought I did not add those triggers. 

     

    • JudyNollet's avatar
      JudyNollet
      Super Hero

      You could build the interaction by putting the info into different states of the same object. I don't like that option as much, because the only way to see and edit the content is when you're in the edit-states modes.

      I call anything clickable a button, whether it's a text box, a shape, a picture, or a Storyline "button." (When you insert a Storyline button, it comes with the built-in states already there. I prefer to start with something else and add only the states I want.)

      Any object that has built-in states added to it (e.g., Hover, Selected, Visited) automatically works like those states do in a Storyline button. 

      My mistake about the triggers. I noticed the matching parts of the names but not the "Info" vs "Sel" parts of the names. And because the triggers were changing something to the state of Selected, my (didn't have afternoon coffee) mind saw triggers to change the state of the clicked object to Selected, instead of to change the state of a similarly-named object to Selected. (FYI: I would have made the Initial state of each object Hidden, and changed the state to Normal to show it. So that likely influenced my expectations.) Anyway, that meant I didn't even Preview the slide. Sorry! 

  • In the file you uploaded, slide 2.2 doesn't have any triggers to show popups when the buttons are clicked, so it's hard to troubleshoot that issue. However, I noticed that the "Info" shapes (which I assume are the "popups") are all on the base. If you trigger one to show, it will stay on unless there's a trigger to hide it again. And any shape that is above another shape will cover it. That would make it look like the button isn't showing the associated shape, even when it is.

    • To fix that, you could add triggers to all the buttons to hide all the "other" shapes, plus the one to show the associated shape. (What a pain!)
    • And easier fix is to put each piece of info on its own layer. By default, opening one layer hides other layers. So only 1 would show at a time.

     

    Other issues:

    You don't need any triggers to change the state of an object to Selected. That will happen automatically. For more info, see https://community.articulate.com/discussions/discuss/primer-take-advantage-of-built-in-states/777134 

    If you put all the buttons into a button set, only one can be in the Selected state at a time. For more info, see https://community.articulate.com/kb/user-guides/storyline-360-working-with-button-sets/1134508

    Most of the Instructions button is under the "black square wavy top" picture. Even though you can see through the transparent top of that picture, that prevents the user from clicking the button underneath. Thus, only the top portion of that button is clickable. To fix that issue, either crop the top of the picture or move the button above the picture in the timeline.