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

Here is an example:

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

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 → and paste the provided mfBipolarMatrix function JS:

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

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.

Be sure to uncheck the Mobile Friendly option.

Add JS to call the mfBipolarMatrix function to apply it to the Bipolar Matrix question as follows:

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

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

Qualtrics.SurveyEngine.addOnload(function() {
	mfBipolarMatrix(this, {mfChoiceSeparation:10,repeatLabels:3});	
});

bottomLabels copies labels to the bottom of the question when true.

Default: false

loop is for use when looping through the bipolar statement pairs. When loop is true, it works in conjunction with bottomLabels to show labels on top in desktop mode and on the bottom in mobile mode.

Default: false

mfChoiceMarginTop specifies the amount of space before each statement row in mobile friendly mode.

Default: 10px

mfChoiceSeparation specifies the minimum amount of separation between left and right statements as a percentage in mobile friendly mode.

Default: 15 (percent)

minDesktopWidth 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 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