Forum Discussion
Transcript highlighting - like Linkedin Learning - demo (JavaScript)
I just finished this demo and it's working for my purposes (so far), but I'd appreciate it if anyone wanted to check it out and see how it does for you. Please, let me know if you have any questions or if you see any gotchas that I've missed.
There are notes on the master slide. I've tested with the Modern player.
Important: this works with the CC text on your audio and the text in the Notes panel--they have to match. (For my demo I re-labeled Notes to "Transcript.")
You'll also see a Next button flasher that's pretty handy. (the code is in the first Execute JS trigger but it's invoked by the second one.)
You'll also (also) see I've created a "Course is Paused" graphic that show/hides with the play/pause button - I just realized that has a potential bug if the user pauses but something else is clickable on the screen, the paused graphic will stay up. (I'll post a remedy as I figure that out.)
The credit for how to add the custom stylesheet goes to someone else on here that I've lost the link to...but many thanks, that's what started me down the path to solving the rest of this.
Hello Ted,
I've been able to incorporate your scripts into a course I'm working on. However, I'm not able to get the highlighting to work with the closed captioning. Also, is there a way for the highlighting to work even if closed captioning is not selected? I've attached my file here
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!
Thanks so much for your help. I'm giving this a try and will let you know the results.
