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:

1. Implement a custom score property for choice options.
   This property will be serialized and included in the survey JSON schema. Add the score property to the ItemValue 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.

2. Assign scores to choice options.
   Set the score property of each choice option to a number.

3. Calculate the total score.
   Iterate over all choices, rate values, and matrix items to find the selected answers and sum up their scores (see the calculateTotalScore helper function). For simpler iteration, you can call the getPlainData(options) method and get survey results as a flat data array. In addition, you can calculate the maximum possible score (see the calculateMaxScore helper function). Initiate these calculations within the onCompleting event handler as shown in this demo.

4. Display different Complete pages based on earned points.
   Use the completeHtmlOnCondition array to specify different HTML markup for the Complete page. Each object in this array should include the expression and html properties. When the expression evaluates to true, 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 the setValue(name, value) method.