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

    Your Articulate Storyline courses can be a great addition to your Classes. For Classes to receive the completion status, scores, or closing instructions, you need to add a small JavaScript snippet inside your Storyline project. Storyline makes it easy to trigger custom JavaScript at any point during your course, usually on the last slide or when a learner clicks a final button.

    Below is a quick guide on how to set this up, followed by sample scripts you can use.

    Step 1: Add a JavaScript Trigger in Storyline

    1. Open your Storyline project.

    2. Go to the slide where you want to send the completion/score message (typically the results slide or the final slide).

    3. Add a new Trigger.

    4. Choose: Action: Execute JavaScript

    5. Choose the event (for example: When the timeline starts or When the learner clicks a button).

    6. Click JavaScript… and paste your code.

      ⚠️ Important: JavaScript only runs in the published version of the course (not in Preview mode). Always publish to Web to test.

    Step 2: Use the JavaScript Message Code

    Classes listen for messages using postMessage(). From Storyline, we can send the message using JavaScript like this:

    const message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    activity: {
      score: null | Float,
      completed: Boolean, 
    },
    close: Boolean, 
  },
};

window.parent.postMessage(message);

    Example 1: Send score + completion + close course

    Use this when the learner successfully finishes the course and you want to send the score AND close the course window.

    const message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    activity: {
      score: 80.5,
      completed: true, 
    },
    close: true, 
  },
};

    Example 2: Only send “close the course”

    If you only want Storyline to tell Classes to close the course window (no score or completion):

    const message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    close: true,
  },
};

window.parent.postMessage(message);
     
    The code below grabs the contents of a Storyline variable named "SomeCustomVar", sends it "up" to Classes, and marks the activity as completed. You should replace "SomeCustomVar" with whatever the name of your progress tracking variable is. You can send points data as often as you want and it will update in real time on the leaderboard, e.g. after each Storyline chapter or specific interaction. Just make sure you only set it to completed just once, at the end.
     
    var storylineAPI = GetPlayer(); 
var storyPoints = storylineAPI.GetVar("SomeCustomVar");

var message = {
  type: 'branchtrack:progress',
  version: 1,
  data: {
    activity: {
      score: storyPoints,
      completed: true,
    },
    close: true,
  },
};

window.parent.postMessage(message);

    Step 4: Test

    Since postMessage communication only works in a real browser context:

    1. Publish Storyline to Web (save as HTML5)

    2. Upload it to your Class

    3. Run the course in the Class as a learner and trigger the JavaScript event

    4. Watch the Class receive the message and update completion/score

     

    That’s It! With one small JavaScript trigger in Storyline, you can fully integrate your course with Classes. This makes it easy to track learner progress, record scores, and automatically close the course window when the learner has finished.


    Published