Scored Quiz

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 property for each question.
   This property turns a regular survey question into a quiz question.

2. 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 class:

   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.

3. Assign scores to questions.
   Set the score property of each question to a number.

4. Calculate the total score.
   Handle the onCompleting event and use a question's 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.

5. 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.