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?

JEJoll
JEJollAuthor
Known Participant
November 30, 2016

Is there any examples of where WebGL objects have been added to a captivate project successfully? I am attempting to do this with Unity output and would love to learn from someone who has been successful. The only way I can see currently is through a web object linked to the unity WebGL output. I would like to be able to have discreet smaller objects active on the regular captivate page. I have to output to HTML5 and need the 3d objects to be accessible within Captivate. 

 

Much thanks, 


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.

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