Forum Discussion
Disabling "Next" button until all layers and their respective timelines are complete
Hi everyone,
I am building a course for a client using Storyline 2. A few slides in the course have multiple items which need to be reviewed entirely before advancing to the next slide. I have set this up in the past using this method, which worked well for the needs of that course:
https://www.articulate.com/support/storyline/how-to-disable-the-next-button-until-users-finish-interacting-with-a-slide
In the course I'm currently developing, the slides have layers with media on them. As I mentioned, this media must be completely veiwed before moving on to the next slide.
I am having a hard time figuring out how to "force" the learner to completely view all of the content while retaining the functionality of the next button once certain conditions are met.
What I am experiencing when I preview the course is that even once both buttons have been visited and the media on both has completed, the next button still does not work and the "incomplete" layer shows. The other issue is that the learner can still click the next button, bringing up the "incomplete" layer while in the middle of veiwing the media on the layers linked to the buttons.
I would use the built-in lightbox feature instead of layers, as the next button cannot be clicked when the lightbox is open, except the lightbox can be closed out at any time and that cannot be changed.
The client also does not want custom navigation buttons, so I am limited to the stock player navigation controls.
I attached a screenshot to show how I have everything set up.
The conditions in the attached screenshot are both set to = "true" when the media on that layer completes.
23 Replies
Hi Masa and welcome to E-Learning Heroes :)
You could set a condition on the Next button state change as well, so that it wouldn't always be hidden when you came back to a slide.
If you have a course that you are working to design, feel free to share your .story file so that we can help you figure out your requirements.
Hi all and thanks Wendy for the file,
I have the same issue but instead of using the timeline to change the layers, I want to change to another layer when another button is clicked.
Scenario:
- I have 3 buttons ("A, B, C") that goes to their respective 3 layers ("Apple, Ball, Cat"). When you click a layer, you can move to another one, so on and so forth....
- The default player "Next" will only be clickable once all the layers have visited.
What I have done:
- show layer "Apple" when user clicks button "A" - created this trigger on all my layers
- show layer "Ball" when user clicks button "B" - created this trigger on all my layers
- show layer "Cat" when user clicks button "C" - created this trigger on all my layers
- on my Base Layer, I have created a variable "X" and assigned to "False"
- on my Base Layer, I have created a trigger: Set "X" to value "True" when the state of all the buttons are Visited
- on my Base Layer, I have created a trigger: Jump to the next slide when user clicks Next if "X" = value True
However, the "Next" is not working.
Can someone help please?
Thank you so much
Hi, Karen.
Thank you for reaching out!
I followed your scenario and process described above, and my Next button behaved as expected:
I'm attaching the .story file so you can compare it with yours, but feel free to share what you have so far so we can help you troubleshoot.
I hope this helps!
Hi, I have looked at all of the information above along with other threads and I still can't seem to get this to work properly. I have attempted Variables, states and conditions.
I have buttons that go to layers and I need the next button to remain disabled until all layers have been visited.
If someone could please help it would be greatly appreciated. I have attached the base slide with no triggers.
Thanks in advance.
Hi, Leith.
Thank you for sharing the .story file!
The reason your triggers don't work is that each layer has the same buttons (with their visited states) as the base layer, so the learner never returns to the base layer (therefore, those buttons never change to the visited state).
Think of the layers as transparent sheets of paper you put on top of a drawing. You can still see the picture below (base layer), but it allows you to draw additional objects without affecting the original. There's no need to repeat the icons and triggers on each layer, as the learner can still click the buttons on the base.
Here are my suggestions:
- Each layer should only have two objects: the oval and the text. Triggers are not needed on any layer.
- On your base layer, create a trigger to change the state of the Next button to Normal when all the Pictures are visited:
I'm attaching my suggestions here as an edited .story file.
Let me know if you have additional questions!
Thank you so much. I thought it should have been easier than it was.
Hi Leith!
So glad to hear my colleague Maria was able to assist you.
Welcome to the E-Learning Heroes Community! Happy Developing! ✨
