Adding Progress Bars to Surveys

If you have a long survey that is set to span multiple pages (see "pagination" in the survey settings) you may wish to add a progress bar to each page. Because REDCap uses the Bootstrap HTML CSS framework you can add progress bars into REDCap sections using some relatively simple HTML as follows:

For each REDCap section break determine how far into the survey the section starts. You can do this by examining the question numbering that's shown in the Codebook.
In each section break, you use the rich text source code editor to enter the HTML to create the progress bar. The actual HTML is explained below.
Modify the width attribute of the progress-bar class to specify the progress through the survey determined in 1 above.

Here it is in pictures...

Insert / edit the section break.
Select the Rich Text editor
Enter the Source Code Editor by clicking on the <> button shown in yellow below.

Paste the following HTML into the source code editor

</div>

<div style="font-size: 8pt; font-family: cursive;">Progress</div>

</center>

This is what it looks like in the editor:

In the above code:

Line 1 centers the progress bar within the REDCap section.
Line 2 defines the total width and height of the progress bar within the section.
Line 3 defines the width of the colored progress section of the bar, i.e. how far we are into the survey, and writes the percentage progress onto the bar. These two percentage values should be the same. This is the value that you determined from the codebook in (1) above.
Line 5 writes the word "Progress" beneath the progress bar and defines the style for the font.

Then save the source code and the field definition. In the designer it should now look like this

When you complete the survey it will look like this:

For those of you who are interested in HTML there's technical documentation at https://getbootstrap.com/docs/5.2/components/progress

Page updated

Report abuse