From c62c3273c73c0685bc96f2217aedf37ca1f0ee4e Mon Sep 17 00:00:00 2001
From: Becky Gilbert <beckyannegilbert@gmail.com>
Date: Fri, 2 Feb 2024 14:25:11 -0800
Subject: [PATCH] move examples into separate files

---
 .../examples/basic_question_types.html        | 126 ++++++++
 .../examples/combine_json_function.html       |  90 ++++++
 .../conditional_question_display.html         |  78 +++++
 packages/plugin-survey/examples/example.html  | 302 ------------------
 .../examples/reference_previous_answers.html  | 128 ++++++++
 .../examples/response_validation.html         |  89 ++++++
 6 files changed, 511 insertions(+), 302 deletions(-)
 create mode 100644 packages/plugin-survey/examples/basic_question_types.html
 create mode 100644 packages/plugin-survey/examples/combine_json_function.html
 create mode 100644 packages/plugin-survey/examples/conditional_question_display.html
 delete mode 100644 packages/plugin-survey/examples/example.html
 create mode 100644 packages/plugin-survey/examples/reference_previous_answers.html
 create mode 100644 packages/plugin-survey/examples/response_validation.html
diff --git a/packages/plugin-survey/examples/basic_question_types.html b/packages/plugin-survey/examples/basic_question_types.html
new file mode 100644
index 0000000000..36a2188f1b
--- /dev/null
+++ b/packages/plugin-survey/examples/basic_question_types.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="../../jspsych/dist/index.browser.js"></script>
+  <script src="../dist/index.browser.js"></script>
+  <link rel="stylesheet" href="../../jspsych/css/jspsych.css" />
+  <link rel="stylesheet" href="../css/survey.css" />
+</head>
+
+<body></body>
+<script type="text/javascript">
+
+  const jsPsych = initJsPsych({
+    on_finish: function() {
+      jsPsych.data.displayData();
+    }
+  });
+
+  // This example shows how to combine several basic question types: 
+  // text (with autocomplete options), dropdown, multi-select dropdown ("tagbox").
+  // This also shows how to create a collapsible panel (group) of questions.
+  const contact_info = {
+    title: "jsPsych Survey Plugin example",
+    pages: [{
+      title: "Page 1 title: Personal Details",
+      name: "PersonalDetails",
+      elements: [{
+        type: "text",
+        name: "FirstName",
+        title: "First name:",
+        isRequired: true,
+        autocomplete: 'given-name'
+      },
+      {
+        type: "text",
+        name: "LastName",
+        title: "Last name:",
+        isRequired: true,
+        startWithNewLine: false,
+        autocomplete: 'family-name'
+      },
+      {
+        type: "panel",
+        name: "Contacts",
+        state: "collapsed",
+        title: "Contact (optional)",
+        elements: [{
+          type: "text",
+          inputType: 'tel',
+          name: "Phone",
+          title: "Phone number:",
+          defaultValue: "(123) 456-7890",
+          autocomplete: 'tel'
+        }, {
+          type: "text",
+          name: "GitHub",
+          title: "GitHub username:"
+        },
+        {
+          type: "text",
+          inputType: 'email',
+          name: "email",
+          title: "Email:",
+          autocomplete: 'email'
+        }]
+      }]
+    },
+    {
+      title: "Page 2 title: Location",
+      name: "Location",
+      description: "Here are some questions with the 'description' shown below the question. The titles are hidden by setting the 'title' string to a space character. (You can also set the survey's 'questionTitleLocation' to' 'hidden', but that applies to the whole survey.)",
+      elements: [
+      {
+        type: "text",
+        name: "State",
+        title: " ",
+        width: "20%",
+        minWidth: "128px",
+        startWithNewLine: false,
+        description: "Enter a state",
+        autocomplete: "off"
+      },
+      {
+        type: "dropdown",
+        name: "Country",
+        title: " ",
+        startWithNewLine: false,
+        width: "60%",
+        minWidth: "256px",
+        description: "Select a country (start typing to search, press Enter to select)",
+        choicesByUrl: {
+          url: "https://surveyjs.io/api/CountriesExample"
+        },
+        placeholder: "",
+        allowClear: false
+      }, 
+      {
+        type: "tagbox",
+        choicesByUrl: {
+          url: "https://surveyjs.io/api/CountriesExample"
+        },
+        name: "all-countries",
+        title: "Which countries have you been to?",
+        description: "Multi-select dropdown - please select all that apply."
+      }]
+    }],
+    showQuestionNumbers: "off",
+    questionDescriptionLocation: "underInput",
+    completeText: "Continue",
+    widthMode: "static",
+    width: "900",
+    fitToContainer: true
+  };
+
+  const contact_info_trial = {
+    type: jsPsychSurvey,
+    survey_json: JSON.stringify(contact_info)
+  };
+
+  jsPsych.run([contact_info_trial]);
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/packages/plugin-survey/examples/combine_json_function.html b/packages/plugin-survey/examples/combine_json_function.html
new file mode 100644
index 0000000000..2265f227b8
--- /dev/null
+++ b/packages/plugin-survey/examples/combine_json_function.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="../../jspsych/dist/index.browser.js"></script>
+  <script src="../dist/index.browser.js"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.3"></script>
+  <link rel="stylesheet" href="../../jspsych/css/jspsych.css" />
+  <link rel="stylesheet" href="../css/survey.css" />
+</head>
+
+<body></body>
+<script type="text/javascript">
+
+  const jsPsych = initJsPsych({
+    on_finish: function() {
+      jsPsych.data.displayData();
+    }
+  });
+
+  // This non-survey trial is used to demonstrate how to access prior jsPsych data when
+  // creating the survey trial
+  const color_choices = ['red', 'green', 'blue', 'yellow', 'pink', 'orange', 'purple'];
+  const color_trial = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: '<h3>jsPsych button response trial</h3><p>Which of these is your favorite color?</p>',
+    choices: color_choices,
+    button_html: '<button class="jspsych-btn" style="color:%choice%";">%choice%</button>',
+    data: {trial_id: 'color_trial'}
+  };
+
+  // This example shows how to combine the survey_json and survey_function parameters.
+  const jspsych_rating_json = {
+    title: "jsPsych survey trial",
+    pages: [{
+      name: "example_page",
+      elements: [{
+        type: "radiogroup",
+        name: "jspsych_rating",
+        title: "How much do you like jsPsych?",
+        description: "(Select one of the first three options to see the conditional question)",
+        choices: [
+          { value: 1, text: "Not at all" },
+          { value: 2, text: "Not very much" },
+          { value: 3, text: "It's ok" },
+          { value: 4, text: "Somewhat" },
+          { value: 5, text: "A lot" },
+        ], 
+        colCount: 0
+      }]
+    }]
+  };
+
+  // The survey_function is a function that can be used to make the contents of the survey conditional 
+  // on things that happened earlier in the experiment, outside of the survey trial.
+  const jspsych_rating_function = (survey) => {
+    survey.showQuestionNumbers = false;
+
+    // Add follow up question to the existing page "example_page" based on response to jspsych_rating question 
+    // presented in this survey trial
+    const page = survey.getPageByName('example_page');
+    const jspsych_improve = page.addNewQuestion("comment", "jspsych_improve");
+    jspsych_improve.title = "What would make jsPsych better?";
+    jspsych_improve.visibleIf = "{jspsych_rating} < 4";
+    
+    // Add a new page with a follow up question based on response to the color question presented in a 
+    // separate jsPsych trial.
+    // First get the response to the color question from the jsPsych data
+    const color_choice_index = jsPsych.data.get().filter({trial_id: 'color_trial'}).values()[0].response;
+    // Get the color choice value from the response index
+    const color_choice = color_choices[color_choice_index];
+    // Add a new page, and add a new question to that page
+    const color_page = survey.addNewPage('color_page');
+    const color_confirmation = color_page.addNewQuestion("boolean", "color_confirmation");
+    color_confirmation.title = `Earlier you said you liked the color ${color_choice.toUpperCase()}. Do you still like that color?`;
+    color_confirmation.renderAs = "radio";
+  }
+
+  const jspsych_rating_trial = {
+    type: jsPsychSurvey,
+    survey_json: JSON.stringify(jspsych_rating_json),
+    survey_function: jspsych_rating_function
+  };
+
+  jsPsych.run([color_trial, jspsych_rating_trial]);
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/packages/plugin-survey/examples/conditional_question_display.html b/packages/plugin-survey/examples/conditional_question_display.html
new file mode 100644
index 0000000000..218ce7d7d1
--- /dev/null
+++ b/packages/plugin-survey/examples/conditional_question_display.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="../../jspsych/dist/index.browser.js"></script>
+  <script src="../dist/index.browser.js"></script>
+  <link rel="stylesheet" href="../../jspsych/css/jspsych.css" />
+  <link rel="stylesheet" href="../css/survey.css" />
+</head>
+
+<body></body>
+<script type="text/javascript">
+
+  const jsPsych = initJsPsych({
+    on_finish: function() {
+      jsPsych.data.displayData();
+    }
+  });
+
+  // This example shows how to make some questions conditional on previous answers
+  // from the same survey trial.
+  const vegetables = {
+    pages: [{
+      title: "Example of conditional questions",
+      elements: [{
+        name: "vegetables-score",
+        title: "I like vegetables.",
+        description: "Choose 'neutral' to skip the conditional question, and any other option to see a conditional question.",
+        type: "radiogroup",
+        choices: [
+          { value: 1, text: "Strongly Disagree" },
+          { value: 2, text: "Disagree" },
+          { value: 3, text: "Neutral" },
+          { value: 4, text: "Agree" },
+          { value: 5, text: "Strongly Agree" }
+        ],
+        isRequired: true
+      }]
+    }, {
+      elements: [{
+        name: "vegetables-like",
+        title: "You like vegetables! Which one is your favorite?",
+        description: "(You can go back and change your earlier answer to see the other conditional questions)",
+        type: "comment",
+        visibleIf: "{vegetables-score} >= 4"
+      }, {
+        name: "vegetables-eat",
+        title: "On a scale of zero to ten, how likely are you to eat broccoli today?",
+        type: "rating",
+        rateMin: 0,
+        rateMax: 10
+      }],
+      visibleIf: "{vegetables-score} >= 4"
+    }, {
+      elements: [{
+        name: "vegetables-dislike",
+        description: "(You can go back and change your earlier answer to see the other conditional questions)",
+        title: "You don't like vegetables! Please explain why.",
+        type: "comment"
+      }],
+      visibleIf: "{vegetables-score} =< 2"
+    }],
+    showQuestionNumbers: "off",
+    completeText: "Next",
+    questionTitleLocation: "top"
+  };
+
+  const vegetables_trial = {
+    type: jsPsychSurvey,
+    survey_json: JSON.stringify(vegetables)
+  };
+
+  jsPsych.run([vegetables_trial]);
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/packages/plugin-survey/examples/example.html b/packages/plugin-survey/examples/example.html
deleted file mode 100644
index cbf02cbf9a..0000000000
--- a/packages/plugin-survey/examples/example.html
+++ /dev/null
@@ -1,302 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <script src="../../jspsych/dist/index.browser.js"></script>
-  <script src="../dist/index.browser.js"></script>
-  <link rel="stylesheet" href="../../jspsych/css/jspsych.css" />
-  <link rel="stylesheet" href="../css/survey.css" />
-  <style>
-    .continue-button-center div.sd-action-bar.sd-footer.sd-body__navigation {
-      justify-content: center !important;
-    }
-  </style>
-</head>
-
-<body></body>
-<script type="text/javascript">
-
-  const jsPsych = initJsPsych({
-    on_finish: function() {
-      jsPsych.data.displayData();
-    }
-  });
-
-  // combining the survey_json and survey_function parameters
-  const jspsych_rating_json = {
-    pages: [{
-      name: "JsonAndDynamicExample",
-      elements: [{
-        type: "radiogroup",
-        name: "jspsych_rating",
-        title: "How much do you like jsPsych?",
-        choices: [
-          { value: 1, text: "Not at all" },
-          { value: 2, text: "Not very much" },
-          { value: 3, text: "It's ok" },
-          { value: 4, text: "Somewhat" },
-          { value: 5, text: "A lot" },
-        ], 
-        colCount: 0
-      }]
-    }]
-  };
-
-  const jspsych_rating_function = (survey) => {
-    const page = survey.getPageByName('JsonAndDynamicExample')
-    const jspsych_improve = page.addNewQuestion("comment", "jspsych_improve");
-    jspsych_improve.title = "What would make jsPsych better?";
-    jspsych_improve.visibleIf = "{jspsych_rating} < 4";
-    survey.showQuestionNumbers = false;
-  }
-
-  const jspsych_rating_trial = {
-    type: jsPsychSurvey,
-    survey_json: JSON.stringify(jspsych_rating_json),
-    survey_function: jspsych_rating_function
-  };
-
-  // survey JSON example: text input, dropdown, multi-select dropdown, collapsible fields
-  const contact_info = {
-    title: "jsPsych Survey Plugin example",
-    pages: [{
-      title: "Page 1 title: Personal Details",
-      name: "PersonalDetails",
-      elements: [{
-        type: "text",
-        name: "FirstName",
-        title: "First name:",
-        isRequired: true,
-        autocomplete: 'given-name'
-      },
-      {
-        type: "text",
-        name: "LastName",
-        title: "Last name:",
-        isRequired: true,
-        startWithNewLine: false,
-        autocomplete: 'family-name'
-      },
-      {
-        type: "panel",
-        name: "Contacts",
-        state: "collapsed",
-        title: "Contact (optional)",
-        elements: [{
-          type: "text",
-          inputType: 'tel',
-          name: "Phone",
-          title: "Phone number:",
-          defaultValue: "(123) 456-7890",
-          autocomplete: 'tel'
-        }, {
-          type: "text",
-          name: "GitHub",
-          title: "GitHub username:"
-        },
-        {
-          type: "text",
-          inputType: 'email',
-          name: "email",
-          title: "Email:",
-          autocomplete: 'email'
-        }]
-      }]
-    },
-    {
-      title: "Page 2 title: Location",
-      name: "Location",
-      description: "Here are some questions with the 'description' shown below the question. The titles are hidden by setting the 'title' string to a space character. (You can also set the survey's 'questionTitleLocation' to' 'hidden', but that applies to the whole survey.)",
-      elements: [
-      {
-        type: "text",
-        name: "State",
-        title: " ",
-        width: "20%",
-        minWidth: "128px",
-        startWithNewLine: false,
-        description: "Enter a state",
-        autocomplete: "off"
-      },
-      {
-        type: "dropdown",
-        name: "Country",
-        title: " ",
-        startWithNewLine: false,
-        width: "60%",
-        minWidth: "256px",
-        description: "Select a country (start typing to search, press Enter to select)",
-        choicesByUrl: {
-          url: "https://surveyjs.io/api/CountriesExample"
-        },
-        placeholder: "",
-        allowClear: false
-      }, 
-      {
-        type: "tagbox",
-        choicesByUrl: {
-          url: "https://surveyjs.io/api/CountriesExample"
-        },
-        name: "all-countries",
-        title: "Which countries have you been to?",
-        description: "Multi-select dropdown - please select all that apply."
-      }]
-    }],
-    showQuestionNumbers: "off",
-    questionDescriptionLocation: "underInput",
-    completeText: "Continue",
-    widthMode: "static",
-    width: "900",
-    fitToContainer: true
-  };
-
-  const contact_info_trial = {
-    type: jsPsychSurvey,
-    survey_json: JSON.stringify(contact_info)
-  };
-
-  // survey JSON example: making questions conditional on previous answers
-  const vegetables = {
-    pages: [{
-      title: "Example of conditional questions",
-      elements: [{
-        name: "vegetables-score",
-        title: "I like vegetables.",
-        type: "radiogroup",
-        choices: [
-          { value: 1, text: "Strongly Disagree" },
-          { value: 2, text: "Disagree" },
-          { value: 3, text: "Neutral" },
-          { value: 4, text: "Agree" },
-          { value: 5, text: "Strongly Agree" }
-        ],
-        isRequired: true
-      }]
-    }, {
-      elements: [{
-        name: "vegetables-like",
-        title: "You like vegetables! Which one is your favorite?",
-        type: "comment",
-        visibleIf: "{vegetables-score} = 4"
-      }, {
-        name: "vegetables-eat",
-        title: "On a scale of zero to ten, how likely are you to eat broccoli today?",
-        type: "rating",
-        rateMin: 0,
-        rateMax: 10
-      }],
-      visibleIf: "{vegetables-score} >= 4"
-    }, {
-      elements: [{
-        name: "vegetables-disklike",
-        title: "You don't like vegetables! Please explain why.",
-        type: "comment"
-      }],
-      visibleIf: "{vegetables-score} =< 2"
-    }],
-    showQuestionNumbers: "off",
-    completeText: "Next",
-    questionTitleLocation: "top",
-    css_classes: ["continue-button-center"]
-  };
-
-  const vegetables_trial = {
-    type: jsPsychSurvey,
-    survey_json: JSON.stringify(vegetables)
-  };
-
-  // survey JSON example: referencing previous answers
-  const animals = {
-    title: "jsPsych Survey Plugin: referencing answers from previous questions",
-    elements: [{
-      type: "checkbox",
-      name: "favorite-animals",
-      title: "What are your favorite animals?",
-      description: "Please select at least TWO features to see the Carry Forward functionality.",
-      isRequired: true,
-      colCount: 2,
-      choices: [
-        "Hippopotamus",
-        "Raccoon",
-        "Kangaroo",
-        "Shark",
-        "Cat",
-        "Hedgehog",
-        "Bunny",
-        "Monkey"
-      ]
-    }, {
-      type: "ranking",
-      name: "animals-ranked",
-      title: "Which of these animals would make the best pet? Please rank your favorite animals from BEST (1) to WORST pet option.",
-      visibleIf: "{favorite-animals.length} > 1",
-      isRequired: true,
-      choicesFromQuestion: "favorite-animals",
-      choicesFromQuestionMode: "selected"
-    }],
-    showQuestionNumbers: false
-  };
-  const animals_trial = {
-    type: jsPsychSurvey,
-    survey_json: JSON.stringify(animals)
-  };
-
-  // survey JSON example: response validation
-  function validate_yes(_, options) {
-    // select the question you want to validate using its name
-    if (options.name === "yesno") {
-      if (options.value !== "Yes") {
-        options.error = "Please select Yes to continue.";
-      }
-    }
-  }
-  const validation = {
-    name: "Validation",
-    title: "jsPsych Survey Plugin: response validation",
-    elements: [
-      {
-        type: "text",
-        name: "ssn",
-        title: "Social Security number",
-        description: "Please enter 9 numbers.",
-        requiredErrorText: "You SSN must be a 9-digit number.",
-        validators: [{
-          type: "regex",
-          text: "Your SSN must be a 9-digit number",
-          regex: "^(?!0{3})(?!6{3})[0-8]\\d{2}-?(?!0{2})\\d{2}-?(?!0{4})\\d{4}$"
-        }],
-        maxLength: 9,
-        autocomplete: "off"
-      },
-      {
-        type: "text",
-        name: "birthdate",
-        title: "Date of birth",
-        inputType: "date",
-        maxValueExpression: "today()",
-        description: "Enter a future date to view the validation."
-      },
-      {
-        type: "boolean",
-        name: "yesno",
-        title: "Select 'Yes'",
-        valueTrue: "Yes",
-        valueFalse: "No"
-      },
-    ],
-    checkErrorsMode: "onValueChanged",
-    showQuestionNumbers: false,
-    completeText: "Continue",
-  };
-  const validation_trial = {
-    type: jsPsychSurvey,
-    survey_json: JSON.stringify(validation),
-    validation_function: validate_yes
-  };
-
-  jsPsych.run([jspsych_rating_trial, contact_info_trial, vegetables_trial, animals_trial, validation_trial]);
-
-</script>
-
-</html>
\ No newline at end of file
diff --git a/packages/plugin-survey/examples/reference_previous_answers.html b/packages/plugin-survey/examples/reference_previous_answers.html
new file mode 100644
index 0000000000..aabc13ee63
--- /dev/null
+++ b/packages/plugin-survey/examples/reference_previous_answers.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="../../jspsych/dist/index.browser.js"></script>
+  <script src="../dist/index.browser.js"></script>
+  <link rel="stylesheet" href="../../jspsych/css/jspsych.css" />
+  <link rel="stylesheet" href="../css/survey.css" />
+  <style>
+    .continue-button-center div.sd-action-bar.sd-footer.sd-body__navigation {
+      justify-content: center !important;
+    }
+  </style>
+</head>
+
+<body></body>
+<script type="text/javascript">
+
+  const jsPsych = initJsPsych({
+    on_finish: function() {
+      jsPsych.data.displayData();
+    }
+  });
+
+  // This example shows how to reference previous answers during the same survey trial,
+  // for instance to create a variable ('calculated value') that can be referenced elsewhere in the survey, or
+  // to use selected answers as choices for a subsequent question.
+  const reference_previous_answers = {
+    title: "jsPsych Survey Plugin: referencing answers from previous questions",
+    // These "calculated values" are defined at the top level of your survey JSON
+    // and allow you to create variables based on responses that you can reference in the survey.
+    // These expressions reference answers to questions using the syntax {questionName},
+    // are are updated dynamically as the participant enters/changes their responses.
+    // These values will be added to the data with "includeIntoResult: true".
+    calculatedValues: [{
+        name: "fullname",
+        expression: "{firstName} +  ' ' + {lastName}",
+        includeIntoResult: true
+    }, {
+        name: "age",
+        expression: "age({birthdate})",
+        includeIntoResult: true
+    }],
+    // Define the survey pages and elements (questions).
+    pages: [{
+        elements: [
+        { name: "firstName", type: "text", title: "First Name", isRequired: true },
+        { name: "lastName", type: "text", title: "Last Name", isRequired: true },
+        {
+            name: "greetings-name",
+            type: "html",
+            html: "<p>Hello, <strong>{fullname}</strong>!</p>",
+            visibleIf: "{firstName} notempty and {lastName} notempty"
+        },
+        {
+            name: "greetings-empty",
+            type: "html",
+            html: "<p>Hello! Please enter your name above.</p>",
+            visibleIf: "{firstName} empty or {lastName} empty"
+        },
+        {
+            type: "text",
+            name: "birthdate",
+            title: "Please enter your birth date:",
+            isRequired: true,
+            inputType: "date",
+            maxValueExpression: "today()",
+            validators: [
+                {
+                    type: "expression",
+                    text: "You should be younger than 200 years old.",
+                    expression: "{age} <= 200"
+                }
+            ]
+        },
+        {
+            name: "show-age",
+            type: "html",
+            html: "<p>You are <strong>{age}</strong> years old!</p>",
+            visibleIf: "{birthdate} notempty"
+        }]
+    }, {
+        elements: [{
+            type: "checkbox",
+            name: "favorite-animals",
+            title: "What are your favorite animals?",
+            description: "Please select at least TWO features to see the Carry Forward functionality.",
+            isRequired: true,
+            colCount: 2,
+            choices: [
+                "Hippopotamus",
+                "Raccoon",
+                "Kangaroo",
+                "Shark",
+                "Cat",
+                "Hedgehog",
+                "Bunny",
+                "Monkey"
+            ]
+        }, 
+        // This question gets the selected choices from the previous question and uses those as the choices
+        // for this question (choicesFromQuestion: "favorite-animals").
+        // Note that this question only appears if 2 or more answers have been selected in the previous question
+        // (visibleIf: "{favorite-animals.length} > 1") because this ranking question doesn't make sense unless
+        // there are at least 2 choices.
+        {
+            type: "ranking",
+            name: "animals-ranked",
+            title: "Which of these animals would make the best pet? Please rank your favorite animals from BEST (1) to WORST pet option.",
+            visibleIf: "{favorite-animals.length} > 1",
+            isRequired: true,
+            choicesFromQuestion: "favorite-animals",
+            choicesFromQuestionMode: "selected"
+        }],
+    }],
+    showQuestionNumbers: false
+  };
+  const reference_previous_answers_trial = {
+    type: jsPsychSurvey,
+    survey_json: JSON.stringify(reference_previous_answers)
+  };
+
+  jsPsych.run([reference_previous_answers_trial]);
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/packages/plugin-survey/examples/response_validation.html b/packages/plugin-survey/examples/response_validation.html
new file mode 100644
index 0000000000..5f7f287cf9
--- /dev/null
+++ b/packages/plugin-survey/examples/response_validation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="../../jspsych/dist/index.browser.js"></script>
+  <script src="../dist/index.browser.js"></script>
+  <link rel="stylesheet" href="../../jspsych/css/jspsych.css" />
+  <link rel="stylesheet" href="../css/survey.css" />
+</head>
+
+<body></body>
+<script type="text/javascript">
+
+  const jsPsych = initJsPsych({
+    on_finish: function() {
+      jsPsych.data.displayData();
+    }
+  });
+
+  // This example shows how to validate responses using a function passed to jsPsych's "validation_function"
+  // parameter, and using a survey question's 'validators' parameter.
+
+  // Define a function to be passed to jsPsych's "validation_function" parameter.
+  // This function runs whenever the survey's 'onValidateQuestion' event occurs, and is more flexible than the
+  // built-in question validators that SurveyJS allows you to add through the survey JSON.
+  // https://surveyjs.io/form-library/documentation/data-validation#implement-custom-client-side-validation
+  function validate_yes(_, options) {
+    // Select the question you want to validate using the question name
+    if (options.name === "yesno") {
+      // Do your validation here...
+      if (options.value !== "Yes") {
+        options.error = "Oh no! You have to select 'Yes' to continue.";
+      }
+    }
+  }
+
+  const validation = {
+    name: "Validation",
+    title: "jsPsych Survey Plugin: response validation",
+    elements: [
+      {
+        type: "text",
+        name: "ssn",
+        title: "Social Security number",
+        description: "Please enter 9 numbers.",
+        requiredErrorText: "Your SSN must be a 9-digit number.",
+        // There are some question validators that can be added directly into the survey JSON
+        // https://surveyjs.io/form-library/documentation/data-validation#built-in-client-side-validators
+        validators: [{
+          type: "regex",
+          text: "Your SSN must be a 9-digit number",
+          regex: "(?=\\d{9})"
+        }],
+        maxLength: 9,
+        autocomplete: "off"
+      },
+      {
+        type: "text",
+        name: "birthdate",
+        title: "Date of birth",
+        inputType: "date",
+        maxValueExpression: "today()",
+        description: "To view the validation, type in a future date and try to continue."
+      },
+      {
+        type: "boolean",
+        name: "yesno",
+        title: "Select 'Yes'",
+        valueTrue: "Yes",
+        valueFalse: "No"
+      },
+    ],
+    checkErrorsMode: "onValueChanged",
+    showQuestionNumbers: false,
+    completeText: "Continue",
+  };
+
+  const validation_trial = {
+    type: jsPsychSurvey,
+    survey_json: JSON.stringify(validation),
+    validation_function: validate_yes
+  };
+
+  jsPsych.run([validation_trial]);
+
+</script>
+
+</html>
\ No newline at end of file
