Forum Discussion
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...
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:
- Publish your content to SCORM
- Extract the contents of the zip file, it will look like this:
- Navigate into the folder named scormdriver and find the file named indexAPI.html.
- Rename indexAPI.html to riseAPI.html
- 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:
- 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>
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:
- Publish your content to SCORM
- Extract the contents of the zip file, it will look like this:
- Navigate into the folder named scormdriver and find the file named indexAPI.html.
- Rename indexAPI.html to riseAPI.html
- 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:
- 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>
