Progress Bar Customization | XM Community
Solved

Progress Bar Customization

  • 24 September 2019
  • 7 replies
  • 642 views

Userlevel 1
Badge +2
Have anyone used some customised codes for progress bar showing the total progress on survey, currently the progress is based on the pages of the survey responded... if one my question has the logic the % is not acccurate.
icon

Best answer by KimothiSaurabh 24 September 2019, 15:39

View original

7 replies

Userlevel 4
Badge +18
Hi @ChhaviChauhan ,

I guess below discussions would help:-

https://www.qualtrics.com/community/discussion/5187/change-value-of-the-progress-bar

https://www.qualtrics.com/community/discussion/5078/progress-bar
Userlevel 1
Badge +2
@KimothiSaurabh ,

Thanks for the help!!

But it's still not working for me as the pages skipped are being calculated in the progress bar calculation. Everytime my bar is going directly to 100% from 56%.
Userlevel 4
Badge +18
@ChhaviChauhan - If there are few questions in block you can exclude those from calculation of progress bar as mentioned in below link:-

https://www.qualtrics.com/support/survey-platform/survey-module/survey-flow/standard-elements/branch-logic/#ExcludefromProgressBar

If this don't help and you have idea of approximate how many questions are being asked to a respondent you can put below code in survey header:

jQuery("div.ProgressBarFill").css("width", ${e://Field/progrs}+"%");

Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{
if(type == "next")
{
var n = 3;
var increment = 100/n;
var old_val = Number(${e://Field/progrs});
var new_val = old_val + increment;
Qualtrics.SurveyEngine.setEmbeddedData('progrs', new_val);
}
});

For this you will have to create an embedded variable in starting of survey flow with default value as 0. I am assuming every respondent will see around 3 questions in link no matter how many questions are created there is survey.

If number of questions vary drastically from respondent to respondent as per flow, you can set value of 'n' as biggest possible value and then change value of embedded data somewhere in last questions. Please note that this code will show progress bar as per value in embedded data, so you can change value of it and play with progress bar.
The same thing happens for surveys where respondents log in through separate authenticators to take the same survey.
Badge +1

Is there a way for the progress bar to update as questions are completed I.E - I have 53 questions, when someone has completed 10, how do I get the progress bar to show 10/53 aka 19% complete?

Badge +1

therisejourney
Check this answer
https://community.qualtrics.com/XMcommunity/discussion/2126/is-it-possible-to-display-progressive-percentages-as-respondents-are-answering

Badge +3

This code is not working when back button is pressed. The progress should also Regress when back button is selected.

 

 

jQuery("div.ProgressBarFill").css("width", ${e://Field/progrs}+"%");

Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{
if(type == "next")
{
var n = 3;
var increment = 100/n;
var old_val = Number(${e://Field/progrs});
var new_val = old_val + increment;
Qualtrics.SurveyEngine.setEmbeddedData('progrs', new_val);
}
});

Leave a Reply