-
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
Scored Survey
A scored survey allows you to assign points or scores to answer options. Individual scores add up to a total score based upon which you can assess or classify a respondent. Unlike a scored quiz, a scored survey does not have correct or incorrect answers—points can be awarded for any answer. This demo shows how to add scoring to your survey.
The following question types are most suitable to apply scoring logic because they allow respondents to select from a set of options:
- Radio Button Group
- Checkboxes
- Drop-Down Menu
- Multi-Select Dropdown (Tag Box)
- Rating Scale
- Single-Selection Matrix
- Multiple-Selection Matrix
- Dynamic Matrix
- Image Picker
This example uses the Radiogroup, Rating, and Single-Selection Matrix question types.
To create a scored survey, follow the steps below:
Implement a custom
score
property for choice options.
This property will be serialized and included in the survey JSON schema. Add thescore
property to theItemValue
class as shown below. This class describes a choice in any select question type.import { Serializer } from "survey-core"; Serializer.addProperty("itemvalue", { name: "score:number" });
For more information on how to add custom properties to a survey element, refer to the following help topic: Add Custom Properties to the Property Grid.
Assign scores to choice options.
Set thescore
property of each choice option to a number.Calculate the total score.
Iterate over all choices, rate values, and matrix items to find the selected answers and sum up their scores (see thecalculateTotalScore
helper function). For simpler iteration, you can call thegetPlainData(options)
method and get survey results as a flat data array. In addition, you can calculate the maximum possible score (see thecalculateMaxScore
helper function). Initiate these calculations within theonCompleting
event handler as shown in this demo.Display different Complete pages based on earned points.
Use thecompleteHtmlOnCondition
array to specify different HTML markup for the Complete page. Each object in this array should include theexpression
andhtml
properties. When theexpression
evaluates totrue
, the survey applies the corresponding markup. For more information on expressions, refer to the Expressions help topic. To use the total and maximum scores in the expression or HTML markup, add them to survey results by calling thesetValue(name, value)
method.
-
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