-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Rating Scale
A Rating Scale question asks respondents to evaluate a particular characteristic of a product or service on a predefined scale. The scale can display a range of numbers, graphic symbols (stars, emojis), or descriptive terms that represent different degrees of agreement, satisfaction, or other subjective measures. This example demonstrates how to add a Rating Scale question to your survey or form and configures the question's scale values and appearance.
Create a Rating Scale Question
To add a Rating Scale question to your survey or form, define an object with the type
property set to "rating"
and add it to the elements
array. Within this object, specify the question's title
and a unique name
that identifies the question. Optionally, you can specify a description
to place under the title
.
Generate or Specify Scale Values
The following properties allow you to generate rate scale values:
rateMin
:Number
The first value in the generated sequence of rate values.rateMax
:Number
The last value in the generated sequence of rate values.rateCount
:Number
The number of rate values you want to generate.rateStep
:Number
A step with which to generate rate values.
You can combine these properties as required. The following code snippets show combination examples and results they produce:
{ "rateMin": 1, "rateMax": 10 } // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
{ "rateMin": 0, "rateMax": 10, "rateStep": 2 } // [ 0, 2, 4, 6, 8, 10 ]
{ "rateMin": 0, "rateCount": 6, "rateStep": 20 } // [ 0, 20, 40, 60, 80, 100 ]
If you want to define specific rate scale values, set them in the rateValues
array. It can contain numbers or objects with the value
and text
properties. Note that the rateValues
array overrides the auto-generation properties described above.
Use Star or Smiley Face Rating Scale
SurveyJS Rating Scale question enables you to represent scale values using graphical symbols, such as stars or smiley faces. A star rating scale offers respondents a series of stars to rate your service or product. Set the rateType
property to "stars"
to activate this scale type.
A smiley face rating scale uses two to ten emojis to help your customers convey their feelings about your product. To display smileys as scale values, set the rateType
property to "smileys"
. Depending on the scaleColorMode
property value, smileys can be monochrome (default) or colored. You can also set the rateColorMode
property to specify the color of the selected emoji: "default"
to use the default survey color or "scale"
to inherit the color from the scale.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage