Forum Discussion

JanetBaker's avatar
JanetBaker
Community Member
3 years ago

Storyline & Rise: Embedding in Canvas and Interaction Limitations?

Hello, 

I am new to this eLearning Heroes community. Thanks in advance for your resources and guidance. 

Regarding Storyline 360 and Rise 360 when embedding in Canvas, specifically are there any learning interaction limitations that would affect user experience?

Thank you,

JB

General E-Learning
  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    3 years ago

    You can publish your Rise or Storyline as Scorm or HTML and use either of those. Scorm LTI needs to be enabled for your institute if you choose Scorm. Then its easy to upload your Scorm as assignment.

    If you want to embed your project on a page this is the workflow.

    For me the following steps works best to embed Storyline or Rise content into Canvas.

    -Publish as Web ( HTML5 Only, Modern player... a transparant one without anything )
    -Save / Download as Zip
    -In your Canvas Sandbox go to Files
    -Create a new Folder where and how wanted
    -Upload ( Drag or choose Upload ) the ZIP into the folder and 'Expand it' upon upload
    -When done uploading and unpacking go to the story.html and open it.
    -If fine it runs and you see the first page/slide of your course.
    -Copy the url you see in the browserbar... especially the number at the end is important.
    - A test i just did this is the url:
    https://tilburguniversity.instructure.com/courses/7608/files/folder/test?preview=756781
    - Close the coursepage
    - Make ( or go to ) a page on which you want your course to run

    As you can add quite some Html elements and other stuff on the page this all depends on your specific choice and setup. Canvas uses Bootstrap3 and Flexboxes so you can quite precisely layout the page for Desktops and mobiles.

    Whatever your choice is...you need an iframe on the page to link to the above url in the files.

    - Add the code to add your iframe. Here is as i use it.

    <div class="col-xs-6 col-sm-3">
    <div class="d-block mb-4 h-100"><iframe class="img-fluid img-thumbnail ef-file-preview-frame ef-file-preview-frame-html attachment-html-iframe&gt;&lt;/iframe&gt;" style="width: 280px; height: 280px; background-color: #ff0000; overflow: hidden;" src="https://tilburguniversity.instructure.com/courses/7608/files/756781/download" data-api-endpoint="https://tilburguniversity.instructure.com/api/v1/courses/7608/files/756781" data-api-returntype="File"></iframe></div>
    <div>

    Only things i need to change is the number ( 756781 ) of the files i added the Storyline zip too..
    And my Storyline file is nicely embedded into my page.

    Kind regards,
    Math

Related Content