How to control menu type in Articulate Storyline 3 (with javascript)

articulate-free-menu-to-locked.md

How to control menu type in Articulate Storyline 3 (with javascript)

Lock the menu untill you reach a certain slide

• On the starting slide:
  • Set the variable introPlayed with a default of false on the starting slide.
  • Add a trigger with the following settings:
    • Action: Execute JavaScript
    • Script: see "Lock the menu"
    • When: Timeline starts
    • Object: make sure your starting slide is selected
• On the slide where you want to change to free menu (unlocked)
  • Add a trigger with the following settings:
    • Action: Execute JavaScript
    • Script: see "Unlock the menu"
    • When: Timeline starts
    • Object: make sure your actual slide is selected

Lock the menu

// Get the Articulate Player object.
var player = GetPlayer();
// Get the value of "introPlayed" from Storyline
var introPlayed = player.GetVar("introPlayed");

// If the intro is not played yet
if (introPlayed !== true) {
	// Find all link in the sidebar menu
    jQuery('.area-secondary a')
	    // For each of thoses
        .each(function(index){
	        // Take the value of the link and place it in a new attribute called disabledHref
	        // we are saving that value so we can put it back when needed.
            jQuery(this).data('disabledHref', jQuery(this).attr('href'));
            // Then remove the attribute href (make the link unclickable)
            jQuery(this).removeAttr('href');
        });
}

Unlock the menu

// Get the Articulate Player object.
var player = GetPlayer();
// Set the value of "introPlayed" from Storyline to true
player.SetVar("introPlayed",true);

// Find all link in the sidebar menu
jQuery('.area-secondary a')
    // For each of thoses
    .each(function(index){
        // Take the value we saved earlier in "disabledHref" and put it back to "href"
        // we are making the link clickable again!
        jQuery(this).attr('href', jQuery(this).data('disabledHref'));
    });