Skip to main content
C
Captivate Hero
Participant
October 1, 2016
Answered

Using Event Listeners with Edge Animate and Captivate

  • October 1, 2016
  • 1 reply
  • 654 views

I just finished designing and developing a custom TOC in Edge Animate, and have successfully connected it to “get/set” information from Captivate 9.0.2. When you click a Captivate button within the project, it will trigger the TOC animation to play, displaying to you information. However, the close TOC close button is within Edge Animate. When you click the close button within the Edge Animate animation, the TOC animation will reverse play. I’ve also nicely set it up so that the audio/video on the Captivate slide will pause when the TOC is visible and continue playing when the TOC is hidden.

Here’s my issue: when you reach the end of the slide and open the Edge Animate TOC everything behaves as it should. When you then close the Edge Animate TOC, the Captivate project continues playing by moving on to the next slide. I need it to remain stopped/paused until the learner clicks the "Next" button to advance. I’m having a tough time integrating the CPAPI_MOVIEPAUSE, CPAPI_MOVIERESUME, and CPAPI_MOVIESTOP event listeners while also maintaining successful communication between Captivate and Edge Animate. Does anybody know how to achieve this? Thanks!

This topic has been closed for replies.
Correct answer TLCMediaDesign

The way I do this is to add a variable change event listener for the cpInfoCurrentFrame in conjunction with the enter slide listener. You check if you have reached the end of slide and set a variable. If you put this in the head of the index.html:

var interfaceObj, eventEmitterObj, csTo = 0; endSlide = false;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

function initializeEventListeners()
{
if ( interfaceObj )
{
     if ( eventEmitterObj )
  {
         eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
   {        
    endSlide = false;
    csTo = e.Data.to;
   
    window.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ( e )
    {
     if ( e.Data.newVal > csTo - 5 )
     {
      endSlide = true;
     } }, 'cpInfoCurrentFrame'
    );
            });
  }
}
}

Then in the edge file check the value of endSlide ( window.parent.window.endSlide ), if it is true do not resume.

1 reply

TLCMediaDesign
TLCMediaDesignCorrect answer
Inspiring
October 2, 2016

The way I do this is to add a variable change event listener for the cpInfoCurrentFrame in conjunction with the enter slide listener. You check if you have reached the end of slide and set a variable. If you put this in the head of the index.html:

var interfaceObj, eventEmitterObj, csTo = 0; endSlide = false;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

function initializeEventListeners()
{
if ( interfaceObj )
{
     if ( eventEmitterObj )
  {
         eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
   {        
    endSlide = false;
    csTo = e.Data.to;
   
    window.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ( e )
    {
     if ( e.Data.newVal > csTo - 5 )
     {
      endSlide = true;
     } }, 'cpInfoCurrentFrame'
    );
            });
  }
}
}

Then in the edge file check the value of endSlide ( window.parent.window.endSlide ), if it is true do not resume.

C
Captivate HeroAuthor
Participant
October 2, 2016

Wow! I was definitely way off with my initial trial scripts. Works like a charm! Thanks a ton for your help!

For others interested in implementing something like this, in reference to the last line about Edge Animate, it's just a simple if/else statement that can be executed on "click". Here's the code:

if (window.parent.window.endSlide == false) {

     parent.cpAPIInterface.play();

} else {

     parent.cpAPIInterface.pause();

}

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