Have an idea?

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

Changing direction of codes / images displayed in a select question

I have a multiple response select question with images in my parent list.

Rather than have the images being displayed in column 1 from top to bottom, and then in column 2 from top to bottom, and so on, I'd prefer to see them displayed in rows going from left to right for the first row, the same again for the 2nd row, and so on ...

Why am I asking this?

I have generic images (e.g. Other Brand and None) and I'd like them to appear at the very bottom.

I suspect some JavaScript would do the trick?
asked Apr 4 by Paul Moon Platinum (74,305 points)
I've used JavaScript before to rearrange items in a multi-column select question.  Are you just looking to position items from left-to-right and be done with it, or do you have special requirements about where certain items need to end up?
Yes, that sounds correct Zachary.

A few examples below of how items should be displayed ...

2 columns
1-2
3-4
5-6
7-8
9-10

3 columns
1-2-3
4-5-6
7-8-9
10

4 columns
1-2-3-4
5-6-7-8
9-10

1 Answer

0 votes
This will rearrange the columns items end up in, but it may come with some quirks for narrow screens:

<script>
$(document).ready(function(){
    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 5 by Zachary Platinum Sawtooth Software, Inc. (121,425 points)
Thanks Zachary. I have conducted some initial tests which appear fine.

I will take a look on a mobile device also and report back to this post.
...