Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Participant

Examples of Articulate Storyline in Canvas?

Jump to solution

Hi ID Group,

I'm looking for Canvas courses with Articulate Storyline used for content delivery. Does anyone know if there are some examples of this in the Canvas Commons? Ideally, I would like to have samples of the Storyline files added in using the zip files as well as the SCORM methods. I want to show examples of well organized and designed courses to some instructors I work with. 



32 Replies
Community Participant

Hi there

Using Articulate 360 items in Canvas has been/is still an interesting journey. Our eLearning team use Articulate 360 and have been inserting Storyline/Studio/Rise items as SCORM graded or ungraded (new window or within Canvas frame - depends on the need).

We now load the publish for web files into the Canvas files then iframe into a Canvas page. Again, depending on need of the item (or size of the slide to begin with) width is 100% and height approx 558. I have been utilising the menu in Storyline. Would love to figure out a much smoother way to load Articulate into Canvas.

With graded Rise items we are adding as SCORM and load in new tab and have added image/text in the Assignment before the user clicks the grey load tab (essentially so users do not bypass the screen thinking there is nothing there on first glance). Sometimes, when appropriate we will use the share feature if a Rise item doesn't need to be tracked and updated frequently. Using Rise within a Canvas Frame in an Assignment/SCORM doesn't allow the Rise course to shine as it should.

Would love a way to update SCORM items in Canvas without having to delete and upload the item again - if anyone knows please share Smiley Happy

Have put in a feature idea with Articulate to bring back the Rise lesson completion % back to the LMS, so there is more meaningful data than a x or tick, so students and teachers can see the progress of the graded item.

With Canvas and Articulate I see these two tools creating amazing experiences for our students, just wish they worked smoother together and could bring back data to Canvas that is more meaningful.

I must admit I haven't played around too much with the player options for Storyline to see best options for displaying in browsers or in Canvas. This will be my 

Very useful, thanks Dearne. One of the things I'm not a big fan of re SCORM and Canvas is being forced to put this in the assignments section. Generally passing back a grade isn't something I'll be doing so assignments is the wrong place. I've tested using the files area and iframe and that seems to work pretty well, thanks for that! I can see how replacing a storyline project will be irritating using this method though.

I haven't been brave enough to try Rise and Canvas yet!

Overall a lot of workaround needed, for something that in some other LMSs just integrates and works well. I think Canvas would be wise to address this.

Community Champion

Jill, how does your look on mobile? We also embed with iframes (although with different settings than you do--we don't use a div class), and we run into issues where our storylines look great on desktop, but either don't work at all on mobile, or have HUGE margins. (see the pic). I've been monkeying with the settings without much luck.

image has large black margins on the top and bottom of the storyline iframe

Community Participant

Hi Katie,

Yup, we get the same look with ours.  I'm embarrassed to say that our solution to mobile is to try to discourage our students from using their phones or tablets to complete their courses.  I just tried using the setting "scale player to fit browser" that  @roddy_munro  suggested above and that seems to really help but not fix it entirely.

Community Participant

In general Storyline isn't a great choice for mobile. It's passable on tablet, terrible on phone. Only the player is responsive (i.e. the player resizes, but the content within just gets smaller and smaller when you go down in screen size). 

Don't know if Rise would be an alternative, as it is (as far as i'm aware) truly responsive. Never used it in Canvas though.

Community Participant

I uploaded to Canvas Commons an activity created in Articulate 360 for students to learn about meta-majors and program advising opportunities at Valencia College. Do a search on the Commons for "NSE Transition" and you will see the graded and ungraded versions of this activity.  

Hi  @dearne_willing ,

This thread has been incredibly helpful. I was wondering if you could share more specifics around how you "load the publish for web files into the Canvas files then iframe into a Canvas page"? I'm not 100% comfortable yet with iframe so any help or instructional resources you can share would be so helpful!

Thank you!

Community Participant

Hi Pam

In our University we have lots of Storyline SCORM packagesbeing used. Most of the time they are a nice looking way to embed a presentation "inline" in a Canvas page rather than have to download and open a Powerpoint. However there are some really good simulations being developed that use some of the programming like features in Storyline. These can be packaged as SCORM and graded but we often just save as a web package so that they are a formative learning activity only.

Hi Jenny

Apologies in the delay in replying to your message.

How are you going with the iframe atm? This is how I approach the iframe within a Canvas page:

  1. Create a new folder in Canvas Files
  2. Upload the web zip file exported from Storyline
  3. Edit the page where I would like the iframe
  4. In the Content Selector find the HTML file I would like to iframe (click the link, so the URL appears in the HTML editor) e.g. <a href="" title="story.html" class="instructure_file_link">story.html</a> 
  5. I copy and paste my iframe template code (below) into the HTML editor beneath the HTML file code (above)
  6. I then change the course number and file number into the template code to refer to the HTML file code
  7. This method will not bring any result back to the Gradebook.

<p><iframe src="" width="100%" height="658" data-api-endpoint="" data-api-returntype="File"></iframe></p>

Jenny, hope this helps, and I am always keen to find better ways in how to incorporate Articulate and Canvas if you have any tips too!

I did hear that Canvas has not updated the SCORM feature for over a year. I wonder if xAPI will become a prominent feature if SCORM will be let go and not updated?

Where is Canvas with xAPI? Surely they should be looking ta the benefits of the reporting etc. of this feature.

Community Champion

We post Storyline files in iFrames all the time. It works great in desktop (although you have to be careful about the dimensions), it's terrible on phones. Well, I mean, it works on the phone, but it has big black bars on the top and bottom of the storyline content that fills the screen. Not ideal.