move examples into separate files

jspsych · Feb 2, 2024 · c62c327 · c62c327
1 parent 9fc9b79
commit c62c327
Show file tree

Hide file tree

Showing 6 changed files with 511 additions and 302 deletions.
diff --git a/packages/plugin-survey/examples/basic_question_types.html 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>
diff --git a/packages/plugin-survey/examples/combine_json_function.html 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>
diff --git a/packages/plugin-survey/examples/conditional_question_display.html 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>