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! 

37 Replies
Jacqui Yoo
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);

Thanks, Linus!

This worked, but I had to change the class from 'item webobject' to 'item webobject unhideable', as the containing div also uses the class 'item webobject'.

I was not initially clear, but the order of the web object [0] for first, [1] for second, etc. is specific to the slide, and not the entire project.

I am using Storyline 2, Update 11.

Matthew Bibby

Something like this should do the trick Christian:

var player = GetPlayer();
if (/html5/.test(window.location.href)) {
player.SetVar("Output","HTML5");
} else {
player.SetVar("Output","Flash");
}

You'll need a text variable in Storyline called Output for this to work.

The JS will simply update that variable with either HTML5 or Flash, depending on which output is being viewed.

John Boulay
Matthew Bibby

Something like this should do the trick Christian:

var player = GetPlayer();
if (/html5/.test(window.location.href)) {
player.SetVar("Output","HTML5");
} else {
player.SetVar("Output","Flash");
}

You'll need a text variable in Storyline called Output for this to work.

The JS will simply update that variable with either HTML5 or Flash, depending on which output is being viewed.

Very helpful html5 test Matthew, love simplified code, thanks!

Matthew Bibby

Glad that it is helpful for you John.

Once caveat with this code... don't include html5 in your project name. This code works by looking at the URL for html5 and if it finds it, it assumes the learner is viewing the HTML5 output.

However, if you have a project called "Introduction to HTML5", then this code will get confused.

LaRhonda Jefferson

I realize it has been some time since this last post, however, I'm still trying to get the above code to work. I found a storyline file that contained the the following script and it' works perfectly until you change the URL to something else. I've tried a number of different urls, but I'm not getting any of them to open. I can't even get https://www.articulate.com to open.

Ultimately, what I'm wanting to do is create a url by passing a a variable.

https://lab4.nog-oc.org/Variable1@netops.org/

I've tried everything with no luck. Anyone have any thoughts?

LaRhonda

Jean-Guy  Boulay

I believe the function OpenWebObject was deprecated since "story.js" is no longer used.
You can target a web object (containing a transparent png) that you place in the story though.
I tried it out and it is loading with Jacqui Yoo's modified script (attached).

Alternatively, if you are feeling adventurous, you could create an iframe element dynamically and target its content window with your new URL. I've never done this with a full site, but I have done this with audio. I just don't know how it would impact the main storyline project.

Kris N

Just be mindful - iFrames break a lot of security; and in some browsers, don't function as they once did (part of this has to do with stricter https enforcement, and disallowing the behaviour that iFrames allowed). iFrame's were always "a bad idea(tm)" -- its just that they provided a work around for many for such a long time.

Jean-Guy  Boulay

Yes, it's hit or miss when connecting to external websites depending on permissions set on the server. Storyline WebObjects are entirely built on an iframe, do an 'inspect' and search the code for the word and you'll see what I mean. When you run locally embedded content through the web object it's running content in the same location so it won't throw up security flags to the browser.  When I tested the script I was only able to load up Imgur images, a course hosted on my server, and the Elearning heroes community website; anything else was blocked.

Sherri Sagers

Thanks everyone! I was able to use Jean-Guy's version to show a Smartsheet form inside a Storyline object. This is the code that worked for me:

var player = GetPlayer();

//This will work with the first iframe on the slide with the class name of "shown"
var iFrameId = document.getElementsByClassName('shown')[2];
console.log(iFrameId);

var src="https://app.smartsheet.com/b/form/12345";

var score=player.GetVar ("Score");

//Build the smartURL here > var fullurl = src + "?var1=" + value1 + "&var2=" + value2;
var fullurl = src + "?Quiz=" + score;

//Send the new smartURL to the web object
iFrameId.setAttribute('src', fullurl);