Skip to main content

Search

Stars questions

  • Updated

The question type stars creates a rating system for elements in a question or table using stars or other icons. Like sliders, type: stars will create open-ended questions. 

Try it!

For information on closed-ended stars questions, see Radio star questions.

Details

  • Stars are compatible with both simple tables and the start table widget.
  • The star count tag is used to specify the number of stars displayed in the rating. If the tag is omitted, the question will default to five stars.
  • The step tag allows you to define the increment or decrement value on the stars scale. Steps can be specified as whole numbers or decimals.
  • If the step tag is not included, the question will use a step size of '1' (incrementing by one star at a time).
  • The star size tag allows you to alter the stars' display sizing; if the tag is excluded, the question will use the 'md' (medium) size.
  • CSS can be used to apply alternate icons, change colors, adjust display size, and modify the value display text. See example below.

Tags

Tag Description

heading (single)

Creates a single header for the options.

headings (multiple)

Creates two or more headings above the table options. These headings are separated by commas and placed on the the polar extremes of the table (e.g., headings: Least Important, Most Important).
label hide Accepts 'y' and 'n' inputs; if set to 'y', will hide the values displayed within the stars.
postfix Specifies a postfix to be applied to the labels and selected values on the stars scale.
prefix Specifies a prefix to be applied to the labels and selected values on the stars scale.
prompt

Displays additional text on screen before a rating has been selected which can be used to provide additional instructions.
star count Specifies the number of stars to use in a rating system. Accepts whole numbers for input.
star size Specifies the display size of the stars. Options include: xs, sm, md, lg, xl (extra-small, small, medium, large, extra-large).
star width Specifies the horizontal space between each star in pixels, e.g., star width: 100.
step Defines the increment or decrement value on a stars scale. Steps can be specified as whole numbers or decimals.
value display Accepts 'y' and 'n' inputs; if set to 'n', will hide the text displayed to the right of (or below) the stars.

Tip! Stars questions are designed to be mobile-friendly, allowing respondents to swipe to indicate their ratings. For mobile users, Survey Programmers (SPs) should take into account the number of stars and star size to ensure the width of the question fits respondents' screens. Applying value display: n can be particularly useful for mobile respondents if spacing is a concern.

Additional examples

Adding prefix and postfix text

The prefix and postfix tags can be included with type: stars to provide clarity to the text that is dynamically displayed while selecting a rating. This text will override the default text of "X Stars," and will instead display the prefix or postfix with the number associated with the star selected.

Note: HTML for "non-breaking space" ( ) has been added to accommodate a needed space after or before the prefix and postfix tags, respectively.

Open-end rating table with stars

Star rating systems can also be used in tables. The headings tag is included to clarify the scale.

Tables with opt-out per row

The table here uses star rating systems to rate a series of brands and allow for a an "opt-out" per row with the use of the dta_col tag. The value display tag is included to hide the rating text typically shown beside or below the stars to make the table more compact.

Alternate rating icons

CSS can be used to customize star rating systems. In this example, stars are replaced with hearts that change to pink as they are rated.

For a list of available alternate icons, click here.

 

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.