Progress Bar Progression | XM Community
Skip to main content

Hello
I have six blocks with a total of 50 questions which results in about 8 pages in the survey. I use a variety of question types. The progress bar stays at 0% until you are on the third block or about half way done they survey then it jumps to 67%.
I would like for the percentage to update as you progress through each question and page so that is shows like 10, 20, 30%, Please help.

Anybody have any thoughts about this?


Hi there, if you still need, I found some threads that I think will be helpful to you. In this thread, TomG provides code to set the fill width of the progress bar and also how the fill width value can be updated from an Embedded Data field. In this thread, TomG provides code to have the fill width value display back to the respondent. 
I've added those bits together to run whenever the question is clicked. For each question in your survey where the progress value should update when it is clicked, try adding the below to the OnReady section of the question's JavaScript, updating the values needed.
this.questionclick = function(event,element) {

jQuery("div.ProgressBarFill").css("width", "80%");
jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text("80%");

}
Also, to set the progress bar value for each new page, add the below to the OnLoad section of the first question on each page:
jQuery("div.ProgressBarFill").css("width", "80%");
jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text("80%");


Leave a Reply