Skip to main content

Decipher Support

All the topics, resources needed for Decipher.

FocusVision Knowledge Base

Customizing the Star Rating Element

1:  Underlying Question Architecture

The underlying question type for star ratings is a "select" question. This question type provides the maximum amount of flexibility in that it allows you to have a 3D question type if you wanted to create an entire grid of options using rows and columns. It also doesn’t require that you use any rows or columns, so it’s very flexible and accommodating.



<select label="q1">
  <title>What did you think of &lt;span style="font-weight: bold"&gt;The Dark Knight Rises&lt;/span&gt;?</title>
  <choice label="ch1">1 - Hated It</choice>
  <choice label="ch2">2 - Didn't Like It</choice>
  <choice label="ch3">3 - It was OK</choice>
  <choice label="ch4">4 - Liked It</choice>
  <choice label="ch5">5 - Loved It</choice>

2:  Converting to Star Rating

To convert this question to a Star Rating question, simply add the uses="starrating.5" attribute to the question tag (done for you if you create this question type in Builder, click here to learn how).



<select label="q1" uses="starrating.5">
  <title>What did you think of &lt;span style="font-weight: bold"&gt;The Dark Knight Rises&lt;/span&gt;?</title>
  <choice label="ch1">Hated It</choice>
  <choice label="ch2">Didn't Like It</choice>
  <choice label="ch3">It was OK</choice>
  <choice label="ch4">Liked It</choice>
  <choice label="ch5">Loved It</choice>

3:  Customization

From here onward, we’ll be customizing the question away from the default look shown above. To do this, we’ll be working in the XML with customizable variables that are unique to the Star Rating question type. In the examples, I’ll only show the question (select) tag, as we’re not doing anything to the <choice> tags. If you’ve added a Star Rating question using Builder, you’ll notice that there are several new XML variables put into the question tag. You only need to include the ones you want to customize. Here’s a brief description of each:

  • starrating:tooltips
    • Toggles tooltips on/off depending on whether you want to show these to the respondents.
    • The tooltip content comes from the choices. For example, in the question above, the tooltip shown when hovering over the 4th star would say "Liked It".
    • Type="bool" (0=OFF, 1=ON); default: 1 (ON)
    • Example: starrating:tooltips="0" would turn the tooltips off
  • starrating:tooltips_skin
    • Allows you to specify a “skin” (theme) for the tooltips. There are many available: facebook, yellow, salmon, blue, lime, liquid, light, lavender, dark, cloud, black
    • Type="string"; default: light
    • Example: starrating:tooltips_skin="dark" would set the tooltips to use the dark theme
  • starrating:tooltips_css
    • Allows you to add CSS to customize the look of the tooltips
    • Type="CSS"
    • Example: starrating:tooltips_css="font-size: 14px" would set the font size inside the tooltips to 14px
  • starrating:star_css
    • Allows you customize the default look of the stars using CSS
    • Type="CSS"
    • Example: starrating:star_css="color: #aee4f3" would set the default color of the stars to #aee4f3
  • starrating:star_selected_css
    • Use this to customize the look of the stars when selected
    • Type="CSS"
    • Example: starrating:star_selected_css="color: #00bff3" would set the selected color of the stars to #00bff3
  • starrating:star_char
    • The stars use Font Awesome, a graphical font, for display. You can change this to another character, but it’s a bit trickier than the other settings.
    • Type=”HTML Entity” (Told you it was trickier; here’s a reference)
    • Examples:
      • starrating:star_char="&#61446;" gives the default Font Awesome empty star (icon-star-empty)
      • starrating:star_char="$" gives the US dollar symbol (an easy one)
      • starrating:star_char="&#163;" gives the British Pound symbolSee here for a cheat sheet of what can go here:
  • starrating:star_selected_char
    • Just like the starrating:star_char, but this lets you customize the character shown for the selected ratings
    • Type=”HTML Entity”
    • Examples:
      • starrating:star_selected_char="&#61445;" gives the default Font Awesome filled star (icon-star)
      • starrating:star_selected_char="&#165;" gives the Yen sign

4:  Customization Examples

4.1:  Example 1 (Light Customization)


<select label="q1"
     starrating:star_css="font-size: 60px; color: #aee4f3;"
     starrating:star_selected_css="color: #ff0000">

Here we customized the size and color of the stars. The “selected” state (starrating:star_selected_css) inherits the rules from the default state, so I only had to specify the font-size attribute on the default state (starrating:star_css).

4.2:  Example 2 (Heavy Customization)


<select label="q1"
     starrating:star_css="font-size: 36px; color: #fff; background: #fc6;
          border-radius: 40px; width: 40px; height: 40px; padding: 3px; margin: 1px; text-align: center; line-height: 36px;"
     starrating:star_selected_css="background: #f80; color: #ffffff;"

In this example, we’re using a lot more CSS to change the look of the default star state. As mentioned previously, the selected state inherits the look of the default state, so we only need to add rules that differ from the default. In addition to styling the default and selected states of the stars, we’re also changing out the default star character from the empty star to the filled star.

4.3:  Example 3 (Swapping Out the Star Character)


<select label="q1"
     starrating:star_css="font-size: 48px; color: #999; padding: 0 3px;"
     starrating:star_selected_css="color: #007236">

Here we swapped out the default stars for US currency symbols. Notice that when swapping out star characters, you must specify both the default and selected character or it will put the system default stars in.

4.4:  Example 4 (Pulling It All Together)


<select label="q1"
     starrating:star_css="font-size: 36px; color: #fff; background: #bbb;
          border-radius: 40px; width: 40px; height: 40px; padding: 3px; margin: 1px; text-align: center; line-height: 46px;"
     starrating:star_selected_css="background: #007236;">

In this final example, we’re changing out the character and making extensive CSS modifications to the star containers.

5:  References