Semantic Differential: display values ; 2 handles on one slider?

I am trying to use a Semantic Differential question to implement a Dictator Game scenario

Assume an initial monetary amount: \$10
For the Semantic Differential question:
Left end = keep all \$10 for me, none to other player
Right end = keep \$0 for me, \$10 to other player

The Scale Anchor Text would show the amount the respondent keeps:
\$10, \$9, \$8,………….\$1,\$0

I want to ask 2 questions –
•    What’s the maximum you want to keep
•    What’s the minimum you want to keep

I can do this with a SD question (‘split’) which has 1 Handle on 2 sliders (max, min), see:
http://ssiweb.humanities.manchester.ac.uk/dictat

Ideally what I would have is:
•    2 Handles on a single slider, to show Max and Min respectively
•    and the gap between the 2 sliders shaded in colour (to show the acceptable range)
•    the Max and Min values displayed

Less ambitiously:
•    Keep the slider on 2 separate scales (as is)
•    Have the Max and Min values displayed

I have specified the Saved Values as running from 100 – 0, so each unit is a £0.1 increment.
If someone choose the leftmost point, that’s a value of 100, =£10, one increment in is 99=£9.90

In either case I will need to verify that Max >= Min (split_2 >=  split_1).

Anyone able to help with either option?

thanks
Dan

Hi Dan,

Our Semantic Diff tool does not currently support ranged responses.  Instead, I would recommend you use the jQuery UI slider tool.

To start, create a free format question.  It should have two hidden, decimal variables named "Min" and "Max."  The free format's HTML should be set to this:

<div>Range: £<span id="sliderMin">0.00</span> - £<span id="sliderMax">10.00</span></div>

<div id="slider"></div>
<input name="FreeFormatQ_Min" id="FreeFormatQ_Min" type="hidden" value="0">
<input name="FreeFormatQ_Max" id="FreeFormatQ_Max" type="hidden" value="10">

<script>
\$(function(){
\$('#slider').slider({
range: true,
min: -10,
max: 0,
step: 0.1,
values: [-10, 0],
slide: function(event, ui) {
var sliderMin = ui.values[0];
var ffMax = Math.abs(sliderMin);
\$('#FreeFormatQ_Max').val(ffMax);
\$('#sliderMax').text(ffMax.toFixed(2));

var sliderMax = ui.values[1];
var ffMin = Math.abs(sliderMax);
\$('#FreeFormatQ_Min').val(ffMin);
\$('#sliderMin').text(ffMin.toFixed(2));
}
})
})
</script>

"FreeFormatQ" should be replaced with the name of your free format's question.

I haven't put any effort into making the question look nice CSS-wise yet, but the base functionality is all there.
answered Sep 20, 2016 by Platinum (91,500 points)
selected Sep 21, 2016 by dan r
Thanks Zachary, this works really well

Dan