Storyline & Canvas LMS


I have a few questions leading into a potential project with Canvas LMS.

  • The client wants the course to to play within the frame within the Canvas LMS, not in a new window. Is this a possibility? I've read horror stories with users trying to get their content to play on this LMS.
  • Would slide interactions be a bad design decision (MCQs, hotspots, Drag & Drops)?
  • What would the Storyline display size be in this case?

Any other notes as a heads-up would be a fantastic contribution to my project.

1 Reply
Carrie Ann Desnoyers

Hi Joseph!

I have been successfully using Storyline files in the Canvas LMS for over 6 months. I do not use the SCORM option, as I have quite a few problems and my client did not want me to spend the time to figure it all out. 

Here is what I am doing:

1. Make sure you use all PNG file formats for images. JPEG files will cause the entire file to freeze once loaded to Canvas.  (Tip: if you use a premade template - go into the master slides to make sure there are no JPEGs there. If there are, download the images, save as PNG and reupload.)

2. I have found these Browser settings best: Resize browser to fill screen, Scare player to fill browser window, uncheck Launch Player in new window. Under Resume - Never Resume. DO NOT check When running in LMS, ignore flash cookies.

3. Publish Settings: Web format. Do NOT check the options for HTML5 or Articulate Mobile Player. 

4. Once published, go into the published folder and rename the story.html file. In published Storyline Output folder, rename story.html file to the title of the interaction. Make sure to replace spaces with underscores. For example Understanding Coding Conventions would Understanding_Coding_Conventions.html (The students will see this file name when they view the media, so it needs to be descriptive.)

5. Zip this published folder after you change the file name. Note: It is important that you manually create the zip folder in this step. Do not use the Option from Storyline to create a zip folder when you publish. (This will create a zip file with the folder inside of it, so that when you upload in Canvas, your published files will unzip into a labeled folder. This is much easier to organize. :)

6. Navigate to the course in Canvas. Go into the Files Page. Drag and drop the zip file there. Canvas will ask you if you would like to expand the folder. Say yes.

7. Go to the content page where you would like the interaction to be house. 

8. Create a link to the file. You can do this with text or image. I prefer to use an image of the interaction as a link. Take screenshot of first slide. Insert this image into the content page.          Then link the image to the correct file so that the media plays when the image is click on. (You do this by clicking on the image you inserted and clicking on the files in the right hand menu.)

9. One you have linked the file to the image, click on the image to select it (it will turn blue) and use the keystroke Control+K (Command+K for Mac). In the box that appears, change the file to open in a new window.

I hope this is helpful. It sounds complicated, but soon it's second nature and very speedy.