Adding an in-course option to globally toggle closed captions on/off.
January 11, 2021 12:00 AM
I know that you can set closed captions to be automatically on or off at the title level. But either option can be a distraction for those who want / don't want them on. Is there a way that we can add some sort of button at the beginning of the course that gives the user the option to have all closed captions turned either on or off?
Discussion (6)
Hello @jerwin-3277 Yes, you can add a question and/or button at the beginning of the course to ask the user if they want to have closed caption on or off for the whole course. You can then use a "Run Javascript" action to set the preference course wide:
VarTrivSelCap.set('en'); for Captions ON
VarTrivSelCap.set('none'); for Captions OFF
@wheels Thank you so much! That works like a charm.
Do you by any chance know if there's a way to get the VarTriCCState to be remembered by the browser/LMS?
We will look into making this easier in the future.
To save the state you will need to set to a user variable. Add a user variable in the Variable Manager and set it to Retain variable value between sessions. Then you can set up some actions that do things conditionally based on your variable. For instance if your variable is named CCON :
On Page Show -> Show the Turn CC Off for the course button IF CCON is Empty
On Page Show -> Show the Turn CC On for the course button IF CCON is Empty
On Page Show -> Run JavaScript -> VarTriCCState.set(VarCCON.getValue()) IF CCON is Not Empty
The Turn CC Buttons would also do a Modify Variable Action that set CCON to en or none.
Hope this helps.
@jholland We're using Lectora Online, not sure if that makes a difference. But the JS you provided is calling on a variable that's not in the course. Is that a variable we're supposed to create? We need a little more guidance. Help!
In Lectora Online the variable is different! It is called VarTriCCState so:
VarTriCCState.set('en'); for Captions ONVarTriCCState.set('none'); for Captions OFF
You should not try to create the variable.