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 be...
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 hide
document.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 hide
document.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 show
document.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 hide
document.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 hide
document.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 show
document.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()
Thanks so much larryvanwave-ff, this worked perfectly - just what I was trying to do.
Super generous of you to share this, larryvanwave-ff ! Thank you :)
