Upload a Storyline interaction into Canvas
What is Articulate Storyline 360?
Storyline is an elearning authoring platform that allows curriculum designers to create interactive and multimedia-rich learning activities. It is a very empowering tool that is both powerful and easy to use for creating engaging learning content.
The animated GIF here showcases various interactive aspects of a simple Storyline project, including mouse hover effects and clickable interactions. One of the challenges that Canvas users encounter when working with Storyline is that it is difficult to learn how to upload a project into Canvas. The Canvas file repository system makes uploading and sharing content with students very simple and streamlines, but it can be a challenge when you want to upload interactive content to be embedded onto a Canvas page (or assignment, quiz, discussion, announcement, etc.). An alternative is to upload your Storyline files onto a public server, but today we will explore how to embed Storyline from within a Canvas course.
Previewing and publishing your Storyline interaction
Within Storyline, you will want to first preview your interaction to ensure that the functionality and interactions are performing the way you intend. When you project is ready to publish then you can click the publish button on the Home ribbon. There are several publishing options available for you, including publish for an Articulate proprietary platforms, web, LMS, as a video, and more. Although the destination is Canvas, you want to publish it for the web and not for an LMS. We want an HTML interaction and not a SCORM package.
SCORM is good when you have gradable interactions and you want the students’ assessment data to be pushed directly to the gradebook. Unfortunately, with SCORM we don’t have the rich analytic data built into the Canvas quizzing functions, which allows us to know which students missed which questions. A better alternative might be to embed a Storyline interaction into a Canvas quiz question or a quiz overview. So when we are exporting our Storyline project, we want to choose: Web.
Determine your project Title, write a description if you choose, and select the folder for Storyline to export the project. For the properties options, you want to make sure that the format is HTML5 only. Beginning in 2021, Adobe no longer supports Flash projects or Flash players, and it is good to eschew that format for our projects.
When you have exported your project, Storyline will give you the option to create a zip file, which compresses all of the project files into one single file which will need to be expanded. This is a good option for you. In Canvas, you can upload that zip file into the Files portion of your course. Canvas will then ask if you want to expand the zip file or upload the zip file (intact). You want to choose the option to expand it.
Before you begin embedding your project onto your Canvas page, you first need to look for any files that are unpublished. If there are unpublished files then students will not be able to see your project properly. Click on the file and select from the dropdown the proper usage right. If you hold the copyright then indicate as such. You would hold the copyright if you created all of the content in your Storyline project. If you use creative commons or open source materials, or if you have permission to use someone else’s materials, then you can indicate such. Then select the Publish radio button and save.
Once you have determined the usage rights and published all of the files, look for a file called story.html. You will want to right click (control + click on a Mac) and select: Copy link address (or a similar command if you are using a non-Chrome browser).
With the story.html link copied, you can now head over to your Canvas page where you want to embed your Storyline project. In the html editor (or using the embed icon on the Rich Content Editor), build your iframe, putting the source URL as the copied address to your story file. Notice that the URL will include a bit on the end:
?download_frd=1
You want to delete that from the URL. That command will prompt the browser to download the html file onto your computer. You don’t want students to download the file; you want them to see the file on the Canvas page.
With that little bit of code deleted, you can then specify the width and the height of your interaction. The best approach is to use the dimensions of your original project and perhaps add a few extra pixels. If you published your project as 550 x 350 then consider creating the iframe to be 600 x 400. That way you wont have scroll bars. Just don’t set the dimensions too generously or you may end up with unnecessary white space between your content.
These steps should help you incorporate your Storyline interactions onto your Canvas pages without having to take extra steps to upload to separate servers. Feel free to browse some of my Storyline examples on my Canvas page:
https://canvas.instructure.com/courses/2560052/pages/storyline
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas