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.
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!
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:
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.)
However, I noticed that in our LMS, tracking based on the course completion no longer works when the code is adjusted like this (regardless of whether mine or the Pano's code was used). Has anyone noticed this as well?
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:
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?
Pano, your code seems to work for me for the main page, I no longer see progress icons there. but in the menu, I still see progress under the heading (% complete). Any workaround for that?
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."
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-
