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

Nov 30, 2020

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.

11 Replies
Adrian  F

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  F

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

@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!!