Differences

This shows you the differences between two versions of the page.

--- mccolumns [2022/09/22 12:30] – admin
+++ mccolumns [2024/11/21 11:10] (current) – [landscapeWidth] admin
@@ Line 1: / Line 1: @@
-====== mcColumns - Make multiple choice questions responsive ======
+====== 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}}\\
@@ Line 5: / Line 5: @@
 Functionality includes:
   * Automatic placement and sizing of choices into columns
-  * Flexible control of number of 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/XMcommunity/messages/add/TomG|TomG]] on the Qualtrics Community to learn more.
+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 =====
@@ Line 41: / Line 42: @@
 </code>
-To override the default options, specify the desired [[mccolumns#options|options]] in the second function argument as an object. For example:
+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() {
@@ Line 48: / Line 49: @@
 </code>
 ===== Options =====
-==== buttons ====
-**buttons** specifies whether the Qualtrics theme being used has choices styled as buttons or not. All recent standard Qualtrics themes style choices as buttons. Some older "radio button and checkbox" themes do not.
-Default: true
 ==== colGap ====
-**colGap** specifies the amount of space between columns.
+**colGap** is a string that specifies the amount of space between columns.
-Default: "10px"
+Default: %%"10px"%%
 ==== cols ====
-**cols** specifies the number of columns based on the window size.  It is specified as an object 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.
+**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://\\
@@ Line 69: / Line 66: @@
 Default: {1:0,2:480}
 ==== flow ====
-**flow** 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"''.
+**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"
+Default: %%"column"%%
+==== forceLandscape ====
+**forceLandscape** is a boolean used to force mobile users to rotate their device to landscape mode. When true, if the browser window size is less than or equal to **[[mccolumns#landscapeWidth|landscapeWidth]]** the choices are hidden. **forceLandscape** should be used in conjunction with a CSS media rule that displays a message notifying the respondent to rotate their device.
+Default: false
 ==== labelMargin ====
-**labelMargin** specifies how content should be positioned in a choice "button" (when [[mccolumns#buttons|buttons]] is true). 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"''.
+**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"%%
+==== landscapeWidth ====
+**landscapeWidth** is a number specifying the window width in pixels that must be surpassed to be in landscape mode when **[[mccolumns#forceLandscape|forceLandscape]]** is true.
+Default: 480
+==== lastSpans ====
+**lastSpans** is a number that specifies the number of last choices that should span across all columns.
-Default: "auto 0px"
+Default: 0
 ==== rowGap ====
-**rowGap** specifies the amount of space between rows.
+**rowGap** is a string that specifies the amount of space between rows.
-Default: "1px"
+Default: %%"10px"%%
 ==== textAlign ====
-**textAlign** specifies the alignment of choice text within its parent container (i.e., a choice button).
+**textAlign** is a string that specifies the alignment of choice text within its parent container (i.e., a choice button).
-Default: "left"
+Default: %%"left"%%
 ====== Qualtrics Wiki ======
 [[start|Qualtrics Wiki]]