====== 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

Bipolar examples:\\
{{ ::bpsliders_example.png?600 |bpSliders Bipolar Examples}}

AHP example:\\
{{ ::ahp_example.png?600 |bpSliders AHP Example}}

This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/inbox/conversation?with=373|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 -> {{::icon_source.jpg?20|}} and paste the provided bpSliders function JS:
<code>
<script>/*Paste bpSliders function JS here*/</script>
</code>
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:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	bpSliders(this);
});
</code>

To override the default options, specify the desired **[[bpsliders#Options|options]]** in the second function argument as an object. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	bpSliders(this,{showScale:true,repeatScale:3});
});
</code>
==== Slider Labels ====
Label each slider with its left and right labels using the span class ''bpsRight'' like this:
<code>
Simple<span class="bpsRight">Complex</span>
</code>
===== Options =====
==== allowZero ====
**allowZero** specifies if zero (0) answers should be allowed. It works in conjunction with Qualtrics custom validation and **[[bpsliders#highlightErrors|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 **[[bpsliders#showScale|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 **[[bpsliders#showScale|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 ==== 
<code>
bpSliders(this, {
	showScale: true,
	allowZero: false,
	repeatScale: 2 //repeatScale is optional
});
</code>
==== Modify Scale ====
Add the following JS after the bpSliders function call to modify the scale to show only odd numbers:
<code>
jQuery("#"+this.questionId+" .numbers li").each(function() {
	var num = jQuery(this);
	if(parseInt(num.text().trim())%2 == 0) num.text("╷");
});
</code>
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]