Publishing Storyline Content in Canvas LMS

Jan 15, 2014

Hello! I just wanted to share a recent success I had with getting my Storyline files in to the Canvas LMS. Although I haven't quite found a way to use SCORM reporting features, this is an option to upload your presentations into Canvas that will allow for all of the great interactions we so love in Storyline!

The trick is, when you publish, you have to make sure to choose Launch Player in a New Window. Here are all of the steps I followed (including making it work for iPad).

In order for Storyline presentations to work in Canvas, you have to publish with these player options:

BEFORE you publish, you have to go in to the Player - Other - Launch Player in a New Window

If you choose Prompt to Resume, make sure to leave the "Ignore Flash Cookies in LMS" option UNCHECKED.

It should look like this:

When you publish, make sure to have LMS selected, and checkmark all the boxes in the Publishing for HTML5 and mobile devices.

In Canvas, you need to navigate to the course and page (assignment, module, etc.) where you will be adding the content. THIS IS VITAL. You have to be in the course you want to add the content in before you choose the FILE option on the left-hand side.

Choose "Files" option in the left-hand navigation.

Create a new sub-folder for the course and then choose the upload zip file. Upload the Storyline zip file into the subfolder.

Now create the assignment, announcement, module, etc. that you wanted to create. Choose Add File from the right-hand menu. Navigate to the subfolder you created. Once there, you need to find the "launch.html" file and click on it to add it to your assignment. If you want to allow iPad users to see your content, you also need to click on the IOSLaunch.html file and add it to the assignment.

Save your assignment.

Make sure you have popup blockers off, and then test it out. It should launch in a new window on all browsers. On iPad, you need to have the Articulate Mobile App to interact with the content.

Hope this helps!

55 Replies
Crystal Horn

Hi Shauna! I'm happy to help. See if you can dig up the following info:

  • Do you know if the students who are having issues are using the same browser to access the course?
  • Have they left the course before the results slide and resumed at some point?
  • Have any of the students successfully retaken the course and had their score reported? If so, was there anything they did differently?

Thanks for the clues!

Mark Rash

This is an older post, but I'm replying because I may have some info that might help future users who stumble upon this post. In my experience with Storyline and Canvas, here are some keys:

  1. Publish using SCORM 1.2, with the appropriate tracking option set, and with Passed/Incomplete for reporting. According to the SCORM standard, this option is the only way a score gets passed back to the LMS.
  2. Use the Canvas SCORM LTI for importing, rather than the Files area. This automatically links up the Storyline project with an assignment (graded or ungraded).
  3. Once you import as either a graded or ungraded assignment, this cannot be changed. You must reimport using the SCORM LTI.
  4. Remember to publish the assignment to test it in Student View and/or make it available for students.
  5. If you've done all of the above and have problems capturing completion data in Canvas, there is some JavaScript you can place on the last slide of your Storyline project to force submission of a 100% score and completion status. If your project has a quiz, you'd want to pass the quiz score rather than 100%, but that's outside the scope of my reply.

    This is the "when all else fails" JavaScript for the last slide of your project. Keep in mind that Articulate doesn't provide user support for JavaScript and it's always possible that future changes in the product could cause the code to stop working:
var player = GetPlayer();
function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
var lmsAPI = findLMSAPI(this);
lmsAPI.SetScore(100, 100, 0);
lmsAPI.SCORM_CallLMSSetValue("cmi.core.lesson_status", "passed");