Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Wanting to display actual value % in progress bar

This is exactly what I was wanting accomplish as well, but the code here is not working.  Additional explanation would be helpful.  

Thank you,

Novice Bob
related to an answer for: How to get percentage of Survey completed?
asked Mar 4, 2016 by anonymous

1 Answer

0 votes
Perhaps the below code will help serve as an example of how to implement this.  I believe you can copy this code into any text field on a page with a displayed progress bar and it will replace "default text" with the completion percentage.

<div id="progresspercent"><span>default text</span></div>

<script type="text/javascript">
$(document).ready(function () {
    var progstyle = $(".progress_bar_inner").attr("style");
    var width = progstyle.replace(/\D/g, "");
    $("#progresspercent span").text(width);
})
</script>


Note: for this code to work, you must either enable the progress bar in survey settings or display a progress bar on the page somewhere using [% ProgressBar() %].  If you want to display the completion percentage without showing the regular progress bar, you could enable the progress bar in the survey settings and then hide it with this CSS:

<style type="text/css">
.progress_bar {
    display: none;
}
</style>
answered Mar 4, 2016 by Zachary Platinum Sawtooth Software, Inc. (70,300 points)
Hi Zachary,

I need to add some texts under the progress bar to show the percentage complete. For example, the respondents have finished 20% of the survey. I need to show "20% complete" under the progress bar. I tried to revise your code to do that. But I failed. Could you please share some hints with me? Many many thanks!
Try placing this code in your survey's head tag:

<style>
.progress_value {
    text-align: center;
}
</style>

<script>
$(document).ready(function(){
    $('.progress_bar tbody').append('<tr><td colspan="3" class="progress_value"></td></tr>');
    $('.progress_value').text($('.progress_bar_inner').attr('style').replace(/[^0-9%]/g, ''));
})
</script>
Thank you so much, Zachary! I can see the percentage now! At the mean time, I am trying to add the text "complete" next to the percentage to show "52% complete". For now it shows "52%", which is awesome! Could you please show me how to change the code to show text "complete"? Thanks a bunch! :)
<style>
.progress_value {
    text-align: center;
}
</style>

<script>
$(document).ready(function(){
    $('.progress_bar tbody').append('<tr><td colspan="3" class="progress_value"></td></tr>');
    $('.progress_value').text($('.progress_bar_inner').attr('style').replace(/[^0-9%]/g, '') + ' complete');
})
</script>
You are a life saver! Thanks again!!!!!!! :)
...