My progress bar is not accurate | XM Community
Skip to main content

My survey progress bar is not very accurate, it moves very slowly in the begining than it goes fast. This gave respondents wrong impression more than once and is impacting my response rate. I checked with Qualtrics they advised me to use custom coding. Can you please share the steps to solve this issue?

We also experienced a progress bar that didn't visually align with the survey. We added a statement on the final page of the survey that alerted our team members that advancing the survey would navigate them to the end of the survey.


The progress bar unfortunately takes into account all the blocks/branches, that's why it's mostly out of sync.
If you know the progress, you can set it manually on each page. Just add the code below in the JS of the question on a page and set the value of progressBarValue accordingly:
Qualtrics.SurveyEngine.addOnload(function () {
    const progressBarValue = "30%"; //change this to desired value
    document.querySelectorAll(".ProgressBarFill").forEach((item) => {
        item.style.width = progressBarValue;
    });
    document.querySelectorAll(".ProgressBarContainer td").forEach((item) => {
        const value = parseInt(item.innerText.replace("%", ""));
        if (value < 100) {
            item.innerText = progressBarValue;
        }
    });
});
Here's a demo for a more flexible solution: https://demo.survey-awesome.com/block-progress-bar


Leave a Reply