Have an idea?

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

Select question countdown

For Select questions, when establishing a multiple-select setup, I want there to be a counter acknowledging the number of selections the user has left. For example, if I set the threshold to 4 max-checks, when the users selects one of the options some text appears saying "you may select up to 3 more options".

Any ideas?
asked May 24, 2018 by WTW_cal Bronze (1,555 points)

1 Answer

+1 vote
Add this HTML to the page where you want the text to appear:

<span class="checkboxCountdown"></span>


Then add this JavaScript to the page:

<script>
$(document).ready(function(){
    SSI_CustomGraphicalCheckbox();
})

function SSI_CustomGraphicalCheckbox() {
    var totalAllowed = 3;
    var total = 0;
    $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
        total += SSI_GetValue('[% QuestionName() %]_' + item);
    });
    var remaining = totalAllowed - total;
    var remainingText;
    if (remaining > 0) {
        remainingText = 'You may select up to ' + remaining + ' more option' + (remaining == 1 ? '' : 's') + '.';
    }
    else if (remaining == 0) {
        remainingText = 'Maximum selected options reached.';
    }
    else {
        remainingText = 'Too many options selected.';
    }
    $('.checkboxCountdown').text(remainingText);
}
</script>
answered May 24, 2018 by Zachary Platinum Sawtooth Software, Inc. (120,175 points)
Nice work Zachary.
Thanks Zachary, as always. Can this be retooled to apply globally? It seems it's written to be item-specific.
Does every checkbox select question of your survey have the same checkbox maximum?  I could make the code apply globally, but you'd still have to put in each question's name and checkbox maximum if they do not all share the same maximum.
No. Each select item typically has different max-settings.  Thanks.
Global script:

<script>
$(document).ready(function(){
    var selectQuestions = {
        'SelectQ1': 3,
        'SelectQ2': 2,
        'SelectQ3': 4
    };
    
    addCountdowns(selectQuestions);
    updateCountdowns(selectQuestions);
    $(document).on('customGraphicalCheckbox', function(){
        updateCountdowns(selectQuestions);
    });
})

function SSI_CustomGraphicalCheckbox(graphicalObj, inputObj, bln) {
    $(document).trigger('customGraphicalCheckbox', [graphicalObj, inputObj, bln]);
}

function addCountdowns(selectQuestions) {
    var html = '<span class="checkboxCountdown"></span>';
    for (var selectQuestion in selectQuestions) {
        $('#' + selectQuestion + '_div').append(html);
    }
}

function updateCountdowns(selectQuestions) {
    for (var selectQuestion in selectQuestions) {
        if ($('#' + selectQuestion + '_div').length) {
            var total = 0;
            $('input[name="hid_list_' + selectQuestion + '"]').val().split(',').forEach(function(item){
                total += SSI_GetValue(selectQuestion + '_' + item);
            });
            var remaining = selectQuestions[selectQuestion] - total;
            var remainingText;
            if (remaining > 0) {
                remainingText = 'You may select up to ' + remaining + ' more option' + (remaining == 1 ? '' : 's') + '.';
            }
            else if (remaining == 0) {
                remainingText = 'Maximum selected options reached.';
            }
            else {
                remainingText = 'Too many options selected.';
            }
            $('#' + selectQuestion + '_div .checkboxCountdown').text(remainingText);
        }
    }
}
</script>


Lines 4-6 should be updated with the names and maximum checkboxes of select questions in the questionnaire.
...