Articulate Storyline and Rise integration

Integrate a Maze with Articulate Storyline and Rise

Level of expertise: Easy

Purpose

In this article you'll learn how to quickly and easily integrate Mazetec with Articulate courses. The integration is simple and straightforward. Let's get started.

Overview

Integrate your Mazetec Mazes as a web object in Articulate Storyline, then add that Storyline to a Rise Course. We've added Javascript to work in Storyline and Rise to prevent the learner from skipping the Maze until the user reaches the finish node in the maze.

User flow from the learner's perspective
  1. Learner starts the course in Rise and once they hit the Storyline block with the integrated Mazetec web object.
  2. The learner is prevented from skipping the web object.
  3. When the learner finishes the Maze the Continue button is revealed.

Integration Steps


Disable the "Restart" button on the Finish node before publishing the link. hide the restart button

Open the Maze you want to integrate and Click Publish.

Tag the link. We recommend adding "Integration", "Storyline", "Rise", "Articulate" as tags so you can identify it later and filter the analytics.

Optionally: Capture name and email and "Require name and email"

copy-new-link.jpg



Step 2 - Download the Articulate Storyline Mazetec Integration Template.

Download Storyline template

Step 2.1 - Edit the Web Object in Articulate Storyline

Edit the Web Object in Articulate Storyline


Be sure to Copy the text below and Paste it at the end of your Maze link for the best experience.

&removemargin=true&removeheader=true
https://app.mazetec.org/player?uuid=a23a75c3-f083-4272-8644-1acf9128be12&removemargin=true&removeheader=true

Update the link the Web Object in Articulate Storyline



Step 3 - Publish to Rise and Configure Rise to prevent the users from skipping


Step 3.1 - Configure the Rise Settings Navigation mode to "Restricted"

Articulate Rise configure navigation


Step 3.2 - Add the Storyline block to Rise

Step 3.3 - Add a Continue button after the Storyline block

Articulate Rise add continue button


Step 3.4 - Change the Continue settings to "Complete Block Directly Above"

Articulate Rise add continue button



That's it! The integration is complete.






Advanced: Pass user data into Mazetec

Directly pass data into Mazetec through the player to capture the learner's name and email.

Name URL (GET) Variable Type Description
Name name Text (String), 80 Char Name of the learner saved with the learner's records in Mazetec analytics
Email email Email format. Validates "@" and "." This is the learner's email that is saved with the learner's record.


If you have integrated your Mazetec account with a Learning Repository Store (LRS), the learner's name and email will be captured in Mazetec analytics and be included in the learner's xAPI records that are passed to your LRS.




How is data passed into Mazetec using these variables?

Data is passed into Mazetec by setting the variables in the embed link.

  • When you publish your maze link require name and email.
  • Pass in the learner's name and email using GET variables in the link
  • The learner's name and email will auto-populate the modal.
Example link:
https://app.mazetec.org/player?uuid=a23a75c3-f083-4272-8644-1acf9128be12&removemargin=true&removeheader=true&name={{first_name}}%20{{last_name}}&email={{email}}
Base Maze URL Enable Responsiveness Minimize header Capture Learner Name Capture Learner Email
https://app.mazetec.org/player?uuid=e0e6242c-c6a3-46b5-9290-82c031d10a6f &removemargin=true &removeheader=true &name={{first_name}}%20{{last_name}} &email={{email}}






How does the javascript integration work?

The goal is to prevent the learners from skipping the Maze (web object) until the embedded Maze is completed.

Mazetec uses the JavaScript function PostMessage() to send data to the parent page (i.e. Storyline). This method ensures that browsers cannot block this communication and allows us to communicate back to the parent page when the user hits an exit node.

We also created custom variables so that the JS code updates the variable and execute certain actions based on their change in value.

Articulate Storyline Javascript Trigger Code

/*************************************************************************
  *
  * MAZETEC CONFIDENTIAL
  * __________________
  *
  *  Copyright (c) 2021 MAZETEC LLC
  *  All Rights Reserved.
  *
  * NOTICE:  All information contained herein is, and remains
  * the property of MAZETEC LLC and its suppliers,
  * if any.  The intellectual and technical concepts contained
  * herein are proprietary to MAZETEC LLC
  * and its suppliers and may be covered by U.S. and Foreign Patents,
  * patents in process, and are protected by trade secret or copyright law.
  * Dissemination of this information or reproduction of this material
  * is strictly forbidden unless prior written permission is obtained
  * from MAZETEC LLC.
  *
  * This file is subject to additional terms and conditions defined
  * at mazetec.org.
  */

// Establish communication with Storyline

// Set Storyline varibles
var player = GetPlayer();
player.SetVar("maze","incomplete");


// Register Mazetec iframe messages listener with the parent
// this will allow the parent frame listen for messages from
// the Mazetec player.
// We use window.top with Articulate, because there are multiple 
// iframes with Storyline and Rise.
window.top.addEventListener("message", (e) => {
    if (!e.origin.includes("mazetec")) {
        // If mazetec is not found in the message then we ignore it
        // otherwise we process it the message.
        return;
     }
      // Here we check for the End Type 'et' in the message data.
      // If the end type is 'finish' it means the learner reached the
      // finish node. 
      // Other end types are fail, timeout, and creditover.
      if (e.data.et === "finish") {

          // Set the maze variable we established in Storyline to "finished"
          // In Storyline we configured a trigger to monitor this variable
          // When the state changes and the end status is == finished
          // the course it marked as "completed" and revealing the continue
          // button in Rise.
          player.SetVar("maze","finished");
        }
         // For Troubleshooting
        // console.log(e, "Event from Mazetec");
});

Additional Details

Error handling

If the values that are passed are not a valid type or are of null value, the Name and Email modal popup will display so the user can manually enter in their information.

  • Overview Integration
  • Custom integration guide
  • Thinkific integration
  • Add your LMS or LRS to receive xAPI data
  • Embed a Maze
  • xAPI Integration