you can control the layout of your multiple choice question with pictures using CSS styling. To stagger the second question in each column, you can add custom CSS code to adjust the positioning of the elements.

you can use following CSS code:

/* Adjust the margins for the second question in each column */
.question-choice-list .q-checkbox:nth-child(8n+2),
.question-choice-list .q-checkbox:nth-child(8n+4),
.question-choice-list .q-checkbox:nth-child(8n+6) {
    margin-left: 20px; /* You can adjust the margin as needed */
}

Thanks for the response, @Qual.78500 . I’ve entered the code into the custom CSS section of the Look & Feel tab but it doesn’t seem to change anything. Because I just want to use the multiple choice format to display the pictures in a random order, I’ve used javascript to remove checkboxes and make the pictures unselectable. Do you think that could be interfering with the code? Do you have any more advice?

Thanks again for your help :)

I’ve now tried the code in a new survey without any custom javascript. It still doesn’t seem to move any of the pictures.

@maybe,

I think the only way you are going to achieve this is to set the alignment to vertical then use JS move the choices into two flexboxes.

In case you are thinking of asking: no, I’m not going to write the JS for you.

Thanks, @TomG . It sounds like this is something beyond my abilities, so I’ll remain satisfied with the uneven layout :)

I'll give it a try. First create a Multiple Choice question with 15 options that has vertical alignment. Use the Rich Content Editor to add pictures to each answer option. Then, add the below to the OnReady section of the question's JavaScript:

var qid = this.questionId;
var questionContainer = this.questionContainer;

//create flexboxes//
jQuery(questionContainer).append('<div class="container" id="container1"></div>');
jQuery(questionContainer).append('<div class="container" id="container2"></div>');
jQuery('.container').css({'display': 'flex','flex-wrap': 'wrap','justify-content': 'space-between'});

//select answer choices//
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(1)').attr('id','opt1');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(2)').attr('id','opt2');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(3)').attr('id','opt3');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(4)').attr('id','opt4');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(5)').attr('id','opt5');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(6)').attr('id','opt6');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(7)').attr('id','opt7');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(8)').attr('id','opt8');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(9)').attr('id','opt9');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(10)').attr('id','opt10');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(11)').attr('id','opt11');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(12)').attr('id','opt12');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(13)').attr('id','opt13');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(14)').attr('id','opt14');
jQuery('#'+qid+' > div.Inner.BorderColor.SAVR > div > fieldset > div > ul > li:nth-child(15)').attr('id','opt15');

//put in flexbox//
jQuery('#opt1').detach().appendTo('#container1');
jQuery('#opt2').detach().appendTo('#container1');
jQuery('#opt3').detach().appendTo('#container1');
jQuery('#opt4').detach().appendTo('#container1');
jQuery('#opt5').detach().appendTo('#container1');
jQuery('#opt6').detach().appendTo('#container1');
jQuery('#opt7').detach().appendTo('#container1');
jQuery('#opt8').detach().appendTo('#container1');

jQuery('#opt9').detach().appendTo('#container2');
jQuery('#opt10').detach().appendTo('#container2');
jQuery('#opt11').detach().appendTo('#container2');
jQuery('#opt12').detach().appendTo('#container2');
jQuery('#opt13').detach().appendTo('#container2');
jQuery('#opt14').detach().appendTo('#container2');
jQuery('#opt15').detach().appendTo('#container2');	

Then over in the Look & Feel, set the layout to Classic and add the below CSS to the Style section:

#container1 > li {
width: 12%;
}

#container2 > li {
width: 14%;
}

@Tom_1842 , woah! That’s amazing. Thanks so much. I’d mark yours as the best answer but I’d already marked the other Tom’s and I’m not sure how to change it…

@maybe The Best Answer has been updated! 

Thanks @JoseS! Also @maybe, if you want the images to be the same size, change the width of the li in both containers to be the same, like 12%

#container1 > li {
width: 12%;
}

#container2 > li {
width: 12%;
}

Thanks all! This is an amazing result!