====== mfCsSliders - Mobile-friendly Constant Sum Sliders ======
The **mfCsSliders** function converts a Qualtrics Slider question into a Mobile-friendly constant sum slider question. This function was created because Qualtrics constant sum sliders are **NOT** mobile-friendly. 

Functionality includes:\\
  * Optionally turn "must total" on or off
  * Set "must total" to any amount
  * Dynamic total calculation with visual indicators when equal to or over "must total" amount
  * Supports addition of prefixes or suffixes to numeric values (%, $, etc.)
  * Supports formatting of scale style

Example:\\
{{ ::mfcssliders.mp4?800 |mfCsSliders Example}}

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.
===== Set-up Instructions =====
==== Add Function To Survey ====
Add the mfCsSliders 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 mfCsSliders function JS:
<code>
<script>/*Paste mfCsSliders function JS here*/</script>
</code>
Alternatively, paste the mfCsSliders function JS into a question's JS __outside__ the existing Qualtrics functions to make it available to questions on the page.
==== JavaScript Function Call ====
Add JS to call the mfCsSliders function to apply it to the Slider question as follows:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mfCsSliders(this);
});
</code>

To override the default options, specify the desired **[[mfcssliders#Options|options]]** in the second function argument as an object. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mfCsSliders(this,{mustTotalFlag:false});
});
</code>
==== Question Settings ====
  * Slider question
  * Type: Sliders
  * Custom Start Position: Off
  * Scale Points: 0 to 100 (or some other max)
  * Show value: Off
  * Mobile friendly: On
==== Custom Validation ====
If **[[mfcssliders#mustTotalFlag|mustTotalFlag]]** is true, then custom validation should be added. One validation condition is needed - the first slider should equal the **[[mfcssliders#mustTotalAmt|mustTotalAmt]]** minus remaining sliders. Use a math expression to the right of the "Is Equal to" condition something like:
<code>
$e{ 100 - q://QID1/ChoiceNumericEntryValue/2 - q://QID1/ChoiceNumericEntryValue/3 }
</code>
When the rows of the slider are conditional through the use of carry forward, display logic, or advanced randomization it may be necessary to use a hidden text entry question immediately after the slider question and base the slider custom validation on that question. The following code can be used to update the text entry question with the slider total:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mfCsSliders(this);
	var q = jQuery("#"+this.questionId);
	Qualtrics.SurveyEngine.addOnPageSubmit(function() {
		var sum = 0;
		q.find(".ResultsInput").each(function() { sum += Number(this.value) });
		q.nextAll(".QuestionOuter:first").find(".InputText").val(sum);
	});
});
</code>

===== Options =====
==== labelStyle ====
**labelStyle** is an object that specifies css style of the scale labels.

Default: %%{"font-weight":"bold"}%%
==== mustTotalAmt ====
**mustTotalAmt** is a numeric value that specifies what the constant sum must total to when **[[mfcssliders#mustTotalFlag|mustTotalFlag]]** is true.

Default: 100
==== mustTotalFlag ====
**mustTotalFlag** is a boolean that specifies if the constant sum must total to a specific value.

Default: true
==== prefix ====
**prefix** is text that is shown before numeric values.

Default: %%""%%
==== suffix ====
**suffix** is text that is show after numeric values.

Default: %%"%"%%
==== widths ====
**widths** is the width of the constant sum numbers in ems. An 'em' is the width of a wide character (i.e., M).

Default: 3
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]