--- title: Rating Scale product: Form Library description: Learn how to configure a Rating Scale question using various representation options, including numbers, stars, smileys, or any custom labels of your choice. View a free demo for JavaScript to learn more. framework: jQuery source: https://surveyjs.io/form-library/examples/rating-scale/jquery index: https://surveyjs.io/form-library/examples/overview.md --- # Rating Scale (jQuery) 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`](https://surveyjs.io/form-library/documentation/pagemodel#elements) array. Within this object, specify the question's [`title`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#name) that identifies the question. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#description) to place under the `title`. ## Generate or Specify Scale Values The following properties allow you to generate rate scale values: - [`rateMin`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMin): `Number`\ The first value in the generated sequence of rate values. - [`rateMax`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMax): `Number`\ The last value in the generated sequence of rate values. - [`rateCount`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateCount): `Number`\ The number of rate values you want to generate. - [`rateStep`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#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: ```js { "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`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#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`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#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`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#scaleColorMode) property value, smileys can be monochrome (default) or colored. You can also set the [`rateColorMode`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#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. ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import $ from "jquery"; import { Model } from "survey-core"; import "survey-js-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); $("#surveyElement").Survey({ model: survey }); ``` ### `src/json.js` ```js export const json = { "pages": [ { "name": "page1", "elements": [ { "type": "rating", "name": "satisfaction-numeric", "title": "How satisfied are you with our product?", "description": "Numeric rating scale", "rateValues": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] }, { "type": "rating", "name": "satisfaction-stars", "title": "How satisfied are you with our product?", "description": "Star rating scale", "rateType": "stars", "rateCount": 10, "rateMax": 10, "displayMode": "buttons" }, { "type": "rating", "name": "satisfaction-smileys-monochrome", "title": "How satisfied are you with our product?", "description": "Smiley rating with monochrome scale", "rateType": "smileys", "rateCount": 10, "rateMax": 10, "displayMode": "buttons" }, { "type": "rating", "name": "satisfaction-smileys-colored", "title": "How satisfied are you with our product?", "description": "Smiley rating with colored scale", "rateType": "smileys", "scaleColorMode": "colored", "rateCount": 10, "rateMax": 10, "displayMode": "buttons" } ] } ] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "jquery": "latest", "survey-core": "latest", "survey-js-ui": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/rating-scale/angular.md) - [React](https://surveyjs.io/form-library/examples/rating-scale/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/rating-scale/vue3js.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/rating-scale/vanillajs.md)