User Tools

Site Tools


dualsidedslider

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
dualsidedslider [2022/04/16 15:58] admindualsidedslider [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' +  * Not Applicable option 
-  * Support allocations other than percentage+  * Allocations other than percentage 
 +  * Item randomization 
 +  * Mobile devices
  
 Here is a quick video demonstration:\\ Here is a quick video demonstration:\\
Line 11: Line 13:
  
 ===== Set-up Instructions ===== ===== 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 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: 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 16: Line 34:
 <script>/*Paste dualSidedSlider function JS here*/</script> <script>/*Paste dualSidedSlider function JS here*/</script>
 </code> </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 ==== ==== 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> <code>
 Qualtrics.SurveyEngine.addOnload(function() { Qualtrics.SurveyEngine.addOnload(function() {
Line 25: Line 43:
 </code> </code>
  
-To change the default option (i.e., the scale), 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> <code>
 Qualtrics.SurveyEngine.addOnload(function() { Qualtrics.SurveyEngine.addOnload(function() {
- dualSidedSlider(this,{max:10,after:"&nbsp;"});+ dualSidedSlider(this,{max:10,after:"&nbsp;",random:true});
 }); });
 </code> </code>
 ===== Options ===== ===== Options =====
 ==== after ==== ==== after ====
-**after** the character(s) to shown after the value.+**after** specifies the character(s) to show after the value.
  
-Default: %+Default: %%"%"%%
 ==== debug ==== ==== debug ====
-**debug** turn on debug mode to see the values captured in the hidden question.+**debug** turns on debug mode to see the values captured in the hidden question.
  
 Default: false Default: false
 ==== max ==== ==== max ====
-**max** the scale maximum (should match the slider scale maximum).+**max** specifies the scale maximum (should match the slider scale maximum).
  
 Default: 100 Default: 100
 +==== random ====
 +**random** turns on randomization, which randomly flips the left and right items.
 +
 +Default: false
 +====== Qualtrics Wiki ======
 +[[start|Qualtrics Wiki]]
dualsidedslider.1650139088.txt.gz · Last modified: by admin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki