Topics Map > User Guides
Topics Map > REDCap

REDCap: How to add a Survey Progress Bar to the Form

A step-by-step guide showing you how to add a survey progress bar to the form.

How to Create the Survey Bar Images

  1. For each question in the survey, you will need to make a survey bar field. Divide 100% by the number of questions, and that is the percent completion after each question.

  2. Create a new field and make sure that you set the Field Type as Descriptive Text and that you've created an identifiable Variable Name.
    Create field for progress bar
    Steps to create new Descriptive Field for Progress Bar
  3. To create the survey bar image, paste the following HTML code in the Field Label, replacing the two instances of 'XX' with the desired percent complete.

    HTML code: XX% Complete<div style="width: 100%; border: 0; margin: 0; padding: 0; background-color: #a9bad1; text-align: center;"><div style="width: XX%; border: 0; margin: 0; padding: 0; background-color: #8491a2;"><span style="color: #8491a2;">.</span></div></div>

The example shown here uses a three question survey.

Paste HTML Progress
Paste HTML in Field Label box and update percentage


Progress Bar Example
Example result for 33% view
  1. Repeat Step 2 and Step 3 until you've created a progress bar for each desired percent completion and get to 100%. If you want to add a message instead of saying "100% Complete" such as "Completed! Submit your survey" type that at the beginning of the HTML code in place of where it says "XX% Complete."

All Progress Fields
Create descriptive fields repeatedly for necessary percentages until you reach 100%

How to use Branching Logic to Complete the Survey Progress Bar

Now that you have all your progress bar images created, we need to create Branching Logic to define when each of these images shows up while filling out the form.

  1. Create your survey questions if they are not created already. Make sure that each question in your survey has an easily identifiable Variable Name. Variable names are shown here:
    Setting variable names
    Create questions for your survey
  2. Click on the Green Arrows to open the Branching Logic for the first progress bar image.
    Branching logic edits
    Select green branching arrow to open Branching Logic editor
  3. The first progress bar image is for 33% completion, so that means that only one of the three questions has been filled out and it can be any combination of those three questions. The HTML code that we use to show this logic uses the question Variables Names and the commands "AND" and "OR" to create combinations of possibilities for those questions.

    HTML Code:

    ([question_1] <> "" AND [question_2] = "" AND [question_3] = "") OR
    ([question_1] = "" AND [question_2] <> "" AND [question_3] = "") OR
    ([question_1] = "" AND [question_2] = "" AND [question_3] <> "")

    The <> symbols indicate that this question was answered, the = sign indicates that it was not answered, the [Brackets] surround each variable name, and the (Parentheses) surround each combination of possibilities. So in words, the code above means: "(Question 1 answered AND Question 2 not answered AND Question 3 not answered) OR (Question 1 not answered AND Question 2 answered AND Question 3 not answered) OR (Question 1 not answered AND Question 2 not answered and Question 3 answered)." The 33% Progress Bar will pop up only when one of those is true.

    Figure out what your branching logic is using the above example and type it into the "Show the field ONLY if..." textbox (variable names will pop up when you type in the brackets). Then click Save.

    Example branching logic
    Enter in logic to check if a field has been completed or not
  4. Repeat Step 3 for each progress bar image. The branching logic will change for each percent completion. Make sure that you have all possibilities of choices for that specific percent.

    For example, the HTML code for the 66% Complete image in our example will be:

    ([question_1] <> "" AND [question_2] <> "" AND [question_3] = "") OR
    ([question_1] <> "" AND [question_2] = "" AND [question_3] <> "") OR
    ([question_1] = "" AND [question_2] <> "" AND [question_3] <> "")

    And the HTML code for 100% complete will simply be:

    ([question_1] <> "" AND [question_2] <> "" AND [question_3] <> "")

  5. Once all the branching logic is entered, test it out!

To the top

Keywordssurvey progress bar percent completion complete redcap   Doc ID92721
OwnerAmy S.GroupSMPH Research Informatics
Created2019-06-26 10:53:42Updated2024-03-20 09:59:05
SitesInstitute for Clinical and Translational Research, SMPH Research Informatics , SMPH Research Informatics TEST
Feedback  3   0