Different widths for multiple choice options | XM Community
Skip to main content

Is it possible through Javascript (or another way) to have multiple choice options where one of the options is wider than the others, so that it could look like the attached image. The image is assuming "boxed answers", but radio buttons would be fine also. This would need to be on many questions, not just one. Thanks!
Different Width Options.jpg

Yes, you will need to update width for each choices, or create buttons.


jdmeyer73 ,
You can use a combination of CSS and JS to modify a multiple choice question with vertical choices into a CSS grid where the second row spans the entire width.
I frequently do this on conjoint questions.


@TomG Could you please post the JavaScript code from one of you conjoint questions for this? I have the exact same question and couldn’t figure it out! Thank you!


@TomG Could you please post the JavaScript code from one of you conjoint questions for this? I have the exact same question and couldn’t figure it out! Thank you!

I have a function that does this: mcColumns.  Actually, it has far more uses than the specific example in this thread. You can contact me by private message if interested.


You’ll need to use custom CSS to style your questions and choices as per your design. You can either include this CSS directly within the question using the HTML/Text question type or use the survey theme to apply it consistently to multiple questions.

You can use JavaScript code to apply dynamic styling to specific options.
 

Qualtrics.SurveyEngine.addOnload(function() {
    // Target the specific choice you want to style differently
    var $specialChoice = jQuery('.q-radio label:contains("Special Choice")');

    // Apply custom styling to the special choice
    $specialChoice.css('width', '200px'); // Adjust the width as needed
});


Leave a Reply