Trigger to Change Player Flow

Aug 15, 2022

I'm trying to figure out if it is possible to use a trigger or a javascript execution with player variables to switch the player from restricted to free based on entering information into an input field then pressing enter or clicking a button. The idea here is to have an invisible button for admin to click, enter a password, then unlock the menu.

Any insight on if this is possible is appreciated or easier options to get the same results. Thanks!

13 Replies
Jose Tansengco

Hi Sarah, 

Thanks for reaching out! 

You can use custom navigation to  give your course a custom set of navigation buttons. You can then use triggers and variables to control the visibility of these navigation buttons. Here's a sample of a logic that can be used to achieve your desired effect: 

To control the visibility of the navigation buttons:

To determine when navigation will be revealed: 

I've attached a sample file so you can see a practical application of my suggestion. Hope this helps!

Sarah Powers

Thanks for providing that example, Joe. I don't think I explained myself very well. I'm trying to unlock the Storyline Player going from "Restricted" to "Free" by clicking a button or entering a password on a slide. I would like it to be able to keep the player for accessibility controls and to turn on/off closed captions. Do you know if this is possible?

Thanks!

-Sarah

Math Notermans

As is...no i donot think this is possible. You can create a custom player, but the 'Restricted' / 'Free' options are completely hidden inside the player. Might oversee something, but i can't switch the player... It might be possible with Javascript to lock a 'Free' player...so you cannot click on the 'Open' menu items... and show the lock icon... i am giving that a try.

Math Notermans

Possibly some good news. As i made a custom Free player and a custom Restricted player i tested the HTML created for both...

free
Here above you see the HTML for the free player..
And downbelow is the same for the restricted player..
rest
Especially noticeable that the restricted player only difference is an added class... 'cs-restricted'

So what im gonna try now is setting my sample to the free player and then use javascript to lock some slides... Lets see if that works.

Math Notermans

Nice, that works flawless.
https://360.articulate.com/review/content/c6b7e48a-f204-441d-81ea-4cdd5ed6a524/review

And 'cs-viewed' is the class added when you visited a slide... so that you can remove too if wanted :-)

Alas this is only the visual part... the slides are not locked...so somewhere some more changes needed.

Math Notermans

Well i got it one step further.
When setting the free player to restricted this code ensures it cannot be clicked...

const boxes = document.querySelectorAll('.cs-listitem');

for (const box of boxes) {
  box.classList.add('cs-restricted');
}

const menuList =document.querySelector("#outline-content > ul > li");
menuList.addEventListener('click', (event) => {  
  event.stopPropagation(); 
});

And the icons show as needed. Only problem now...is that i cannot free the navigation anymore.
Somehow the link with the Storyline events is gone... so thats only needed to get it completly working...

Math Notermans

At breakfast i was thinking this over...and came to the conclusion that instead of stopping and restarting the events.. it might be much easier to just block the list items. Thus said and done.. and it works flawless.

https://360.articulate.com/review/content/c6b7e48a-f204-441d-81ea-4cdd5ed6a524/review

One big plus of this approach is that you can customize the menu/listitems if you want to.
https://360.articulate.com/review/content/146cbdd5-f36c-4ce4-a5f6-94effde85c42/review

As you can see in the second review.
And here is the working Storyline.

Kind regards,
Math