Help with Custom Progress Bar | XM Community
Skip to main content

Hi everyone,

I’m trying to manually control the progress bar in my survey to update at specific points (e.g., after certain key questions) rather than relying on Qualtrics’ default logic. My goal is to dynamically update the progress bar percentage and ensure it retains my custom settings across the survey.

I’ve come across several posts and solutions, including Change value of the progress bar. From there, I used the following code:

jQuery("div.ProgressBarFill").css("width", assignedProgress + "%");

This works initially for the specific questions where I add it, but as soon as I move to the next question, the progress bar reverts to Qualtrics' default logic. Since my survey has many questions, applying this code to every single one isn’t practical.

Is there an easier way to dynamically override the progress bar logic throughout the survey, ensuring that the progress bar retains the custom percentage from the previous update until the next custom update is applied?

Thank you in advance for your help!

When you make changes using jQuery, you are basically just changing things in the browser, nothing on the server. Hence, even after you update the progress bar to your desired value, the server doesn’t know or care about it. Therefore, you get the server’s default value on each page.

Your only option is to specify the progress bar value for each page, you don’t need to do it for each question, just each page. 

Thank you for your response, ​@ahmedA ! I realize now that I mistakenly referred to "questions" instead of "pages" in my original post. In my survey, each question needs to be displayed on a separate page.

From your explanation, I understand that there's no shortcut for this, and I'll need to include the code on each individual page. I appreciate your help!

@M414,

You can include your code in either the header or footer inside a <script> tag and it will apply to every page.  Also, you could turn off the Qualtrics progress bar add your own using the <progress> tag.

Thanks ​@TomG, I will give it a try.

Hi ​@M414, did the solution offered fix your issue?

Hi ​@AlonsoC  and ​@TomG, I tried to add the following code to the Footer in Look & Feel but it does not work as intended. Any suggestions you might have on this? Thanks a lot!

 

<div id="customProgressContainer" style="position: relative; width: 100%; background-color: #e0e0e0; height: 10px; margin-top: 20px;">
  <progress id="customProgressBar" value="0" max="100" style="width: 100%; height: 100%;"></progress>
</div>

<script>
  Qualtrics.SurveyEngine.addOnload(function () {
    let progressMap = {
      "QID1": 10,  // Page 1 = 10%
      "QID2": 50,  // Page 2 = 50%
      "QID3": 100  // Page 3 = 100%
    };

    let currentQuestionID = this.getQuestionInfo().QuestionID;

    if (progressMap;currentQuestionID] !== undefined) {
      document.getElementById("customProgressBar").value = progressMaprcurrentQuestionID];
    }
  });
</script>
 

@M414,

When you run a script from the header or footer the question object ‘this’ is undefined. You can get the first QuestionID on a page like this:

var qid = Object.keys(Qualtrics.SurveyEngine.QuestionInfo)I0];

 

Thanks ​@TomG, I could not make it work yet but I am working on it. Appreciate the help!

Leave a Reply


Terms & Conditions