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!
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
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!
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
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.
Possibly some good news. As i made a custom Free player and a custom Restricted player i tested the HTML created for both...
Here above you see the HTML for the free player..
And downbelow is the same for the restricted player..
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.
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.
Amazing and sooo exciting! Thank you! Did you have to add this code after you published or did you just use Javascript triggers within the Storyline file?
Tried it the other way around...first Restricted and then Free...but its only the visual part in the menu...the player stays Restricted or Free... so some more experiments needed to get this done.
Here is my test.
This is so great, thank you so so much!!
I am going to make an invisible button and have an input field (password protected) so we can test slides as needed while in the review phase right before going live. Thanks again!!
I went to click around after locking the menu in your review file and in a web publish, but it wasn't really locked because I was able to click on the other pages.
Do you think this code is just changing the icons and not the actual function itself?
Yes as i already mentioned..just visual alas...
Some more digging needed to really disable it.
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...
