The mcColumns function automatically arranges multiple choice choices into columns based on the browser's window size. Here is a quick video demonstration:

Functionality includes:

• Automatic placement and sizing of choices into columns
• Flexible control of number of columns based on browser width
• Supports choice groups
• Choice flow by column or row
• Optionally span last n choices (e.g., None of these) across columns
• Works with any theme
• Works with text and/or image choices

This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.

Add the mcColumns function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided mcColumns function JS:

<script>/*Paste mcColumns function JS here*/</script>

Alternatively, paste the mcColumns function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.

To take advantage of wider screens and the mcColumns function, you may want to widen the Qualtrics theme. That can be done by adding media rules to Custom CSS. For example the following will widen the standard Qualtrics 770px theme to 1024px or 1280px depending on browser width:

@media (min-width:1024px){
.Skin .SkinInner{width:1024px;max-width:95%}
}
@media (min-width:1280px){
.Skin .SkinInner{width:1280px;max-width:95%}
}

In the Multiple Choice question settings, “Answers” should be set to either “Single Answer” or “Multiple Answer” and “Position” should be set to “Vertical”.

Add JS to call the mcColumns function to apply it to the Multiple Choice question as follows:

Qualtrics.SurveyEngine.addOnload(function() {
	mcColumns(this);
});

To override the default options, specify the desired options in the second function argument as an object. For example:

Qualtrics.SurveyEngine.addOnload(function() {
	mcColumns(this,{cols:{3:640,4:800},flow:"row"});
});

colGap is a string that specifies the amount of space between columns.

Default: "10px"

cols is an object that specifies the number of columns based on the window size. The object is in the form {key1:value1,key2:value2,…etc…} where the keys are the number of columns and the values are the minimum required window size in pixels.

Example1:
1 column up to 480px (i.e., smartphones), 2 columns starting at 480px and 3 columns starting at 800px. Since 1 and 2 columns are the default values, we only need to specify 3 columns:
cols:{3:800}

Example2:
2 columns up to 480px, 4 columns starting at 480px and 6 columns starting at 920px.
cols:{2:0,4:480,6:920}

Default: {1:0,2:480}

flow is a string that specifies if the choices should be ordered in columns (like a newspaper) or rows. By default, flow is by column. To change to row use flow:"row".

Default: "column"

labelMargin is a string that specifies how content should be positioned in a choice “button”. Valid values are the same that are used in a CSS margin. The default is vertically centered and left justified. To center both vertically and horizontally use labelMargin:"auto".

Default: "auto 0px"

lastSpans is a number that specifies the number of last choices that should span across all columns.

Default: 0

rowGap is a string that specifies the amount of space between rows.

Default: "10px"

textAlign is a string that specifies the alignment of choice text within its parent container (i.e., a choice button).

Default: "left"

Qualtrics Wiki