Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Chip Allocation using Free Format slider or Semantic Differential Question

I am trying (in L/Studio) to use a Free Format slider or a Semantic  Differential  Question to do the following:

Person has 100 chips to allocate between 2 attributes of a job (Location, Specialism).

As they drag the slider (which starts midway) between the 2 attributes, the value of the chips allocated to them  (X and 100-X) are displayed.

I can partly achieve this with either  Q type but neither one is quite giving me what I want:

The Free Format (code below):
•    displays the points allocated to Location but not Specialism
•    doesn’t have the labels at each end
•    doesn’t start midway
•    has rather washed out colours

The Semantic  Differential  Question:
•    doesn’t display the points allocated to either Location or Specialism

You can see the 2 attempts at:
https://ssiweb.humanities.manchester.ac.uk/slideralloc

Can anyone help achieve the aim, using either Q format?
thanks
Dan


The Free Format code:
<script>
  $(function () {
    $("#slider-range-min").slider({
      range: "min",
      value: 0,
      min: 0,
      max: 100,
      slide: function (event, ui) {
        $("#slider_value").val(ui.value);
      }
    });
  });
</script>
 
<p>
  <label for="amount">Points Allocated to Location:</label>
  <input name="slider_value" type="text" id="slider_value" style="border:0; color:#f6931f; font-weight:bold;">
   <label for="amount">Points Allocated to Specialism:</label>
  <input name="slider_value" type="text" id="slider_value" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>
asked Feb 13 by dan r Bronze (1,550 points)
retagged Feb 13 by Walter Williams

1 Answer

+1 vote
 
Best answer
You've got a great start.  If you want to go the semantic diff route, all you need to do is attach a function to the "slide" event of the semantic diff.  Here's an example:

Specialism: <span id="specialismSpan"></span>
<br/>
Location: <span id="locationSpan"></span>

<script>
$(window).load(function(){
    $('#[% QuestionName() %]_div .ui-slider').on('slide', function(event, ui){
        var resp = ui.value;
        $('#specialismSpan').text(resp);
        $('#locationSpan').text(100 - resp);
    });
})
</script>
answered Feb 13 by Zachary Platinum Sawtooth Software, Inc. (63,900 points)
selected Feb 13 by dan r
that's done it,
thanks Zachary
You're welcome.  As an aside, I noticed that you have repeated IDs in your free format HTML.  Best practice is to avoid this: classes can be repeated, IDs ought to be unique.  If I was to go your free format route, I'd give those two HTML elements unique IDs, then give the slide event code like this:

$('#id1').val(ui.value);
$('#id2').val(100 - ui.value);


Just something you can keep in mind next time you're writing HTML for a survey.
thanks for the tip
Dan
...