Disabling "Next" button until all layers and their respective timelines are complete
Nov 02, 2016
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 Kyle, Here's an alternative. Upon completion of your material, have it go to a dummy slide that looks exactly the same( or whatever you want upon completion), with a next button enabled.
Hi Kyle!
Based on that screenshot - it seems like your Slide5_complete variable is not changing, which allows the user to utilize the Next button. Have you verified that the variable is adjusting as expected? You may also want to set the state change of your Next button to be similar to allowing the user to utilize the button as this will prevent a 'broken' button.
Hi Leslie,
How would I go about verifying if/when the variable is changing?
I'm not following what you mean about setting the state change of the next button to be similar - is there something I'm missing?
Thanks for your timely response!
Hi Richard,
Thanks for the suggestion! Unfortunately, I don't see how that would make sure the learners go through all of the content or how they would get to the dummy slide, as the next button is not working. Could you elaborate a bit when you have time, maybe I'm missing the point?
Hi Kyle - you could add a variable reference on screen to display for testing. The other was just an observation, but setting the state change of the Next button from Hidden to Normal to be in-line with 'when' the user can click the Next button - such as when the Slide5_complete variable changes as mentioned above.
Leslie,
Thank you!
I added the reference, and it did not change after both buttons were clicked or after the media was complete on both. I removed the conditions of the media needing to complete from the layers, and the variable changes as soon as both buttons have been clicked, so the issue lies with those conditions. The next button functions as it should with the conditions removed.
Unfortunately, removing the conditions allows the learner to click the next button and advance to the next slide as soon as they click the second button. It doesn't matter which order they click the buttons in either, I tried it both ways.
I see what you mean about changing the state of the next button to normal when the Slide5_complete variable changes as well. I feel that would also work, if I could just figure out how to get that variable to change while still requiring the media on both layers to be played completely.
So your trigger to adjust a variable when the media completed on the layer was what was not working, therefore not adjusting the subsequent variable? Have you tried a more specific variable, like adjusting when timeline reaches x? I'm not sure how you have your layers set up and if you were moving off the layer before the variable could adjust perhaps? Hard to tell when I cannot see the file.
Correct, both layer complete variables are both switching to true, but the slide5_complete variable is not switching to true.
I can duplicate the slides into a new project and upload the file if that would help? I'll have to remove some of the internal stuff but that shouldn't affect the way the slides work.
Sure Kyle - I'll take a look.
I created a quick test file - the audio and slide content is cut down so you can navigate through it quickly, but I confirmed the same behavior.
Thank you for all your help!
HI Kyle
have updated your file - hope this helps
Looks like Wendy has popped in to assist you here Kyle :)
Just let us know if you need anything further.
Wendy and Leslie,
Thank you so much for the help! That works perfectly.
In case anyone else runs into this in the future - I was setting up the conditions mentioned above on the base layer, which was causing my issue. Wendy set them up on their respective layers with an "and" condition and it works perfectly.
Thank you both again for all of the help!
Very good! I appreciate you popping in to share the solution that worked for you. That's certainly helpful for anyone that runs across this thread in the future.
Glad you got it working Kyle - good luck with your project!
Here's a question. After you view the slide in the test WF Story example above and assuming the user wants to press the previous button, the next button is disabled again except this time, there's no way for me to move forward. How do you fix that problem? Thanks!
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:
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! ✨