Moodle: Help a Rise SCORM do fullscreen to support mobile

It may be 2025 but eLearning is still very much 1998, using Learning Management Systems running SCORM modules which were designed to pop up in a popup window. A popup window!

In my use case, I have developed a little 10 question quiz in Rise. Folks on phones (and they’ll almost all be using phones) need to do this before they do something else; however using a Rise knowledge check within a Moodle SCORM iframe is a very clunky experience. I need the Rise SCORM course to open fullscreen.

This is problematic. However, since I am using the Boost theme and have jQuery running, I added a sidepanel block to the course that checks for the title of the SCORM package (my knowledge check name). If it’s there, it’ll make the scorm iframe fullscreen.

But Wait! that didn’t work either as doing fullscreen without user input is not allowed (for obvious reasons). So it just adds a ‘Fullscreen’ button next to the “Exit Activity” button.

In Moodle in a Boost side panel block on the course you want the SCORM activity to have a fullscreen button:

<script>
    function openScormDivFullscreen() {
        fullscreen(); // redundant like AI will make us all
    }

    function fullscreen() {
        var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
            (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
            (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
            (document.msFullscreenElement && document.msFullscreenElement !== null);

        var docElm = document.getElementById("scorm_object"); //this is the iframe ID in Moodle's Boost SCORM player page
        if (!isInFullScreen) {
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            } else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            } else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            } else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    }

    $(document).ready(function() {
        var t = $(".page-header-headings .h2");
        
        if (t.text() == "Rise fullscreen") { // This is the name of your SCORM activity you want to go fullscreen
            
            var tar = $("#scormpage").prev(); // this is the 'Exit Activity' button row
            tar.append("<div class='btn btn-secondary mr-2' onclick='openScormDivFullscreen()'>Fullscreen</div>");
        }
    });
   
</script>