Forum Discussion

AriffK's avatar
AriffK
Community Member
5 months ago

How to hide the cover page when publishing to WEB (for web exported content)

In search for an answer to hide the cover page when exporting Rise 360 course content to web, I've found a simple but effective workaround that involves adding code to the index.html of the published course just before the closing </body> tag. This works for me but your mileage may vary.

This method will allow you to skip the cover page and start the lesson immediately. What you will need is to find and take the lesson's url hash which can be done simply by starting the course and copying the link AFTER the index.html/#/ section.

For example after I export the course and extract the .zip file and click on the index.html file, i will see this in my browser:

file://mac/Home/Downloads/content%202/index.html#/

Then, when I press the Start button to start the course, it changes to:

file://mac/Home/Downloads/content%202/index.html#/lessons/rgW3y0NbhhJViEIWIiOBM-vy-2zPTaQr

 

The section in bold is what you will take to replace in the script below:

<script type="text/javascript">
window.onload = function() {
setTimeout(function() {
window.location.hash = 'lessons/rgW3y0NbhhJViEIWIiOBM-vy-2zPTaQr';
}, 100);
};
</script>

 

After you've updated the script, simply paste it before the </body> tag of your index.html file. Following my example, it looks like this before:

tag'/>

 

After:

 

Once done, save the html file and try opening it as you normally would. Let me know if this workaround helps you and in the meantime, Articulate devs I beg you to please PRIORITISE AND BAKE THIS FEATURE INTO THE SUITE.

  • Forgive me if this is a dumb question. But where are you editing the code of the html file? Every time I try to open the HTML file, it just pulls up my course in my internet browser. 

    What are you using to edit the actual script of the HTML file?

    • AriffK's avatar
      AriffK
      Community Member

      Hi, so if you're using windows, be sure to right click the html file and open with Notepad or a similar text editor. This opens up the raw file that has all the coding and whatnot inside. When you save it make sure that it retains the .html extension and not .txt or something else.

      On a mac it gets a little more convoluted but still possible using the TextEdit app. You just need to change the app's settings first to open files in "Plain text" and when saving files untick the "Add .txt extension", then you should be able to open it the same way as you would on windows, make the changes, save and double click the finished file and it should run the code and skip the first page :)

  • Okay I figured that out! Now I'm stuck on another problem. 

    I see the cover page flash for a second before it goes directly to the lesson. Are you experiencing the same thing? If so, how are you getting around that?

    • AriffK's avatar
      AriffK
      Community Member

      So in my scenario the flash is a feature. I use it to extend and customise the "Your Content Is Loading" preloader.

      To make it completely skip without any flashes it needs to run before the page fully loads. You can do this by using the following code instead:

      <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function() {
      setTimeout(function() {
      window.location.hash = 'lessons/rgW3y0NbhhJViEIWIiOBM-vy-2zPTaQr';
      }, 100);
      });
      </script>

      Replace the bold section with your link. The key difference is when the code runs:

      In the original:

      window.onload = function() {

      This waits for the the full document to load every. single. item. before it runs the code.

      In the updated one:

      document.addEventListener("DOMContentLoaded", function() {

      This just checks that the DOM (Document Object Model) structure, which is effectively the pure code without any images, text etc. is loaded before it runs the code.

      In hindsight I should have probably just put that in the post.