Removing progress indicators in Rise

Feb 17, 2023

I would like to remove all progress indicators from a course (progress indicator under title banner, and progress bar/icon from menu)  and wondered if anyone could help.

Since removal/hiding of progress indicators is not supported in Articulate Rise, I have been trying to edit the index.html file. I found a couple of discussions in the Articulate community suggesting to insert the following in the <head> of index.html.

<style type = "text / css">
    .progress-bar {display:none;}
    .lesson-link__progress {display:none;}
    .overview-list-item__pie {display:none;}
    </style>

I have tried inserting this in multiple places in the <head> and also in the <body> but nothing appears to work. Wondered if anyone has had any success with this, or has other suggestions?  Thank you!

12 Replies
Barbara Lenze

Hi Celia, to remove all progress indicators you have to edit the file "main.bundle.css". It is in the "lib" folder of the published html output. You need to add the following script to the very beginning of the file:

.organic .nav-sidebar-header__progress-text {

display: none;

}

.organic .nav-sidebar-header__progress-track {

display: none;

}

.organic .progress-circle.progress-circle--sidebar {

display: none;

}

 

It worked well for me, I hope it works for you too.

Best regards

Barbara

Pano Kallis

The following code currently works for me and will remove/hide all progress icons/circles and bars/meters from the side menu AND the cover page. (Barbara's code only removes the side menu icons and progress meters.)

.organic .nav-sidebar-header__progress-text {
display: none;
}

.organic .nav-sidebar-header__progress-track {
display: none;
}

.organic .progress-circle.progress-circle {
display: none;
}

Hope this helps! 

Pano Kallis

The previously suggested workaround no longer works due to a recent update in Rise that changed the original CSS file.

However, I have found another solution! As of Aug. 19, 2023, here is how to remove all progress indicators from a Rise course. Please note, this process will work until Articulate pushes another update in the future that could again change the file structure and/or the key css or js files that are used for generating the progress indicators in Rise. Also, this code only works when the default Sidebar navigation is used. So it won't work with Compact or Overlay navigation. 

1) From your published output, go to the "content" folder if published for web (or the "scormcontent" folder if published for LMS).

2) Go to the "lib" folder and locate the "rise" subfolder. All the files within it will be identified by the same names for every project. (I'm not sure why Articulate went with a cryptic naming convention, but I wouldn't be surprised if these file names change in the future.)

3) Within the folder, select the larger CSS file (not a JS file). For example, my larger CSS file is 629KB in size, while the smaller one is 55KB in size. The larger one is normally the second CSS file shown in the folder and the file name may start with a letter.

4) Once you open the larger CSS file, it should appear in Notepad or a similar simple text editor. Paste the following code at the very top of the page:

.nav-sidebar-header__progress-text,
.nav-sidebar-header__progress-track,
.progress-circle.progress-circle{
display: none;
}

The end result should look like this:

5) Save the file and test the course to make sure it now runs without any progress indicators.

That's it!

Kris Cain

Thank you for this update.  It worked well in my project.

I have another project where we are using both French and English in the same file and the student can do either language.  That means that completion is 50% rather than 100%.  I am not concerned about the LMS completion as I am using a SL block for that but does anyone have any ideas for dividing the completion number in half when it is displayed?

Thanks

Tim

Phil Foss

This will do the trick to hide all progress icons (on cover page and in menu), and you can add this to the index.html file inside the existing style tag like so-

.lesson-progress.lesson-progress--sidebar,
.lesson-progress.lesson-progress--cover,
.nav-sidebar-header__progress-text{
display: none;
}

/* edited to include hiding 'progress text'

Pano Kallis

Hi Roger. I tested the code I shared on a new project and it works well for me. However, one thing I noticed is that it only works when the default Sidebar navigation is used. So it won't work with Compact or Overlay navigation. You may want to try adding the code again and make sure you haven't missed anything. I also tried Phil's code, but it still produces the heading with the "% complete."

Pano Kallis

Phil, the updated code you provided removed the % complete, but the progress meter still appeared. Here is the consolidated code I would suggest for use in the index.html file. I was able to test it successfully:

.nav-sidebar-header__progress-text,
.nav-sidebar-header__progress-track,
.progress-circle.progress-circle{
display: none;
}

Phil Foss

Ok thanks Pano, looks like some things are different between our courses- will depend on your theme, theme settings/options, and when you exported your course. Articulate likely rolls in code updates every couple weeks or so, some of these changes will change the html requiring different css.