Inhaltsverzeichnis

Slider

This question type is based on the slider control on a mixing console: the participant can move a button within a defined range. Both the range and the button can be freely customized. This is what makes the slider a multifacted question type – it allows the participant to use visually appealing scale formats, sophisticated setting measurements (see VAS below), a thermometer or a ladder to indicate their level of preference.

 Examples of Sliders

The slider can be used as a continuous scale (normally a range of 1 to 101) or a certain number of levels can be specified.

Note: Sliders are displayed in the questionnaire using JavaScript. If the participant has deactivated JavaScript, the programme shows an alternative display with 11 selection fields – if a lower differentiation was specified in the question, fewer fields will be shown.

Visual Analogue Scale (VAS)

You can find a special form of slider in the question templates: the visual analogue scale. This type of slider is made up of a plain line and respondents indicate their answer by moving the mouse pointer to the desired position on the slider.

As a rule, analogue scales provide more accurate data than the classic 5 or 7-point scales. They are also well-suited for bringing diversification into the questionnaire. However, the response time for each item is twice as long as when a 5-point scale is used.

User-Defined Slider

Each slider consists of two components: a scale (the background) and the slider button (the part that moves). For both components, there is a range of graphics ready to choose from, which can be selected in Graphic for scale and Graphic for slider button.

If you use the predefined scales, as a rule, you do not have to worry where to place the slider button. This will be automatically adjusted.

There is also the option to use your own graphics as a scale and/or slider button:

JavaScript Reference

The slider feature is powered by the JavaScript Class SoSciSliders. The following methods are available. They are explained in examples below.

A single slider as returned by SoSciSliders.getSlider() is of class Slider. This class has the following attributes and methods:

For example, the following HTML/JavaScript code (JavaScript in the Questionnaire) will forward the participant to the next page directly after clicking on the first item of the slider question „AB01“ if a valid value has been selected.

<script type="text/javascript">
// The slider will not be available before the page has been loaded
SoSciTools.attachEvent(window, "load", function() {
  var slider = SoSciSliders.getSlider("AB01_01");
  // The "click" event will fire when the respondents moves the slider
  slider.addEventListener("click", function() {
    if (slider.getValue() > 0) {
      SoSciTools.submitPage();
    }
  });
});
</script>

Display the Current Position

A slider may display the current position (in percent) above, below, or beside the slider button. Use the option Display value to enable this feature.

Using a bit JavaScript, you may display something different than the percent value. First, you need a function to convert the internal value into the text to display.

Note: The internal value is between 1 and the Differentiation defined for the slider (default 101). The internal value may be a floating number as the slider moves seamless, if the differentiation is more than 20.

Note: Enable the option Display value to show any text next to the slider button at all.

Example 1

This HTML/JavaScript code transposes the value of 1-101 to 0-20, rounds to an integer, and adds a dollar sign.

<script type="text/javascript">
<!--
formatter = function(value, reversed) {
  if (value < 0) return "";
  return String(Math.round((value - 1) / 100 * 20)) + " $";
}
SoSciSliders.setFormat(formatter);
// -->
</script>

You may save the code as text element and place it on the questionnaire page, or you may write it into an element HTML code that is placed on the page. The code must be placed below the question.

If you do not want all sliders on the page changed (in the same way), you may specify the slider in the second parameter of the JavaScript function SoSciSliders.setFormat():

SoSciSliders.setFormat(formatter, "AB01_02");
SoSciSliders.setFormat(formatter, "AB01_03");

Note: If you use the JavaScript code above and do not specify the items individually, the formatting function is then applied to all simultaneously visible sliders, not only to those of the respective page. The print preview of the questionnaire (proof and completed questionnaires) may therefore be incorrect.

Tip: The name formatter used for the formatting function was chosen arbitrarily. You may define different functions to display different values in different sliders.

Example 2

This JavaScript code (it has to be places within a <script> tag as the code above) displays a number between -25.0°C and +25.0°C. The JavaScript method toFixed() takes care of the decimal place.

formatter = function(value) {
  if (value < 0) return "";
  var text = ((value - 51) / 50 * 25).toFixed(1) + "°C";
  if (value > 51) {
    text = "+" + text;
  }
  return text;
}
SoSciSliders.setFormat(formatter);

Example3

Using JavaScript, displaying of the position may also be disabled for single sliders. This HTML/JavaScript code disables the display for the second slider of question „AB01“.

<script type="text/javascript">
<!--
SoSciSliders.setDisplay(null, "AB01_02");
// -->
</script>

Example 4

Maybe, you need to adjust the position of the displayed value. To do so, you need to define a function returning the desired position of the label (center x, y) and its alignment (align) as object. This function receives 6 parameters: The position of the slider button (center x, y), the relative position on the scale (range 0 to 1), the label's width and height, and the index of the slider button – in case a secondary button is enabled.

