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

Different widths for multiple choice options

  • June 2, 2022
  • 5 replies
  • 374 views

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

5 replies

grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • QPN Level 3 ●●●
  • 238 replies
  • July 12, 2022

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


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • July 12, 2022

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.


Forum|alt.badge.img
  • 1 reply
  • September 13, 2023

@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
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • September 13, 2023

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


Forum|alt.badge.img+3
  • 21 replies
  • September 14, 2023

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