Forum Discussion
How to Restrict Menu using JavaScript
Hi all,
I have a course that consists of three modules: 2 modules of content and the third module is a course assessment. The learner has one attempt to complete the assessment, if they score below 80%, they are redirected back to slide 3 to begin the course again. I would like to use JavaScript to restrict the menu so it will have the slides lock again if the learner fails the assessment and is redirected to slide 3. I am very new to Javascript and I would really appreciate any assistance or insight on how to achieve this.
This is what I have done so far with assistance from Chat.GTP:
-Created a MenuLocked variable set default to false.
-On the assessment results slide for Failure, I set a trigger to set MenuLocked False to True when the timeline starts on this layer.
-Execute JavaScript when the timeline starts on this layer. JavaScript entered:
var player = GetPlayer();
player.ResetState();
-On Slide 3, I have a trigger to execute Javascript when the timeline starts on the slide. The Javascript entered: var player
= GetPlayer();
if(player.GetVar("MenuLocked") == true){
// Lock the player menu
var menu = parent.document.getElementById('menu');
if(menu){
menu.style.pointerEvents = 'none';
}
}
Thank you for any input as it is very appreciated!
This example demonstrates how you can achieve what you were trying to describe with the code above. Note: The functionality of the menu seems to be controlled internally, probably by an event handler for clicking on the items. You can't enable a menu item function before Storyline unlocks it, and you can't readliy disable it again through JavaScript. You can, as you were attempting, prevent the user from clicking on the menu items, so in essence blocking it. You can also toggle the check or lock icons with a simple class change.
Demo: https://360.articulate.com/review/content/ab5a1b44-54ee-4feb-95ce-466f1a230a99/review
You can select the individual menu items in different ways. This example selects individual entries by their names (which should be unique). It also illustrates a method to disable or re-enable the entries all at once, if you prefer that. The menu is an unordered list in HTML, with a DIV for each entry.
If you use pointer-events to disable clicking, you will need to mannually clear it to re-enable clicking. Storyline won't do it for you. You would need to add a trigger, perhaps on the start of the slide, to clear it for the menu entry.
