Hide Next button until all layers viewed/visited

Dec 30, 2015

I know how to hide the Next navigation button until a certain logic is satisfied. For example if a number of buttons are selected (all or any). But I need to hide the Next button until all layers of a slide are viewed. Anybody know of a way to do this?

44 Replies
Crystal Horn

Hi Marco. Thanks for clarifying. If you can't use transparent shapes, could you adjust one or more variables when clicking the hotspot? You can have the Next button change to the Normal state when the variable changes with a condition about the variable value. Number variables work well here, increasing with each hotspot being clicked.

Lauren Bergman

Hi, 

I'm wondering if someone could help me with a similar issue. I was able to get the Next button to appear in some instances, but it shows on the layer, rather than the base slide. And when the user comes back to the base slide, the Next button is set back to disable, even though the buttons are marked as Visited.

Would anyone happen to have any suggestions?

Karen Hawkes

Hi Alyssa Gomez, 

thanks for the story file however I am still having issue on the "Next" button not appearing when all the hotspots for each layers have clicked. 

I have based what i have done from your file.

 

VARIABLES:

o1 default value = False

... so on until o6 default value = False

 

TRIGGERS:

Change state of Next button to Hidden when Timeline Starts on this slide

 

Hotspot 1

set o1 to value True when user clicks hotspot1

show layer Apple when user clicks hotspot1

 

Hotspot 2

set o2 to value True when user clicks hotspot2

show later Ball when user clicks hotspot2

... so on until Hotspot 6 (o6)

 

o1

change state of Next button to Normal when o1 changes

if o1 = value True and o2 = True and ..... so on until o6 = True

... so on until o6

 

Ashlyn Roberto

Hello, I have the same problem as Marco above. I have one slide that has 16 hotspots that reveal 16 layers. I would like the user to not be able to progress until all 16 layers have been visited. I do not want to change these to buttons because it is for a left navigation panel screenshot and do not want to show a button. How can I make this happen? I reviewed the variables link above but I am lost lol

Walt Hamilton

I’m not at a place where I can look at your story, but it seems to me that Karen’s option above should work. I’m not sure why it didn’t work for her, but she has the concept and the logic solid.  Probably a typo-type error somewhere.

The one problem might be that the learner can advance as soon as they click the last hotspot, without reading the last layer. To avoid that, change the “when” part of the triggers that set the variable. Make it when they take the action that closes the layer.

Jose Tansengco

Hello Ashlyn,

There are many ways to design conditional navigation in Storyline 360, but one of my preferred ways is by making use of True/False variables to control the navigation. Some notes on my approach:

  • There will be one master variable which is responsible for controlling the visibility of the Next button
  • Sub-variables will be responsible for monitoring if layers in the slide have already been viewed
  • Trigger conditions will check if the learner has viewed all layers to proceed
  • Each layer will have its own variable responsible for tracking if the learner has viewed the layer

Attached is a sample project file (Slide 1.2) for your reference so you can see the above in action.

Let me know if you have any questions!

Walt Hamilton

This sample will do what you have asked, but there are a couple of caveats.

This will not work if the actual project navigates to different slides, rather than just different layers on the same slide.

It's unknown if it will work if the learner is allowed to navigate to another slide before finishing this slide.

This would be so much easier if you use transparent shapes, rather than hotspots.  For one thing, there are fewer triggers. See slide 1.2.

It allows topics to visited in any order. Requiring a specific order makes it more complicated.