• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Help with JS code that will show a button if closed captioning exists, or hide it if it doesn't

Community Beginner ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

Hello, I have a branching course with an intro slide containing slide video, a section made up of 20 slides with slide video, and then 2 other sections with no audio or video. I will be making a series of these courses and each one will have the same format but depending on the content, a different number of slides in each section. Currently, I am manually creating a button to show the CC only on the slides that have them (the intro and the 20 slides with video), however since every other course will be different, I really don't want to have to create those buttons on every single course.

 

What I would like is a button that I add to the first slide that displays for the entire project, but only appears when there are closed captions to display, otherwise it remains hidden so people don't try to click it expecting it to do something.

 

I asked on a different forum and someone supplied the follow JS script, but it doesn't work.

 

var getSlides = cp.model.data.project_main.slides.split( ',' );
var getCC = cp.model.data[ getSlides[ window.cpInfoCurrentSlide - 1 ] ].audCC.length;
if (getCC !== 0 )
{
cp.show("cc_button");
}
else
{
cp.hide("cc_button")
}
 
It appears the script is trying to create a variable to track whether or not closed captions exists on the current slide or not (var getCC = cp.model.data[ getSlides[ window.cpInfoCurrentSlide - 1 ] ].audCC.length;) and then show or hide the button (cc_button) based on that, which makes total sense. However, I don't understand where the "audCC.length" is coming from? I can't find any resources anywhere that describe anything related to CC in Captivate at all besides "cpCmndCC" so this piece of code seems sort of... made up? Granted I don't know a lot about JS so that could be totally normal. Is there a way to track if CCs exist on a slide at all? If not, I guess I am stuck just adding the button to each slide. Thanks!

Views

223

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

I don't think you need to worry about doing this at all.  If you just have Closed Captions turned on by default in the Playbar settings, then they ONLY appear if there are Closed Captions defined anyway.  You may be going to a lot of trouble to try and automate something that would have already happened anyway.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

@RodWard I understood the question differently. OP wants the custom CC button not to show up on slides where there are no Closed Captions to avoid confusion. A person without access to audio (for any reason) is unaware of the fact that there is no audio, nor CC on a specific slide.

But since only JS is requested, I will not try to propose an alternative, had learned that it is not appreciated in most cases.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

@RodWard & @Lilybiri ideally I would not want the CCs on by default. And Lily is right, the person without access to audio would not know there is audio, which is why if there is, I would want the CC button active, so they know they can click that to read what's being said. But if there is no audio, I don't want the CC button to display because that same person might then try to click it, and if there's no CC because there's no audio, they might just think the course is broken. Ultimately the JS proved to be too much. It's more work for me to have a single button, but then have to add some JS to every single slide on enter in the project to show or hide it, than it is to continue to add the button manually to just the slides that need it. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 20, 2022 May 20, 2022

Copy link to clipboard

Copied

Hey there, did you try my solution out?  It will do what you are seeking and you only have to add it to your first slide.  Let us know what you ended up doing. Hope you are having a great day!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

I'm the one that gave you the code. It works just fine for me.

 

Remember you need to change the name of your custom cc button and relace the name in the code to your name.

 

{
cp.show("your cc button name");
}
else
{
cp.hide("your cc button name")
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

Also - another possibility - to add to what TLCMediaDesign said - if you did a copy/paste of the code, you may need to go back and re-type all the quote marks because they sometimes change to smart quotes which Captivate does not like.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

To have your CC play bar button auto show/hide from the play bar use the following code - I used the same idea you shared above with some mods... Basically I made an event listener for when a user changes slide...when a slide change occurs, it will check to see if the slide has any CC text....if it does it will show the CC button...otherwise it will hide the CC button.

 

// Get the list of all slide IDs to use for checking if CC text exists on a slide.
var projectSlidesIdArray = cp.model.data.project_main.slides.split(',');
//check if window.cpAPIInterface is available
if (window.cpAPIInterface) {
    //check if window.cpAPIEventEmitter is available
    if (window.cpAPIEventEmitter) {
        //add a listener to CPAPI_SLIDEENTER event
        window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER", function (e) {
            /* 
                Load the number of CC text array strings for the given slide into the variable: numberOfCCTextStrings. 
                Captivate slide object IDs contain many elements of info about a given slide.
                One of the object elements (audCC) is used to store the array of CC text for a given slide.               
            */
            var numberOfCCTextStrings = cp.model.data[projectSlidesIdArray[cpInfoCurrentSlide - 1]].audCC.length;
            
            // if the number of CC text array stings is not zero (meaning there is CC text avaiable for current slide) show CC button
            if(numberOfCCTextStrings != 0){
                document.getElementById("CC").style.display = "block";

            // Otherwise hide the CC playbar button due to there not being any CC text being used for the current slide.
            } else {
                document.getElementById("CC").style.display = "none"; 
            }            
        });
    }
} 

