I thought I would share a solution to removing the progress indicator on lessons in RISE

Nov 30, 2020

Rupert Abel
By Rupert Abel

Hi, I thought I would share a way to remove the progress indicator on lessons in RISE. To date, I have not come across a single person, clients or otherwise who want it.

To be clear I am not meaning the percentage progress indicator you see on the menu, that is covered on other posts. I am referring to the coloured line (progress line) on the actual learning screen (lesson) which grows as you progress through that screen (lesson).

I have yet to meet a single client who does not ask for this to be removed. There are reasons for this, which usually fall into two categories, as follows:

1) They don't know what it is. It doesn't look like a progress indicator, it looks like a mistake. It's just a line, seemingly of different lengths. And even more it clashes badly with the accent line under the title above. It does not look good. Clients assume it is just some development mistake and ask for it to be removed.

2) In no other instances in our online lives do we see a situation where at the top of an html page, we have a thin line going across, which is supposedly indicating that it shows how much of the screen you have looked at. Clients don't know what it is. There isn't even a label like "Progress indicator" by it, which would have at least taken the guess work out.

So like myself, you would probably have wanted to remove it. Only the software won't let you, it forces you to have it. This then leaves you with a problem if you can't get rid of it.

My recommendation to Articulate is to either a) provide the ability to not show it. b) If that option is not going to happen for whatever reason, then at least make it obvious what it is, like a meaningful label + make it look more like a progress indicator.

But if the current status quo is going to remain, as it has for years, then here is a fix for you. This works at the time of writing 30th November 2020.

It's easy. You are going to amend the css. In your published html output, find the file "main.bundle.css". This can be found in the "lib" folder of your published html output. You are going to add the following text at the top of the file.

.progress__indicator{
display:none;
}

Then save the file. Then run your module. The lesson progress indicator will now be removed.

17 Replies
Adrian Foley
almost 2 years ago07/15/22 at 5:41 am (UTC)

Hi Rupert 

Great article and makes a ton of sense. 

I'm really keen to get rid of the percentage progress indicator you see on the menu too though. 

You wrote that you mention them in other articles, could you link me to them?

If not could you include the css code / instuctions here on how to delete it?

Thank you!

Adrian Foley
almost 2 years ago07/19/22 at 7:50 am (UTC)

Hi Adam

Thank you for your help.

Funnily enough, this worked the first time, then every time I tried after that it wouldn't work and I still can't get it to work. 

I've followed the instructions to a tee and still no luck. Could it be something with how or where I'm extracting the file or anything? 

 

Lorraine Sobretodo
1 year ago03/23/23 at 6:52 pm (UTC)

@Bryan exactly what I'm looking for!!! And @Rupert thank you for describing the process of embedding CSS code into the main.bundle.css for those of us with zero coding knowledge! Can confirm that both your help combined worked great for me and completion progress is still tracked in my LMS (Cornerstone)

Thank you!!

Pano Kallis
8 months ago09/15/23 at 10:21 pm (UTC)

After some additional testing, 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! 

Sign In to Reply