SCORM Embedded in a Moodle Page - Black Bars Above and Below on iPhone
Sep 19, 2017
Hi Heroes,
We usually display SCORMS in a popup window, but we have a course or two where we are including the SCORMs within (Moodle) lesson pages, using an iFrame. We are finding that the display of these SCORMs on mobile phones is less than optimal, because there are large black bars appearing above and below the SCORM within the iFrame window. Here's an example:
It appears to me that the black bars may be resulting from a script in the SCORM that's calculating the window size based on the total browser window size, and trying to center the SCORM within that, but because this SCORM is being displayed in an iFrame, it's not using the right part of the DOM.
So I've figured out the CSS to use to get a nice iFrame window for the SCORM that's exactly the right aspect ratio, but unfortunately the SCORM is still being placed in that same set of black bars, so now the only part you can see is the top part -- meaning the user can't even access the SCORM. See what I mean:
I've thought of two approaches to fix this, and I'm hoping someone here who's more of a Javascript guru than I am can advise me.
Idea #1. Add an onload javascript to the iFrame tags that would calculate the expected location of the SCORM based on the current parent window size, and set a style tag that would change the margin-top of the iFrame to an appropriate negative number to get the SCORM to display within the box it's supposed to be contained within. I've tried a few things, but no joy so far.
Idea #2. Modify a statement somewhere in the SCORM scripts to change the placement of the SCORM by using the SCORM's containing window (i.e., in this case, the iFrame) rather than the parent window (the lesson page) to determine where to place the SCORM. I feel like I've seen something linked in a discussion here that describes how to do something like this, but I can't find it again. I've also searched through the javascript in the SCORM files, but I can't find the script to modify, so kind of stuck here.
This is Articulate Storyline 2, BTW, if that helps. And the Moodle theme is bootstrap-based, which gives us access to bootstrap css. (That's how I got the way to set the correct aspect ratio for the SCORM.)
I'd really appreciate any thoughts from anyone who has conquered the Mobile SCORM-in-an-iFrame-in-a-Lesson problem.
And I know that no one from Articulate can advise me about this because it's javascript. Just hoping for a friendly Hero who might want to help out.
(And if there's a javascript-free way to fix this, I'm all ears!)
Thanks in advance.
~ Jennifer
5 Replies
CSS in the theme may actually fix this. I'm feeling optimistic. I decided to try one of the tricks I've found for keeping iFrame media content within the correct aspect ratio (padding-bottom: 75%;) in the CSS setting #page-mod-scorm-player #scormpage #scorm_content. That actually pushed the SCORM into the bounding rectangle established by the CSS in the lesson page.
Here's what it looks like on the iPhone now:
But there's still a large black bar at the top and a dark grey bar at the right side of the SCORM.
Still looking for the silver bullet.
Hi Jennifer,
I am not sure if you are still having the issue, but I think the below code could work.
If the moodle theme you are having supports an external CSS editor.You can use a CSS style code to reduce the size of the iframe which further reduces the "black" area around the scorm content.
But you have to make sure that this "Style" only applies to some screens like mobile devices or other than desktop screens.
In my case, I am using the "lambda" theme, which supports external CSS. I think you can stick this code anywhere in "main.min.css" if the theme doesn't have external CSS.
@media only screen and (max-width: 767px) {.yui3-g-r#scorm_layout{ height: 400px !important; }
}
Hi Tejaswi I have this exact problem and would love a fix, where would I find the main.min css file please?
Thanks
James
Hi James,
I wouldn't suggest in customising the "main.min" css. If you are using a theme for Moodle, most of Moodle themes support external or custom css.
You can find that in Moodle at "Appearance -> Themes-> "your theme"->General"
If your theme doesn't support "custom css" then I think you could add the code to your theme "style.css".
You can find that in your server "moodle->theme->yourtheme->style->style.css"
For further scenarios, you could refer this moodle doc
Thanks,
Teja
Cheers for that Teja, appreciate the response and will give it a go!
James
This discussion is closed. You can start a new discussion or contact Articulate Support.