--- title: Review Quiz Results product: Form Library description: Learn how to display test or quiz results to a participant for review and indicate correct and incorrect answers with labels. Enable read-only mode to avoid any accidental chances in submitted data. Explore our ready-to-use JavaScript form library demo. framework: jQuery source: https://surveyjs.io/form-library/examples/review-mode-for-quiz-results/jquery index: https://surveyjs.io/form-library/examples/overview.md --- # Review Quiz Results (jQuery) 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. ## Display a User Response 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`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data) property. ## Indicate Correct and Incorrect Answers 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()`](https://surveyjs.io/form-library/documentation/api-reference/question#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`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#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 `` element with an applied CSS class to customize the text appearance (see the `getTextHtml` function in code). ## Switch the Form to Read-Only Mode 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 `true` to the survey's [`readOnly`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#readOnly) property before rendering the quiz on a page. ## Display All Questions on a Single 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`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#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`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showProgressBar) property to `false`. ## Save Quiz Results to PDF 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](https://surveyjs.io/pdf-generator/documentation/get-started-angular (linkStyle)) [Export Survey to PDF in a Vue.js Application](https://surveyjs.io/pdf-generator/documentation/get-started-vue (linkStyle)) [Export Survey to PDF in a React Application](https://surveyjs.io/pdf-generator/documentation/get-started-react (linkStyle)) [Export Survey to PDF in an HTML/CSS/JavaScript Application](https://surveyjs.io/pdf-generator/documentation/get-started-html-css-javascript (linkStyle)) The following demo shows how to indicate correct and incorrect answers in a generated PDF form: [Change Question Title Colors in PDF](/pdf-generator/examples/how-to-customize-question-title-colors-in-pdf-form/ (linkStyle)) ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css .correctAnswer { color: #00613D; text-transform: uppercase; } .incorrectAnswer { color: #9C0227; text-transform: uppercase; } ``` ### `src/index.js` ```js import $ from "jquery"; import { Model } from "survey-core"; import "survey-js-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); survey.data = { civilwar: "1861-1865", libertyordeath: "Samuel Adams", magnacarta: "The foundation of the British parliamentary system" }; survey.readOnly = true; survey.questionsOnPageMode = "singlePage"; survey.showProgressBar = false; const correctStr = "Correct"; const incorrectStr = "Incorrect"; // Builds an HTML string to display in a question title function getTextHtml (text, str, isCorrect) { if (text.indexOf(str) < 0) return undefined; return text.substring(0, text.indexOf(str)) + "" + str + ""; } // Adds "Correct" or "Incorrect" to a question title function changeTitle (q) { if (!q) return; const isCorrect = q.isAnswerCorrect(); if (!q.prevTitle) { q.prevTitle = q.title; } if (isCorrect === undefined) { q.title = q.prevTitle; } q.title = q.prevTitle + ' ' + (isCorrect ? correctStr : incorrectStr); } // Uncomment the following lines if you allow respondents to edit their answers // and want to display whether an answer is correct or not immediately after it has been given // survey.onValueChanged.add((_, options) => { // changeTitle(options.question); // }); survey.onTextMarkdown.add((_, options) => { const text = options.text; let html = getTextHtml(text, correctStr, true); if (!html) { html = getTextHtml(text, incorrectStr, false); } if (!!html) { // Set an HTML string with the "Correct" or "Incorrect" suffix for display options.html = html; } }); // Indicate correct and incorrect answers at startup survey.getAllQuestions().forEach(question => changeTitle(question)); $("#surveyElement").Survey({ model: survey }); ``` ### `src/json.js` ```js export const json = { "title": "American History", "showProgressBar": true, "progressBarLocation": "bottom", "showTimer": true, "timeLimitPerPage": 10, "timeLimit": 25, "firstPageIsStartPage": true, "startSurveyText": "Start Quiz", "pages": [ { "elements": [ { "type": "html", "html": "You are about to start a quiz on American history.
You will have 10 seconds for every question and 25 seconds to end the quiz.
Enter your name below and click Start Quiz to begin." }, { "type": "text", "name": "username", "titleLocation": "hidden", "isRequired": true } ] }, { "elements": [ { "type": "radiogroup", "name": "civilwar", "title": "When was the American Civil War?", "choices": [ "1796-1803", "1810-1814", "1861-1865", "1939-1945" ], "correctAnswer": "1861-1865" } ] }, { "elements": [ { "type": "radiogroup", "name": "libertyordeath", "title": "Whose quote is this: \"Give me liberty, or give me death\"?", "choicesOrder": "random", "choices": [ "John Hancock", "James Madison", "Patrick Henry", "Samuel Adams" ], "correctAnswer": "Patrick Henry" } ] }, { "elements": [ { "type": "radiogroup", "name": "magnacarta", "title": "What is Magna Carta?", "choicesOrder": "random", "choices": [ "The foundation of the British parliamentary system", "The Great Seal of the monarchs of England", "The French Declaration of the Rights of Man", "The charter signed by the Pilgrims on the Mayflower" ], "correctAnswer": "The foundation of the British parliamentary system" } ] } ], "completedHtml": "

You got {correctAnswers} out of {questionCount} correct answers.

", "completedHtmlOnCondition": [ { "expression": "{correctAnswers} == 0", "html": "

Unfortunately, none of your answers is correct. Please try again.

" }, { "expression": "{correctAnswers} == {questionCount}", "html": "

Congratulations! You answered all the questions correctly!

" } ] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "jquery": "latest", "survey-core": "latest", "survey-js-ui": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/review-mode-for-quiz-results/angular.md) - [React](https://surveyjs.io/form-library/examples/review-mode-for-quiz-results/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/review-mode-for-quiz-results/vue3js.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/review-mode-for-quiz-results/vanillajs.md)