Change value of the progress bar | XM Community
Skip to main content
Michael_Cooksey
Administrator
16 days ago
Solved

Change value of the progress bar

R
Is it possible to change the value of the built in progress bar with a simple javascript code? The current %-values of my survey give a wrong impression about the length, so I'd like to assign my own values.

Best answer by TomG

Yes, if assignedProgress is a number representing the current progress: ``` jQuery("div.ProgressBarFill").css("width", assignedProgress+"%"); ```
View original

13 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • Answer
  • July 3, 2019
Yes, if assignedProgress is a number representing the current progress: ``` jQuery("div.ProgressBarFill").css("width", assignedProgress+"%"); ```
JenCX
R
Bharath
3 people like this
  • JenCX
    JenCX
  • R
    Robert
  • Bharath
    Bharath
R
  • Robert
  • Author
  • 2 replies
  • July 3, 2019
Thanks a lot. Works perfectly.
AlonsoC
1 person likes this
  • AlonsoC
    AlonsoC
D
Level 1 ●
Forum|alt.badge.img+5
  • djunius
  • Level 1 ●
  • 11 replies
  • September 12, 2019
So this would provide a value to the progress? Like 65%? And where would I enter this javascript to make this happen? Thanks!
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • September 12, 2019
> @djunius said: > So this would provide a value to the progress? Like 65%? And where would I enter this javascript to make this happen? Thanks! It would set the progress bar fill amount. You would add the JS to the addOnReady function in any question on the page or to a script in the header or footer.
Bharath
Level 1 ●
Forum|alt.badge.img+3
  • Bharath
  • Level 1 ●
  • 16 replies
  • April 15, 2020

Change value of the progress barWorked great.. Thanks..

C
  • Chuck
  • 2 replies
  • May 25, 2020

So, for some reason I had a problem with that code and couldn't get it work. This one worked right away for me:
jQuery("div.ProgressBarFill").css("width", "80%");

TomG
E
2 people like this
  • TomG
    TomG
  • E
    elkiddo
A
  • Ali5
  • 16 replies
  • June 7, 2020

Hi, I want to change the number on the progress bar of some pages manually. The code on the comment above works perfectly on moving the bar to represent, for example 80% progress, but I would like the number to update too. I have the following code on the look and feel header, that shows the number on the progress bar e.g. 80% progress.
Qualtrics.SurveyEngine.addOnReady(function() { 

jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text(jQuery("#ProgressBarFillContainer span").text()); });


Does anyone know how to adjust the code below so that the number would update too?
jQuery("div.ProgressBarFill").css("width", "80%");
Thank you!

L
Forum|alt.badge.img
  • llwy2511
  • 2 replies
  • July 7, 2021

https://community.qualtrics.com/XMcommunity/discussion/comment/15489#Comment_15489where I input this code?

T
Forum|alt.badge.img+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?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • April 14, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/45533#Comment_45533You would need to keep the question count in an embedded variable and update it on each page. 'assignedProcess' would be your embedded variable divided by 53.

T
Forum|alt.badge.img+1

TomG done thru adding code? any additional advice would be greatly appreciated!

TomG
1 person likes this
  • TomG
    TomG
B
Forum|alt.badge.img+1
TomG wrote:

Yes, if assignedProgress is a number representing the current progress:
```
jQuery("div.ProgressBarFill").css("width", assignedProgress+"%");
```

Does anyone know how to get this code to work under Simple Layout? Try adding a script to call the JS library in the survey header, but that still hasn’t worked.

B
Level 1 ●
Forum|alt.badge.img+2

Hi team:

I was able to add the below code on the text question as I see Javascript there, but I don’t see Javascript option on Multiple Choice question. How to add the code in the questions as I want to show the % completion on all pages.

jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text(jQuery("#ProgressBarFillContainer span").text()); });

Appreciate any help on this.

Regards,

Balaji

Leave a Reply


Terms & Conditions