Make WebObjects Interactive when using UseWidget7

[TLCMediaDesign]

I know there has been a ton of discussion on how to have your Widgets/WebObjects/HTML5 Animations follow the stacking order by using UseWidget7 in the AdobeCaptivate.ini file.

Unfortunately in Chrome, sometimes in IE you lose all interactivity when setting UseWidget7 to 1.

Well I finally had a project where this became a serious issue as well, so I decided to dedicate a Saturday to solving this issue.

And here it is. Insert this JavaScript in the head of your index.html or the index.html template and it will automatically restore the interactivity of any WebObject while keeping the stacking order.

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 )
   {        
    interval = setInterval( checkExists, 100, e )
   });
  }
}
}

function checkExists( e )
{
if ( cp.model.data.project_main.useWidgetVersion7 == true )
{
  var getFrame = document.getElementsByTagName( 'iframe' );
 
  if ( getFrame.length > 0 )
  {
   clearInterval( interval );
   interval = null;
 
   var myFrame = getFrame[ 0 ].id;
   var str = myFrame.substring( myFrame.indexOf( '_' ) + 1 );
   var frameCover = str.substring( 0, str.length - 1 );
  
   if ( frameCover )
   {
    document.getElementById( str.substring( 0, str.length - 1 ) ).style.visibility = 'hidden';
    document.getElementById( str.substring( 0, str.length - 1 ) ).style.pointerEvents = 'none';
   }
  }
}
else
{
  clearInterval( interval );
  interval = null;
}
}

[TLCMediaDesign]

An update to this:

If you have an image behind the web object, it will block user interaction also. We had a video inserted as an html5 animation with an image behind covering the content area. Users could not interaction with the video controls and they would not appear on hover.

We needed to execute the following JavaScript on slide enter for each slide where this anomaly occurred.

document.getElementById( 'Image_100' ).style.pointerEvents = 'none';

document.getElementById( 'Image_100c' ).style.pointerEvents = 'none';

document.getElementById( 're-Image_100c' ).style.pointerEvents = 'none';

[Guest]

Hi David,

I am embedding an iframe video in as a WebObject publishing in HTML5 format loading to an AICC LMS.

I set 'UseWidget7 = 1' and the WebObject 'goes to the back' but I lose control over the video.

Am I right in understanding  that the above code inserted in the index.html file of the published course will return the the ability to interact with the video controls?

If so, am I right in assuming that UseWidget7 should still be set to 1?

Is there a way to set 'UseWidget7 = 1' in the index file instead of having to change it in the .ini file?

Thanks

[marissat22566383]

Hi,

I've been trying to come up with a solution for this for awhile, I tried placing this code into the index.html file and my WebObject still remains inactive. I've removed all the other objects and images from the slides, just to test it and that does not appear to work either. Any advice?

[TLCMediaDesign]

Did you put the code between <script></script> tags?

Can you open the console and see if there are any errors thrown?

[TLCMediaDesign]

Also, here is another update the code I have been using this replace the section that starts with:

cp.model.data.project_main.useWidgetVersion7 === true

//hide the Web Object cover to allow Widget7 elements to be interactive in some browsers

if ( cp.model.data.project_main.useWidgetVersion7 === true )

{

  var getFrame = document.getElementsByTagName( 'iframe' );

  if ( getFrame.length > 0 )

  {

   var myFrame = getFrame[ 0 ].id;

   var str = myFrame.substring( myFrame.indexOf( '_' ) + 1 );

   var frameCover = str.substring( 0, str.length - 1 );

   if ( frameCover )

   {   

    var elems = document.getElementsByClassName( 'cp-accessibility' );

    for( var i = 0; i < elems.length; i++ )

    {    

     if ( elems[ i ].getElementsByTagName( 'p' )[ 0 ].innerHTML.indexOf( 'course_background' ) !== -1 )

     {

      elems[ i ].getElementsByTagName( 'p' )[ 0 ].parentNode.parentNode.style.visibility = 'hidden';

      elems[ i ].getElementsByTagName( 'p' )[ 0 ].parentNode.parentNode.style.pointerEvents = 'none';

     }    

    }   

    if ( document.getElementById( str.substring( 0, str.length - 1 )))

    {

     document.getElementById( str.substring( 0, str.length - 1 )).style.visibility = 'hidden';

     document.getElementById( str.substring( 0, str.length - 1 )).style.pointerEvents = 'none';

    }

   }

  }

}

[marissat22566383]

Thanks for your response!

Yes, I put it between the script tags. I am getting the error: "Uncaught ReferenceError: interfaceObj is not defined at index.html"

As for the second updated code, is that to be placed in the index.html or in CPM.js or somewhere else? I can't find "cp.model.data.project_main.useWidgetVersion7 === true" in either file.

Thanks again for your help.

[TLCMediaDesign]

Try this:

<script>
var 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 )
   {        
    interval = setInterval( checkExists, 100, e );
   });
  }
}
}

function checkExists( )
{
if ( cp.model.data.project_main.useWidgetVersion7 === true )
{
  var getFrame = document.getElementsByTagName( 'iframe' );
 
  if ( getFrame.length > 0 )
  {
   var myFrame = getFrame[ 0 ].id;
   var str = myFrame.substring( myFrame.indexOf( '_' ) + 1 );
   var frameCover = str.substring( 0, str.length - 1 );
  
   if ( frameCover )
   {   
    var elems = document.getElementsByClassName( 'cp-accessibility' );
   
    for( var i = 0; i < elems.length; i++ )
    {    
     if ( elems[ i ].getElementsByTagName( 'p' )[ 0 ].innerHTML.indexOf( 'course_background' ) !== -1 )
     {
      elems[ i ].getElementsByTagName( 'p' )[ 0 ].parentNode.parentNode.style.visibility = 'hidden';
      elems[ i ].getElementsByTagName( 'p' )[ 0 ].parentNode.parentNode.style.pointerEvents = 'none';
     }    
    }   
   
    if ( document.getElementById( str.substring( 0, str.length - 1 )))
    {
     document.getElementById( str.substring( 0, str.length - 1 )).style.visibility = 'hidden';
     document.getElementById( str.substring( 0, str.length - 1 )).style.pointerEvents = 'none';
    }
   }
  }
}
}
</script>

[marissat22566383]

Tried it but it still isn't working. I get 2 errors:

Failed to load resource: net::ERR_FILE_NOT_FOUND: _cp_n_m_ and

VM281:1 Uncaught SyntaxError: Unexpected token v in JSON at position 0

    at JSON.parse (<anonymous>)

    at CPM.js:2109

Which I believe is relating to a postMessage script I am using to control the video on another slide that isn't completely set up yet.

[TLCMediaDesign]

Out of ideas. It works for me in every version since CP8.

Hard to tell without doing some serious logs.

[melissag21397276]

Worked like a charm for me. I tested in Chrome, Firefox, and Edge.

Thank you!