Skip to main content

Search

Radio stars questions

  • Updated

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

Try it!

For information on open-ended stars questions, see Star questions.

Details

  • Radio stars are compatible with both simple tables and the start table widget.
  • The number of stars created will be based on the number of items in its rating scale. 
  • 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.
prompt Displays additional text on screen before a rating has been selected which can be used to provide additional instructions.
series Creates a numerical sequence of options for the rating scale, e.g., optsfrom: series[1..5].
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.
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! Radio 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/options 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 of concern.

Additional examples

Hiding labels vs. hiding values

To disable the text to the right of the stars (the "value"), apply value display: n. Similarly to hide the "label" (the option number inside the star), apply label hide: y. The headings tag has been added to clarify the scale.

Closed-end rating table with radio stars

Radio star tables allow for many of the same display options as radio star questions, including the use of headers.

Alternate rating icons

Font icons or image references can be used in lists to create an interactive feel. Simply replace the option text with the desired icons or images.

The option text defined in the SMILEYS list uses HTML and requires CSS after the question code. This produces an exercise where the value display shows a dynamically updated smiley face (frown → neutral → smiling) as the cursor or touch moves across the options. The desc decorator is included to provide a cleaner description in the reports.

For a list of other available icons, see Text inputs using the step tag.

Related articles

Comments

0 comments

Please sign in to leave a comment.