Examples of Articulate Storyline in Canvas?

[parm]

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. 

thanks,

Parm

[Boekenoogen]

A few years ago I built an Articulate Storyline program that would work within Canvas. The item was a training module for sub-admin accounts. Here is a zip file of the program. If it doesn't work, let me know (jrboek@ou.edu) I will email it to you. I do like Articulate and will be building out more modules as time allows. 

[parm]

Hi John,

Thanks for sharing your file.  Did you add the files as SCORM or embed them? I see you didn't use the TOC/Menu, that probably help with the content display in Canvas. I'm finding the addition of the TOC/Menu can look a bit squished on some screens.

thanks again,

Parm

[Boekenoogen]

No I didn’t. At the time that this was created, SCORMwas still having issues. 

[wild0017]

I've used Storyline 2 to build several objects in Special Ed and Teacher Ed. I think it's a great program for authoring engaging and interactive self-checks, quizzes, flash cards and the like. I haven't necessarily seen any in the Commons, but here are a few examples of ones I've built. 

• Wheelchair Identification

• Child Focused Interventions "Prompting Procedures"

• Accessible Syllabus

When it comes to integrating Storyline into Canvas, I found that storing the output files on a webserver and linking to Canvas had better results than using SCORM.  SCORM is nice if you want to feed results into the gradebook. But because the settings in Storyline, and SCORM, and Canvas Assignments (# of attempts, score, grade display type) often overlap, you can get inconsistent results.  Plus, you need to make sure Instructure uses the most up to date version of their SCORM LTI, otherwise, when you import Assignments with SCORM modules, the SCORM package doesn't always come with the imported assignment.  So, Storyline works better, IMO, when students use them for practice and self-checks, than for graded assignments - you just have less headaches.  

[parm]

Thanks Michael,

Your examples are great. While I like that the SCORM LTI can pull some data into the grades, I think it's awkward for students to leave the Module content area just to access the SCORM content. I like the idea of hosting the files on a server and then use iframes on the content pages. That work well with Blackboard and Articulate content, but I haven't been able to test that in Canvas yet. Have you used iframes on Canvas pages? If so, are there any problems with that?

Parm

[wild0017]

Hi Parm, 

When we use a SCORM package, the object displays right inside the Assignment page, so they don't have to leave the Module (as you would an External link).  However, it is best to choose to "Load this tool in a new Tab/Window for sizing purposes.  Since it displays directly within the Assignment page, we don't have to use an iframe.  I've used iframes for YouTube videos and other embedded content, but not Articulate.  

[venitk]

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. 

[slh73 · Accepted solution]

Hi Michael, 

I love your Accessible Syllabus Storyline. Would you mind if I shared that link internally as a resource we can use while working with faculty and course designers?

Suzanne

[wild0017]

Hi Suzanne, 

I'm glad you like it and I'm happy to share.  I only ask that you tag the product or link with my name and institution:  wild0017, Instructional Designer at University of St. Thomas.  

I'm also open for suggestions to improve upon.   

Thanks!

[tdanner]

Here are snippets of course content we've developed Storyline 2. I never completed the bingo game, as it was part of a course that we never ended up developing.

Lost in Time

SMART Bingo

Cycles of Sleep

While I appreciate Canvas having a SCORM tool, I find it lacking, compared to another LMS our unit once used to deliver Articulate-based content. The content we post in a Canvas course is ungraded, but the tool still adds each upload as an item in the gradebook, which confuses the instructor and students while making a mess of the gradebook. Same thing applies to the uploads displaying in Assignments.

I'd rather store the content in Files, but that creates other issues, such as the material not loading in the player and the file that is linked to for students being available as a download.

Regarding the poor way Canvas displays the content when launched, I get around that by enabling the "launch player in a new window" in the Player settings. This will cause the player to launch either in a new tab or new window, depending on the browser, and allow the user to also resize the browser if it launches in a new window.

[parm]

Hi Timothy,

Nice samples very engaging. I failed the quiz, and I am forever lost in time!

Its too bad the SCORM LTI is not bit more flexible. I ended up changing my the course structure, so the SCORM Assignment content (at a Topic level) is directly added into the Module, rather than from a Page. The assignment is set to "Load This Tool in A New Tab", and then when users complete the Storyline, they can use the exit/close button in Storyline to close that window. At least they are not bumped out of the Module learning path that way.

Parm

[jguffey]

Hi Parm,

Sounds like you've figured out what works for you!  Just wanted to share that we use iframes to embed Storylines into content pages and then host the files on our server.  It's been working out really nicely and students in our self-paced courses seem to like having the content broken up with a quick activity or just some nice hover-over features. 

Thanks for the post!

Jill

[wild0017]

Hi Jill, 

Would you mind sharing how you build/code the iframes to embed Storyline objects into your content pages?  That would give us options beyond the "ungraded" or "graded" assignment function.   

Do you have any examples you could share?   

Thanks!

[jguffey]

Hi Michael,

I just use the below code and adjust the url address and dimensions for each Storyline.  I've included a screenshot of the page where this is embedded just to give you an example of how we've been using this program.  It's more for engagement and interactivity to break up our massive amounts of content, rather than being linked to grades.

<div class="video">
<div class="videoWrapper"><iframe src="https:YOUR-URL-HERE.html" width="980" height="350"></iframe></div>

</div>

<div class="video">
<div class="videoWrapper"><iframe src="https://csupalliativecare.org/wp-content/uploads/storyline/Self-Care-Defined-Images/story.html" width="980" height="350"></iframe></div>

</div>

[wild0017]

Thanks Jill.  That looks like a good alternative to graded assignments.  

[roddy_munro]

This is really helpful, thanks Jill! Could you share your publish settings from this, i.e was it published for web?

Thanks in advance,

Roddy

[jguffey]

Hi Roddy,

I actually publish for LMS and then hand the zip over to my Webmaster, but I'm sure you could publish for Web and get the same results.  

[roddy_munro]

Thanks Jill, that's really helpful! I'd be interested to know if people are using a particular story size/width or whether that doesn't matter, and a "scale player to fit browser window" in the player setting was enough? Thanks!

[jguffey]

That's a good question.  I'd be interested to hear how others are doing this too.  We haven't really played around with the settings so the project just retains it's original size.  So if I put together a presentation that was 720x540, that's the size it will be on the page in the iframe and it's static.

I'd love to hear if people are able to utilize Storyline in Canvas and get it to be responsive.  

Thanks!

Jill

[roddy_munro]

Taking your advice to match presentation size in the iframe, thanks Jill. And "scale player to fit browser" seems to make the player responsive so that's something.

Roddy

[dearne_willing]

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

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 

[roddy_munro]

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.

[jenny_hopf]

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!
Jenny

[dearne_willing]

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="https://canvas.tastafe.tas.edu.au/files/333898/download?wrap=1" 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="https://canvas.tastafe.tas.edu.au/courses/3842/files/333898/download" width="100%" height="658" data-api-endpoint="https://canvas.tastafe.tas.edu.au/api/v1/courses/3842/files/333898" 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.

[venitk]

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.

. 

[jguffey]

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.

[roddy_munro]

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.

[traciebosket]

Hi @tdanner 

Do you know how to remove the "gap" between the top of a Canvas page and a Storyline project? I removed the <p> on the html side with no luck; I'm stumped!...

Tracie

Example...

luck. I attached an

[tdanner]

Tracie,

We enabled the "launch player in a new window" in the Player settings so that our Storyline content opens in a pop-up window or on a new tab depending on the browser. Therefore, we don't have that problem because the content isn't embedded directly on the titled Canvas page.

[traciebosket]

Thanks for you reply @tdanner 

I was trying to avoid that since I want it embedded it directly into my Canvas page. But the other day, I noticed when I "previewed" my project (in Storyline, not Canvas) that the Storyline player does not actually remove the gap. Even though I set the player to remove the frame, it still exists. It looks like it removed the frame, but it only made it invisible. I think I'll have to search the Articulate forum to see if there is a way to legitimately remove the Storyline player's frame. 

[gkokaisel]

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.  

[a1224143]

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.