====== mcColumns - Make multiple choice questions responsive (i.e., automatically adjust for window size) ======
The mcColumns function automatically arranges multiple choice choices into columns based on the browser's window size. Here is a quick video demonstration:\\
{{ ::mccolumns_demo.mp4?650 |mcColumns Demo}}\\

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 **[[https://community.qualtrics.com/inbox/conversation?with=373|TomG]]** on the Qualtrics Community to learn more.

===== Set-up Instructions =====
==== Survey Header ====
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 -> {{::icon_source.jpg?20|}} and paste the provided mcColumns function JS:
<code>
<script>/*Paste mcColumns function JS here*/</script>
</code>
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.
==== Theme Width (optional) ====
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:
<code>
@media (min-width:1024px){
.Skin .SkinInner{width:1024px;max-width:95%}
}
@media (min-width:1280px){
.Skin .SkinInner{width:1280px;max-width:95%}
}
</code>
==== Multiple Choice Question ====
=== Question Settings ===
In the Multiple Choice question settings, "Answers" should be set to either "Single Answer" or "Multiple Answer" and "Position" should be set to "Vertical".
=== Question JavaScript ===
Add JS to call the mcColumns function to apply it to the Multiple Choice question as follows:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mcColumns(this);
});
</code>

To override the default options, specify the desired **[[mccolumns#options|options]]** in the second function argument as an object. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mcColumns(this,{cols:{3:640,4:800},flow:"row"});
});
</code>
===== Options =====
==== colGap ====
**colGap** is a string that specifies the amount of space between columns.

Default: %%"10px"%%
==== cols ====
**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 ====
**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 ====
**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 ====
**lastSpans** is a number that specifies the number of last choices that should span across all columns.

Default: 0
==== rowGap ====
**rowGap** is a string that specifies the amount of space between rows.

Default: %%"10px"%%
==== textAlign ====
**textAlign** is a string that specifies the alignment of choice text within its parent container (i.e., a choice button).

Default: %%"left"%%
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]