Differences

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

--- dualsidedslider [2022/04/16 11:47] – created admin
+++ dualsidedslider [2023/06/20 07:14] (current) – [Set-up Questions] admin
@@ Line 1: / Line 1: @@
-====== dualSidedSlider- Slider for comparison between two ======
+====== dualSidedSlider- Slider for trade-off between two items ======
-The **dualSidedSlider** function allow for the measurement of trade-offs between two items. It automatically allocates percentages (or some other allocation) to two items when the slider is moved and records both values. Functionality includes:
+The **dualSidedSlider** function allows for the measurement of the trade-off between two items. It automatically allocates percentages (or some other allocation) to two items when the slider is moved and records both values. The **dualSidedSlider** function supports:
-  * Supports 'Not Applicable'
-  * Support allocations other than percentage
+  * Not Applicable option
+  * Allocations other than percentage
+  * Item randomization
+  * Mobile devices
 Here is a quick video demonstration:\\
@@ Line 12: / Line 13: @@
 ===== Set-up Instructions =====
+==== Set-up Questions ====
+**dualSidedSlider** requires two questions, a Slider question followed immediately by a Form Field question that will be hidden from the respondent.
+=== Slider Question ===
+Requirements for the Slider question:
+  * One row - the row label can be any text and won't be displayed
+  * Two labels - the two items being compared
+  * Scale must start at zero
+  * Show value on
+  * Mobile friendly off (dualSidedSlider is still mobile compatible even though Mobile friendly is turned off)
+  * Start position at midpoint
+=== Text Form Question ===
+Requirements for the Form Field question:
+  * Must immediately follow Slider question
+  * Two fields
+  * First field must match left label in Slider question
+  * Second field must match right label in Slider question
 ==== Add Function To Survey ====
 Add the **dualSidedSlider** function to the survey header to make it available to any page/question in the survey. Go to Look & Feel -> General -> Header edit -> {{::icon_source.jpg?20|}} and paste the provided freezeTopQ function JS:
@@ Line 17: / Line 34: @@
 <script>/*Paste dualSidedSlider function JS here*/</script>
 </code>
-Alternatively, paste the dualSidedSlider function JS into a question's JS __outside__ the existing Qualtrics functions to make it available to questions on the page.
+Alternatively, paste the dualSidedSlider function JS into a slider 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 dualSidedSlider function to apply it to the first question on a page (the question to be frozen at the top) as follows:
+Add JS to call the dualSidedSlider function to apply it to the slider question as follows:
 <code>
 Qualtrics.SurveyEngine.addOnload(function() {
@@ Line 26: / Line 43: @@
 </code>
-To adjust top or bottom question padding, specify the desired options in the second function argument as an object. For example:
+To change the default **[[dualsidedslider#Options|options]]**, specify the desired options in the second function argument as an object. For example:
 <code>
 Qualtrics.SurveyEngine.addOnload(function() {
-	freezeTopQ(this,{paddingTop:"5px",paddingBottom:"5px"});
+	dualSidedSlider(this,{max:10,after:"&nbsp;",random:true});
 });
 </code>
 ===== Options =====
-==== paddingBottom ====
+==== after ====
-**paddingBottom** specifies the bottom padding of the first question.
+**after** specifies the character(s) to show after the value.
+Default: %%"%"%%
+==== debug ====
+**debug** turns on debug mode to see the values captured in the hidden question.
+Default: false
+==== max ====
+**max** specifies the scale maximum (should match the slider scale maximum).
-Default: theme default
+Default: 100
-==== paddingTop ====
+==== random ====
-**paddingTop** specifies the top padding of the first question.
+**random** turns on randomization, which randomly flips the left and right items.
-Default: theme default
+Default: false
+====== Qualtrics Wiki ======
+[[start|Qualtrics Wiki]]