Simple example of pulling xAPI results from LRS in an Articulate Storyline project

xapi-storyline-basic-instructions.md

Basic Instructions

1. Copy the Script1 function into the first Storyline JS trigger on the page you wish to display results
   • Repeat for Scripts 2 and 3
   • Tweak as necessary to get different results
2. Create a Storyline variable to hold the results
   • Just called “storylineVar” in the example
3. Insert a “reference” to this variable on the screen (%storylineVar%)
4. Publish
   • Doesn’t have to be “TinCan” publish since we’re handling it ourselves
5. Add the “tincan.js” library to the root folder of your published output
   • http://rusticisoftware.github.io/TinCanJS/
6. Upload course to LMS/LRS
   • Outside of an LMS/LRS, you will not see results since it’s expecting credentials in the URL query string, but
   • You can add authorization yourself (consult your LRS provider)

xapi-storyline-simple-example

// from Storyline publish
// story_content/user.js
//
// (actual slide IDs will vary)
//
// assumes tincan.js library added to root of publish
// http://rusticisoftware.github.io/TinCanJS/

function ExecuteScript(strId)
{
  switch (strId)
  {
    case "5ekmyskezcy":
    Script1();
    break;
    case "61HLEwecsfH":
    Script2();
    break;
    case "5WPh4snJffe":
    Script3();
    break;
  }
}

function Script1()
{
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "tincan.js";
  document.body.appendChild(s);
}

function Script2()
{
  window.tincan = new TinCan({"url": window.location.href});
}

function Script3()
{
  var player = GetPlayer();
  
  tincan.getStatements({
    sendActor: true,
    sendActivity: false,
    params: {
      registration: null,
      limit: 10
    },
    callback: function (err, result) {
      if (err !== null) { console.log('error:', err);return;}
      var stmts = result.statements;
      
      var storylineVar = [];
      stmts.forEach(function(e){
        var thisActor = "You";
        var thisVerb = e.verb.display.und || e.verb.display["en-US"];
        var thisObject = e.target.definition.name.und || e.target.definition.name["en-US"];
        
        var thisLine = thisActor + " " + thisVerb + " " + thisObject;
        storylineVar.push(thisLine);
      });
      
      storylineVar.reverse();
      storylineVar = storylineVar.join("<br>");
      player.SetVar("storylineVar", storylineVar);
      
    }
  });
}