Forum Discussion

DanielleKutter's avatar
DanielleKutter
Community Member
4 months ago

Storyline Player in Canva

Hello E-Learning Heroes!

The code we use to insert Storyline interactives into our Canvas LMS makes the learning objects very small on the screen for students. Is there a code that will embed the Storyline file at full screen instead of having margins?

I have attached an image where you can see the black rectangle takes up the whole screen but when it is played it has wide margins and comes in smaller.

Here is the code we use: <iframe frameborder="0" name="Matching" width="100%" height="540" src="https://cms.gavirtualschool.org/DEV21/CTAE/APCompSciPrinc_21/Objects/ComputersandtheirHistory_ComputerPartsMatchingImages/story_html5.html"></iframe>  

Thanks!

storyline 360
  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    4 months ago

    Im not sure if this helps... but uploading the Scorm to the files folder and then referring to it like this...
    <iframe class="ef-file-preview-frame ef-file-preview-frame-html attachment-html-iframe&gt;&lt;/iframe&gt;" style="width: 100%; height: 940px; overflow: hidden;" src="https://tilburguniversity.instructure.com/courses/7608/files/804895/download" data-api-endpoint="https://tilburguniversity.instructure.com/api/v1/courses/7608/files/804895" data-api-returntype="File"></iframe>

    Works on our CanvasLMS.

    • DanielleKutter's avatar
      DanielleKutter
      Community Member
      3 months ago

      Hi Math! Thanks for the advice, how are you doing this?? Could you send me a step by step?? We have a CMS that we upload the exported .storyline files to, then embedd them in Canvas. I don't know how to create SCROM files, or what all to upload to files etc...Would I still upload to our CMS? @mathnotermans

      This is EXACTLY what I am looking for! Thanks for your help!

      • MathNotermans-9's avatar
        MathNotermans-9
        Community Member
        3 months ago

        I published as Scorm.... uploaded that into the files folder...unzipped all there...so it still is Scorm...and then embedding the html... you really need to upload to Instructure Canvas. Else for sure this won't work.

  • LaurenConnelly's avatar
    LaurenConnelly
    Staff
    4 months ago

    Hello Danielle! 

    Thank you for including a screenshot! I see exactly what you're talking about. I'm not seeing any issues with the code that you're using, so it would be helpful to see your .story file so I can test it in another LMS environment. 

    You can either attach it to this discussion or privately in a support case. 

  • DanielleKutter's avatar
    DanielleKutter
    Community Member
    4 months ago

    Hi Lauren,

    Here is one of our files, but this happens with every .story file. We are just looking for a player code to embed in Canvas that will allow the interactive to fill the screen and not have the margins. Are there any other codes we could try. I put the one we use above. Thanks so much.

    • LaurenConnelly's avatar
      LaurenConnelly
      Staff
      4 months ago

      Hello Danielle!

      Thank you for sharing your .story file! I've uploaded it to SCORM cloud which is another LMS environment. Here is the invite link for you to see the behavior in SCORM cloud. I see the extra margins, however those shift depending on the browser size. With the Player being responsive, the change in margins is expected since each learner will have a different window size.

      • DanielleKutter's avatar
        DanielleKutter
        Community Member
        3 months ago

        When I open just the .storyline I can get a full-screen version as well. BUT when I embed it in Canvas, it has large margins and makes the text small and students can't see it as well. I'm trying to figure out how to make the interactive large in Canvas. Any ideas? I don't know how to make SCORM files, can you help me there?

Related Content