How to add closed captioning to audio not on the timeline?

[anick421]

Cp 7 - I'm using a drag and drop and am triggering audio to start when the user passes/fails the interaction. How can I add closed captioning to this audio as it's not on the timeline?

Thanks,

Angela

[xr42nv]

Hi Angela,

Unfortunately you can't place captions on audio that is not assigned to the slide timeline. (so for example if your button 'plays audio' you cannot apply CC).

The only way is the pause the slide timeline and add a continue button. Unfortunetly that won't help you with your situation.

It has been one thing that has always annoyed me about CP, because all programs i build need to have CC under my accessibility requirement.

[RodWard]

Your interaction has Success or Failure captions.  Put your CC text inside these captions and format/place them on the slide so that they look similar to the normal CC text.  Attach your audio to these captions as well.  This way, when your user succeeds or fails with your interaction, the success/failure captions will play the appropriate audio and the captions themselves will supply the CC on screen text.

(NOTE: You may need to use advanced actions to hide the normal CC text while your drag and drop interaction is working otherwise your faux CC captions will be underneath the normal CC text area and therefore obscured.)

[anick421]

Hi Rod,

Thanks, that's a great work around!

[Guest]

Is there a way to customize this so that the Advanced Action CC only displays if CC was already showing? If my learner didn't have the CC up, I wouldn't want it to suddenly appear.

[RodWard]

Can you please explain this a little more clearly? I'm uncertain as to what you're trying to achieve here.

[Guest]

Hi Rod.

I have audio that is triggered by an advanced action. But I need to include closed captioning in the course. I do not plan to have the CC up at all times, so the caption box route doesn't seem like the best choice. 

[RodWard]

OK.  So you're using triggered audio.  Now I see the issue.

Closed Captioning text is only really compatible with slide audio, i.e. audio that has been added to the slide timeline like other objects. The only way you can synchronise the CC text to appear on cue is if the audio is locked to the frames on that timeline.  Since you're triggering your audio to play by another method (Advanced Actions) there's no way to synch it with the default CC text method.

I still think your best bet is to use Captions to display synched text to your triggered audio as you can use the same Advanced Action that triggers the audio to SHOW the captions that display the corresponding text.  However, what WILL be more problematic is getting those same captions to disappear again on cue.  This is because the SHOW and HIDE actions must be triggered by events of some kind.  So you might have to HIDE the previous CC caption when you trigger the next audio clip.  Or if these are separate slides, then you could use the ON Slide Enter event to HIDE any captions that might still be present from previous slides.

Another option you have is to set up a user variables to hold the CC text and insert this variable into the caption that will display your dynamic CC text.  Then you use your Advanced Actions to change the value of this variable, thereby changing the value of the text displayed in the caption.  You still need to use screen events to drive all of this, but it's an option you might consider.

[anick421]

We have accessibility requirements, as well. Hopefully this is addressed in a future version of CP. Thanks,

Angela

[RodWard]

Accessibility and mobile devices.  This is something I'm rather curious about.

How does a blind person use a touch screen?  How do they know where to tap, swipe, or pinch?

[xr42nv]

Yeah accessibility is a big thing here in Australia. We have some of the toughest requirements in the world in the context of developing web based content.

IOS and Android Smartphones have accessibility mode, which can act as a screen reader. They are able to read things like app names, websites, e-mails and messages. They can also use apps as long as the screen reader can support the content (in general HTML5 apps)

It can guide them in using a mobile application. They use different gesture control to interact with the phone.

I have built a couple of basic apps using jQuery Mobile and the accessibility mode on Android was working reasonably well. I have never tested a CP module to see if it works.

This is an old video but it gives you a general overview of accessibility on iphone.

iPhone VoiceOver Function For People With Disabilities - YouTube

[buneznunez]

Hi! Old post I know, but here's a JavaScript solution I just worked out for adding CC text for triggered audio:

This code inserts a new <p> element into the default CC text element and populates it with the CC text for your triggered audio clips. In my case there is slide audio that plays before the click boxes appear that trigger the "popup" audio. They were set to stop slide audio, but the default CC text was staying up, so my code had to hide it.

Add Functions in a Common on Enter Slide Action:

I put this (and other custom functions my course uses) in an advanced action that is is called by every slide in the on Enter action.

