Click to Reveal Interaction

I am new to using storyline and am trying to make a "click to reveal" activity. Is there any easy way of doing it besides making 40 different triggers?? I've attached a picture to what I'm trying to achieve along with a demo. Or if you know of any good tutorials that would show me how to do it, I would really appreciate it!

 

The triggers get really confusing once I have so many inside the interaction.(This is the website that it's on. Go to the Click to Reveal section on the menu to see a live demo)

https://elearning.net/demos/storyline/bluetheme/story.html

13 Replies
Leslie McKerchie

Hello Steve and welcome to E-Learning Heroes. 😊

Thank you for reaching out to share what you would like to create with your project as well.

I'm not sure if Maia is still subscribed here, so I wanted to pop in to help.

You can set triggers to manually adjust the buttons to return to the Normal state when another button is selected, but it may be easier to build your using the built-in states and taking advantage of their behavior.

For example:

  • Normal State in the beginning
  • Hover State visual if needed
  • Selected State (in place of the Visited State in Maia's file)
  • Visited State - can mimic the Normal State if that's your desired look.

Let us know if you have any further questions!

Steve Johnson

Thanks, Leslie. What I'm really aiming for is a set of buttons or images that change when you hover over them, but not permanently.

And when clicked, they will reveal content using a layer. But what is difficult to map out is the ability to hover over and for instance show a highlighted drop color border of sorts and then when you click the image display that changed "selected look" image until a different image is clicked on.

I'd like to have it Return to its original state if a different button is clicked. Not sure if that makes sense, but so that only the presently clicked image would have the selected look of the drop-down color border, no matter if you've clicked all of them numerous times. 

Maria Costa-Stienstra

Hi, Steve.

Thank you for the additional details!

It sounds like a Button set would work for what you're looking for! You can adjust the states, so each button has Hover and Selected states that differ from the normal state.

Windows 10 (1) 2021-04-16 at 4.25.24 PM

Then you can select all your buttons, right-click, and choose to create a Button set

Screen Recording 2021-04-16 at 04.26.03 PM

What this does is allow only one button to be selected at a time.

Screen Recording 2021-04-16 at 04.27.15 PM

Let me know if this helps!

Walt Hamilton

These are all actions built into SL.  They will work if you let them, but if you create triggers to make them take these actions, you will mess them up.

Change when you hover over them, but not permanently. This will happen if you give the object a state called Hover. It returns to original state when hover leaves it.

Display different state when clicked. This will happen if you give the object a state called Selected. Selected is a toggle state; when you click, it is selected, when you click again, it is Normal.

Reveal content when clicked. This will happen if you create a trigger: "Show Layer 'XXX' when learner clicks on object 'YYY' if state of object 'YYY' is = Selected. Layers default to hiding all other layers, so a layer will show only until another object is clicked.

Return to original state if different button is clicked. This will happen if you select all the objects, right-click, select Button Group, and select a name, making them a group. Only one button in a group can be selected at any one time, so all others will return to original state when another is clicked..