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:

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

The Free Format code:
  $(function () {
      range: "min",
      value: 0,
      min: 0,
      max: 100,
      slide: function (event, ui) {
  <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;">
<div id="slider-range-min"></div>
asked Feb 13, 2017 by dan r Bronze (2,240 points)
retagged Feb 13, 2017 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>
Location: <span id="locationSpan"></span>

    $('#[% QuestionName() %]_div .ui-slider').on('slide', function(event, ui){
        var resp = ui.value;
        $('#locationSpan').text(100 - resp);
answered Feb 13, 2017 by Zachary Platinum Sawtooth Software, Inc. (151,250 points)
selected Feb 13, 2017 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:

$('#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