Javascript example

Hi everyone

I'm really keen to start using Javascript with Storyline since it clearly opens many doors.  I can get variables to display in text boxes but that's about it!  For example, "Hi Gavin" on my slide etc.

I found a fun web site called Name in Lights. If you type in your name it generates an image showing your name lit up in lights.  I thought it could be a fun exercise to do this from Storyline.  The URL for the site is

http://www.notcelebrity.co.uk/?thename=gavin

As you can see in the URL the text after the = is the string for the image.  SO!  I tried hyperlinks from Story Line like 

http://www.notcelebrity.co.uk/?thename=%Firstname% 

But that doesn't work.  But if I could code the Javascript so that the string http://www.notcelebrity.co.uk/?thename= is combined with the %firstname% variable the script could then open the URL?

I might not be possible but if it is I bet it's very simple!!  Any takers?

Thanks

Gavin

19 Replies
Bruce Graham

Hmmm - strange.

If I just enter the url http://www.notcelebrity.co.uk/?thename=Bruceypoo it works fine, so would expect it to work with a variable http://www.notcelebrity.co.uk/?thename=%Firstname% taken from a Text box variable.

Saying that, I am noted for my deep understanding of variables and Javascript.

Ask Phil.....

Bruce

Steve Flowers

Something like this run from a JavaScript trigger should get it:

var player = GetPlayer();
var newName=player.GetVar("newName"); //this is a variable in your Storyline file

var myURL  ="http://www.notcelebrity.co.uk/?thename="+newName;

window.open(myURL, 'width=600, height = 450, scrollbars=yes);

Add a JavaScript trigger to a button with a field feeding a variable and it should work

GAVIN INNES

Hi all

Thanks for all your comments.  And thanks for the code Steve.  It certainly looked the business but it doesn't seem to work :(  No browser window opens.

I've attached the .story file and here is the result

http://www2.rgu.ac.uk/nursing/name/story.html 

The variable is collected as it appears on the text box below but no idea what is happening with the Javascript.  The only examples I can find are here http://www.articulate.com/support/kb_article.php?product=st1&id=llwes8cn32vg  Does anyone else know of any more?

Thanks
Gavin 

Jim Reed

Hi, 

This is question is related to:

http://www.articulate.com/support/kb_article.php?product=st1&id=llwes8cn32vg

This file looks like we should be able to connect Storyline buttons to the applets. This would be great for design consistency and potential tracking of user interactions.

The following illustrates what I would like to do in Storyline. Instead of the form buttons at the top of the applet, I would like to be able to use Storyline buttons to update the applet in the same/similar manner. 

http://jsxgraph.uni-bayreuth.de/wiki/index.php/Even_simpler_function_plotter

If you can help me learn the steps to incorporate this functionality in Storyline, I will be most appreciative.

Jim

Chris Walsh



Bruce Graham said:


Hmmm - strange.


If I just enter the url http://www.notcelebrity.co.uk/?thename=Bruceypoo it works fine, so would expect it to work with a variable http://www.notcelebrity.co.uk/?thename=%Firstname% taken from a Text box variable.


Saying that, I am noted for my deep understanding of variables and Javascript.


Ask Phil.....


Bruce





%Firstname% as the 'thename' parameter in a URL won't work as expected because % is an escape character in URL (e.g. %20 represents a space, %3F represents an question mark sign etc. % itself is represented by %25.  This is called URL Encoding.  Look here http://www.blooberry.com/indexdot/html/topics/urlencoding.htm

You should also consider whether you should submit the "thename" parameter as a GET or POST as the example given here is a GET but that does not necessarily mean that a POST (form submission) will work)

Hope this helps.

GAVIN INNES

Ah, yes.  Well spotted.  The % could be another issue!  I can't see this happening lol. 

However, I would be interested to see other examples of how variables can be used in Storyline. I started to make some example interactions to show colleagues and created a "label the image" diagram with text boxes and verification for each.

Chris Walsh

GAVIN INNES said:

Ah, yes.  Well spotted.  The % could be another issue!  I can't see this happening lol.

You may not see the issue.  All browsers will first try to decode the % symbol and all will find that %Fi... doesn't decode.  After that different browsers (Chrome, IE, FireFox, Opera, ...) will have their own ways of handling the error.  Some (such as in your case) will then assume that the % hasn't been encoded and treat it as a plain % and so the link would appear to work.  Others (like Chrome in my case) will drop the badly encoded % symbol and just carry on with the rest of the text.

Karessa Torgerson

I am having a similar struggle.

I have the following code in a little javascript function set to execute when the timeline of a screen ends. When the timeline ends, nothing happens. No window opens! Can anyone say what I'm doing wrong? Thank you!

var urlString='https://www.mysite.com/CompleteCourse/PostCompletedCourse?account=%25externalOrganization%25&firstname=%25externalFirstName%25&lastname=%25externalLastName%25;

window.open(urlString);

Steve Flowers

When testing this output, are you uploading to a web host or checking it locally? A security feature of the Flash player prevents it from interacting with the browser locally. A couple of ways around this:

  • Publish the output to a web host or local web host
  • Publish the output to CD and run the content using the wrapper (it's still HTML, the wrapper just shuts down the local security features)
  • Add the publish location to the Flash Player Security whitelist using the Security Manager
Ashley Terwilliger-Pollard

Hi S,

This discussion is quite a bit older, so I'm not sure if others are still subscribed here.

Since Javascript is something I'm also a complete novice at, and not something our team can help with you may want to start a new post and that way you may get some more eyes on it from our Javascript experts in the community.