--- title: Skip Logic product: Form Library description: Skip logic lets you control the flow of your survey based on given answers. Your form can automatically skip irrelevant questions, show or hide certain form fields, or navigate a respondent to the Thank You page. View this demo to learn how to end a survey when a certain condition is met. framework: React source: https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Skip Logic (React) Skip logic enables you to guide respondents to the next relevant question based on their previous answers, ensuring they only see questions that are relevant to them. In SurveyJS, you can implement skip logic using [conditional visibility](/form-library/examples/implement-conditional-logic-to-change-question-visibility/) or conditional actions, known as triggers. This example demonstrates the use of a Complete trigger, which ends a survey when a certain condition is met. In this demo, the survey prompts a user to submit their response if their estimated age is under 21. To configure a trigger, add an object to the [`triggers`](/form-library/documentation/api-reference/survey-data-model#triggers) array. This object should specify the `type` and `expression` properties. Set `type` to `"complete"` for the Complete trigger and assign a Boolean [expression](/form-library/documentation/design-survey/conditional-logic#expressions) to the `expression` property. A survey will end when this expression evaluates to `true`. For a code example, refer to the survey JSON schema (`json.js` file). For more information about triggers, refer to the following help topic: [Conditional Survey Logic (Triggers)](/form-library/documentation/design-survey/conditional-logic#conditional-survey-logic-triggers (linkStyle)) ## 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 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 calculateTotalScore(data) { var totalScore = 0; data.forEach((item) => { totalScore += item.data ? item.data[0].score : 0; }); return totalScore; } survey.onCompleting.add((sender) => { const plainData = sender.getPlainData({ calculations: [{ propertyName: "score" }] }); const totalScore = calculateTotalScore(plainData); 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": "Alcohol Use Disorders Identification Test (AUDIT)", "description": "This simple test will help you identify unhealthy drinking patterns.", "triggers": [{ "type": "complete", "expression": "age({birthdate}) < 21" }], "completedHtmlOnCondition": [{ "expression": "age({birthdate}) < 21", "html": "You must be 21 or older to take this test." }, { "expression": "{totalScore} <= 7", "html": "You probably do not have a problem with alcohol. Continue drinking in moderation or not at all." }, { "expression": "{totalScore} >= 8 and {totalScore} <= 15", "html": "You may drink too much on occasion. This may put you or others at risk. Try to cut down on alcohol or stop drinking completely." }, { "expression": "{totalScore} >= 16 and {totalScore} <= 19", "html": "Your drinking could lead to harm, if it has not already. It is important that you cut down on alcohol or stop drinking completely. Ask your doctor or nurse for advice on how best to cut down." }, { "expression": "{totalScore} >= 20", "html": "It is likely that your drinking is causing harm. Speak to your doctor or nurse or an addiction specialist. Ask about medications and counseling that can help you stop drinking. If you are dependent on alcohol, do not stop drinking without the help of a health care professional." }], "pages": [{ "name": "page1", "elements": [{ "type": "text", "name": "birthdate", "title": "Please enter your birthdate", "showNumber": false, "isRequired": true, "inputType": "date" }] }, { "name": "page2", "elements": [{ "type": "radiogroup", "name": "how-often-do-you-drink", "title": "How often do you have a drink containing alcohol?", "choices": [{ "value": "never", "text": "Never", "score": 0 }, { "value": "monthly", "text": "Monthly or less", "score": 1 }, { "value": "2-to-4-times-a-month", "text": "2 to 4 times a month", "score": 2 }, { "value": "2-to-3-times-a-week", "text": "2 to 3 times a week", "score": 3 }, { "value": "4-or-more-times-a-week", "text": "4 or more times a week", "score": 4 }] }, { "type": "radiogroup", "name": "how-many-drinks-a-day", "title": "How many drinks containing alcohol do you have on a typical day when you are drinking?", "choices": [{ "value": "1-or-2", "text": "1 or 2", "score": 0 }, { "value": "3-or-4", "text": "3 or 4", "score": 1 }, { "value": "5-or-6", "text": "5 or 6", "score": 2 }, { "value": "7-to-9", "text": "7 to 9", "score": 3 }, { "value": "10-or-more", "text": "10 or more", "score": 4 }] }, { "type": "radiogroup", "name": "5-or-more-drinks", "title": "How often do you have 5 or more drinks on one occasion?", "choices": [{ "value": "never", "text": "Never", "score": 0 }, { "value": "less-than-monthly", "text": "Less than monthly", "score": 1 }, { "value": "monthly", "text": "Monthly", "score": 2 }, { "value": "weekly", "text": "Weekly", "score": 3 }, { "value": "daily-or-almost-daily", "text": "Daily or almost daily", "score": 4 }] }, { "type": "radiogroup", "name": "couldnt-stop-drinking", "title": "How often during the last year have you found that you were not able to stop drinking once you had started?", "choicesFromQuestion": "5-or-more-drinks" }, { "type": "radiogroup", "name": "failed-tasks-due-to-drinking", "title": "How often during the last year have you failed to do what was normally expected of you because of drinking?", "choicesFromQuestion": "5-or-more-drinks" }, { "type": "radiogroup", "name": "needed-a-drink-in-the-morning", "title": "How often during the last year have you needed a first drink in the morning to get yourself going after a heavy drinking session?", "choicesFromQuestion": "5-or-more-drinks" }, { "type": "radiogroup", "name": "felt-guilt-after-drinking", "title": "How often during the last year have you had a feeling of guilt or remorse after drinking?", "choicesFromQuestion": "5-or-more-drinks" }, { "type": "radiogroup", "name": "unable-to-remember-last-night", "title": "How often during the last year have you been unable to remember what happened the night before because you had been drinking?", "choicesFromQuestion": "5-or-more-drinks" }, { "type": "radiogroup", "name": "injured-someone", "title": "Have you or someone else been injured as a result of your drinking?", "choices": [{ "value": "no", "text": "No", "score": 0 }, { "value": "yes-but-not-in-the-last-year", "text": "Yes, but not in the last year", "score": 2 }, { "value": "yes-during-the-last-year", "text": "Yes, during the last year", "score": 4 }] }, { "type": "radiogroup", "name": "someone-concerned-about-your-drinking", "title": "Has a relative, a friend, a doctor, or another health worker been concerned about your drinking or suggested you cut down?", "choicesFromQuestion": "injured-someone" }] }], "showPrevButton": false, "showQuestionNumbers": "onPage", "checkErrorsMode": "onValueChanged", "validateVisitedEmptyFields": 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/add-skip-logic-to-survey/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/add-skip-logic-to-survey/vanillajs.md)