WebObject and Storyline Variable

Hi,

Maybe this wil help. I had some kind of issue when embedding Construct 2 created HTML5 games inside Storyline as Webobject. I wanted two way communications. When the game loads, it receives variables from Storyline. When the game ends, it sends variables to Storyline. This is what ended up working for me (warning, it needs some knowledge of scripting):

1. Create your own xxx.js file. This way you can keep stuff in one location. No mess. You can name it myfunctions.js or whatever.

2. In that xxx.js file create a function that will do the Storyline -> Webobject communcation.

function getVariable(vName)

{

var player=GetPlayer();

var myVar = player.GetVar(vName);

return myVar;

} 

Then add another function that will do the Webobject -> Storyline communication:

function setVariable(vName,vValue)

{

var player=GetPlayer();

var myVar = player.SetVar(vName,vValue);

return myVar;

} 
 

3. In order to use these functions you need to include the xxx.js in the story.html and story_html5.html files:

4. So far you have the functions in the xxx.js file saved in the same folder as the modified story.html and story_html5.html. Now, you can call these functions from your embedded webobject.

From your webobject (for me it's an HTML5 game) you can include a javascript call:

vJSVar = parent.getVariable("myStorylineVar");

This, for example will call the function you added in the xxx.js file, which in returns provides the value of the myStorylineVar variable that you set up in Storyline. This could be any variable.

To set a variable in Storyline from the webobject use:

parent.setVariable("myStorylineVar",100);

This would again, call the function above and set the myStorylineVar variable in Storyline to 100.

5. You can also set up conditional triggers in Storyline to watch variables changing and act on it. For example, in mine, I use a variable called "action'. When "action" changes Storyline does a conditional jump to various places, depending on the value of the variable. (For example, I set the "action" to "complete" and set "score" to the game score. Storyline monitors the change of "action" and jumps to a page where it shows my score.)  

I know it looks like a (speed) train of thought here but for those who are in the weeds with scripting, I hope it helps. If you don't know what all this means I can give you a simple example and you can play with that.

Note: keep in mind a couple of things. This is more around iframes than Storyline iself but there are some restrictions around calling the "parent" javascript function from inside an iframe. If they are on the same domain and same protocol (http vs. https), you should be good.