Have an idea?

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

Getting checkbox matrix list to flow horizontally instead of vertically

I have a checkbox matrix of quasi-randomized brand logos. Some of the logos are locked side-by-side because they fit within a brand "family". Visually it makes the most sense to have these families displayed within rows rather than down columns, however the default ordering of lists flows vertically.

Default sorting:
01    05    09    13
02    06    10    14
03    07    11    15
04    08    12    16

Desired sorting:
01    02    03    04
05    06    07    08
09    10    11    12
13    14    15    16

It's possible to brute force this ordering, HOWEVER, I also need 01, 02,  03, etc., to stay in order when the list dynamically shifts to a single column on mobile devices or within a narrow browser window. I haven't figured out a solution that doesn't require two separate questions/variables (one mobile / one desktop) to achieve this behavior.

Desired mobile sorting (i.e. single column):
01
02
03
04
05
etc.

Let me know if you have any suggestions. Thanks!
asked Apr 14 by Alex

1 Answer

0 votes
Please try adding this script to your select question:

<script>
$(document).ready(function(){
    if (!$('#[% QuestionName() %]_div .mobile_select').length) {
        var columns = $('#[% QuestionName() %]_div .response_column');
        var items = $('input[name="hid_list_[% QuestionName() %]"]').val().split(',');
        for (var i = 0; i < items.length; i++) {
            $(columns).eq(i % columns.length).append($('#[% QuestionName() %]_' + items[i]).closest('.clickable'));
        }
    }
})
</script>
answered Apr 14 by Zachary Platinum Sawtooth Software, Inc. (171,950 points)
...