Is it possible to display progressive percentages as respondents are answering? | XM Community
Solved

Is it possible to display progressive percentages as respondents are answering?

  • 28 September 2018
  • 13 replies
  • 2649 views
M
Badge +2
While a respondent is answering a Qualtrics survey, he/she sees a red bar moving forward. However, at the extreme (right and left), there is only 0% and 100%.During the pre-test phase, several respondents emphasized the advantage of seeing a% in the middle progressing as questions are answered (Example: 10%, 20%, 30%, 40%). % ... .80%, 90% and finally 100%). Does any one have an idea on how to do this on Qualtrics?
icon

Best answer by Anonymous 28 September 2018, 15:33

View original

13 replies

A
Hello @Mohamed_Hedi ,

Select Progress bar -> "with verbose text" in the look and feel tab.
Paste the following code in the header(edit) -> "<>"(source) option

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text(jQuery("#ProgressBarFillContainer span").text()); });
</script>

The above code will show progress at the center of progress bar
M
Badge +2
Dear @Shashi , thank you so much.
A
Hello @Shashi ,

your answer was extremely helpful! I'd like to display the progress within a question, in an HTML element I created. Is there a way to do this without displaying the progress bar on top?

In more detail: I figured out that I can modify your snippet so it does display the progress in my element:
> jQuery("#myElement").text(jQuery("#ProgressBarFillContainer span").text());`

However, this works only if the progress bar is displayed on top, because otherwise the progress bar container does not exist. So is there an other way to get the progress value, instead of getting it from the progress container?

Thanks!
A
Hello @andrasm ,

Select Progress bar -> "with verbose text" in the look and feel tab.
Paste the following code in the header(edit) -> "<>"(source) option:

<script>
Qualtrics.SurveyEngine.addOnReady(function(){
jQuery("#ProgressBar").hide();
jQuery("#yourElement").text(jQuery("#ProgressBarFillContainer span").text());
});
</script>
A
Thanks, @Shashi ! This is a clever solution!
E
This is great stuff, thank you!

Does anyone know how to increase the size of the progress bar? The current default format I have is a bit small.
A
> @ehenthor said:
> This is great stuff, thank you!
>
> Does anyone know how to increase the size of the progress bar? The current default format I have is a bit small.

Hello @ehenthor ,
Paste the below code in the Add custom CSS

.Skin .ProgressBarContainer {
width: 100%;
}
M
Badge +2
Dear @Shashi ,

In September 2018, you recommended to use the following script to have the progression rate. Your advice was to copy and paste the following code in the header(edit) -> "<>"(source) option

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text(jQuery("#ProgressBarFillContainer span").text()); });
</script>

Actually, I have now another script that already exist in the header(edit) of Look a Feel. Do you have another way to deal with this please?

Thanks a lot for your help

Mohamed-Hedi
A
> @Mohamed_Hedi said:
> Actually, I have now another script that already exist in the header(edit) of Look a Feel. Do you have another way to deal with this please?


Paste the code in different script tag in the header, it will work else You can paste that script in footer-> "<>" source view.
M
Badge +2
Thank you. I pasted it in the footer but nothing happened. Do you have an idea?
A
> @Mohamed_Hedi said:
> Thank you. I pasted it in the footer but nothing happened. Do you have an idea?

Hope you pasted in the footer source view. Below is the code

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text(jQuery("#ProgressBarFillContainer span").text()); });
</script>
L
Badge +1

This is terrific! One question. The text in the progress bar shows up in white. How can I change the color of the text to make it more visible?

L
Badge +1

Never mind. Found this (should have looked harder). Put this in Custom CSS in look and feel:

 

#ProgressBar > div > table > tbody > tr:nth-child(1) > td > label,
#ProgressBar > div > table > tbody > tr:nth-child(2) > td:nth-child(1),
#ProgressBar > div > table > tbody > tr:nth-child(2) > td:nth-child(3) {
color: red;
font-size: 14px;
font-family: verdana;
}

Leave a Reply


Terms & Conditions