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 );
});
>
@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
Hi
@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>
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?
