Show only Rise 360 lesson content in Skilljar
This guide will show you how to display just the Rise lesson content in a Skilljar lesson, to have this final result. As you can see the only navigation is the Skilljar one, and all the rest of Rise elements except from the lesson content are hidden:
Before we begin, download those files, you’ll need them later:
CREATING A TEMPLATE IN RISE AND EXPORT IT
For this solution to work, you need to create a template in Rise, which is a course that contains just one lesson with one or more blocks.
Once you create the template you can duplicate it every time you need to create a SCORM package.
Make sure your course template has a hidden sidebar.
After you built your lesson, click on Export, and choose the settings pictured.
Check the Course and Export settings below:
EDITING THE SCORM PACKAGE
Once you downloaded the SCORM package and unzipped it, you have something like this:
Follow these steps:
Open the SCORM folder.
Open the scormcontent folder.
Open the lib folder, and paste the file: custom_academy.css in there (the file is the folder you downloaded at the beginning of the article):
Go back to the scormcontent folder.
Rename the file: index.html to index_target.html
After you renamed the file, copy the index.html file, (in the Copy these files folder you downloaded before) into the scormcontent folder.
Make sure you have a code editor to make your life easier, most of them are free. I use Visual Studio Code, if you don’t have any please download one before you continue.
Open the index.html file. All you need to do in this file is to replace the lesson id that it’s there with your own lesson id. In Rise, open the lesson you exported earlier, and copy the lesson ID you see after details/:
In the index.html file replace the id in the file jQ5k8LOHzS0q36zYkS-3TaJ850ruZsBJ with the ID you copied in the step before, in our case: Ok5cyDdsVE4aDqom_WMLfGQFXGdNwH-V
Save the file.
Now, open the index_target.html file.
Under the line: <link type="text/css" rel="stylesheet" href="lib/main.bundle.css"> paste:
<link type="text/css" rel="stylesheet" href="lib/custom_academy.css">
If you decide to rename the custom_academy.css file you downloaded, make sure to update its name also in the line above.
Don’t forget to save also the index_target.html file.
Select all files inside the SCORM folder you exported from Rise:
Create a Zip file and name it whatever you’d like:
Now, you can create a SCORM 1.2 lesson in Skilljar and upload the file you’ve just compressed:
This is what our test lesson looks like, as you can see there’s no header, exit button or any other confusing elements:
That’s it! I hope it was helpful 😊 I know all of those steps might seem daunting at first, but once I got the hang of it now, it takes me less than 1 minute to do them all!