---
title: Scored Survey
product: Form Library
description: Apply scoring logic to your surveys to evaluate and grade respondents based on provided answers. View a free Global Physical Activity Questionnaire (GPAQ) template for JavaScript to see it in action.
framework: React
source: https://surveyjs.io/form-library/examples/create-a-scored-survey/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Scored Survey (React)

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](https://surveyjs.io/form-library/examples/create-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](https://surveyjs.io/form-library/examples/single-select-radio-button-group/)
- [Checkboxes](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/)
- [Drop-Down Menu](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/)
- [Multi-Select Dropdown (Tag Box)](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/)
- [Rating Scale](https://surveyjs.io/form-library/examples/rating-scale/)
- [Single-Selection Matrix](https://surveyjs.io/form-library/examples/single-selection-matrix-table-question/)
- [Multiple-Selection Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/)
- [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/)
- [Image Picker](https://surveyjs.io/form-library/examples/image-picker-question/)

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`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) class as shown below. This class describes a choice in any select question type.

    ```js
    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](https://surveyjs.io/survey-creator/documentation/property-grid#add-custom-properties-to-the-property-grid).

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

1. 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)`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getPlainData) 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`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onCompleting) event handler as shown in this demo.

1. Display different Complete pages based on earned points.       
Use the [`completeHtmlOnCondition`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completedHtmlOnCondition) 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](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#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)`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#setValue) method.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";
import { Serializer } from "survey-core";

// Add a custom `score` property to choice options
Serializer.addProperty("itemvalue", {
    name: "score:number"
  });
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    function calculateMaxScore(questions) {
      var maxScore = 0;
      questions.forEach((question) => {
        if (question.choices) {
          const maxValue = Math.max.apply( Math, question.choices.map(o => o.score) );
          maxScore += maxValue;
        }
        if (question.rateValues) {
          const maxValue = Math.max.apply( Math, question.rateValues.map(o => o.score) );
          maxScore += maxValue;
        }
        if (question.getType() === "matrix") {
          const maxMatrixValue = Math.max.apply( Math, question.columns.map(o => o.score) ) * question.rows.length;
          maxScore += maxMatrixValue;
        }
      });
      return maxScore;
    } 
    function calculateTotalScore(data) {
      var totalScore = 0;
      data.forEach((item) => {
        const question = survey.getQuestionByValueName(item.name);
        const qValue = item.value;
        if (question.choices) {
          const selectedChoice = question.choices.find(choice => choice.value === qValue);
          if (selectedChoice) {
            totalScore += selectedChoice.score;
          }
        }
        if (question.rateValues) {
          const selectedRate = question.rateValues.find(rate => rate.value === qValue);
          if (selectedRate) {
            totalScore += selectedRate.score;
          }
        }
        if (question.getType() === "matrix") {
          item.data.forEach((dataItem) => {
            if (!!dataItem.value) {
              totalScore += dataItem.score;
            }
          });
        }
      });
      return totalScore;
    }
    survey.onCompleting.add((sender) => {  
      const maxScore = calculateMaxScore(sender.getAllQuestions());
      // Get survey results as a flat data array
      const plainData = sender.getPlainData({
        // Include `score` values into the data array
        calculations: [{ propertyName: "score" }]
      });
      const totalScore = calculateTotalScore(plainData);
    
      // Save the scores in survey results
      sender.setValue("maxScore", maxScore);
      sender.setValue("totalScore", totalScore);
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "title": "Global Physical Activity Questionnaire (GPAQ)",
  "completedHtmlOnCondition": [{
    "expression": "{totalScore} > ({maxScore} / 3 * 2)",
    "html": "You got {totalScore} out of {maxScore} points. You did great!"
  }, {
    "expression": "{totalScore} <= ({maxScore} / 3)",
    "html": "You got {totalScore} out of {maxScore} points. Come on now, step up!"
  }, {
    "expression": "({maxScore} / 3 * 2) < {totalScore} <= ({maxScore} / 3)",
    "html": "You got {totalScore} out of {maxScore} points. Well done!"
  }],
  "pages": [{
    "name": "physical-activity",
    "title": "Physical Activity",
    "description":
      "Next we are going to ask you about the time you spend doing different types of physical activity in a typical week. Please answer these questions even if you do not consider yourself to be a physically active person. Think first about the time you spend doing work. Think of work as the things that you have to do, such as paid or unpaid work, study/training, household chores, harvesting food/crops, fishing or hunting for food, seeking employment. In answering the following questions, 'vigorous-intensity activities' are activities that require hard physical effort and cause large increases in breathing or heart rate, 'moderate-intensity activities' are activities that require moderate physical effort and cause small increases in breathing or heart rate.",
    "elements": [{
      "type": "panel",
      "name": "activity-at-work",
      "title": "Activity at work",
      "elements": [{
        "type": "radiogroup",
        "name": "does-vigorous-activity",
        "title":
          "Does your work involve vigorous-intensity activity that causes large increases in breathing or heart rate, for example, carrying or lifting heavy loads, digging or construction work for at least 10 minutes continuously?",
        "choices": [
          { "value": true, "text": "Yes", "score": 10 },
          { "value": false, "text": "No", "score": 0 }
        ]
      }, {
        "type": "radiogroup",
        "name": "vigorous-activity-frequency",
        "visibleIf": "{does-vigorous-activity} = true",
        "title":
          "In a typical week, on how many days do you do vigorous-intensity activities as part of your work?",
        "choices": [
          { "value": "rarely", "text": "A few", "score": 0 },
          { "value": "often", "text": "Every other day", "score": 5 },
          { "value": "everyday", "text": "Every day", "score": 10 }
        ]
      }, {
        "type": "rating",
        "name": "vigorous-activity-duration",
        "visibleIf": "{does-vigorous-activity} = true",
        "title":
          "How much time do you spend doing vigorous-intensity activities at work on a typical day?",
        "rateValues": [
          { "value": "littletime", "text": "1", "score": 2 },
          { "value": "sometime", "text": "2", "score": 7 },
          { "value": "fulltime", "text": "3", "score": 10 }
        ],
        "minRateDescription": "Less Than Two Hours",
        "maxRateDescription": "Full Time"
      }, {
        "type": "radiogroup",
        "name": "does-moderate-activity",
        "title": "Does your work involve moderate-intensity activity that causes small increases in breathing or heart rate, such as brisk walking or carrying light loads for at least 10 minutes continuously?",              
        "choices": [
          { "value": true, "text": "Yes", "score": 10 },
          { "value": false, "text": "No", "score": 0 }
        ]
      }, {
        "type": "radiogroup",
        "name": "moderate-activity-frequency",
        "visibleIf": "{does-moderate-activity} = true",
        "title": "In a typical week, on how many days do you do moderate-intensity activities as part of your work?",
        "choices": [
          { "value": "rarely", "text": "A few", "score": 0 },
          { "value": "often", "text": "Every other day", "score": 5 },
          { "value": "everyday", "text": "Every day", "score": 10 }
        ]
      }, {
        "type": "rating",
        "name": "moderate-activity-duration",
        "visibleIf": "{does-moderate-activity} = true",
        "title": "How much time do you spend doing moderate-intensity activities at work on a typical day?",
        "rateValues": [
          { "value": "littletime", "text": "1", "score": 2 },
          { "value": "sometime", "text": "2", "score": 7 },
          { "value": "fulltime", "text": "3", "score": 10 }
        ],
        "minRateDescription": "Less Than Two Hours",
        "maxRateDescription": "Full Time"
      }]
    }, {
      "type": "panel",
      "name": "traveling",
      "title": "Travelling to and from places",
      "description": "The next questions exclude the physical activities at work that you have already mentioned. Now we would like to ask you about the usual way you travel to and from places. For example, to work or for shopping.",
      "elements": [{
        "type": "radiogroup",
        "name": "does-walk-or-rides-bicycle",
        "title": "Do you walk or use a bicycle (pedal cycle) for at least 10 minutes continuously to get to and from places?",
        "choices": [
          { "value": true, "text": "Yes", "score": 10 },
          { "value": false, "text": "No", "score": 0 }
        ]
      }, {
        "type": "radiogroup", 
        "name": "walking-bicycling-frequency", 
        "visibleIf": "{does-walk-or-rides-bicycle} = true", 
        "title": "In a typical week, on how many days do you walk or bicycle for at least 10 minutes continuously to get to and from places?",
        "choices": [
          { "value": "rarely", "text": "A few", "score": 0 },
          { "value": "often", "text": "Every other day", "score": 5 },
          { "value": "everyday", "text": "Every day", "score": 10 }
        ]
      }, {
        "type": "rating",
        "name": "walking-bicycling-duration",
        "visibleIf": "{does-walk-or-rides-bicycle} = true",
        "title": "How much time do you spend walking or bicycling for travel on a typical day?",
        "rateValues": [
          { "value": "littletime", "text": "1", "score": 2 },
          { "value": "sometime", "text": "2", "score": 7 },
          { "value": "fulltime", "text": "3", "score": 10 }
        ],
        "minRateDescription": "Less Than Two Hours",
        "maxRateDescription": "Full Time"
      }]    
    }, {
      "type": "panel",
      "name": "recreational-activities-panel",
      "title": "Recreational activities",
      "description": "The next questions exclude the work and transport activities that you have already mentioned. Now we would like to ask you about sports, fitness, and recreational activities.",
      "elements": [{
        "type": "matrix",
        "name": "recreational-activities",
        "title": "Do you practice any of the following sports, fitness, or recteational activities at least 10 minutes continuously?",
        "description": "Select all that apply",
        "columns": [
          { "value": true, "text": "Yes", "score": 2 },
          { "value": false, "text": "No", "score": 0 }
        ],
        "rows": [
          { "value": "running", "text": "Running" },
          { "value": "football", "text": "Playing football" },
          { "value": "brisk-walking", "text": "Brisk walking" },
          { "value": "cycling", "text": "Cycling" },
          { "value": "swimming", "text": "Swimming" }
        ]
      }, {
        "type": "radiogroup",
        "name": "running-frequency",
        "visibleIf": "{recreational-activities.running} = true or {recreational-activities.football} = true",
        "title": "In a typical week, on how many days do you run or play football?",
        "choices": [
          { "value": "rarely", "text": "A few", "score": 0 },
          { "value": "often", "text": "Every other day", "score": 5 },
          { "value": "everyday", "text": "Every day", "score": 10 }
        ]
      }, {
        "type": "rating",
        "name": "running-duration",
        "visibleIf": "{recreational-activities.running} = true or {recreational-activities.football} = true",
        "title": "How much time do you spend on this on a typical day?",
        "rateValues": [
          { "value": "littletime", "text": "1", "score": 2 },
          { "value": "sometime", "text": "2", "score": 7 },
          { "value": "fulltime", "text": "3", "score": 10 }
        ],
        "minRateDescription": "Less Than Two Hours",
        "maxRateDescription": "Full Time"
      }, {
        "type": "radiogroup",
        "name": "swimming-etc-frequency",
        "visibleIf": "{recreational-activities.brisk-walking} = true or {recreational-activities.swimming} = true or {recreational-activities.cycling} = true",
        "title": "In a typical week, on how many days do you swim, cycle, or walk briskly?",
        "choices": [
          { "value": "rarely", "text": "A few", "score": 0 },
          { "value": "often", "text": "Every other day", "score": 5 },
          { "value": "everyday", "text": "Every day", "score": 10 }
        ]
      }, {
        "type": "rating",
        "name": "swimming-etc-duration",
        "visibleIf": "{recreational-activities.brisk-walking} = true or {recreational-activities.swimming} = true or {recreational-activities.cycling} = true",
        "title": "How much time do you spend doing these moderate-intensity sports on a typical day?",
        "rateValues": [
          { "value": "littletime", "text": "1", "score": 2 },
          { "value": "sometime", "text": "2", "score": 7 },
          { "value": "fulltime", "text": "3", "score": 10 }
        ],
        "minRateDescription": "Less Than Two Hours",
        "maxRateDescription": "Full Time"
      }]
    }, {
      "type": "panel",
      "name": "sedentary-behavior",
      "title": "Sedentary behavior",
      "description": "The following question is about sitting or reclining at work, at home, getting to and from places, or with friends, including time spent sitting at a desk, sitting with friends, travelling by car, bus, train, reading, playing cards or watching television; it does not include time spent sleeping.",
      "elements": [{
          "type": "rating",
          "name": "sedentary-behavior-duration",
          "title": "How much time do you usually spend sitting or reclining on a typical day?",
          "rateValues": [
            { "value": "littletime", "text": "1", "score": 10 },
            { "value": "sometime", "text": "2", "score": 7 },
            { "value": "fulltime", "text": "3", "score": 2 }
          ],
          "minRateDescription": "Less Than Two Hours",
          "maxRateDescription": "Full Time"
        }
      ]
    }]
  }]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/create-a-scored-survey/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/create-a-scored-survey/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/create-a-scored-survey/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/create-a-scored-survey/vanillajs.md)