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.

