Skip to main content
C
Cliff5EA9
Participating Frequently
May 18, 2022
Question

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

  • May 18, 2022
  • 3 replies
  • 3185 views

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!
    This topic has been closed for replies.

    3 replies

    OH_CP_Lover_&_Hacker
    OH_CP_Lover_&_Hacker
    Inspiring
    May 19, 2022

    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. 

    C
    Cliff5EA9Author
    Participating Frequently
    May 20, 2022

    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.

    OH_CP_Lover_&_Hacker
    OH_CP_Lover_&_Hacker
    Inspiring
    May 22, 2022

    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.

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    May 19, 2022

    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")
    }
    Stagprime2687219
    Stagprime2687219
    Brainiac
    May 19, 2022

    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.

    RodWard
    RodWard
    Community Expert
    May 18, 2022

    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.

    Lilybiri
    Lilybiri
    Brainiac
    May 19, 2022

    @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.

    C
    Cliff5EA9Author
    Participating Frequently
    May 19, 2022

    @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. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices