Forum Discussion
What action could trigger layer visibility based upon the position settings of multiple sliders?
Working on a complex project about document formatting. Eventually this slide will have show specific images of different design combinations, based upon the preferences of the user. The user’s preferences are selected by toggling through options of 4 different sliders (kind of like an audio equalizer). The specific images will each be on different layers.
For this demo slide its simplified into just showing basic graphics (red circle, no red circle, etc.). There is one layer that shows the complex combinations of my final project. The settings of the sliders are used as variables with conditions, when all the conditions (slider settings) are adjusted the combo layer is shown. So it works – but – I’ve only been clever enough to trigger this by clicking on a button.
I’d like to know what options for triggering an action that would be immediately responsive, rather than requiring clicking on the additional button. The user will make adjustments, and re-adjustments, in random order and they’d be doing this multiple times. I want the user experience to be as easy as possible, and avoid clicking on the extra button.
I’ve experimented with timeline actions, and with losing focus, with hover states, but those didn't work. I’m sure there is an elegant way to do this, but I’m still fairly new to multiple variable conditional triggers.
Storyline file attached.
Thank you!
I had a similar situation, though with only two sliders (one for adjusting brightness, the other for contrast).
Here's what to do to allow for dynamically changing the layers:
- Create a T/F variable.
- Add triggers that toggle the T/F variable whenever a slider moves (that is, when the slider variable is adjusted).
- The image below shows what these triggers look like. In this example, "sliderToggle" is the T/F variable. It toggles when the "brightness" or "contrast" variable changes.
- Add triggers to show the appropriate layer when the T/F variable changes, with the conditions that check the value of the slider variables.
- The image below shows an example of these types of triggers:
Obviously, a trigger is needed for each possible combination. That's where a good naming convention is helpful. (Based on your file, you already know that. 😃)
Hello Judy,
I couldn't believe that only a few hours after I posted my inquiry last night I woke up to see your clever - and successful - solution. This was my first ever question to the Community and I'm in awe of the resourceful and generosity I received. I felt somewhat obligated to hustle and finish up my prototype. Excited to see it work, certainly, but also as a form of acknowledgement to the care others showed to my query.
Here is the working prototype:
https://360.articulate.com/review/content/cea784a3-08e9-4169-972c-1840498a823b/review
And below I'll attach the Storyline file and an Excel spreadsheet of the slider value settings I wrote in order to keep all of them ordered as I worked. Totally worth the time it took to organize the Excel and plan it in advance.
And how satisfying it is to see the images switch so easily with the combination of sliders, the end of a very long process! Well, not quite done yet, I have 2 additional resume examples with as many layers…. But now that this is set-up I will only have to swap out the jpeg images on each layer as all the trigger mechanics will remain the same. I’ll be sure to check my variable names when I copy this slide since it’ll be variables copied and used within the same project.
I'll also write out my steps below, in case these details are ever helpful for anyone else attempting a similar project. Step #2 has a question that I am curious about - trying to talk myself through all the reasons the T/F variable is useful. Not sure I have that understanding yet.
Again thank you for your expertise, cheers!
Elizabeth
1. Create a T/F variable: name it sliderTOGGLE. Default Value: False
2. Add triggers that toggle the T/F variable whenever a slider moves (that is, when the slider variable is adjusted). I am somewhat unsure of the reason for this toggle variable - but I *think* I understand it as a ‘call’ out to check the settings of the slider values when any of the four sliders are adjusted? Its an efficiency in this way?
3. I had four sliders, and each slider was set up as follows, which creates a trigger that toggles (activates) the T/F sliderTOGGLE variable whenever the user alters the serif slider:
Action: Adjust Variable
Variable: Toggle sliderTOGGLE [this variable is the T/F]
When: When the variable changes
Variable: serifTOGGLE [this is the first of my four sliders]
4. Then I set up all my many layers, and made sure that my documents were positioned identically at the right side (using the x and y coordinates was fastest for positioning). Naming convention here very important (B2, C3, B5, C5, etc.)
5. Finally, add a trigger to the sliderTOGGLE T/F variable:Action: Show Layer
Layer: B2
When: When the variable changes
Variable: slider TOGGLE (the T/F variable)
If:
serifSLIDER = value 0
colorSLIDER = value 1
boldSLIDER = value 0
iconSLIDER = 0
6. The Excel chart shows all the combinations of 0, 1 and 2 value positions so I could keep it all straight. Just paste the trigger, select the layer, select the proper combination of the 4 values from the Excel chart. This part went very quickly.
Nice work on your slide! And kudos for providing instructions and your .story file. That's a great way to "pifwyc" (pay it forward when you can, as hero Walt Hamilton likes to say).
Yes, the toggling T/F variable is for efficiency.
- Without it, you'd need multiple sets of the show-layer conditional triggers, because they'd all need to run whenever any slider variables changes.
- With it, you just need one set of those triggers, running when the T/F toggles. (Plus, of course, the one trigger associated with each slider that toggles the T/F variable.)
In case you're interested, here's my post about troubleshooting, which includes info about "right timing" (that is, making sure the "when" happens): TIP: The Eightfold Path of Troubleshooting - Articulate Storyline Discussions - E-Learning Heroes
Very amusing exercise. Here is my take. I placed all 9 elements/icons on one layer, and arranged them in such way that all common elements controlled by one slider overlap each other. For instance: cool, no color, and worm icons have the same position, and are hidden in the timeline. I also created 9 variables for each element with initial value of 'false'. On the base layer, for the cool/no color/warm group I set up triggers as follow: Set COOL to value True when coolNoWarmToggle changes if coolNoWarmToggle = value 0; Else Set COOL to value False. Do the same for WARM and NOCOLOR variables within this same group. Slider value for COOL is 0, NOCOLOR is 1, and WARM is 2. Repeat the same process for other variables with corresponding sliders and its values. I will not go further into the layer 1 settings, if this is what you are looking for you may download my story file for detailed information.
https://360.articulate.com/review/content/e166f3da-8729-47d1-8697-7b6c8f1bf79c/reviewHello Nedim,
Thank you SO MUCH for sharing your time and obvious expertise on my inquiry, glad it brought some amusement to your day because it taught me a new way of approaching problems (I use hidden states so rarely, a good reminder of their usefulness). I will attach information about my final solution here where I followed Judy's suggestions. For this situation I thought it might be advantageous to have the example documents each as their own layers, rather than stacked into one layer and hidden/shown with layer states, as I have two additional examples I will follow up with. I anticipate efficiencies now with merely swapping out document jpegs for the next two examples that made that approach appealing.
Once again, I appreciate your enormous generosity and talents.
Elizabeth
