How to embed Storyline in Canvas
HTML-код
- Опубликовано: 6 янв 2025
- You've created and awesome interaction with Articulate Storyline 360. You zipped your output and now you want to upload it to Canvas. Where to begin? Where to end? In this tutorial we'll walk through the process and get that Storyline interaction looking great in your Canvas course!
Demos of Storyline in Canvas - 0:25
Previewing and publishing your Storyline interaction - 4:17
Uploading published ZIP to Canvas - 6:00
Manage user rights - 6:32
Copy HTML link - 7:03
Creating the iframe - 7:21
Make sure to visit the website and Canvas course:
www.howtocanvas.com/create-amazing-pages-in-canvas/storyline
canvas.instruc...
Please consider subscribing for more Canvas tips and tricks:
bit.ly/how2canv...
And follow us on our companion website and social media
Website: www.howtocanva...
Twitter: / howtocanvas
Instagram: / howtocanvas
Facebook: / howtocanvas
I believe Publish format is no longer available in Storyline, Am I wrong ?
Thank you! I am uploading my storyline course into Canvas for my MS program capstone. This was so helpful because I do not have a SCORM option on the free Canvas platform.
Glad it was helpful!
Thanks so much! This is extremely helpful!
You're very welcome!
Excellent! I upload a SCORM file to Canvas. This is a great option. Thanks Sean!
Very welcome!
Thank you - so helpful! I am relatively new to both Canvas and Articulate, so this was great. I used a combination of Rise with imported Storyline interactions to create a course and imported as a SCORM, so I am very interested when you are able to do the follow-up vídeo on SCORM. I appreciated how you used SL to enhance Canvas rather than replace it like a Rise course would.
This might be a silly question, but is there a particular font to use if I wanted to craft my HTML code (e.g., the s) in Word and then copy and paste them into the editor? Just using the regular quotation marks does not work (found that one out when I tried to replicate some of your code examples and then just copied your samples directly).
The quotation mark issue is complicated. What I would do is either paste the code into Canvas a plain text, or paste it into a plain text editor like Notepad or TextWrangler, and THEN copy/paste that into Canvas. On the blog backend for this channel (www.howtocanvas.com), the quotation marks are always decorative. It's so annoying and I have to type " Ctrl+Z in order to undo the transition to decorative. I should really write out my blog posts like you do in Word and then copy them over, but I'm just a little lazy.
And I should probably do a Storyline SCORM video. I was actually an instrumental voice in encouraging Instructure to integrate SCORM into the Canvas LMS back in the Josh Coates era.
Thanks so much this is amazing!
Glad you like it!
Really helpful thanks. Any idea if there is something additional I need to do in the HTML order for it to be viewed this way via the mobile app?
Plays fine on my laptop embedded this way but doesn't appear to be loading in the mobile app...........
That's definitely something I need to explore more. Perhaps put the scorm files on a public server, such as AWS, and embed from there. Or use the mobile HTML (though I think the HTML5 file should work).
thanks alot do you have video link about scorm..???
I actually don't really work in SCORM. I prefer LTI integration when possible. I put it on my list though and I'll create a SCORM video in the future.
@@HowToCanvas THANKS
Thank you, this was very helpful! I'm having trouble in adding different interactions into the "same" page in Canvas. Do I have to make seperate folders with my "zip file" of the storyline file and then copy the link into the Canvas page? I tried to make a folder within a folder.. but it didn't seem to work, any suggestions on having multiple interactions in the same page! Super thanks
After you publish in Storyline, it will ask you if you want to create a zip file. Click yes and then that zip file is what you'll want to upload into Canvas. As you're uploading, it will ask if you want to expand the zip file. Click yes to expand. You can then copy the link to the story file and everything will be in the folders in Canvas for it to work. If you want multiple storyline interactions on a page then that's fine - each interaction will need it's own . This page has a few different interactions: canvas.instructure.com/courses/2560052/pages/storyline
Great video--any thoughts on how to share a page/SL file from one course to another course?
It's probably not a very scalable approach, but I would export the page and then go into the new course and update the link. Or I suppose you could create a public course that sits as a repository for storyline files so the links could refer out to that course. Not ideal or scalable, but possible. Or host them on an external server, like aws. I use Storyline more for faculty development resource centers and such; I don't tend to use them in my regular classes.
Hi, How do I make the width and height of the Storyline file within Canvas larger? I tried increasing width and height dimensions in both pixels and %'s but it does not work. I don't know what I am doing wrong. How else can I contact you for tutoring?
What you may want to do is first determine the width and height in pixels of the published file. Then put it in an and use html to customize the dimensions.
or CSS
Give that a try.
@@HowToCanvas Thank you! That fixed my issue.
This was super helpful! Do you have any idea how I can copy the page containing the storyline file from one course to another? When I tried it in the typical way on Canvas, the page didn't show the storyline file in the new course.
I have one idea. It's a little complicated. On the page where you are embedding, edit that page and use the link icon to actually put a link to the html file one the rich content interface (not the HTML editor). Then export or import that page. It should transfer the file over and then on the new page just delete that link. However, you'll have to go into the HTML editor and make sure to update the embed file source src="[link]", because it will still be calling back to the original course. Or just reupload the storyline file in the new course since either way it's a little work.
@@HowToCanvas I’ll give that a try! Thank you!