Skip to main content
patrickb54999573
patrickb54999573
Participant
January 23, 2017
Question

How to use the moduleReadyEvent?

  • January 23, 2017
  • 1 reply
  • 410 views

Hello all,

I do not know how precisely to use the moduleReadyEvent. For example, if I like to display a text saying "The module is ready" when all content is loaded, how is it done in detail? This question concerns Captivate 9, publishing in HTML5.

What I did so far: I used the following code and put it in the head of the index.html:

window.addEventListener("moduleReadyEvent", function(evt)

{

    var interfaceObj = evt.Data;

    var eventEmitterObj = interfaceObj.getEventEmitter();

});

But how do I proceed? How (in detail) can I reach that the text of above (as an example) is displayed when the content is ready? I tried a lot but the moduleReadyEvent stays mysterious for me.

I`m very grateful for any advise on this topic!

    This topic has been closed for replies.

    1 reply

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    January 23, 2017

    The module ready event fires only once when the project starts and all of Captivates dependent files have loaded and the cpAPIEventEmitter is available.

    This does not mean that the project has completely rendered in the browser though.

    The main purpose is when the moduleReadyEvent fires then you know that the cpAPIEventEmitter is available for you to subscribe to Captivates events.

    Every project we do starts with a slide enter event and we work form there.

    So in the following example, if the current slide is equal to 1, show a text caption named "moduleReady". You need to create the text caption and have it initially set to hidden.

    var interfaceObj, eventEmitterObj;

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

    function initializeEventListeners()
    { 
    if ( interfaceObj )
    {
      if ( eventEmitterObj )
      {
       eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
       {       
        if ( e.Data.slideNumber == 1 )
        {
         cp.show( 'moduleReady' )
        }   
       }); 
      }
    }
    }

    patrickb54999573
    patrickb54999573Author
    Participant
    January 23, 2017

    Thank you very much for your detailed answer!

    I don`t know what I`m doing wrong, but for some reason it still doesn't work. So what I did was the following:

    I created a text caption, named it "moduleReady" and set it initially to hidden.

    Then I copied your code into the head of the index.html.

    Then I viewed the project in the browser. However the text was not displayed. Did I put the code into the correct location (the head of the index.html)? Or do I additionally have to do something else (create a slide enter event or whatever)?

    Your help is much appreciated. Thank you very much!

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    January 23, 2017

    Sometimes the element is not rendered in the window yet, especially smartshapes.

    You need to set a setInterval to run every few milliseconds until it's actually in the browser, then show it. Try this:

    interfaceObj, eventEmitterObj, interval;

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

    });

    function initializeEventListeners()
    { 
    if ( interfaceObj )
    {
      if ( eventEmitterObj )
      {    
       eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
       {        
        if ( e.Data.slideNumber == 1 || e.Data.slideNumber == '1' )
        {
          interval = setInterval( checkExists, 100, e )
        }    
       });
      }
    }
    }

    function checkExists( e )
    {
    if ( document.getElementById( 'moduleReady' ) )
    {
      cp.show( 'moduleReady' );
      clearInterval( interval );
      interval = null;
    }
    }

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