Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-73494

Moodle web SCORM display on mobiles is not responsive/borderline unusable

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Minor Minor
    • None
    • 3.10.9, 3.11.4
    • SCORM
    • MOODLE_310_STABLE, MOODLE_311_STABLE

      There is an issue when presenting SCORM content using Boost-based themes on mobile devices.  The screen does not resize to display the content correctly, and the content is presented in a tall black box that takes up much more height than the content requires and almost all of the width, meaning that the user can only scroll the window using the rightmost few pixels of the page. 

      This issue was first noticed in a custom Boost child theme but is also present in core Boost and Classic themes as well as Fordson.

      Opening in a popup should (theoretically) give the most screen space to the SCORM. However, on mobile devices we end up with Image 1.png when opening a SCORM.

      There is no indication that the "play" button for the SCORM is "below the fold", so to speak, and that the user needs to scroll down to see it.  Furthermore, if the user tries to scroll on any of the black area (iframe background), it does not respond, and will only scroll if they use the white area (page background) on the far right of the page.

      If they pass this IQ test  and press play, they are presented with the SCORM, but they cannot see all of it at the same time (i.e. it does not resize to the viewport in the way that it does on a desktop device).

      Image 2.png and Image 3.png show the padding at the top and bottom and show that you can't see the whole of the SCORM presentation in one go.

      Padding can't be removed via CSS because the CSS is embedded in the iframe.  You can't control CSS of the embedded player from the CSS of the enclosing page. HOWEVER, I note that this behaviour on the phone within Moodle is DIFFERENT to the behaviour when you view the same SCORM within Moodle using the Chrome dev tools to simulate a Google Pixel 2xl (the phone is a Pixel 3a). Somehow, in that instance, the player is determining that this is a desktop device and therefore the background is white instead of black.

      It seems to me that the frame in which the content is displayed should scale to the viewport, like we see on the desktop, and at the very least should never exceed it in either axis.  It is, of course, possible to set a SCORM object to display embedded in the page, rather than in a popup, but then we hit the issue of nav headers and so forth taking up real estate, in the same way we would see them take up space on a desktop client, and the SCORM is too small to use normally. In addition, we end up having our entire look and feel and behaviour of our Moodle site determined by the appearance needs of one activity type on one device type, which is sub-optimal.

      The SCORM in question is created in Storyline in 16:9 and displays correctly fit-to-screen in SCORMcloud with no additional headers/footers/scrolling (see Image 4.png)

        1. Image 1.png
          72 kB
          Martin Greenaway
        2. Image 2.png
          241 kB
          Martin Greenaway
        3. Image 3.png
          285 kB
          Martin Greenaway
        4. Image 4.png
          466 kB
          Martin Greenaway

            Unassigned Unassigned
            martin.greenaway@polarmoment.co.uk Martin Greenaway
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.