Have an idea?

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

Progress Bar Manipulation

Hello All:

Hope all is well!

My upper management would like a progress bar for screener questions that would go from 0% - 100%.  Once the questionnaire reaches the main questionnaire,
the progress bar would start over.

I have the below code located in my survey setting’s footer

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

.progress_value {
    text-align: center;

    $('.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, '') + ' screener complete');

I am then setting my screener questions on each individual question page footer with the below code


Once a respondent gets to the main questionnaire, how can I make the text for the progress bar display "main questionnaire complete" instead of  "screener complete"?

Any help would be much appreciated.
asked May 8 by Bryan
So you are using the regular built-in progress bar feature throughout the survey, right?  Do you want to change the value of this progress bar during the screener section or are you imagining two progress bars on the screener pages?

Then you want some text above the progress bar on the screener pages and the page after the last screener?
Yes,  I am using the regular built-in progress bar feature throughout the survey. I'm using jquery to display the value and after the value I am adding the text "screener complete".  For example, it would read 8% screener complete.  When the progress bar gets to the main questionnaire,  I would like for it to display, for example, 8% main questionnaire complete instead of screener complete.  Basically, just wanting to change the text from "screener complete" to "main questionnaire complete" once the respondent reaches the main questionnaire.
I think the easiest way with your current code would be to use the PageNumber function or some other way to tell the JavaScript whether or not its on a screener page.  Here's a simple example:

var onScreener = $('.acbc_screener').length;
if (onScreener) {
    // set the text one way...
else {
    // set the text another way...

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.