Articulate Storyline

This document will show steps on how to integrate onQ videos with Articulate Storyline. You need to have an account on onQ and a license with Storyline to complete this.

Setup video in onQ

The follow are steps to create an onQ video.

Step 1: Create Video in onQ

From the onQ content list, click the plus sign in order to create content. Choose VIDEO from the dropdown and enter your Title.

Step 2: Upload the video

Once the Video content is created, you can upload a video or use a Vimeo or Youtube link.

Step 3: Create the conversation

Create a conversation that can be embedded into your content. The “External user information passed in” must be clicked so that the system can pull user information from the LMS via SCORM.

Step 4: Copy the onQ video URL

After creating the conversation, click on the Source URL tab and copy the url.

Setup files locally

In order to import into Articulate as a Web object, there will need to be a directory setup locally for the Web Object.

Step 1: Create a directory

Create an empty directory on your local machine for the Web Object.

Step 2: Create an index.html file

In the empty directory, create an index.html file with the following code:

<html>
<body>
<script>
    var url = '< onQ url >';
    var variableName = 'videoCompleted';
</script>
<iframe
    allow="microphone; camera"
    allowfullscreen="1"
    height="95%"
    width="100%"
    frameborder="0"
    style="display: none;"
    src="" id="course-content">
</iframe>
<div id="loading" style="display: block;">
    Loading
</div>
<div id="error" style="display: none;">
    Unable to connect to LMS.
</div>
<script>
function findLMSAPI(win) {
    if (win.hasOwnProperty("GetStudentID")) return win;
    else if (win.parent == win) return null;
    else return findLMSAPI(win.parent);
}

function toggleVariable() {
  if (this.parent == this) return null;
  var player = this.parent.GetPlayer();
   if (variableName && player) {
      var value = player.GetVar(variableName);
      if (value) {
        player.SetVar(variableName, false);
      } else {
        player.SetVar(variableName, true);
      }
   }
}

function handleEndEvent(evt) {
  if (evt.data !== 'VIDEO_ENDED') return;
  toggleVariable();
}

var lmsAPI = null;
try {
    lmsAPI = findLMSAPI(this);
} catch (e) {
    console.log(e);
}

if (lmsAPI) {
    var name = lmsAPI.GetStudentName();
    var array  = name.split(',');
    var displayName = array[0];
    if (array.length > 1) {
        displayName = array[1] + '  ' + array[0];
    }
    var studentID = lmsAPI.GetStudentID();
    var user = {
        "id": studentID,
        "displayName": displayName,
        "username": studentID
    }
    var stringifiedUser = btoa(JSON.stringify(user));

    var contentUrl = url + "&user=" + stringifiedUser;
    document.getElementById("course-content").style.display = 'block';
    document.getElementById("course-content").setAttribute("src", contentUrl );
} else {
    document.getElementById("error").style.display = 'block';
}
document.getElementById("loading").style.display = 'none';
window.addEventListener("message", handleEndEvent, false);
</script>
</body>
</html>

Step 3: Replace the onQ video URL in the index.html

Open the index.html file in a text editor and replace the following line with the onQ video url.

<script>
                  var url = ‘<onQ url>’;
</script>

Insert into Storyline

Open your Storyline project and create an empty slide. Follow the steps below to insert the onQ video into your project.

Step 1: Insert a Web Object

Step 2: Choose the folder

Click on the folder icon and select the folder that was created on your local machine.

Once selected, you will see the Web Object in your project.

Step 3: Publish to LMS for testing

In order to test the onQ embedded video, the Storyline project will need to be published to LMS with the SCORM 1.2 output. See the screens below.

Preview in SCORM Cloud

Finally, the published Storyline project can be tested within SCORM cloud or your LMS. You will be able to engage with your LMS user account.

Additional: Setup next slide on video completion

OnQ can signal Articulate to go to the next slide on video completion. In order to enable that functionality, follow the steps below.

Step 1: Create a variable

Add the variable name “videoCompleted” in Storyline. The variable will need to be True/False type.

Step 2: Create a trigger

For each slide that needs to go to the next slide on video completion, add a trigger with the options below.