Extending Storyline With Javascript and Variables

May 24, 2012

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
Nancy Roderick

So I took out the second call to the player and, after a lot of testing, found another error--I had initialized the proofCode variable two times. Duh. Those were the only changes in the end. But it was also true that it wouldn't work at all on the local machine. I had to upload to the server to see the javascript functioning. Now it works like a charm.  Thanks again, Steve, for your suggestions!

Steve Flowers

Glad you worked it out. That Flash player security sandbox is a pain. Couple of ways around it. One is to publish to CD. This will run the very same HTML output but run it in an EXE wrapper that defeats all of the activeX, JS, and Flash communication restrictions when run locally. The other is to add the folder or location to your Flash Player Security whitelist.

Neil Chandarana

Hi All,

We currently use an internal LMS that has been created in-house by our iT team and have a .story file of well over 800mb. 

Due to the size and complexity of the .story file we are having problems working/publishing the file despite having a machine of the specification below:

Processot : i7

RAM: 16GB

OS: Windows 64 bit. 

Due to these problems we are looking into spiltting our .story files into two parts.

The problem we have is that we are reporting variables to our LRS and some information needs to be passed from 'Part 1' to 'Part 2' of the program. We were under the assumption that should both parts of the program have the same 'Course ID' then then data would pass from 'Part 1' to 'Part 2'. However when testing this this has not worked. 

Has anyone been able to successfully transfer data from one course to another via TIN CAN API. If so please could they assist us, any help would be much appreciated. 

Should anyone need more information please let me know and I will be happy to explain further,

Many Thanks

Neil Chandarana

Howie Pearson

Hi all, I'll be honest and admit i have very little Javascript experience and i've been through this thread andand it doesn't really mean much to me i'm afraid. 

What i'd like to know is that is there any way i can use say the variable data generated on a results slide to automatically populate the fields on a google form/survey monkey inserted as a web object using javascript?

rehan arshad

HI David can u please let me know how to add Pass/fail, condiotion in JS to send it to LMS

will it work??? Please Help

//hazards is the Total score in my question

var player = GetPlayer();
var lmsAPI = parent;


lmsAPI.SetScore(player.GetVar(“hazards”), 70, 0);


if(player.GetVar(“hazards”)>=60)
SetStatus = "Passed";


