Changing direction of codes / images displayed in a select question

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?

Comments

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

Answer 1

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>

Comments

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.