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/17 09:24] 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 allows 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. the **dualSidedSlider** function supports:+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:
  
-  * Not Applicable+  * Not Applicable option
   * Allocations other than percentage   * Allocations other than percentage
-  * Randomization+  * Item randomization 
 +  * Mobile devices
  
 Here is a quick video demonstration:\\ Here is a quick video demonstration:\\
Line 18: Line 19:
   * One row - the row label can be any text and won't be displayed   * One row - the row label can be any text and won't be displayed
   * Two labels - the two items being compared   * Two labels - the two items being compared
-=== Text Form Qustion ===+  * 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 24: 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 33: 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** specifies the character(s) to shown after the value.+**after** specifies the character(s) to show after the value.
  
-Default: %+Default: %%"%"%%
 ==== debug ==== ==== debug ====
 **debug** turns 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.
Line 56: Line 66:
  
 Default: false Default: false
 +====== Qualtrics Wiki ======
 +[[start|Qualtrics Wiki]]
dualsidedslider.1650201861.txt.gz · Last modified: by admin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki