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.

   

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.

Result:

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."

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:

   

2. Click on the Green Arrows to open the Branching Logic for the first progress bar image.

   

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.

   

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!

   
   

If you have a UW-Madison REDCap project and have questions about Survey Progress Bars, please send them to REDCap@ictr.wisc.edu

To the top