Differences

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

--- mfcssliders [2022/09/05 11:30] – [mfCsSliders - Mobile-friendly Constant Sum Sliders] admin
+++ mfcssliders [2025/02/19 11:26] (current) – [Custom Validation] admin
@@ Line 1: / Line 1: @@
 ====== 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:
+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.
-  * Support and automatic detection of Mobile and non-Mobile Friendly
-  * Control of minimum spacing between scale labels
+Functionality includes:\\
-  * Turning display of the numeric scale on or off
+  * Optionally turn "must total" on or off
-  * Optional suppression of numeric scale minus signs
+  * Set "must total" to any amount
-  * Repeating of numeric scale
+  * Dynamic total calculation with visual indicators when equal to or over "must total" amount
-  * Highlighting of unanswered rows
+  * 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.
+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 ====
-To make the function available to all questions in the survey, copy the function to the Survey Header inside a script tag:
+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:
-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>
@@ Line 28: / Line 28: @@
 </code>
-To override the default options, specify the desired options in the second function argument as an object. For example:
+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,{});
+	mfCsSliders(this,{mustTotalFlag:false});
 });
 </code>
@@ Line 42: / Line 42: @@
   * 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:
+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"}
+Default: %%{"font-weight":"bold"}%%
 ==== mustTotalAmt ====
-**mustTotalAmt** is a numeric value that specifies what the constant sum must total to when mustTotalFlag is true.
+**mustTotalAmt** is a numeric value that specifies what the constant sum must total to when **[[mfcssliders#mustTotalFlag|mustTotalFlag]]** is true.
 Default: 100
@@ Line 62: / Line 75: @@
 **prefix** is text that is shown before numeric values.
-Default: ""
+Default: %%""%%
 ==== suffix ====
 **suffix** is text that is show after numeric values.
-Default: "%"
+Default: %%"%"%%
 ==== widths ====
-**widths** is the width of the constant sum numbers in ems (an 'em' is a wide character).
+**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]]