--- title: Scored Quiz product: Form Library description: Create a quiz and define correct answers and point values for survey questions to evaluate and grade respondents based on specified answers. View a free Scored Quiz for JavaScript demo to see it in action. framework: React source: https://surveyjs.io/form-library/examples/create-a-scored-quiz/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Scored Quiz (React) Scored quizzes allow you to assign different points or scores to questions, for example, based on difficulty. Individual scores for correct answers are accumulated to calculate a total score and display it to the respondent or save it in a database. You can apply scoring logic to test the knowledge or evaluate performance of a group of people. To create a scored quiz, you need to create a regular quiz and define scores for each question. Follow the steps below: 1. Specify the [`correctAnswer`](https://surveyjs.io/form-library/documentation/api-reference/question#correctAnswer) property for each question. This property turns a regular survey question into a quiz question. 1. Implement a custom `score` property. This property will be serialized and included in the survey JSON schema. The following code shows how to add a numeric `score` property to the base [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question) class: ```js import { Serializer } from "survey-core"; Serializer.addProperty("question", { 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 questions. Set the `score` property of each question to a number. 1. Calculate the total score. Handle the [`onCompleting`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onCompleting) event and use a question's [`isAnswerCorrect()`](https://surveyjs.io/form-library/documentation/api-reference/question#isAnswerCorrect) method to check if the question was answered correctly. Sum up the scores of correct answers and display the total score on the Complete page. In addition, you can calculate the maximum possible score. In this demo, the `onCompleting` event handler calls two helper JavaScript functions that calculate the maximum and total scores. 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
``` ### `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 survey questions Serializer.addProperty("question", { 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.score) { maxScore += question.score; } }); return maxScore; } function calculateTotalScore(data) { var totalScore = 0; Object.keys(data).forEach((qName) => { const question = survey.getQuestionByValueName(qName); if (question.isAnswerCorrect()) { if (!!question.score) { totalScore += question.score; } } }); return totalScore; } survey.onCompleting.add((sender) => { const totalScore = calculateTotalScore(sender.data); const maxScore = calculateMaxScore(sender.getAllQuestions()); // Save the scores in survey results sender.setValue("maxScore", maxScore); sender.setValue("totalScore", totalScore); }); return (); } 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(); ``` ### `src/json.js` ```js export const json = { "title": "How Big of a Star Wars Fan You Are", "showProgressBar": true, "showTimer": true, "timeLimitPerPage": 20, "completedHtmlOnCondition": [{ "expression": "{totalScore} > 14", "html": "You got {totalScore} out of {maxScore} points.

Congratulation! You did great!" }, { "expression": "{totalScore} > 7", "html": "You got {totalScore} out of {maxScore} points.

Well Done! Your focus determines your reality. And this is the way you passed the quiz." }, { "expression": "{totalScore} <= 7", "html": "You got {totalScore} out of {maxScore} points.

In my experience, as Obi-Wan Kenobi said, there's no such thing as luck." }], "pages": [{ "name": "startPage", "elements": [{ "type": "html", "name": "welcomeMsg", "html": "Take this funny quiz to find out how well you know Star Wars.

May the Force be with you.
LEGO Star Wars minifigures\n" }] }, { "elements": [{ "type": "radiogroup", "name": "qFirstMovieReleaseYear", "title": "What year did the first Star Wars movie come out?", "choices": [ 1980, 2015, 1977 ], "correctAnswer": 1977, "score": 5 }] }, { "elements": [{ "type": "radiogroup", "name": "qBabyYodaName", "score": 3, "title": "What is Baby Yoda's real name?", "correctAnswer": "grogu", "choices": [{ "value": "mike", "text": "Mike" }, { "value": "grogu", "text": "Grogu" }, { "value": "din", "text": "Din" }] }] }, { "elements": [{ "type": "rating", "name": "qSithLordsCount", "score": 3, "title": "According to Yoda, how many Sith Lords there always are? No more. No less.", "correctAnswer": 2, "rateValues": [ 0, 1, 2, 3, 4 ] }] }, { "elements": [{ "type": "boolean", "name": "qBobaFettSurvival", "score": 4, "title": "Boba Fett survived the Sarlacc pit. True or false?", "labelTrue": "True", "labelFalse": "False", "correctAnswer": true }] }, { "elements": [{ "type": "image", "name": "falconImage", "imageLink": "https://surveyjs.io/Content/Images/examples/scored-quiz/millenium-falcon.jpg" }, { "type": "radiogroup", "name": "qHanSolosShipName", "score": 5, "startWithNewLine": false, "title": "What is the name of Han Solo's ship?", "correctAnswer": "falcon", "choices": [{ "value": "corfe", "text": "The Corfe Castle" }, { "value": "blackPearl", "text": "The Black Pearl" }, { "value": "falcon", "text": "The Millennium Falcon" }] }] }], "firstPageIsStartPage": true }; ``` ### `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-quiz/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/create-a-scored-quiz/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/create-a-scored-quiz/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/create-a-scored-quiz/vanillajs.md)