Progress bar for a one BLOCK | XM Community
Skip to main content

Is there a way to display a progress bar for each BLOCK (not a branch or a page scroll bar, but a progress bar for a BLOCK). I have a survey that is divided into two blocks, one that is completed before an intervention and one that is completed after. I want a progress bar for Block 1, then a progress bar for Block 2. (I cannot solve the problem by breaking the survey into two separate surveys because I have a randomization of elements in Block 1 and Block 2). Thanks!

 

P.S.  Qualtrics, please add this feature if you can.  For example, in the survey flow tab, it would be great if we could have a simple way to just “click” and add a progress bar start and stop button anywhere in the survey flow.  

@ncollins I customize my progress bar fill with this code
You can change the “vw” as your wish, reset it back to 0 at the last question of the block

Qualtrics.SurveyEngine.addOnUnload(function()
{
jQuery("div.ProgressBarFill").css("width", "00vw");
});

Are your questions in somekind of order, if you randomizing you might want some variable/embedded data for progress tracking.
Let me know if it help.


Even if you update the progress bar using JS there might be some platforms which won’t support the js and it might be defaulted to using for the entire survey. My advice would be to add Question 1 or X on every question if the survey is not that long.


rgupta15 - Thank you! Can you please explain what you mean by adding Question 1 or X on every question and how this will reset the progress bar for the two blocks of the survey.  I appreciate your time. 

dxconnamnguyen - I am not familiar with JS.  When you say “You can change the “vw” as your wish, reset it back to 0 at the last question of the block.”  What does the “vw” represent and how can I set it such that it tracks progress of only Block 1, then gets reset when Block 2 starts.  I am not sure where/when to put this script, and what the “vw” command controls.  Thanks for your time!


@ncollins ‘vw’ is viewport width, that’s what I use. You can change it to pixel (px) or percentage (%) what ever you prefer for example:
Qualtrics.SurveyEngine.addOnUnload(function() { jQuery("div.ProgressBarFill").css("width", "50%"); });

You can add the code to Javascript editor of each question that you like. Add JavaScript (qualtrics.com)


@Nam Nguyen I have the same problem. I want to include a progress bar for just one block, but my questions are randomized. Could you please help me? 


Not sure if you have already tried table of contents. It gives an option to show block progress.

 

 

Thanks,

Jagdish


Leave a Reply