Forum Discussion
I thought I would share a solution to removing the progress indicator on lessons in RISE
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.
@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!!
Thanks for sharing this, Pano!
I'm sure a lot of our community members will find this very helpful! Appreciate your contribution.
Unfortunately, the process I had suggested no longer works, as the output file structure for Rise has changed in a recent update. This means we'll need to look for a new workaround.
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!
Thanks so much for sharing your solution, Pano!
Hi Pano - is there a way to adjust the your code so it hides only the completion bar in the menu, without hiding the progress circles for each lesson? Thanks!
Hello Jason,
Thanks for reaching out! Pano may no longer be subscribed to this discussion, but you're welcome to contact them directly through their profile by clicking on their name and selecting Contact Me.
