13 Replies
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. 

Steve Flowers

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.

Nicole Legault

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

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

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");

    var xmlhttp = httpReq();

    xmlhttp.onreadystatechange=function() {

        if (xmlhttp.readyState==4 && xmlhttp.status==200) {

            astatus=xmlhttp.responseText;

          player.SetVar("LoginSuccess",astatus);

        }

    }

}

function ButtonSubmit()

{

  var player = GetPlayer();

var userid = player.GetVar("Email");

var tokenid = player.GetVar("Token");

var url = "login.php?login=" + userid + "&token=" + tokenid;

var xmlhttp = httpReq();

    xmlhttp.open("POST",url, true);

alert("reached this far...");

    xmlhttp.send();

alert("reached end..");

}

Marie-Pierre Dionne

I am trying to generate a result page - with a certain background picture. And I want user to be able to print in a PDF format.

I do not want the Grid by default with articulate.

I have watched many videos, but I am still stuck.

Seems I need to create an HTML report modify and copy and paste into storilyne quiz content.

But I am missing some steps.

1) How do I create the modified HTML report?

2) I use storyline- there is no quiz content. How do I replace the existing report with the new HTML report I will have created?

Any help would be greatly appreciated!

I am really stuck!