This JavaScript code (it need to be nested within a <script> tag, see above) displays labels in slider „AB01_01“, placing the label of the first button on the upper left of this button, and the second button's label on its upper right.

function positioner(x, y, position, width, height, button) {
  if (button == 0) {
    return {
      x:x - width / 2,
      y:y - 20,
      align:"right"
    }
  } else {
    return {
      x:x + width / 2,
      y:y - 20,
      align:"left"
    }
  }
}
 
SoSciSliders.setDisplay(positioner, "AB01_01");

Keyboard Input

You may want to connect a text input (e.g., from the question types „Text Inputs“ or „Cloze Text“) with the slider.

If the slider (e.g., „SR01_01“) and the text input (e.g., „TE01_01“) are placed on the same questionnaire page, add a text element with the subsequent content (formatting: „HTML code“):

<script type="text/javascript">
<!--
 
SoSciTools.attachEvent(window, "load", function() {
  SoSciSliders.getSlider("SR01_01").attachInput("TE01_01");
});
 
// -->
</script>

Advice: The JavaScript function attachInput() expects the HTML ID of the text input as parameter.

Tip: Use the function prepare_input() and a placeholder to place the text input anywhere on the questionnaire page.

Attach a don't know option

The templates for slider questions (to be found at New Question) already provides sliders with a „don't know“ (DK) option. Yet, they support only one-sided sliders, and only one DK option per slider.

This example shows how to employ multiple DK options per slider. To do so, a slider is combined with a fully-labelled scale (Combined Questions). For the example, the slider has the ID „AB01“ and the scale, containing 3 options, has the ID „AB02“. While the first option (code 1) indicates a selection in the slider, the other both options (codes 2 and 3) shall disable the slider.

Tip: If you prefer not to display a third option for the active slider, please go to Compose Questionnaire → tab Settings and enable the option that allows respondents to se-select selected options.

 Slider with 2 SK options

This PHP and HTML/JavaScript code is required for the combined question.

question('AB01', 'combine=AB02');

The JavaScript code shall be stored as text element. Important: Before the JavaScript the HTML code <script type="text/javascript"> is required, and below </script>, to embed the JavaScript in HTML.

// Define questions
var sliderID = "AB01";
var scaleID = "AB02";
// Define items to tune
var items = [1,2,3];
// Define scale options to disable the slider
var scaleDK = [2,3];
// Define scale options to enable the slider
var scaleVA = [1];
// Remember slider values before disabling
var sliderValues = []
 
// Convenience function
function makeID(questionID, item, option) {
  var itemID = String(item);
  if (itemID.length < 2) {
    itemID = "0" + itemID;
  }
  var itemFull = questionID + "_" + itemID;
  if (!option) {
    return itemFull;
  }
  return itemFull + option;
}
 
// Function to care about setting the correct values
function refreshSlider(item, status) {
  var slider = SoSciSliders.getSlider(makeID(sliderID, item));
  // Optionally reset slider value
  if (status) {
    if ((slider.value == -9) && sliderValues[item]) {
      slider.value = sliderValues[item];
    }
  } else {
    sliderValues[item] = slider.value;
    slider.value = -9;
  }
  // Optionally disable slider
  slider.disabled = !status;
}
 
// Function to select the (first) enabled-option if slider is used
function refreshScale(item) {
  if (scaleVA.length < 1) {
    return;
  }
  var slider = SoSciSliders.getSlider(makeID(sliderID, item));
  if (slider.value > 0) {
    var option = scaleVA[0];
    var scaleOption = document.getElementById(makeID(scaleID, item, option));
    scaleOption.checked = true;
  }
}
 
// Attach events to the scale
SoSciTools.attachEvent(window, "load", function() {
 
  for (var ii=0; ii<items.length; ii++) {
    var item = items[ii];
    for (var io=0; io<scaleDK.length; io++) {
      var option = scaleDK[io];
      var scaleOption = document.getElementById(makeID(scaleID, item, option));
      // This one employs a closure
      SoSciTools.attachEvent(scaleOption, "click", function(item, status) {
        return function(evt) {
          refreshSlider(item, status);
        }
      }(item, false));
    }
    // Same for enabling options
    for (var io=0; io<scaleVA.length; io++) {
      var option = scaleVA[io];
      var scaleOption = document.getElementById(makeID(scaleID, item, option));
      // This one employs a closure
      SoSciTools.attachEvent(scaleOption, "click", function(item, status) {
        return function(evt) {
          refreshSlider(item, status);
        }
      }(item, true));
    }
    // And also attach event to the sliders
    var slider = SoSciSliders.getSlider(makeID(sliderID, item));
    slider.addEventListener("click", function(item) {
      return function(evt) {
        refreshScale(item);
      }
    }(item));
  }
 
});

References

Funke, Frederik. (2010). Internet-based measurement with visual analogue scales: An experimental investigation (Internetbasierte Messungen mit visuellen Analogskalen: Eine experimentelle Untersuchung). Dissertation. Available online