You do not have to update all of your slide with this code. Just place this code on your very fist slide under the Actions setting On Enter: Execute JavaScript.

 

Note: I used pure JS to show/hide the CC button from the play bar.  You could also use JQuery commands such as $('canvas#CC.playbarSmallButton').show(); and $('canvas#CC.playbarSmallButton').hide(); as well. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 20, 2022 May 20, 2022

Copy link to clipboard

Copied

Thank you so much. Unfortunately I wish I could say this worked, but it did not for me. I followed your directions exactly with the only modification to your code was to change the "CC" to "cc_button" in the getElementById line which is what I called the button in the course. Using this code the button is just persistent on all slides whether there is CC or not.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 22, 2022 May 22, 2022

Copy link to clipboard

Copied

That code was written to work with the Captivate play bar not a custom button as stated in the post. 

 

Question for you.....did you copy and past your custom cc_button onto all of your slides? If so, all of the buttons past the first button will not have the name cc_button.....as when you copy and paste buttons....their names (if named the same) will become numbered (as all objects must have a unique name).....for example your first cc button would be called cc_button, but your second cc_button would have a number auto added to it that would look something like: cc_button_7 or the like. 

 

Now if you want a single cc_button to be used all the way through your project, you would need to do the following:

1. Delete all of your cc_buttons from your project.

2. Make sure your cc_button is a button made from a smart shape and not an actual Captivate button.

2. Add your cc_button (made from a smartshape) to your first slide as you are seeking - make sure the button name is in fact cc_button.

3. Select the cc_button.

4. Go to the Timing properties, and select the Display for Rest of project.

 

Now you will have a single button named cc_button that can be turned on and off through out the project.

Also, you could now swap out the getElementById lines in the code above with the cp.hide("cc_button") / cp.show("cc_button") and you should be in business.

 

I've done the same thing you are wanting to do for many many years successfully!

 

If you are still having issues, I'd be happy to take a look at your project for you and get it running just like you are seeking - no worries! Hope my message finds you and your family doing well.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 25, 2022 May 25, 2022

Copy link to clipboard

Copied

Hey there, I am not using the built-in Captivate playbar nor do I intend to. I have my button set up EXACTLY as you describe as a smart shape on the first slide set to display for the rest of the project. The code does not work, but you say its not meant for a custom button, so I guess that's why. Is there a way to make the code you shared work for a button like mine that is NOT part of the playbar? Thanks for your help!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 25, 2022 May 25, 2022

Copy link to clipboard

Copied

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

There is an issue entering this code just on the first slide. If you use any king of bookmarking, self-paced learning or in a SCORM package, this will never execute when re-entering the lesson.

 

This needs to be put in an external JS file or it needs to be on every slide, but then you need a variable so it doesn't keep adding the event listener.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Yeah, I've pretty much come to the conclusion that this is just way too complicated, or impossible, for what seems like a really simple task. It's way easier just to do the legwork and put the button on the slides that need it and not futz around with all this extra code and just move on with my life.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Yep that is true...but I never heard SCORM was being used....but its for sure an excellent thought!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Ok....I was sooo wanting to get a correct answer for this.....Anyhow here are two things to show its possible.

  1. Link to an example project that I've made real quick so you can see both a video and audio only CC turning on/off both custom CC and playbar CC buttons.... Click here to launch demo...
  2. Code for making it work......

 

