Extending Storyline With Javascript and Variables

Hi group

I've been working with several authoring tools over a few years (Flash, Toolbook ...) and love the power that the scriping languages in them give me.

I've just started having a look at Storyline and it looks like a lot of fun and quite powerful. The triggers, variables and layers give a lot of flexibility - but I want MORE!

If it was possible to pass variables into javascript for processing and then back from the javascript back into the variable it would open up a whole world of possibilities.

That's my question, really. Is this possible, and if so, are there any simple examples available?

Thanks

91 Replies
Dazzer Weir

Hi all

I was hoping for some help with a javascript issue as I don't know it that well.

I have created a project with a final score. This is needs to go to a leader board in a seperate iframe. How do I in my project

a) call up the iframe? (Is it a parent.dot function?)

b) send the variable "Finalscore" to it ? (would that be using GetVar)

Any thoughts would be gratefully received?

Thanks

Kyle Egan

So the html file that holds the storyline file has a seperate iframe in
which is a highscore table? Is that right?

I'm not to sure what your trying to achieve. I have created a highscore
table before by sending the high score from the articulate file to a php
file that saves a score in a txt file. Then you have a highscore script
that just reads the txt file scores.

Jane Booth

Hi David - I hope you're still around to help with this - I have been fiddling with JS and attached the following to a button which should send an email. I've made an error somewhere but I can't find where it is. Are you able to see anything obvious? I have uploaded the published file to Tempshare but the button just won't do anything...

http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19m57knpubipkp11indn92123g4/story.html 

var player=GetPlayer();

var email="test@myemail.com.au";

var subject="Assessment Record - Geotechnical Hazard Awareness - "+player.GetVar("FirstName")+" "+player.GetVar("LastName");

var body_start=new Array ();
body_start[0]="Please update the following person's competency record for Geotechnical Hazard Awareness.";
body_start[1]=player.GetVar(FirstName)+" "+player.GetVar(LastName);
body_start[2]=player.GetVar(Company);
body-start[3]=player.GetVar(Email);

body_text=body_start[0]+"%0D%0A%0D%0A"+body_start[1]+"%0D%0A%0D%0A"+body_start[2]+"%0D%0A%0D%0A"+body_start[3];

var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_text;

win=window.open(mailto_link,'emailWin');

David Burton

Jane,

In addition to the typo Wendy pointed out, you are missing quotes around the FirstName, LastName, Company and Email:

GetVar(FirstName) should be GetVar("FirstName") etc...

Please use the updated script below.

var player=GetPlayer();
var email="test@myemail.com.au";
var subject="Assessment Record - Geotechnical Hazard Awareness - "+player.GetVar("FirstName")+" "+player.GetVar("LastName");

var body_start=new Array();
body_start[0]="Please update the following person's competency record for Geotechnical Hazard Awareness.";
body_start[1]=player.GetVar("FirstName")+" "+player.GetVar("LastName");
body_start[2]=player.GetVar("Company");
body_start[3]=player.GetVar("Email");

body_text=body_start[0]+"%0D%0A%0D%0A"+body_start[1]+"%0D%0A%0D%0A"+body_start[2]+"%0D%0A%0D%0A"+body_start[3];

var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_text;

win = window.open(mailto_link,'emailWin');

 

I hope this helps.

David Burton

Jane,

By default, the mailto URI scheme will open the end users default mail client and therefore work with any mail client.

Please note, some users might have their browser's security settings configured to block mailto links and prevent the default mail client from opening. Although chances of users having their browser configured this way might be low, it could happen and therefore you should account for it. 

I haven't looked into the Adobe Acrobat solution yet, but would imagine this solution could have some downsides related to security as well.

With most coded email methods available, the mailto option, might be one of the more reliable/secure, since the mailto option doesn't actually send the email. Once the mail client opens, its up to the end user to send it. 

If you are looking for a more automated solution you could try the php method outlined here. This does require you have access to a web hosting account or web server.

I hope this helps.

 

Brian Allen

I'm working on setting up a "create your own pop up window" form in Storyline 2.  Basically the user will enter a URL, height and width, click on a button and launch a pop up window matching the before-said specifications.

I've got the URL part of the javascript working, but can't get the height and width to work.

Here's the javascript I have so far, any help in the right direction would be appreciated!

var cURL = player.GetVar("SiteURL");
var cWidth = player.GetVar("widthCustom");
var cHeight = player.GetVar("heightCustom");
window.open(cURL,"_blank","toolbar=yes, location=yes, status=no, menubar=no, scrollbars=yes, resizable=no, width=cWidth, height=cHeight");
Joshua Farquharson

Does anyone know how to use Storyline's "Execute JavaScript" feature to automatically send data/info to my email address? I would like this to occur in the following circumstances:

1. When the user enters their name, email address, and clicks submit. I want to receive the form data automatically.

2. When the user finishes a quiz and clicks submit. I would like to receive their quiz results.

I do not want their email application to open on their computer. I just want to receive an email automatically when the user performs any of the above.

If what I am asking is not possible, please offer alternative solutions if you have any.

Thanks for your help.

Josh

 

paulnevin thomas

1) You can manually include your javascript library into index html file’s <head> tag. But this would require modification to published output everytime
2) Other option is to split your javascript class/library into smaller pieces of about 30k characters in size (in compressed format), or less (about 15-18kb) with spaces/line breaks (production format).
Once you split your large JS code library into smaller chunks, you can add multiple javascript triggers and add chunks of code into each and create a combined class/functionality.You will have to understand how these JS codes added into output files. The custom JS codes added through triggers will go into user.js file (inside story_content folder) like shown below,
String.prototype.repeat = function(times) {
return new Array(times+1).join(this)
}

alert( "a".repeat(3) ) // aaa

 

aws training in chennai | informatica training in chennai | hadoop training in chennai

Brian Allen

paulnevin, another option that has been discussed here in the community would be to modify the source index html found in Storyline's install directory.

This solution works great for developers who almost always use these javascript libraries and want them automatically included in the published index file.

Sandeep Gadam

Hi. I'm working on a storyline project and i would like to add a timer to a particular slide.

Actually, the slide consists of an interaction, where the user clicks a button "BEGIN".

So, when the user clicks the button, the timer should start and and when the interaction is completed, the timer stops and and a pop-up should appear showing the user "how much time it took to complete the interaction".

So kindly guide me to get through this.

Many thanks!

Sandeep Gadam

 

Brian Allen

I might have put a little more work into this than necessary, and it may still need a little tweaking, but I wanted to share an example that (I think) accomplishes what you're looking for without the need for any javascript. 

The key is the off-stage object that increments a Timer variable on animation entrance and animation exit.

Take a look and let us know if you have any questions, .story file is attached.