Solved

Change placement of multiple choice answers

1 year ago
September 12, 2023
10 replies
256 views

maybe
Level 2 ●●
14 replies

I have a multiple choice question with 15 pictures displayed as answers, in eight columns. By default, it shows like this, with an empty space at the end of the bottom ‘row’:

X X X X X X X X

X X X X X X X

Is there any way to stagger the second question in each column, so that they display symmetrically, more like this?

X X X X X X X X

X X X X X X X

Thanks for any help :)

Best answer by Tom_1842

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%;
}

View original

Qual.78500
21 replies
1 year ago
September 14, 2023

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 */
}

maybe
Author
Level 2 ●●
14 replies
1 year ago
September 14, 2023

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 :)

maybe
Author
Level 2 ●●
14 replies
1 year ago
September 15, 2023

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.

+27

TomG
Level 8 ●●●●●●●●
5932 replies
1 year ago
September 15, 2023

@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.

maybe
Author
Level 2 ●●
14 replies
1 year ago
September 19, 2023

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

+28

Tom_1842
Level 8 ●●●●●●●●
876 replies
Answer
1 year ago
September 19, 2023

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%;
}

maybe
Author
Level 2 ●●
14 replies
1 year ago
September 19, 2023

@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…

+20

JoseS
Former XM Community Team Member
447 replies
1 year ago
September 20, 2023

@maybe The Best Answer has been updated! 🙂

+28

Tom_1842
Level 8 ●●●●●●●●
876 replies
1 year ago
September 20, 2023

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%;
}

maybe
Author
Level 2 ●●
14 replies
1 year ago
September 21, 2023

Thanks all! This is an amazing result!

Leave a Reply

Related posts

Flatpickr date not storing data with surveyicon

Flatpickr not saving data with Simple Layouticon

Deselecting a checkbox on retake linkicon

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded