How to add JavaScript to Articulate Storyline to send completion & score to Classes

When you add an Articulate Storyline course to a Class as an HTML activity, it can report back to the Class: send the learner's score, mark the activity as completed, and close the course window. To do this, add a short JavaScript trigger to your Storyline project.

Before you start: HTML (.zip) activities are switched on per account — contact BranchTrack support to turn them on. In the Class, tick Disable auto-complete for the activity, so it is marked complete only when your course says so. See Class activities.

Step 1. Add a JavaScript trigger in Storyline

1. Open your Storyline project and go to the slide where the course should report — usually the results slide or the last slide.

2. Add a new trigger: Action — Execute JavaScript; When — for example "Timeline starts" or "User clicks" a button.

3. Click JavaScript… and paste one of the scripts below.

Note: JavaScript only runs in the published course, not in Storyline's Preview.

Step 2. Choose a script

All scripts send a message to the Class with window.parent.postMessage(message). Send the message as an object, exactly as in the examples — not as text.

The message format

var message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    activity: {
      score: null,       // a whole number, or null for no score
      completed: true    // true or false
    },
    close: true          // true closes the course window
  }
};
window.parent.postMessage(message);

Scores are whole numbers. If you send a decimal, for example 80.5, it is saved as 80.

Example 1: send the score, mark as completed and close the course

var message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    activity: {
      score: 80,
      completed: true
    },
    close: true
  }
};
window.parent.postMessage(message);

Example 2: send the score from a Storyline variable

Replace SomeCustomVar with the name of the Storyline variable that holds your points.

var player = GetPlayer();
var points = Math.round(player.GetVar("SomeCustomVar"));
var message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    activity: {
      score: points,
      completed: true
    },
    close: true
  }
};
window.parent.postMessage(message);

You can send the score as often as you like — for example after each chapter — and the leaderboard updates in real time. Send completed: true only once, at the end. For updates in between, use completed: false and close: false.

Example 3: only close the course

var message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    close: true
  }
};
window.parent.postMessage(message);

If the activity isn't completed yet, the learner sees "Your activity isn't completed! Are you sure you want to quit?" before the window closes.

Step 3. Publish and upload

1. In Storyline, publish the course for Web (HTML5) and zip the output folder.

2. The zip must have a start page — index.html, story.html or a similar file — at the top level or inside a single folder. Storyline's output works as is.

3. In your Class, click Add activity, choose HTML (.zip), and upload the zip in Choose a ZIP file with HTML content….

4. Tick Disable auto-complete, so the activity is completed only when your course sends completed: true.

The New Activity window in a Class. Highlighted: the activity type HTML (.zip) on the left, the upload area “Choose a ZIP file with HTML content…”, and the Disable auto-complete checkbox below Completion score.

Step 4. Test

Open the Class as a learner, play the course until the trigger runs, and check that the activity shows as completed with the right score.

See also

• Class activities

• Points, grading and the Leaderboard

• Make Your Articulate Storyline Better with BranchTrack