- The CC text function:

$('p.hideCPel').removeClass('hideCPel');//restore CC text to default style on other slides

$('#altCCtxt').remove();//remove any previous alt CC text

function createAltCC(cc) {

  var ccTxt = $('#ccText').find('p')[0];//link to default CC text element

  if(!$(ccTxt).hasClass('hideCPel')) {

  $(ccTxt).addClass('hideCPel');

  }

  $('#altCCtxt').remove();//remove previous CCs

  var altCCtxt=document.createElement('p');

  $('#ccText').prepend(altCCtxt);

  altCCtxt.id='altCCtxt';

  altCCtxt.innerHTML=cc;

};//end createAltCC

- Adding CSS styles:

I discovered you can't just overwrite the existing CC text <p> element (you can but it keeps reverting), so my code adds a CSS class that hides it (the only way I've found to overwrite a Captivate element's inline styles).

So this must be added to main slideEnter code (the addCSSRule function was generously offered by another forum user--this is just my utilization of it):

if(!window.custCSS) {
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
} else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}

addCSSRule(document.styleSheets[0], "#altCCtxt", "margin-left:8px;margin-right:8px;margin-top:2px", 1);

addCSSRule(document.styleSheets[0], ".hideCPel", "display:none !important; opacity: 0;", 1);

window.custCSS=true;

}//end custCSS if

That custCSS if statement prevents the action from repeatedly adding the styles to your course's index.html file.

Invoking the Function:

- The alt CC text is applied by adding this code to an advanced action (the one that is triggering your audio):

var ccText = 'This is your CC text for you triggered audio. It must be a simple text string like this--sorry, no line breaks or html tags.';

createAltCC(ccText);

Hope that helps somebody. ~t

BTW, I actually also include these styles which re-positions the CC box into a scrollable sidebar:

addCSSRule(document.styleSheets[0], "#cc", "background: #F0F0F0; opacity: 0.9;float: right !important; position: absolute !important; top: 64px !important; left: 1021px !important; width: 200px !important; height: 506px !important; bottom: 0px; z-index: 4; overflow-y: scroll; pointer-events: all !important", 1);

addCSSRule(document.styleSheets[0], "#ccText", "padding-top: 5px", 1);

addCSSRule(document.styleSheets[0], "#ccClose", "display: none", 1);

[rpck]

Thank you so much! This helped me immensely! I have an interaction that triggers audio for each button on the screen. I used your CC Text function to write the CC for each button. Then, on the next slide, I called the function again and it removed the last AltCC so the regular CC could function again.

[kathyh6774382]

Thank you.

Moderator: please don't post personal credentials (I took them out), this is a public forum

[birajawithu]

Hi buneznunez​,

Thanks for the solution. I just followed your instruction and created a course executing the java script you provided. However, it's not working. Just for your info, I am not expert in Java Script and may be there is missing something in my code. Can you please share a sample captivate file having one slide for this. So that I can refer that one.

Thanks in Advance,

Biraja Prasanna

Email: birajawithu@gmail.com

[buneznunez]

Biraja, I've emailed you but I'll also reply here for future visitors.

I’m glad you asked for help because it made me realize that Captivate 2017 made a change in the way it does CC text that broke my custom code for triggered audio CC text. (I haven’t done a course that had audio popups since we upgraded from CP 9.) I think I've fixed it now.

The key is that now Captivate will only display the CC box when there is an active waveform on the slide. So even if you have a slide that only has triggered audio (i.e. it doesn’t have slide audio) you still have to have an audio clip; it can just contain silence.

Or if there IS slide audio, you have to pause the slide before the audio clip runs out. Otherwise the CC box goes away. I haven't done it yet, but I envision adding some extra silence to the end of an audio clip and then pausing* before the silence runs out.

*Here's the tricky part about pausing the slide: using the pause behavior in a button's timing doesn't seem to work (the slide will pause but the CC box goes away). I'm having to do it with an execute JavaScript action, which is part of a special slideEnter action I made for slides that will have popup audio.

       //pause the slide

        setTimeout(function() {window.cpAPIInterface.pause();}, 50);

The 50 is milliseconds, so to pause a half second after a two second clip you would make it 2500.

Good luck.