var projectSlidesIdArray = cp.model.data.project_main.slides.split(',');
if (window.cpAPIInterface) {
    if (window.cpAPIEventEmitter) {
        window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER", function (e) {

            // Turn off CC viewing area...just incase either CC buttons left it on..
            cpCmndCC = 0;

            // check for any AUDIO CC texts for the slide. Will return 0 if no audio related CC text is found for the slide.
            var numberOfCCStringsAudio = cp.model.data[projectSlidesIdArray[cpInfoCurrentSlide - 1]].audCC.length;

            // check for any VIDEO related CC texts for the slide. Will return 0 if no audio related CC text is found for the slide.
            var numberOfCCStringsVideo = cp.model.data[projectSlidesIdArray[cpInfoCurrentSlide - 1]].vidCC.length;
            // If the slide does not have any CC text.....
            if(numberOfCCStringsAudio == 0 && numberOfCCStringsVideo == 0) {
                // Hide the custom cc_button
                cp.hide("cc_button");
                // Hide the built in Captivate CC button on playbar.
                document.getElementById("CC").style.display = "none";
            } else {
                // Show the custom cc_button
                cp.show("cc_button");
                // Hide the built in Captivate CC button on playbar.
                document.getElementById("CC").style.display = "block";
            }            
        });
    }
}​

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Sorry I found a comment I forgot to change:...here is my code with all the correct comments....what a day....

var projectSlidesIdArray = cp.model.data.project_main.slides.split(',');
if (window.cpAPIInterface) {
    if (window.cpAPIEventEmitter) {
        window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER", function (e) {

            // Turn off CC viewing area...just incase either CC buttons left it on..
            cpCmndCC = 0;

            // check for any AUDIO CC texts for the slide. Will return 0 if no audio related CC text is found for the slide.
            var numberOfCCStringsAudio = cp.model.data[projectSlidesIdArray[cpInfoCurrentSlide - 1]].audCC.length;

            // check for any VIDEO related CC texts for the slide. Will return 0 if no audio related CC text is found for the slide.
            var numberOfCCStringsVideo = cp.model.data[projectSlidesIdArray[cpInfoCurrentSlide - 1]].vidCC.length;
            // If the slide does not have any CC text.....
            if(numberOfCCStringsAudio == 0 && numberOfCCStringsVideo == 0) {
                // Hide the custom cc_button
                cp.hide("cc_button");
                // Hide the built in Captivate CC button on playbar.
                document.getElementById("CC").style.display = "none";
            } else {
                // Show the custom cc_button
                cp.show("cc_button");
                // Show the built in Captivate CC button on playbar.
                document.getElementById("CC").style.display = "block";
            }            
        });
    }
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Oh ya for my quick and dirty CC button, in the demo above,  I just used a JavaScript ternary operator to turn CC on/off :

cpCmndCC == 0 ? cpCmndCC = 1 : cpCmndCC = 0;

I know there are several ways to toggle the ole CC text, but for full disclosure this was how I did it for my demo....

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Since you are using the slide enter event, no need to parse the slides, I was doing that since I wasn't using the event.

 

e.Data holds everything you are looking for:

 

 e.Data.audCC.length and e.Data.vidCC.length

 

I use this in almost all of my courses, but it is in an external JS file.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

LATEST

I'm not sure I could use an external file since I am launching the course through an LMS. I'm pretty new to this though, so I could be completely wrong.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Well I put the code on the first slide and when I tested it, the CC button does not appear on the first slide, which is GOOD because there are no CC on that slide and until now the button has always been there anyway. HOWEVER, when I click the button to start the course and move to the next slide which plays a video, the CC button appears (YAY) BUUUUT the video doesn't play anymore (NOT YAY). It's just a white screen and the course in unresponsive from there. So, I guess maybe that's an issue with what the other user was saying about it being in a SCORM project (which it is because it's an eLearning course being loaded into an LMS). I feel like it's real close, and it definitely does work on the example you shared 😕

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

OH dear thats not too cool!! I'm sorry....I was wanting you to get it working!!!  If your project is in fact using SCORM it would take a bit more doing as TLCMedia elluded to earlier.... So it does infact sound like you are uploading your project as a SCORM project...and not as a normal interaction project not connected to a grade book. I can relate to the LMS frustations...we are a Blackboard LMS here.....

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Yes, we are using Skilljar. I really do appreciate all the effort you put into this and I hope that someone else is able to use this and make it work provided they aren't in the same situation as I am!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Just out of curiosty....when you preview your project as HTML5 in browser via Captivate does it work?? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Thanks Cliff, I appreicate your feedback, and I'm so sorry you are not getting the buttons to do waht you are wanting.  Hope you have a great rest of the day!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines