Zu Hauptinhalten wechseln

FV Decipher Unterstützung

Alle Themen, Ressourcen für FV Decipher benötigt.

 
decipher

Customizing the Slider Points Element

Overview

The slider points element transforms a select question into a slider track with points for each choice. This style is mobile friendly and enables respondents to easily make a selection between choices.

sliderpoints_default.png

The slider points element is versatile and allows you to include images and descriptive legend text. You can customize it further with CSS and the numerous attributes available.

1: Underlying Question Architecture

This dynamic style sits on top of a <select> question. See below for an example of the base XML code needed.

Base XML

<select label="Q1" optional="0">
 <title>
   <p>Please indicate how appealing you find the below message.</p>
   <p><i>Defend the American Dream</i></p>
 </title>
 <comment>Drag the slider to a point on the scale.</comment>
   <choice label="ch1">Very unappealing</choice>
   <choice label="ch2">Somewhat unappealing</choice>
   <choice label="ch3">Neither appealing nor unappealing</choice>
   <choice label="ch4">Somewhat appealing</choice>
   <choice label="ch5">Very appealing</choice>
</select>

The XML code above produces the following result:

sliderpoints_base.png

2: Converting to the Slider Points Element

To add the slider points style to this question, update the <select> tag as shown below:

<select label="Q1" optional="0" uses="sliderpoints.3">

This change produces the following result:

sliderpoints_default.png

That's all it takes to transform the simple select question into a mobile-friendly, interactive question. You may drag the handle onto the track or click the desired choice to make a selection.

3: Customization

Listed below are all of the attributes available for this element. Override them to create a custom look and feel for your slider points element:

Name Type Description
sliderpoints:sliderPosition enum

Initial position of the slider (Off Scale, Left End, Middle, Right End)

Default: Off Scale

Example:

sliderpoints:sliderPosition="Middle" will position the slider to the middle of the track when the question is loaded

"Middle" is best applied with an odd number of <choice> elements.

sliderpoints:legendPosition enum

The position of the scale legend (Above Slider, Below Slider)

Default: Below Slider

Example:

sliderpoints:legendPosition="Above Slider" will show the scale legend above the slider instead

sliderpoints:showRange bool

Fill the track color to show the range of points selected? The range is shown from left to right, so this is ideal for choices with ordinal value.

Default: 1

Example:

sliderpoints:showRange="0" will disable the track range color

sliderpoints:OO bool

Should this choice be an opt-out choice?

Default: 0

Example:

<choice label="ch99" value="99" sliderpoints:OO="1">Don't know</choice> will display an opt-out checkbox with the text, "Don't know"

sliderpoints:sliderWidth string

The width of the slider container

Default: 75%

Example:

sliderpoints:sliderWidth="30%" will show a much slimmer slider

sliderpoints:offScaleAdjustment string

The number of pixels to adjust the slider handle off of the scale

Default: -40px

Example:

sliderpoints:offScaleAdjustment="0px" will initialize the slider handle on top of the first scale item

 sliderPosition must be "Off Scale"

sliderpoints:offScaleText string

The text to display in the slider handle before a selection has been made

Default: <i class="fa-icon-arrow-right"></i>

Example:

sliderpoints:offScaleText="A" will initialize the handle with the letter "A" inside

sliderPosition must be "Off Scale"

sliderpoints:offScaleAdjustment_smartphone string

The number of pixels to adjust the slider handle off of the scale for smartphone devices

Default: -36px

Example:

sliderpoints:offScaleAdjustment_smartphone="0px"will initialize the slider handle on top of the first scale item

sliderPosition must be "Off Scale"

sliderpoints:offScaleText_smartphone string

The text to display in the slider handle before a selection has been made for smartphone devices

Default: <i class="fa-icon-arrow-up"></i>

Example:

sliderpoints:offScaleText_smartphone="A" will initialize the handle with the letter "A" inside

 sliderPosition must be "Off Scale"

sliderpoints:handle_css CSS

CSS for the slider handle

Example:

sliderpoints:handle_css="border: 3px solid black; background-color: red;" will update the style for the handle to include a thick border and red background

sliderpoints:track_css CSS

CSS for the slider track

Example:

sliderpoints:track_css="border: 1px dotted black; background-color: white;" will replace the gray track with a dotted one.

sliderpoints:track_range_css CSS

CSS for the slider track range

Example:

sliderpoints:track_range_css="background-color: black;" will replace the orange track range with a black one.

sliderpoints:legend_selected_css CSS

CSS for the legend bullet and text when selected and/or hovered

Example:

sliderpoints:legend_selected_css="color: red;" will update the color of the legend bullets and text to red when hovered over or selected

 

sliderpoints:handle_unanswered_css CSS

CSS for the slider handle before a selection has been made

Example:

sliderpoints:handle_unanswered_css="background-color: red;" will change the handle's default orange color to red

sliderPosition must not be "Off Scale"

sliderpoints:handle_unanswered_hover_css CSS

CSS for the slider handle before a selection has been made and is hovered over

Example:

sliderpoints:handle_unanswered_hover_css="opacity: 0.5; filter: alpha(opacity=50);" will maintain the transparent handle color when hovered over

 sliderPosition must not be "Off Scale"

4: Customization Examples

Using the attributes above, we can do some pretty neat things to customize the default look and feel for this question style. Check out the examples below that help illustrate just a few of the possibilities.

4.1: Example 1

sliderpoints_ex1_default.png

Using the style attributes, it's easy to update the color of the slider handle and track. The browser icon images were added to each <choice> element and look great sitting beneath the track.

Images will not appear in the choices of a standard <select> question.

Check out the XML code below needed to create the example above:

Example 1 XML Code

<select label="Q1" optional="0" uses="sliderpoints.3"
    sliderpoints:handle_css="background-color: black; border: 1px solid black;"
    sliderpoints:track_css="background-color: black;"
    sliderpoints:legend_selected_css="color: black;"
    sliderpoints:showRange="0">
  <title>
    Which browser do you prefer?
  </title>
  <comment>Please select one</comment>
  <choice label="ch1"><img src="[rel chrome.png]"/></choice>
  <choice label="ch2"><img src="[rel ff.png]"/></choice>
  <choice label="ch3"><img src="[rel ie.png]"/></choice>
  <choice label="ch4"><img src="[rel opera.png]"/></choice>
  <choice label="ch5">Other</choice>
</select>

Example 1 XML Code Description

Let's take a look at each attribute that was applied and how it effected our question style.

  • sliderpoints:handle_css="..."
    • This replaced the default orange color of the handle to black.
  • sliderpoints:track_css="..."
    • Instead of the gray track, we used black instead.
  • sliderpoints:legend_selected_css="..."
    • When hovering over or making a selection, we set the color of the slider point and legend text to black instead of orange.
  • sliderpoints:showRange="0"
    • Since this question does not involve rating anything, there is no need to show a track range.
  • The <choice> elements are each equipped with an <img> tag containing the browser icons. We have included one additional choice for an "Other" selection.

Demo

Click here to see Example 1 in a live survey.

4.2: Example 2

sliderpoints_ex2_default(1).png

In this example, we use CSS to completely transform the overall look and feel of our question style. In addition to updating the handle and selection text, the track's background color goes from red to black to help supplement the idea of a rating question. Take a look at the XML code below:

Example 2 XML Code

<select label="Q2" optional="0" uses="sliderpoints.3"
    sliderpoints:sliderPosition="Middle"
    sliderpoints:handle_css="background-color: black; border: 1px solid black; border-radius: 0px;"
    sliderpoints:legend_selected_css="color: black; font-weight: bold;"
    sliderpoints:track_css="height: 4px;
     background: #cc0000;
     background: -moz-linear-gradient(left, #cc0000 0%, #005602 100%);
     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cc0000), color-stop(100%,#005602));
     background: -webkit-linear-gradient(left, #cc0000 0%,#005602 100%);
     background: -o-linear-gradient(left, #cc0000 0%,#005602 100%);
     background: -ms-linear-gradient(left, #cc0000 0%,#005602 100%);
     background: linear-gradient(to right, #cc0000 0%,#005602 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#005602',GradientType=1 );"
    sliderpoints:showRange="0">
  <title>
    Did you enjoy the following movies?
  </title>
  <comment>Please select one for each movie title</comment>
  <row label="r1">Ender's Game</row>
  <row label="r2">Gravity</row>
  <choice label="ch1"><i class="fa-icon-frown"></i><br/>No, didn't like it at all</choice>
  <choice label="ch2"><br/>Not really</choice>
  <choice label="ch3"><i class="fa-icon-meh"></i><br/>It was OK</choice>
  <choice label="ch4"><br/>A little bit</choice>
  <choice label="ch5"><i class="fa-icon-smile"></i><br/>Yes, I liked it a lot</choice>
</select>

Example 2 XML Code Description

Here's a brief description of each attribute that was added to create this style:

  • sliderpoints:sliderPosition="..."
    • Instead of the handle starting off the scale to the left, it will position itself in the middle. The respondent must still make a selection.
  • sliderpoints:handle_css="..."
    • Similar to the previous example, the handle's color was updated from orange (default) to black. In addition, we've added the border-radius property to show a square handle instead of a circle (default).
  • sliderpoints:legend_selected_css="..."
    • In addition to updating the text from orange to black, we've also emboldened the selection text when hovered over or selected.
  • sliderpoints:track_css="..."
    • The track's default height was increased slightly and, using this gradient editor tool, we've updated the background color of the track to go from red to green. This should help indicate that left is more negative than right.
  • sliderpoints:showRange="0"
    • Since this is a rating question, it would be ideal to keep the track range. However, because of the red-to-green color scheme, it looks great without it.
  • The <choice> elements include icons from the Font Awesome Icon Library and use <br/> tags to display the text evenly on the vertical axis.

Demo

Click here to see Example 2 in a live survey.

4.3: Example 3

sliderpoints_ex3_default.png

This example illustrates how to place the choice selection text above the track and how to include an opt-out option.

Example 3 XML Code

<select label="Q3" optional="0" uses="sliderpoints.3"
    sliderpoints:legendPosition="Above Slider"
    sliderpoints:sliderPosition="Middle">
  <title>
    Please rate the following social networks.
  </title>
  <row label="r1">Facebook</row>
  <row label="r2">Twitter</row>
  <row label="r3">Pinterest</row>
  <choice label="ch1"><i class="fa-icon-star-empty"></i></choice>
  <choice label="ch2"></choice>
  <choice label="ch3"><i class="fa-icon-star-half-full"></i></choice>
  <choice label="ch4"></choice>
  <choice label="ch5"><i class="fa-icon-star"></i></choice>
  <choice label="ch10" sliderpoints:OO="1">No comment</choice>
</select>

<style name='respview.client.css' with="Q3"> <![CDATA[
    <style>
        /* Align the row text to the middle */
        .sq-sliderpoints-row-legend { text-align: center; }
        /* Increase the star icon size */
        i { font-size: large; }
    </style>
]]></style>

Example 3 XML Code Description

See the brief descriptions below to see how this style was created:

Demo

Click here to see Example 3 in a live survey.

5: Customizing the Error Messages 

If you want to customize specific error messages for the slider point element, you can do so by using <res> tags. 

Example:

XML:

<select 
  label="q5"
  cond="condition.skip_featurephone"
  ss:questionClassNames="sq-sliderpoints"
  uses="sliderpoints.3">
  <title>New Slider Rating Question</title>
  <comment>Drag the slider to a point on the scale.</comment>
  <res label="sys_noAnswerSelected">Please slide the handle to rate your response.</res>
  <choice label="ch1" value="1">Rating 1</choice>
  <choice label="ch2" value="2">Rating 2</choice>
  <choice label="ch3" value="3">Rating 3</choice>
  <choice label="ch4" value="4">Rating 4</choice>
  <choice label="ch5" value="5">Rating 5</choice>
  <choice label="ch_na" aggregate="0" percentages="0" randomize="0" sliderpoints:OO="1" value="99">Don't Know</choice>
</select>

This is a list of all the available resource tags used to change the error messages in the slider point question type:

<res label="sys_noAnswerSelected">Please slide the handle to rate your response.</res>