if(player.GetVar(“hazards”)
SetStatus = "Failed";

Andrew Gee

Hi All,

Great thread and I have nbeen using some fo the examples of Java with great success.

I am creating a Footy ledder predictor/calculator and am trying to have the ladder display once user enters points for and against.

I have everything working except the final ladder slide in which I want to have the points sorted and displayed vertically and have the corresponding team sorted via the points.

I am in no way a Java expert and have managed to peice together the below script from examples and trial and error.

Any advice is appreciated as the below script at the moment will create a document with the correct output (points listed vertically and sorted from highest to lowest) but when I use the player.SetVar("AFLPoints",AFLPoints[i] + "
");
instead of the document.write(AFLPoints[i] + "
");
I only get the one points variable and no others.  Is this becuse of the text box in Storyline eg. wrapping etc. 

Thanks

Andrew

Script below:

var player = GetPlayer();

var AFLBluesPoints = player.GetVar("AFLBluesPoints");
var AFLBombPoints = player.GetVar("AFLBombPoints");
var AFLCatsPoints = player.GetVar("AFLCatsPoints");
var AFLCrowsPoints = player.GetVar("AFLCrowsPoints");
var AFLDockPoints = player.GetVar("AFLDockPoints");
var AFLDogsPoints = player.GetVar("AFLDogsPoints");
var AFLEaglePoints = player.GetVar("AFLEaglePoints");
var AFLGWSPoints = player.GetVar("AFLGWSPoints");
var AFLHawksPoints = player.GetVar("AFLHawksPoints");
var AFLLionsPoints = player.GetVar("AFLLionsPoints");
var AFLMelbPoints = player.GetVar("AFLMelbPoints");
var AFLPiesPoints = player.GetVar("AFLPiesPoints");
var AFLPortPoints = player.GetVar("AFLPortPoints");
var AFLRoosPoints = player.GetVar("AFLRoosPoints");
var AFLStKPoints = player.GetVar("AFLStKPoints");
var AFLSunsPoints = player.GetVar("AFLSunsPoints");
var AFLSwanPoints = player.GetVar("AFLSwanPoints");
var AFLTigesPoints = player.GetVar("AFLTigesPoints");

var AFLPoints = [AFLBluesPoints, AFLBombPoints, AFLCatsPoints, AFLCrowsPoints, AFLDockPoints, AFLDogsPoints, AFLEaglePoints, AFLGWSPoints, AFLHawksPoints, AFLLionsPoints, AFLMelbPoints, AFLPiesPoints, AFLPortPoints, AFLRoosPoints, AFLStKPoints, AFLSunsPoints, AFLSwanPoints, AFLTigesPoints];

AFLPoints.sort(function(a, b){return b-a});

for (i=0;i

document.write(AFLPoints[i] + "
");

// player.SetVar("AFLPoints",AFLPoints[i] + "
");

John Beaudoin

Hi all, 

Ive been trying to get a simple script to work as above to open up a mail client and auto fill the To: Subject and Body: fields..

The body will be filled with some notes that the learner typed in (variables Unit1Notes and Unit2Notes). Learneremail variable is the learner's email address that they entered in the course. I also wanted to have link breaks in the email body between Unit1Notes and Unit2Notes. Ive tried some many bits of code that Ive found and launched my course in multiple browsers, but have never been able to even get my email client (Outlook 2010) to open. Im starting to think its not the code but something else... Any ideas?

Sample Code:

var email=player.GetVar("learneremail");

var subject="Course Notes for "+learneremail;

var player = GetPlayer();

var body_start=new Array();

body_start[0]=player.GetVar("Unit1Notes");

body_start[1]=player.GetVar("Unit2Notes");

body_text=encodeURIComponent(body_start[0]+"

"+body_start[1]);

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

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

ANOTHER SAMPLE CODE:

var player=GetPlayer();

var notes1=player.GetVar("Unit1Notes");

//notes1 = notes1.replace(/\r\n?/g, '%0D%0A');

var notes2=player.GetVar("Unit2Notes");

var notes3=player.GetVar("Unit3Notes");

var email=player.GetVar("learneremail");

var subject="Course Notes for "+learneremail;

var body="Unit 1 Notes: "+notes1+"%0D%0AUnit 2 Notes: "+notes2+"%0D%0AUnit 3 Notes: "+notes3;

//NEW LINE

body = body.replace(/\r\n?/g, '%0D%0A');

var link='mailto:'+email+

'?subject='+subject+

'&body='+body;

window.open(link);

Steve Flowers

Hi John,

When you launch and test this are you testing locally or from a web host? The Flash Player has a security feature that prevents interaction between the plug-in and the browser locally by default. You can get around this by testing with a Publish to CD, uploading to a Web host, or by adding your publish folder to the Flash Player Security Manager whitelist.

David Richmond

hi guys I'm having a ton more success with articulate than I ever did with Captivate, I've got my own homegrown LMS setup with certificate printing and submission via ajax to a mysql database on results and interfaced it with another login system, really great!

HOWEVER, HTML5 seems to be quite a pain, javascript that works fine in standard story.html doesn't work specifically the part that pulls variables OUT of the player via javascript dont seem to work on browsers, mobile devices or anytime story_html5.html is used.

What am I missing?

    var player=window.opener.GetPlayer();

    //now we pull a field value. You can pull as many as you like. That replace jumble lets you bring over text fields with multiple lines.
    var StudentID=player.GetVar("StudentID").replace(/(\r\n|\r|\n)/g, '
');
    var CourseID=player.GetVar("CourseID").replace(/(\r\n|\r|\n)/g, '
');
    var coursename=player.GetVar("CourseName").replace(/(\r\n|\r|\n)/g, '
');
    var learnerName=player.GetVar("learner").replace(/(\r\n|\r|\n)/g, '
');
    var score=player.GetVar("MyScore").replace(/(\r\n|\r|\n)/g, '
');

why are my variables blank in HTML5 but not  standard versions?

David

Steve Flowers

Hi David. The player variable methods should work fine in HTML5. Try isolating to a single player.GetVar() call and alert the value. Chances are, something else is going awry. 

By the way, what release of Storyline are you using? I believe the functionality of the player methods improved in newer releases. Newest is 1.5.

Steve

Till Then

Would it be possible to use javascript to open a PDF contained with the Storyline file?

For example a Trigger that runs the following JavaScript when learner clicks?

window.open ("../story_content/external_files/MYFILE.pdf",

"mywindow","menubar=1,resizable=1,width=350,height=600");

I know I would need to manualy add the PDF into the xternal_files

Steve Flowers

You can do this pretty easily. And you wouldn't need to add your files manually (post-publish surgery). Check out this recording:

https://player.vimeo.com/video/149071494

I have a few things I'd change in the steps to make it easier:

1. Create a folder to contain your "carry-on".
2. Add an index.html file to this folder. The HTML file doesn't need to contain anything. Your folder can contain anything you want - 1000 pdf's if you want.
3. In Storyline, import a WebObject and target your new carry-on folder.
4. Right-click the Web Object and select Open.
5. In the address bar of the launched window, you'll see a unique ID before index.html
6. Copy the unique folder string for the folder that contains your new carry-on. You'll need this to complete the relative link chain.
7. Back in Storyline, employ the folder structure. For example: "story_content/WebObjects/5nM8Oqq62Th/yourfile.pdf" You can use this to launch with a jump to URL / file or with a hyperlink on text.

Becky Broughton

Russ Still said:

Yes, Pete, you can pass data back and forth with JavaScript. And it sure does open up an unlimited number of possibilities. Only problem is that, currently, the Articulate Mobile Player doesn't interpret JS. Hopefully, we'll see that in a future version.


I know this is from 2012, but I was hoping for a little assistance/advice around this topic. Does this apply to external stuff as well? Could JavaScript be used to tap into data from an external website/API? I'm getting a mixed feeling about the different things I am reading on this forum. Have you done anything like this before or know of others that have?

Steve Flowers

Hi Becky,

Anything you can do with JavaScript in a regular page you can execute within a Storyline page. The biggest limiting factor is the way various browsers behave and, of course, cross-domain security issues.

A couple of ways I've used JavaScript in the past:

  • Send Storyline variables from survey questions to a Google Spreadsheet using either 1) AJAX / POST or 2) a hidden iframe and GET.
  • Populate a variable dynamically from a JSON file. Have done this from a JSON file included in the published output as well as one that was dynamically generated from PHP.
  • Send commands to a web service to generate dynamic text to speech.

The Storyline part is pretty simple. It will only communicate variables out and populate variables that already exist. Once you get that mechanism and have a good handle on making JavaScript dance, everything else tends to fall into place.

David Richmond

David Richmond said:

hi guys I'm having a ton more success with articulate than I ever did with Captivate, I've got my own homegrown LMS setup with certificate printing and submission via ajax to a mysql database on results and interfaced it with another login system, really great!

HOWEVER, HTML5 seems to be quite a pain, javascript that works fine in standard story.html doesn't work specifically the part that pulls variables OUT of the player via javascript dont seem to work on browsers, mobile devices or anytime story_html5.html is used.

What am I missing?

    var player=window.opener.GetPlayer();

    //now we pull a field value. You can pull as many as you like. That replace jumble lets you bring over text fields with multiple lines.
    var StudentID=player.GetVar("StudentID").replace(/(\r\n|\r|\n)/g, '
');
    var CourseID=player.GetVar("CourseID").replace(/(\r\n|\r|\n)/g, '
');
    var coursename=player.GetVar("CourseName").replace(/(\r\n|\r|\n)/g, '
');
    var learnerName=player.GetVar("learner").replace(/(\r\n|\r|\n)/g, '
');
    var score=player.GetVar("MyScore").replace(/(\r\n|\r|\n)/g, '
');

why are my variables blank in HTML5 but not  standard versions?

David


Old post but i finally figured out the problem, after revisiting this project today.  The code  

.replace(/(\r\n|\r|\n)/g,'

in javascript does not work with HTML5

When i remove that code everything works in HTML5 javascript just as it does in standard browsers, this allows the content to work on android as well! HOWEVER, now i have all those wierd special characters like David%20Richmond in the name of the certificate in firefox and safari (IE removes them) how can i get rid of those special encoding space characters without using the .replace function of javascript.

Also my projects work well on all platforms (which is amazing to me) EXCEPT IOS.  I cant use IOS because the player plays the video and never progresses to the next slide.  Its like it plays the video in another player and never returns to my project any thoughts on that?

David

Stefano Todaro

Hi Group,

about the possibility of using javascript in storyline, I would understand if and how you can use the function in the trigger.
I tried inserting the function at the beginning of the trigger before all the procedures, but does not work!
Do you have any examples? Don't tell me to Check out the following link?

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

Thanks

This discussion is closed. You can start a new discussion or contact Articulate Support.