Solved
Is it possible to display progressive percentages as respondents are answering?
+2While 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?
Best answer by Anonymous
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
View originalHello @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
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!
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>
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.
+2Dear @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
> @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.
> @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>
+1This 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?
+1Never 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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.