Introduction
In the latest update of Articulate Storyline, users now have the option to set closed caption locations to either the top or bottom before publishing their e-learning courses. While this feature is undoubtedly useful, some users have encountered issues where the closed caption container overlaps with slide objects on certain devices. To address this challenge and provide a more consistent solution, I’ve devised a method to make the closed caption container freely movable during runtime with custom JavaScript.
Preview
How to Implement:
Setting up the JavaScript Trigger
- Begin by setting up a JavaScript trigger to execute when the timeline starts on your first slide. This ensures that the script is initialized at the start of the course.
- Paste the following code into the trigger:
Conclusion
That’s it! With this simple addition, your closed caption container will now be movable anywhere on the screen during runtime. This customization grants users greater control over the presentation of closed captions, ensuring optimal visibility and accessibility for all learners.
Real-Time Closed Caption Font Customization in Articulate Storyline: https://www.eblog.nrzmalik.com/level-up-accessibility-real-time-closed-caption-customization-in-articulate-storyline/
Love this! Where can I find the code for this solution so that i can try it on my own?
I value this information. One issue that occured, some of our buttons stopped working when this trigger was on the slide. I have little experience with Javascript, but wondered if I could change something so this would not occur. Thanks for your work on this!