JavaScript for Storyline--worth learning?

onEnterFrame (James Kingsley)

Definitely.

I use it routinely in my projects. I have a few blog posts on the subject (like this one).

Recently I used to create a complex series of interactions where the user earned more points for answering quickly. They could view more info to help them with the interaction but it would add time to the clock.

These interactions had to part of a scored quiz.

I used JS to handle all the timing and then sent the data to SL for the score.

Michael Hinze

11 years ago04/18/13 at 4:11 pm (UTC)

I have used Javascript to connect Stroyline to a virtual 360 degree tour and pass scroe info from the tour into Storyline. Here is a short write-up about it: http://wp.me/p2BoUf-5g.

Steve Flowers

11 years ago04/18/13 at 7:19 pm (UTC)

JavaScript is absolutely worth learning! If you build things that deploy to the Web, there are very few skills more valuable than having a solid handle on JavaScript. Here are a few resources that I've seen that seem like they would be really helpful:

http://www.codecademy.com/ < a really nice practice and feedback model. Good to reference as "great eLearning"

http://teamtreehouse.com/ < great video series on a broad array of topics. I signed up when there was an Appsumo deal for $49 / year

http://thecodeplayer.com/ < neat side by side demo of HTML/CSS/JavaScript

http://www.jsfiddle.com/ < once you get rolling, this is nice for punching up small prototypes

Here are a few of the things I've used JavaScript for in Storyline:

Forcing completion and score through the LMS without having to rely on Storyline's limited logic (slide count or single results)
Using a Storyline tab to toggle elements on my master slide (incrementing a variable to transmit the action)
Targeting functions within a loaded WebObject (starting and stopping an HTML5 animation)
Calculating variables using math functions beyond those offered in Storyline
Generating a date
Generating a certificate using just a JavaScript trigger to open a window and write contents
Pulling student ID from the LMS
Changing the background color and image for the window
Generating a cross slide count-up or count-down timer that can be paused or restarted anywhere in the story
Playing a looping audio file in the background of the page across all of the slides (http://www.schillmania.com/projects/soundmanager2/)
Generating a custom PDF that employs Storyline variables just using JavaScript (http://jspdf.com)
Communicating back and forth between embedded Flash content and the Storyline player

There are a TON of things you can do with JavaScript to extend the basic features offered by Storyline.

Jilo Esmail

11 years ago04/19/13 at 11:56 am (UTC)

James/Steve

Once completed program is complete, will javescript work on iPad?

Jilo

Steve Flowers

11 years ago04/19/13 at 6:05 pm (UTC)

When run in HTML5, JavaScript will work on the iPad. Unfortunately, the Articulate Mobile Player doesn't support JavaScript.

S

Lucia Salters

11 years ago04/19/13 at 11:57 pm (UTC)

Hi Steve

I do not have much experience with JS, but now have a client wanting to export Storyline quiz results to a database / csv file. How complicated is this and how would I go about doing it?

Thanks

Steve Flowers

11 years ago04/20/13 at 6:45 am (UTC)

Hi, Lucia -

You'd need some kind of server side solution for that. I've had good luck sending results (and all kinds of other data) to Google Spreadsheet. You can do this through a querystring if you setup the Google App Script properly.

Kennethg Goeieman

almost 11 years ago07/04/13 at 9:52 am (UTC)

Hi Steve,

Is there any Demo we can look at in order ro assist me and Lucia...

Nicole Legault

almost 11 years ago07/04/13 at 11:15 am (UTC)

Just my two cents... Javascript is really handy web language to know. I took a workshop on it and unfortunately haven't been able to use JS as much as I would like to since then, but it was totally worth it anyway because just understanding the logic behind JS goes a long way when you create variables and triggers in Storyline IMO. =)

Norm Cousineau

almost 11 years ago07/19/13 at 6:36 am (UTC)

Keneth, Lucia,

I use this approach heavily to track page views of a course to a Google Spreadsheet, using a Google Apps Script.

The Google Script I use is based on this:
http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/

Then in Storyline, I created a trigger to execute JavaScript. This is the basic format:

var params = "?param1=" + GetPlayer().GetVar("myVar") + "&param2=" + GetPlayer().GetVar("myVar2");

//Notice the first url parameter is preceded by a ? and all others are preceded by a &. You can add as many parameters as you want.
// then add this:
var scriptLoc="https://script.google.com/macros/...etc" + params; // the link between "" is generated from the Google Apps Script when you deploy it as a web app. Insert yours here. Don't forget the + params
var domElement=document.createElement('script');
domElement.setAttribute("type","text/javascript");
domElement.setAttribute("src", scriptLoc);
document.getElementsByTagName("head")[0].appendChild(domElement);

A few points to consider.
The JavaScript above works across domains. The sample in the link above may refer to using XML HTTP Request. But that does not work across different domains.
My Google App Script is set to be executed by anyone (although my spreadsheet is private). In my situation, that doesn't pose a security risk.
Using doGet() worked for me, but not doPost()

As the post points out, these steps are very important:
1. Run the setup function (you'll need to do this twice - 1st time to grant acces to Script Properties)
2. File > Manage versions, create a version
2. Publish > Deploy as web app
3. Copy the service URL and post this in your form/script action (e.g., in Storyline JavaScript)
4. Insert column names on the DATA sheet matching the parameter names of the data you are passing

Other Steps:
Authorize script by selecting Run > doGet();
Name the sheet on the spreadsheet to match the arg in getSheetByName, e.g,. "DATA"

Notes on above link:
Delete lines 50 to 54, and replace with this:
return ContentService.createTextOutput("");// need to provide a return object of the right type, and this will do it.

Sorry for not sending you a demo...it's company property.

Good luck,
Norm

PS you can test your scripts by running the doGet() function, and giving it dummy parameters by doing something like this:
if (e==undefined){ // where e is the arg in doGet(e)
// when testing without actual post
var e = new Object();
e.parameter = {student_id:" an id ",pageId:"an id"};
}

You can debug by creating another worksheet called log, and adding this to the Google Script, then calling the logIt() function
var logSheet = SpreadsheetApp.openById(ScriptProperties.getProperty('active')).getSheetByName("log");
var logCell = logSheet.getRange('a1');
function logIt(it){
var newEntry = logSheet.getLastRow()
logCell.offset(newEntry, 0).setValue(it);
}

Ron San

10 years ago02/24/14 at 1:48 pm (UTC)

i am trying to call a php file from within storyline to authenticate a user before providing access to course.

it seems XMLHTTPRequest.sent() is not working from javascript mapped to a trigger. when I run this I see an alert for "reached this far...", but do not see any other alert.

can someoone help me?

function httpReq(){

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

} else {

// code for IE6, IE5

return new ActiveXObject("Microsoft.XMLHTTP");

}

// function to submit the users details to the database

function authenticate() {

alert("3 inside au");