Table of Contents
bpSliders - Bipolar or AHP Sliders
The bpSliders function converts a Qualtrics Slider question into Bipolar or AHP (Analytical Hierarchy Process) Sliders. Functionality includes:
- Support and automatic detection of Mobile and non-Mobile Friendly
- Control of minimum spacing between scale labels
- Turning display of the numeric scale on or off
- Optional suppression of numeric scale minus signs
- Repeating of numeric scale
- Highlighting of unanswered rows
This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.
Set-up Instructions
Question Settings
- Slider question
- Type: Sliders
- Custom Start Position: 0
- Scale Points: -X to X (common values for X are 5 or 10)
- Grid lines: 2X
- Mobile friendly: recommended
- Force response: recommended
Add Function To Survey
Add the bpSliders function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided bpSliders function JS:
<script>/*Paste bpSliders function JS here*/</script>
Alternatively, paste the bpSliders 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 bpSliders function to apply it to the Slider question as follows:
Qualtrics.SurveyEngine.addOnload(function() { bpSliders(this); });
To override the default options, specify the desired options in the second function argument as an object. For example:
Qualtrics.SurveyEngine.addOnload(function() { bpSliders(this,{showScale:true,repeatScale:3}); });
Slider Labels
Label each slider with its left and right labels using the span class bpsRight
like this:
Simple<span class="bpsRight">Complex</span>
Options
allowZero
allowZero specifies if zero (0) answers should be allowed. It works in conjunction with Qualtrics custom validation and highlightErrors. For AHP sliders, setting allowZero to false is recommended because AHP scales go from 1 to 9.
Default: true (on)
highlightErrors
highlightErrors turns highlighting of unanswered rows on or off.
Default: true (on)
highlightErrorStyle
highlightErrorStyle defines the CSS style used for highlighting unanswered rows.
Default: "2px dashed red"
lwidth
lwidth ONLY applies to non-mobile friendly sliders and specifies the width of the slider labels in pixels.
Default: 120
repeatScale
repeatScale defines how often the numeric scale should be repeated if showScale is true (e.g., repeatScale:3 means repeat every 3 rows). 0 (zero) turns repeat off.
Default: 0
separationPercent
separationPercent specifies the minimum amount of separation that should be maintained between scale labels as a percentage of the slider width.
Default: 24
showScale
showScale specifies whether the numeric scale should be displayed.
Default: false
suppressScaleMinus
suppressScaleMinus specifies whether numeric scale minus signs should be suppressed if showScale is true (e.g. a numeric scale that goes from -10 to 10).
Default: true
Recommended AHP Configuration
Below is the recommended setup for AHP (Analytical Hierarchy Process) sliders.
Question Configuration
- Custom start position: 0
- Scale points: -9 to 9
- Number of decimals: 0
- Grid lines: 18
- Show value: On
- Mobile friendly: On
Custom Validation
To not allow zeros, 'AND' the following for each row:
- Not Empty
- Not Equal to 0
bpSliders Function Call
bpSliders(this, { showScale: true, allowZero: false, repeatScale: 2 //repeatScale is optional });
Modify Scale
Add the following JS after the bpSliders function call to modify the scale to show only odd numbers:
jQuery("#"+this.questionId+" .numbers li").each(function() { var num = jQuery(this); if(parseInt(num.text().trim())%2 == 0) num.text("╷"); });