Text entry box pause breaking javascript function.

[Hunterbeck]

Hey Everyone,

We're making the jump from producing our content in Captivate 4 flash files to now producing in Captivate 8 with an HTML 5 output. As you can imagine we've had to make a lot of changes - previously we used a lot of 3rd party widgets to accomplish things like cursor changes, etc.. I've been able to replicate most of them using javascript - however, I'm stumped with this current problem.

In our projects we often have our users press the tab key to simulate what it's like to use our software - this worked completely fine when we produced to flash files - but I'm learning that HTML 5 has a few hiccups with the tab key. It likes to cycle between the Text Entry Input we've created, as well as the address bar at the top of the browser. I created a function in javascript that would return focus to the text entry field on blur and it works great up until the pause occurs in the Text Entry Box, after which it stops working. I just have the function defined and called using the slide's "On Enter" and "Execute JavaScript" option. I've never had any problems with pauses before. If I go into the browser's console and call my function again it continues to work - is there a way to call this function when this slide pauses? or does anyone know of any other workaround?

Thanks,

Hunter

[TLCMediaDesign]

What is the code you are using to throw focus back to the TEB?

You can add an event listener for the MOVIE.PAUSE with an enter slide listener.

var interfaceObj;
var eventEmitterObj;

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

function initializeEventListeners()
{
if ( interfaceObj )
{
     if ( eventEmitterObj )
  {
         eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e){  
   setPauseListener();
            });
  }
}
}

function setPauseListener()
{ 
window.cpAPIEventEmitter.addEventListener("CPAPI_MOVIEPAUSE",function(){setFocus();});
}

function setFocus()
{ 
//focus code here
window.cpAPIEventEmitter.removeEventListener("CPAPI_MOVIEPAUSE",function(){setFocus();});
}

[Hunterbeck]

I appreciate the quick reply! I'm using Jquery to reset the focus - my code is

$("#Text_Entry_Box_1_inputField").blur(function(){

    $("#Text_Entry_Box_1_inputField").focus();

})

I tried my code in your setFocus function there and it is having the same problem - it works right up until the TEB pauses.

[TLCMediaDesign]

Just try setting the focus without binding an event. I don't think yours works because focus is already lost.

document.getElementById("answer_1_inputField").focus();

This works for me when the timeline is paused by the TEB.

[Hunterbeck]

Hmm interesting, making that change has the same effect - it works perfectly up until the pause occurs. Just to confirm, this is with you outputting to HTML 5?

This is what the code looks like I'm using now - is this the same you have?

var interfaceObj;

var eventEmitterObj;

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

{

interfaceObj = evt.Data;

eventEmitterObj = interfaceObj.getEventEmitter();

    initializeEventListeners();

});

function initializeEventListeners()

{

if ( interfaceObj )

{

     if ( eventEmitterObj )

  {

         eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e){  

   setPauseListener();

            });

  }

}

}

function setPauseListener()

{ 

window.cpAPIEventEmitter.addEventListener("CPAPI_MOVIEPAUSE",function(){setFocus();});

}

function setFocus()

{ 

    document.getElementById("#Text_Entry_Box_1_inputField").focus();

window.cpAPIEventEmitter.removeEventListener("CPAPI_MOVIEPAUSE",function(){setFocus();});

}

[Hunterbeck]

The code in my last reply is wrong, it should be

    document.getElementById("Text_Entry_Box_1_inputField").focus();

not

   document.getElementById("#Text_Entry_Box_1_inputField").focus();

However this still doesn't work.

It's bizarre because when I call the setFocus function in the console after the TEB pause - it works fine. My assumption would be that the pause event listener is not working properly.

[Hunterbeck]

I ended up looking through the Captivate API documentation and just wrote up my own event listener. I finally got it to work! For anyone interested my code is

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

{

    var interfaceObj = evt.Data;

    var eventEmitterObj = interfaceObj.getEventEmitter();

});

if(window.cpAPIInterface)

{

    if(window.cpAPIEventEmitter)

    {

        window.cpAPIEventEmitter.addEventListener("CPAPI_MOVIEPAUSE",function(e){

         $("#Text_Entry_Box_4_inputField").blur(function(){

           $("#Text_Entry_Box_4_inputField").focus();

          })

     });

    }

}

Thanks for tipping me off to the MOVIEPAUSE event, that led me to the right answer.