Restricting navigation at runtime

Jun 08, 2020

Leston Drake
By Leston Drake

I have two different audiences that will be accessing my course and need to be able to dynamically restrict access to my Quiz scene for one of the audiences. The audience info is being read into a Storyline variable (using Javascript) when the course begins. 

What are some general approaches/ideas to accomplish this?

My thoughts:

1. Change the Menu list in the Player at runtime. This would be great, but I haven't seen any information about how to modify the Player at runtime, only from within the development environment. Or - after the course begins - dynamically load a different Player based on my audience. Is this possible at all?

2. Use my variable to show another layer when they land on the 1st slide in my Quiz scene - tell them they don't have access and redirect them somewhere else. This is doable but not ideal because I'd prefer they never get to the Quiz scene. If that's unavoidable, is there a way to send them back to the slide they came from? Is there a Built-In variable that will tell me that?

Any ideas are welcome. Sorry for the long post.

 

3 Replies
Sam Hill
almost 4 years ago06/09/20 at 3:13 am (UTC)

Hi Leston, I'm not sure you can dynamically change the menu if you are using the Storyline player menu without using some JavaScript. It's not a perfect solution as I think you may see a flash of the menu options before the JavaScript processes, but it should work for you.

By adding the follow JavaScript to the timeline start trigger of your Master Slide, you can hide a menu option of your choice. To make a little more flexible, I have defined a Storyline variable that contains the menu item number that should be hidden.

You would obviously add your IF statement to determine if the element should be hidden.

var player = GetPlayer();
var hideMenuItem = player.GetVar('hideMenuItem'); // get the variable from SL
var menu = document.querySelector('ul[aria-label="Menu"]'); // get the main menu element
var li = menu.children[hideMenuItem]; // get the element we want to hide
li.style.display = "none"; // hide the element
li.setAttribute('aria-hidden',true); // ensure hidden from assistive technology

I think I would also add the layer over the quiz start just to be absolutely sure.

Leston Drake
almost 4 years ago06/12/20 at 3:09 pm (UTC)

Update: Wrote a javascript function, building off of Sam's suggestion, that hides a menu item by name (rather than by list item index).

Looks like this:

function hideMenuObjectByTitle(title){
  var menuDiv = document.querySelector('div[data-slide-title="' + title + '"');
  var menuLI = menuDiv.parentElement;
  menuLI.style.display = "none";
  menuLI.setAttribute('aria-hidden', true);
}

And so you would call the function and pass in the name of the item you want hidden, like this:

hideMenuObjectByTitle("Quiz");  // hides the Quiz item in the Menu

or

hideMenuObjectByTitle("Activity");  // hide the Activity item in the Menu

 

 

This discussion is closed. You can start a new discussion or contact Articulate Support.