Forum Discussion
Branching menu solution
When creating a course with branching options, I have always been concerned about the menu. I wanted to prevent learners from clicking on items that aren't relevant to their chosen path.
I believe I have found a solution. It involves writing some JavaScript code on the Slide Master and using Storyline variables.
At the beginning of the course, I will hide the branching options. However, when learners reach the slide where they can choose their direction, the relevant menu items will appear based on their selection.
The menu at the beginning of the course:
The learner selects their choice.
The menu after the learner made their choice.
Let me know if you think this is useful/helpful.
Thanks!
7 Replies
Thanks larryvanwave-ff this is just what I was looking for, could you please share the .story file or at least the JavaScript you used to make this work?
Hi Paul,
Create a custom variable and name it showMenu and make the varabile a number, and make the default number 3.
Have two buttons that change the showMenu variable to 1 or 2 depending on which menu items you want to show up in the side panel.
Then on your Slide Master have trigger that will execute the JavaScript when the showMenu changes.
Here is the JavaScript that you would put on your Master Slide:
const boxes = document.querySelectorAll('.cs-listitem');function changeText() {// Select the element with the class 'linkText'var menuSel = getVar("showMenu");switch (menuSel) {case 0://GCNA menu items hidedocument.querySelector("#outline-content > ul > li:nth-child(2) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(1) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(2) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(3) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(4) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(5) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(6) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(7) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(8) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(9) > div").style.display = 'none' ////GSFB menu items hidedocument.querySelector("#outline-content > ul > li:nth-child(3) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(1) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(2) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(3) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(4) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(5) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(6) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(7) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(8) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(9) > div").style.display = 'none' //break;case 1://GCNA menu items showdocument.querySelector("#outline-content > ul > li:nth-child(2) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(1) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(2) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(3) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(4) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(5) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(6) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(7) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(8) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(9) > div").style.display = 'block' ////GSFB menu items hidedocument.querySelector("#outline-content > ul > li:nth-child(3) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(1) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(2) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(3) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(4) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(5) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(6) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(7) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(8) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(9) > div").style.display = 'none' //break;case 2://GCNA menu items hidedocument.querySelector("#outline-content > ul > li:nth-child(2) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(1) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(2) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(3) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(4) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(5) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(6) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(7) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(8) > div").style.display = 'none' //document.querySelector("#outline-content > ul > li:nth-child(2) > ul > li:nth-child(9) > div").style.display = 'none' ////GSFB menu items showdocument.querySelector("#outline-content > ul > li:nth-child(3) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(1) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(2) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(3) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(4) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(5) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(6) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(7) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(8) > div").style.display = 'block' //document.querySelector("#outline-content > ul > li:nth-child(3) > ul > li:nth-child(9) > div").style.display = 'block' //break;}}changeText()Super generous of you to share this, larryvanwave-ff ! Thank you :)
Thanks so much for sharing this solution, larryvanwave-ff — really can see how this would be valuable in a number of different settings. I just took a training myself that had me select a location to get state-specific information so I can really see the use case.
It looks like we tackled the same issue with the menu and branching scenarios :). Thanks for the message and your link, I really enjoyed seeing your solution. Great Job!
That's awesome larryvanwave-ff. A while ago, I helped a community member develop a similar concept — link to the post. It's definitely a helpful, especially when creating branching scenarios where learners are only shown content relevant to their initial selection or interests across different topics.
