Forum Discussion

NicolaAnderson-'s avatar
NicolaAnderson-
Community Member
3 months ago

Setting Rise to open in new window

My client has Totara as their LMS.  They have found issues in the past with pop-ups being blocked, therefore they set the system to "open in the current window" and then have the elearn open in a new window from there. This gets around the pop-up blocker.

I know that this behaviour can be done with Storyline (through settings in the player), but I can't see any settings in Rise to control how the player/elearn opens.

Please could you advise how this can be achieved/whether this can be achieved?  If it's not something that Rise can do, could we please add this functionality to the roadmap - having the same functionality across the 360 suite would be really useful!

Thanks

rise 360
  • SamHill's avatar
    SamHill
    3 months ago

    Hi NicolaAnderson- there does not appear to be an option for this within Articulate Rise. I checked the publish settings myself and could not find an option to do this, as you can in Storyline.

    It would be possible to do this with a little bit of editing to the SCORM package after it has been published from the website.

    You can try this by following these steps:

    1. Publish your content to SCORM
    2. Extract the contents of the zip file, it will look like this:

       









    3. Navigate into the folder named scormdriver and find the file named indexAPI.html.
    4. Rename indexAPI.html to riseAPI.html
    5. Download the zip file attached to this reply. Extract the contents, and copy and paste the HTML file into the scormdriver folder. The contents should now look like this:














    6. You now need to zip the entire package back up, ensuring that the zip file maintains the same structure. To do this, select all of the files in this view:











      Right click the selected files, and then select the appropriate compression tool to zip the files back up. The key is that the file named imsmanifest.xml should be in the root of the zip file.

     

    The updated package can now be delivered to the LMS. It will attempt to open a new window and will resize the window to fill the users screen. If it fails to open the window, it will display a message and a button to open the course. Here's a quick video demonstration (attached) of how to complete the above steps.

    Create an HTML file with the following, and name it indexAPI.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Launch index.html</title>
    <script>
        function show(element) {
            document.getElementById(element).style.display = 'block';
        }
        function hide(element) {
            document.getElementById(element).style.display = 'none';
        }
        // Open Rise course
        function openFile() {
            hide('courseLoading');
            const newWindow = window.open('riseAPI.html', '_blank', 'width=' + screen.width + ',height=' + screen.height);
            if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined') {
                // If the window failed to open, display the button
                show('manualLaunch',);
                hide('courseOpen');
            } else {
                show('courseOpen');
            }
        }
        // Attempt to open the file when the page loads
        window.onload = function () {
            openFile();
        }
    </script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 16pt;
        }

        #manualLaunch {
            display: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #courseOpen {
            display: none;
        }
    </style>
</head>
<body>
    <p id="courseLoading">Loading…</p>
    <p id="courseOpen">The course is open in a new window. To exit the course, close the course window.</p>
    <div id="manualLaunch">
        <p>The course was unable to launch automatically. Select the START button to launch the course.</p>
        <button onclick="openFile()">START</button>
    </div>
</body>

</html>

     

  • NicolaAnderson-'s avatar
    NicolaAnderson-
    Community Member
    3 months ago

    Thank you so much Sam, you are an absolute legend!  This worked perfectly and I have a very happy client :) Thank you for taking the time to create the file, do the video and provide such detailed instructions.

  • SamHill's avatar
    SamHill
    Super Hero
    3 months ago

    Hi NicolaAnderson- there does not appear to be an option for this within Articulate Rise. I checked the publish settings myself and could not find an option to do this, as you can in Storyline.

    It would be possible to do this with a little bit of editing to the SCORM package after it has been published from the website.

    You can try this by following these steps:

    1. Publish your content to SCORM
    2. Extract the contents of the zip file, it will look like this:

       









    3. Navigate into the folder named scormdriver and find the file named indexAPI.html.
    4. Rename indexAPI.html to riseAPI.html
    5. Download the zip file attached to this reply. Extract the contents, and copy and paste the HTML file into the scormdriver folder. The contents should now look like this:














    6. You now need to zip the entire package back up, ensuring that the zip file maintains the same structure. To do this, select all of the files in this view:











      Right click the selected files, and then select the appropriate compression tool to zip the files back up. The key is that the file named imsmanifest.xml should be in the root of the zip file.

     

    The updated package can now be delivered to the LMS. It will attempt to open a new window and will resize the window to fill the users screen. If it fails to open the window, it will display a message and a button to open the course. Here's a quick video demonstration (attached) of how to complete the above steps.

    Create an HTML file with the following, and name it indexAPI.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Launch index.html</title>
    <script>
        function show(element) {
            document.getElementById(element).style.display = 'block';
        }
        function hide(element) {
            document.getElementById(element).style.display = 'none';
        }
        // Open Rise course
        function openFile() {
            hide('courseLoading');
            const newWindow = window.open('riseAPI.html', '_blank', 'width=' + screen.width + ',height=' + screen.height);
            if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined') {
                // If the window failed to open, display the button
                show('manualLaunch',);
                hide('courseOpen');
            } else {
                show('courseOpen');
            }
        }
        // Attempt to open the file when the page loads
        window.onload = function () {
            openFile();
        }
    </script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 16pt;
        }

        #manualLaunch {
            display: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #courseOpen {
            display: none;
        }
    </style>
</head>
<body>
    <p id="courseLoading">Loading…</p>
    <p id="courseOpen">The course is open in a new window. To exit the course, close the course window.</p>
    <div id="manualLaunch">
        <p>The course was unable to launch automatically. Select the START button to launch the course.</p>
        <button onclick="openFile()">START</button>
    </div>
</body>

</html>

     

Related Content