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

Mohamed_HediMohamed_Hedi LilleCommunity Member Qubie ✭

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

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?

Best Answer

  • [Deleted User][Deleted User] Qubie ✭
    Accepted Answer

    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

Answers

  • Mohamed_HediMohamed_Hedi LilleCommunity Member Qubie ✭

    Dear @Shashi , thank you so much.

  • andrasmandrasm Community Member Qubie ✭

    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!

  • [Deleted User][Deleted User] Qubie ✭
    edited October 2018

    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>
    
  • andrasmandrasm Community Member Qubie ✭

    Thanks, @Shashi ! This is a clever solution!

  • ehenthorehenthor Community Member Qubie ✭

    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.

  • @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%;
    }
    
  • Mohamed_HediMohamed_Hedi LilleCommunity Member Qubie ✭

    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

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

    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_HediMohamed_Hedi LilleCommunity Member Qubie ✭

    Thank you. I pasted it in the footer but nothing happened. Do you have an idea?

  • @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>
    
Sign In to Comment