Help with Custom Progress Bar

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 = progressMap[currentQuestionID];
    }
  });
</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)[0];

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