Participating Frequently

Question

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

Forum|Forum|3 years ago
May 18, 2022
3 replies
3187 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.

OH_CP_Lover_&_Hacker

Inspiring

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.

TLCMediaDesign

Inspiring

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.

OH_CP_Lover_&_Hacker

Inspiring

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 😕😕

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

TLCMediaDesign

Inspiring

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

Legend

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

Community Expert

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

Legend

@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

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded