====== mfBipolarMatrix - Mobile friendly bipolar matrix ======
The **mfBipolarMatrix** function converts a Qualtrics Bipolar Matrix into a Mobile Friendly Bipolar Matrix. When the browser window size is below a specified threshold (481px by default), the Bipolar Matrix is re-formatted to be mobile friendly. The format is completely different than checking the Qualtrics "Mobile Friendly" checkbox which makes a Bipolar Matrix unusable on a mobile device.

Functionality includes:
  * Dynamically re-formats bipolar matrix question when window size changes.
  * Minimum 'desktop' window size can be specified.
  * Amount of separation between left and right statements can be specified.
  * Amount of space between statement rows can be specified.
  * Supports repeating of labels in middle and on bottom
  * Compatible with **[[matrixhighlightunanswered|matrixHighlightUnanswered]]**

Here is an example:\\
{{ ::mfbipolarmatrix_example.png?800 |mfBipolarMatrix Example}}

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 =====
==== Add Function To Survey ====
To make the function available to all questions in the survey, copy the function to the Survey Header inside a script tag.  Go to Look & Feel -> General -> Header edit -> {{::icon_source.jpg?20|}} and paste the provided mfBipolarMatrix function JS:
<code>
<script>/*Paste mfBipolarMatrix function JS here*/</script>
</code>
Alternatively, paste the mfBipolarMatrix function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.
==== Bipolar Matrix Question Settings ====
Be sure to __uncheck__ the Mobile Friendly option.
==== JavaScript Function Call ====
Add JS to call the mfBipolarMatrix function to apply it to the Bipolar Matrix question as follows:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mfBipolarMatrix(this);
});
</code>

To override the default options, specify the desired **[[mfbipolarmatrix#Option|options]]** in the second function argument as an object. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mfBipolarMatrix(this, {mfChoiceSeparation:10,repeatLabels:3});	
});
</code>
===== Options =====
==== bottomLabels ====
**bottomLabels** is a boolean that copies labels to the bottom of the question when true.

Default: false
==== loop ====
**loop** is a boolean used when looping through the bipolar statement pairs. When **loop** is true, it works in conjunction with **[[mfbipolarmatrix#bottomLabels|bottomLabels]]** to show labels on top in desktop mode and on the bottom in mobile mode.

Default: false
==== mfChoiceMarginTop ====
**mfChoiceMarginTop** is a string that specifies the amount of space before each statement row in mobile friendly mode.

Default: 10px
==== mfChoiceSeparation ====
**mfChoiceSeparation** is a number that specifies the minimum amount of separation between left and right statements as a percentage in mobile friendly mode.

Default: 15 (percent)
==== minDesktopWidth ====
**minDesktopWidth** is a whole number that specifies the minimum desktop window width in pixels. If the window is below minimum width specified the question will be formatted as mobile friendly.

Default: 481 (pixels)
==== repeatLabels ====
**repeatLabels** is a whole number that specifies how often the labels should be repeated (e.g., repeatLabels:3 means repeat every 3 rows). 0 (zero) turns repeat off.

Default: 0 (repeat off)
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]