[ARCHIVED] How do we adjust the iframe width for SCORM?

[floresr]

Does anyone know why Canvas sizes SCORM at about 40% of the browser window width?

It looks like the iframe is of a fixed size, and I am trying to figure out how to increase the width so that the SCORM uses all available screen real estate.

thanks!

ricardo

[broxholm]

I too have this problem.  I start out in PowerPoint and convert it to a SCORM using Articulate.  When uploaded and inserted into Canvas only 2/3 of the screen can be viewed.  It appears that Canvas has limited the frame or iframe size virtually making my whole lessen and SCORM learning module unusable.

Tom

[arambulaa]

I too have this issue.  I use Adobe Captivate and have experimented with various project sizes.  The one size that worked for me was the user defined custom size:  1090 width X 613 height.  This size allowed me to ensure the project displayed correctly and in full without having to scroll up or down in student view.  There should be an option ar automation for the displayed frame to match the SCORM size within Canvas.  

[broxholm]

Agreed,

I’m using Articulate and I found a feature that forced my SCORM to open in a new window. This solved my problem.

Thomas G. Broxholm

Skyline College

Automotive Department

Program Coordinator / Professor

650-738-4131

3300 College Drive

San Bruno, CA 94066

broxholm@smccd.edu<mailto:broxholm@smccd.edu>

www.skylinecollege.edu/automotive<http://www.skylinecollege.edu/automotive>;

Schedule of classes: http://www.skylinecollege.edu/automotive/schedule.php

Apply for classes: http://www.skylinecollege.edu/automotive/apply.php

[arambulaa]

I'm curious about the feature that worked for you.  Wha did you use to force SCORM to pen in an external tab?  When I select the assignment to open in a new tab, nothing opens.  All I see is a blank page.

[broxholm]

This was an optional feature in Articulate. Articulate is the software that I’m using to create my SCORMS. I know in Moodle there was this option to open in a new window but I don’t see anything like that in Canvas.

Thomas G. Broxholm

Skyline College

Automotive Department

Program Coordinator / Professor

650-738-4131

3300 College Drive

San Bruno, CA 94066

broxholm@smccd.edu<mailto:broxholm@smccd.edu>

www.skylinecollege.edu/automotive<http://www.skylinecollege.edu/automotive>;

Schedule of classes: http://www.skylinecollege.edu/automotive/schedule.php

Apply for classes: http://www.skylinecollege.edu/automotive/apply.php

[arambulaa · Accepted solution]

After much searching and trying different options.  This worked like a charm!

I was trying to open my SCORM package to open in a new tab as a link, but still keep the embedded iframe within the Canvas page (small and horizontal/vertical scroll bar).  It was either one or the other...Until, I found another discussion which provided a code to open links in a new tab. 

What I realized is that when the option to open in a new tab is selected in the SCORM package it provides a new URL.  This is a super very long URL.  I copied it and then placed it with this code using HTML editor.

<a href="COPY AND PASTE ALL OF THE URL YOU GET AFTER OPENING SCORM FILE IN A NEW TAB" target="_blank">Full Size Screen</a>

This worked like a charm!  I am so happy.  Now the user can click in the link to open in a new tab for full size or view within Canvas for a smaller size.

Amelia

[broxholm]

Such hard work and many, many hours and it could have been so easy if only Canvas had provided those options as a check box and or the options to adjust the iframe size.

Tom Broxholm

415-577-9610

Sent from my iPhone

[James]

Content within an iframe does not get to resize the iframe to fit the window or the content -- this is not how iframes work. You need to isolate the contents of the iframe from the page for security purposes and also to keep it from changing the display and/or functionality of the page.If another website used the same CSS classes that Canvas did, then you could potentially get some unreadable text on the Canvas page if the embedded content was allowed to directly interact with the page. Worse yet, it could do damaging things since the parent window is Canvas and the script would have full access to anything the user could do -- include make API calls that delete all their files, send spam to other students, submit quizzes before it's ever taken, etc. Allowing scripts to run directly on the page without sandboxing it inside of an iframe is a major security risk.

There is a way that allow iframes to communicate with the parent window, but it involves adding a companion script to the account/sub-account's global JavaScript file. H5P explains how to do this on their H5P with Canvas page, but the process is similar for other embeds. Installing the companion script requires intervention of the Canvas admin, but then they will have to monitor Canvas releases every three weeks to make sure something doesn't break.

You might ask why doesn't Canvas provide this functionality automatically? One reason is that it has no control over the scripts that get embedded and there is no universally agreed upon naming scheme so the two scripts can talk, so what works for H5P wouldn't work for something else and the end-user doesn't control the embed to be able to change it to what H5P needs. Embed providers and script writers are not going to change all of their scripts so that it works with Canvas. There are other reasons, but it's best to involve the Canvas admin rather than having each designer/instructor going off and doing their own thing

[broxholm]

All I have to say is Moodle doesn't seem to have any problems allowing user adjust the size of the window.

Tom Broxholm

415-577-9610

Sent from my iPhone

[ewest]

Thanks so much for this, Amelia.

[DerrickSmith76]

Hi, I don't know if you're already way ahead of this now, but have you tried the allowfullscreen switch? I'd used scorm packages created as pages rather than assignments with the same frustration. Edit the html code, apply allowfullscreen (as per allowfullscreen - an HTML attribute for the iframe tag) and all works well.

Thanks,

Derrick Smith