Adding CC text for triggered Audio (JavaScript)

I'm still using Captivate 8--I don't know if 9 provides this feature now but you can't have CC text associated with triggered audio as of 8, so this is something I worked out that might be helpful to others.

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 JavaScript 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 text inside the default CC text <p> element (well, you can but it keeps reverting), so my code adds a CSS class that hides it (that's 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 also include these styles which re-positions the CC box into a scrollable sidebar (our approach is to provide all the CC text at once as a transcript, kind of like Lynda.com, which saves a lot of time as opposed to timing the CC to the audio):

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);