Skip to main content
JEJoll
JEJoll
Known Participant
October 11, 2016
Question

Common JS Interface and WebGL

  • October 11, 2016
  • 1 reply
  • 1508 views

I'm not a Captivate Developer, but am responsible for writing some WebGL compatibility testing code for the courseware we are developing. I'm hoping to gain some insight into how to execute some custom javascript, and then show/hide some groups on a page based on the results of said javascript.

Basically, we will have two groups of content on a slide, one containing some Unity interactives that will be running in WebGL, another containing videos that will display if the user's browser is not WebGL compatible.

Since the user can navigate to any slide at any given time, I need to perform this compatibility check on each slide that contains the WebGL content.

What I want to do is:

When a page loads, execute some javascript that defines and executes some functions, which in turn set a variable isWebGLCompatible. Then I want to check whether this variable is true or false, and then show/hide the groups containing the appropriate content.

Is something like this possible inside captivate?

This topic has been closed for replies.

1 reply

TLCMediaDesign
TLCMediaDesign
Inspiring
October 11, 2016

I think you should create a variable for WebGL and run JavaScript on enter of the first slide to populate it as 0 or 1.

Then create conditional advanced actions to execute on enter of the slides in question to show/hide the applicable groups.

This could all be done dynamically with external JavaScript depending on how you name the elements within the groups. Note that there are no groups to reference in JavaScript.

JEJoll
JEJollAuthor
Known Participant
October 11, 2016

Unfortunately, we can't rely on setting the variable on the first slide, as the user has the freedom to return to any slide using bookmarks, etc.

I've got another solution using pure external js to set the variable, but it involves modifying Captivate's generated index.html file to reference the external js. This will work, but I'd like to avoid this solution if possible.

Is it possible to set the variable and then do the check all on one slide?

C
collenea16089730
Participating Frequently
January 7, 2017

We've done this successfully.

In a nutshell, if you create a WebObject in captivate, then in its source, you simply give the name of the folder that you will be building your Unity output to, you should be good to go.

If you're building Unity using WebGL to a directory called "UnityBuild", the path you would give the webobject is UnityBuild/index.html.

Then, after publishing the Captivate project, move the Unity Build folder into the root of the published Captivate directory.

This will let everything work. However, this will embed the WebGL content as an iframe inside of your captivate content, and any scripts running inside the iframe (UnityLoader.js for example) will be seen as cross-site scripting attempts if you try running it locally, so you'll have to run from a server (could even be localhost using something like xampp), or you can run locally in FireFox, as it has more lax security restrictions.

But, if I remember correctly, this WebGL content will have to reload every time you change the captivate slide (even if the webobject is set to persist). This is incredibly annoying, and we had to develop a custom solution to remove the iframe from Captivate's DOM heirarchy in the webpage (so that it won't be forced to reload). Then some considerations also have to be made in order to allow proper scaling with Captivate (if you want it).

Captivate and WebGL don't work well together in my experience, but it is possible.


Thanks for this answer. It is much appreciated. I have run into another issue with the Unity/WebGL in Captivate.

I have been working with this for awhile now. If you zip up the Unity WebGL output it goes in through the browse as a web object. My new issue: The webobject loads on the top layer of the iframe. Now adobe states:

In Adobe Captivate 9, web objects and HTML 5 animations (when layered with other shapes) always appear on top 

To work around this issue in HTML5, do the following:

  1. In your Captivate installation folder, open the AdobeCaptivate.ini file.
  2. Edit the file to change the value of UseWidget7 to 1 as follows:

UseWidget7=1
  3. Close and re-launch Adobe Captivate.

You can now position your web objects on top or bottom, and they appear as expected in HTML 5. 

Which I have done so my Captivate buttons etc appear on top. The bummer is that now my Unity controls don’t work? If I switch back to  UseWidget7=0  it is now on the top layer but the buttons work. Did you run into this?

Much thanks for any help.

Collene

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