!
Question
Progress Bar
In my survey, I need to remove several questions (672-21=651 questions) from the progress bar. Without removing them from the progress bar, the progress bar will confuse participants.
As shown below, the progress bar suddenly changes from status 1 to status 2. The main reason is that at status 2, participants start answering 21 questions that are randomly selected from 672 questions. Such a possibility was provided using a randomizer. Since there is no branch in this part of the survey, how I can solve the issue? I want the Qualtrics to account only 21 questions of these 672 questions in the progress bar. !
!
!
+6Hi @Fatemeh_2019,
you can use your custom progress bar. See some examples here. I've implemented a similar solution for my colleague. You'll have to change it to be suitable for your randomization (which I don't know how does look like).
You can implement it for example like this:
1) Inset following HTML to the header:
(see how to do it here)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="progress">
<div class="progress-bar" id = "progressbar" role="progressbar" style="width:${e://Field/pb}%">
${e://Field/pb}%
</div>
</div>
</div>
2) Define a new embedded field called pb with value 0.
(See how to do it here.)
3) Change values at your progress bar like this on the page before the page with a new value:
Qualtrics.SurveyEngine.addOnReady(function()
{
Qualtrics.SurveyEngine.setEmbeddedData( 'pb', 99 );
});
1 person likes this
> @fleb said:
> Hi @Fatemeh_2019,
> you can use your custom progress bar. See some examples here. I've implemented a similar solution for my colleague. You'll have to change it to be suitable for your randomization (which I don't know how does look like).
> You can implement it for example like this:
>
> 1) Inset following HTML to the header:
> (see how to do it here)
>
> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
>
> <div class="container">
> <div class="progress">
> <div class="progress-bar" id = "progressbar" role="progressbar" style="width:${e://Field/pb}%">
> ${e://Field/pb}%
> </div>
> </div>
> </div>
>
> 2) Define a new embedded field called pb with value 0.
> (See how to do it here.)
>
> 3) Change values at your progress bar like this on the page before the page with a new value:
>
> Qualtrics.SurveyEngine.addOnReady(function()
> {
> Qualtrics.SurveyEngine.setEmbeddedData( 'pb', 99 );
> });
>
Dear Kamila,
I would like to thank you very much for your professional help.
In my survey, first, a randomizer assigns each participant to 3 of 21 groups of questions, randomly and evenly:
!
Later on, in each assigned group of questions, three different randomizers assign 2 of 10, 2 of 10, and 3 of 12 questions to each participant randomly and evenly, respectively:
!
This part of my survey includes 672 questions; however, using the beforementioned randomizers, each participant only answers 21 questions. Qualtrics considers all these 672 questions as part of the entire number of my survey questions. However, I need Qualtrics to consider only 21 questions (not 672 ones) as part of the entire number of my survey questions while designing the progress bar.
May I ask you how should I modify your coding to make it usable for my own survey?
Thank you in advance for your time and invaluable help.
Sincerely,
Fatemeh
Later on, in each assigned group of questions, three different randomizers assign 2 of 10, 2 of 10, and 3 of 12 questions to each participant randomly and evenly, respectively:
!
This part of my survey includes 672 questions; however, using the beforementioned randomizers, each participant only answers 21 questions. Qualtrics considers all these 672 questions as part of the entire number of my survey questions. However, I need Qualtrics to consider only 21 questions (not 672 ones) as part of the entire number of my survey questions while designing the progress bar.
May I ask you how should I modify your coding to make it usable for my own survey?
Thank you in advance for your time and invaluable help.
Sincerely,
Fatemeh+6Hi @Fatemeh_2019 ,
try adding following script to the header. `n` is the number of your pages in your survey. Test the script carefully, since I haven't.
<script>
var n = 3;
var increment = 100/n;
var old_val = Number(Qualtrics.SurveyEngine.getEmbeddedData( 'pb'));
var new_val = old_val + increment;
Qualtrics.SurveyEngine.setEmbeddedData( 'pb', new_val);
</script>
+12Hi,
will the code fill the progress bar up to the value defined in "pb" or this is to display the value alone?
In my case, my survey is short, the majority of the questions are on the 2nd last page of the survey. So the progress bar at the time of the 2nd last question is still displaying 50% (which is working as per design), but I just want to make it look a little bit full at this point of the survey.
+1Is 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?
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.