Review Quiz Results

Tests and quizzes enable participants to assess their level of knowledge on a particular subject. After completing a test or quiz, participants can review and analyze their results. This demo demonstrates how to configure the quiz review mode.

User responses are stored as JSON objects in which keys are question names and values are user answers. Obtain a JSON object with the response you want to display and assign it to the survey's data property.

There are many ways to indicate correct and incorrect answers in a quiz: colorize question titles or question boxes, add indicator icons (for example, green tick for correct and red cross for incorrect answers), display error messages next to incorrect answers, and so forth. This demo shows how to mark correct and incorrect answers using textual labels with different colors. The labels are added to question titles.

To implement the indication, check whether a question was answered correctly by calling its isAnswerCorrect() method. Depending on the check result, add the "Correct" or "Incorrect" label to the question title (see the changeTitle function in code). A review form implies that the quiz has already been passed, and you need to assign the labels before rendering the form. To do this, iterate over all quiz questions and call the changeTitle function for them.

To stylize the labels, handle the onTextMarkdown event. This event allows you to modify the HTML markup of rendered texts. Within the event handler, you need to identify text strings that contain either the "Correct" or "Incorrect" substring. Wrap these substrings in a <span> element with an applied CSS class to customize the text appearance (see the getTextHtml function in code).

When users review quiz results, they shouldn't be able to edit them to maintain data integrity. Read-only mode helps ensure that the results remain unchanged. To enable this mode, assign "display" to the survey's mode property before rendering the quiz on a page.

When creating a quiz, especially a timed one, you'll likely distribute questions across multiple form pages. However, for reviewing purposes, it's advantageous to consolidate all questions onto one page for a more compact presentation. To enable the single-page view, set the survey's questionsOnPageMode property to "singlePage". Additionally, hide the progress bar (if your quiz displays it) since a single-page quiz doesn't have other pages to switch to. Set the showProgressBar property to "off".

If you want to allow your users to print quiz results or share them with others, export the results to a PDF form using SurveyJS PDF Generator. This component is an add-on to SurveyJS Form Library that enables users to generate PDF documents from online forms, surveys, and quizzes. Refer to the following help topics for information on how to get started with SurveyJS PDF Generator in different JavaScript frameworks:

Export Survey to PDF in an Angular Application Export Survey to PDF in a Vue.js Application Export Survey to PDF in a React Application Export Survey to PDF in an HTML/CSS/JavaScript Application

The following demo shows how to indicate correct and incorrect answers in a generated PDF form:

Change Question Title Colors in PDF