Forum Discussion
Transcript highlighting - like Linkedin Learning - demo (JavaScript)
Hi Noel, It's actually been a while since I've used this feature myself--it was too esoteric for my team to adopt. I wasn't even sure it would still work with all the latest Storyline updates that have come out since I developed it, but it actually does (with some caveats*).
BTW, the file you attached didn't have my JavaScript trigger in the master slide, but when I added that in it worked.
The CC text feature has to be active because the highlighting script is using the timing of the CC caption elements to "know" when to highlight the related part of the transcript/notes panel. In your variables panel, go to "Built-in" and set "Player.DisplayCaptions" default value to True.
But my script adds CSS that hides the caption bar and button.
style.appendChild(document.createTextNode(".caption { display:none; }"));
and
style.appendChild(document.createTextNode("button#captions { display: none !important; }"));
You can comment them out (// in front of each style rule) to have the CC button and text appear.
*The tricky part is that the text in the captions has to match exactly the text in the Notes panel. For example, there was a stray space at the end of your caption, "known as the Internet Way of Networking. " That space was breaking the highlight for that line. (Storyline also used to sometimes randomly generate spaces as html elements ( ) in the Notes text that would break things, too--I haven't noticed it in a while, but again, I'm not using the feature myself so much anymore.
I hope this helps. Good luck!
Related Content
- 10 months ago