Have an idea?

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

Display Checkbox Order

Hi,

I have a question that I'm using with checkbox order from the Community Question Library:
https://sawtoothsoftware.com/resources/question-library/checkbox-order

It's working well, but I wanted to know if there's a way to also visually display the checkbox order by maybe showing the order number next to each response row.  Thanks!
asked Jul 28 by Q (365 points)

2 Answers

+1 vote
 
Best answer
Here's a quickly modified version of the "Checkbox Order" script:

<style>
#[% QuestionName() %]_div {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    // Parameters
    var selectQuestionName = '';

    // Get checkbox question
    if (!selectQuestionName) {
        selectQuestionName = $('#[% QuestionName() %]_div').prevAll('.question.select')[0].id.replace(/_div/, '');
    }
    var items = $('input[name="hid_list_' + selectQuestionName + '"]').val().split(',').map(Number);
    var regex = new RegExp(selectQuestionName + '_([0-9]+)');
    
    // Delete other specify inputs
    $('#[% QuestionName() %]_div .text_input, #[% QuestionName() %]_div textarea').remove();
    
    // Load order
    var order = [];
    items.forEach(function(item){
        var itemOrder = SSI_GetValue('[% QuestionName() %]_r' + item + '_c1');
        if (itemOrder) {
            order[itemOrder - 1] = item;
        }
    });
    
    // Update order
    $(document).on('lighthouseCheckboxChanged', function(event, graphicalObj, inputObj, checked, pageLoad){
        if (!pageLoad) {
            var match = inputObj.name.match(regex);
            if (match) {
                var item = Number(match[1]);
                if (checked) {
                    order.push(item);
                }
                else {
                    var index = order.indexOf(item);
                    order.splice(index, 1);
                }
                $('#[% QuestionName() %]_div .numeric_input').val('');
                for (var i = 1; i <= order.length; i++) {
                    $('#[% QuestionName() %]_r' + order[i - 1] + '_c1').val(i);
                }
            }
        }
        
        $('.checkOrderSpan').remove();
        for (var i = 1; i <= order.length; i++) {
            var text = '(' + i + ')';
            $('label[for="' + selectQuestionName + '_' + order[i - 1] + '"]').append('<span class="checkOrderSpan"> ' + text + '</span>');
        }
    });
})
</script>


Line 53 can be updated to change exactly how the order is displayed to the user.
answered Jul 28 by Zachary Platinum Sawtooth Software, Inc. (151,250 points)
selected Jul 28 by Q
Thank you Zachary, this works perfectly!
0 votes
Dear User,

We had accomplished this in past by utilizing ranking question of lighthouse studio.

Example : https://bit.ly/303ZiIb

Idea is to auto-incremented the rank upon click of an option & remove rank if clicked again.

I hope this helps.

Regards,
Saurabh
answered Jul 28 by Saurabh Aggarwal Gold (34,400 points)
Thanks Saurabh, this isn't quite what I'm looking for, but it's interesting and I'll have to try it sometime with ranking questions.
...