Remove Course Cover Page in Microlearning

Apr 03, 2023

Connie Malamed
By Connie Malamed

The new microlearning feature adds a very large header space (cover page wrapper in CSS) that I'd like to remove. That is, there's a large gap between the title and the arrow and the actual microlearning quiz. It looks awkward and doesn't mesh with the idea of microlearning. Is there a way to remove this space in microlearning?

48 Replies
Eric Etkin
11 months ago05/18/23 at 7:52 pm (UTC)

Please consider that the users we're designing lessons for typically want to achieve their learning with as little time and required action as possible. I'd imagine that's true for the bulk of Rise designers.

From both a design and learning standpoint, having a massive header image that we can't remove is at odds with the whole point of the microlearning. Sure, it looks pretty, but it's adding useless padding and scroll for the UX. 

Christopher Santos
11 months ago05/24/23 at 8:00 am (UTC)

Hi Eric,

Technically, you can still use your LMS package for viewing your Microlearning on your web server.  After publishing, extract your LMS zipped file and look for the scormcontent folder (as shown in the example below):index

Upload this scormcontent folder to your web server and grab the URL for the index.html to view it as a website.

Here's a sample link you can use to check out what it looks like:

https://articulate-us.s3.amazonaws.com/support-share/short-lived/csantos/scormcontent/index.html

It's not how it's meant to be used, but it may help in a pinch.

Ahmed Jendeya
11 months ago05/26/23 at 7:13 pm (UTC)

I believe this is an important issue that is good to be solved. 

For example, I need to share interactive sample with potential client. So, I would like the client to hit directly to the interactive without the cover page. 

I do not need to publish to LMS or Web at this stage. Just sharing through Rise. 

Any ideas btw?  

Lea Agato
11 months ago05/27/23 at 3:40 am (UTC)

Hi Ahmed,

We've added the option to remove the course cover page for LMS exports, and we're hoping to get feedback that this design works well! We're considering adding it for web exports as well. Since the Share link is not a long-term hosting solution, we won't consider this feature for Share link output.

Ahmed Jendeya
11 months ago05/27/23 at 5:43 am (UTC)

Hi Lea,

Thank you for your response.

In spite of the case I mentioned, I maintain my belief that it would be beneficial to grant developers the flexibility to decide whether they want to retain the cover page or not. Alternatively, providing an option to convert it into a banner image could be considered. 

Thank you!

 

Gren Foronda
11 months ago05/29/23 at 2:08 pm (UTC)

Hi Megan!

You can follow Chris's instructions above to publish your Rise 360 course to LMS. Make sure to enable the new option to Hide Cover Page before publishing, as shown below:

hide cover page

Once you have published to LMS, unzip the output, and you'll find the scormcontent folder.

Instead of uploading the content folder that you generate when publishing to Web, upload this scormcontent folder to your web server instead.

 Hope this helps! Please let us know if you need further assistance on this matter.

Jonica Rich
7 months ago09/12/23 at 10:53 pm (UTC)

I was placing the microlearning into another SCORM so it HAS to be html, it can't be another SCORM. I figured out how to edit the html to make the page load the second page rather than the cover page. I also turned off the navigation arrows that would redirect back to the cover page, as an additional option. Here's how I managed it:

OPEN/LOAD TO SECOND BLOCK 

  1. Publish to "Web"
  2. Extract in downloads
  3. open "index.html" in a browser tab
    1. navigate past the cover page to the second page/slide/block
    2. in the URL, copy the info from the # til the end and set aside for HREF data later
      1. will appear similar to this: "#/lessons/B3jT5DMWw9AkWSowxGvnjRzlY10cglw-"
    3. close browser tab
  4. open "index.html" in an editing tool
  5. find lines 73–75 which looks like this: 
    function __loadEntry() {
    return loadModule(JSON.parse(document.getElementById('__ENTRY__').textContent))
    }
  6. replace the above with the following code: 
    function __loadEntry() {  loadModule(JSON.parse(document.getElementById('__ENTRY__').textContent))
     var currentUrl = window.location.href;
     window.location.href = currentUrl +  '[PASTE HREF HERE]';
    }
  7. paste your HREF from step three in between the ' ' in the code above 
    1. for example, using the copied code in step 3 will appear like this:
      function __loadEntry() {    loadModule(JSON.parse(document.getElementById('__ENTRY__').textContent))
       var currentUrl = window.location.href;
       window.location.href = currentUrl + '#/lessons/B3jT5DMWw9AkWSowxGvnjRzlY10cglw-';
      }
  8. save, close, test by opening index.html in browser again

NAVIGATION BUTTON REMOVAL (OPTIONAL)

If you are only using one block and want to remove the navigation buttons, follow these steps:

  1. open folder "lib" then "rise" 
  2. there will be two .css files, open the larger one in an editing tool
  3. search for ".lesson-one-page-slides__controls"
  4. change "display: flex;" to "display: none;"
  5. save, close, test by opening index.html in browser; it should open to the second block (not the cover page), and there should be no extraneous navigation buttons, just your singular, beautiful, microlearning block, ready to go!
Richard Pester
7 months ago10/03/23 at 2:33 am (UTC)

Really hoping you can add the option to remove the cover page from publishing to Review. I'm trying to jazz up some pages on our intranet (Sharepoint) and I can embed a Review file, but I would like to embed just the interaction without the cover image. My team love the flashcards and labelled graphic feature in particular, but we can't embed them without the cover image, which diminishes the impact considerably.

Sign In to Reply