WebObject and Storyline Variable

Hi!

I have a problem, I need to use a webobject with my project, but my webobject needs some informations. So, I put them in variables in Storyline and now my problem is how I can give them in the query string like this : 

http://mywebobject.com/mysite.php?info1=VariableSL1&info2=VariableSL2 

Do you have any idea? 

Thank you very much! 

30 Replies
Steve Flowers

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);

Steve Flowers

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

Sebastien Greffet

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 ! 

Jason Johnson

Steve Flowers said:

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);


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.

Zsolt Olah

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. 

Steve Flowers

One way to avoid having to edit external files is to add a JS trigger to the master slide. You can either write an include to the header or write window level functions that can be called later. I don't mind doing surgery after publish but it gets to be a bummer doing it every time.

window.getVariable=function(vName)

{

var player=GetPlayer();

var myVar = player.GetVar(vName);

return myVar;

window.setVariable=function(vName,vValue)

{

var player=GetPlayer();

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

return myVar;

Linus NoName

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);

Kevin Mc

@Zsolt Olah: Thank you for the approach you provided.

I can get the variables out of Storyline which is great but when I try to set variables in storyline the function seems to breakdown ie it is not being fired.

Off course this is the functionality I need the most. I'm in the process of troubleshooting the issue.

Any suggestions as to why this isn't working going into Storyline? is there something in Storyline that I need to set to allow the variables to be written to?

Jean-Guy  Boulay

Is your webobject code in the body or the head? I placed mine in the body. it's been a few months ago, but I recall I was getting no communication when I had the code in the Head of the webobject. I also added  an eventlistener to ensure that the vars updated in the webobject before executing setVariable.

Kevin Mc

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;

 

Zsolt Olah

I just saw this chain, not sure why I wasn't getting notifications when someone replied... And it's been there for a while but if someone is still interested, I just had two sessions on using a game engine (Construct 2) with Storyline at the ATD TechKnowledge conference. 

I put together an interactive guide book how to build a game with source files. 

You may not work with a game engine but the output of the game engine is HTML5. Check out the section on Integration with Storyline. There's an example you can download with explanation how it works under: Playbook 4 Integration with Storyline 2 -> Integration package

http://rabbitoreg.com/atd-tk-integration-package/

My original blog example: http://rabbitoreg.com/2015/03/23/c2s2/

And here's one implementation to see it in action: http://rabbitoreg.com/2015/06/11/when-i-ruled-the-world/

 

 

 

 

Ashley Terwilliger

Hi Zsolt,

Thanks for sharing here. As for the notifications perhaps they were disabled within your profile? If you're set to auto-subscribe that'll include you on threads on which you've replied and then you can control each individual thread using the "subscribe" button at the top or access the subscriptions from your profile.