WebObject and Storyline Variable

I'm not sure how this will behave but you may have some luck hijacking the same function the Storyline player uses to show a web object. Execute this within a JavaScript trigger and you should be able to control the loaded URL. Here's an example:

OpenWebObject(1,"../../yourcontent.html",0,0,720,540,245,52);

Here's the function from story.js. This describes the parameters:

function OpenWebObject(strId, strUrl, nXPos, nYPos, nWidth, nHeight, nSlideXOffset, nSlideYOffset)

The values above provide an offset for a sidebar display at the default width and height. You may need to play with these values to get it to work.

You'll have problems with Web Objects in some browsers if your object target is cross browser. In your example above, you'd be able to employ storyline variables in your web object call something like this:

var player=GetPlayer();

var VariableSL1=player.GetVar("SLVariable1");

var VariableSL2=player.GetVar("SLVariable2");

var customURL="http://mywebobject.com/mysite.php?info1="+VariableSL1+"&info2="+VariableSL2;

OpenWebObject(1,customURL,0,0,720,540,245,52);

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. 

Hi Jean,

Thanks again for coming back I appreciate your help.

I have found my issue with the help of a fresh set of eyes.

It was a Case issue in the function I was using for setting.

The 's' in 'SetVar' is lower case in Zsolts original post where I copied the function from.

Everything works as it should now.

Moral of the story, Always verify syntax and case in all code. :-)

Thanks again and hopefully this helps others.

Happy Friday! :->

Correct working syntax functions copied directly from my working JS file below:

function getVariable(vName){
var player=GetPlayer();
var myVar = player.GetVar(vName);
return myVar;
} 

function setVariable(vName,vValue)
{
var player=GetPlayer();
var myVar = player.SetVar(vName,vValue);
return myVar;
} 

Hi ! 

Thank you for your answer ! 

You talk about the frame.js, but I don't find the 'open_webobject()' you talked about. Is it the the frame.js in the "story_content" folder ? Or do you speak about the "storyline_compiled.js" in the mobile folder ? 

And I promise, if I do I let you know ! 

For future reference for others, you can do to it like this for html5. In the slide where the webobject exists, create a new Javascript that starts at the beginning of the timeline. The script below is my interpretation of how to solve the OP's problem:

// Find and change the src part of the iframe (this will take the first webobject in the storyline, therefore [0]. If you want the second one, use [1], etc..
var iFrameElem = document.getElementsByClassName('item webobject')[0];

var src = "http://mywebobject.com/mysite.php"

var player = GetPlayer();

var var1 = player.GetVar("info1");

var var2 = player.GetVar("info2");

// Add together the finished url with querystrings

var finishSrc = src + "?info1=" + var1 + "&info2=" +  var2;
iFrameElem.setAttribute('src', finishSrc);

Hi,

and thank you for your answer!

It works perfectly with the 'normal' HTML file, but with the HTML 5 it doesn't work at all... I think, the problem is in the 'storyline_compiled.js' file in the 'mobile' folder. But, I can't see why...

Do you have any idea?

Hi, Sebastian - 

That's a tough one. The HTML5 method is different than the Flash method. I dug through the frame.js file this morning and there's a reference to open_webobject() but it's going to take some sorting to see how to invoke it. Will let you know how I get on. If you unravel the puzzle before I do, please let me know

Hi Sebastien

Did you resolve your problem? I'm trying to do the same thing ...

Hello!

I have the same problem... Did you solve the problem? 

I'm trying to go the other direction. I want to manipulate some Storyline variables from my web object. Is this possible? Have you had any success? I've been experimenting with it and haven't had much luck yet. Any insight would be appreciated.