add demo task for testing example

jspsych · Mar 13, 2022 · 34c339f · 34c339f
1 parent f18d29f
commit 34c339f
Showing 1 changed file with 123 additions and 0 deletions.
diff --git a/use-case-1-testing/demo-task/index.html b/use-case-1-testing/demo-task/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<head>
+  <script src="https://unpkg.com/[email protected]"></script>
+  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css">
+  <style>
+    .stimulus {
+      font-size: 40px;
+    }
+  </style>
+</head>
+<body></body>
+<script>
+  const jsPsych = initJsPsych();
+
+  const instructions = {
+    type: jsPsychHtmlButtonResponse,
+    stimulus: `
+    <p>This experiment measures how fast you can identify whether a number is odd or even.</p>
+    <p>You'll see a number appear on the screen. As quickly as you can:</p>
+    <p>Press the A key if the number is odd.</p>
+    <p>Press the L key if the number is even.</p>
+  `,
+    choices: ["I understand the instructions"],
+  };
+
+  const instruction_check = {
+    timeline: [
+      {
+        type: jsPsychHtmlButtonResponse,
+        stimulus: () => {
+          return `
+        <p class="stimulus">${jsPsych.timelineVariable("number")}</p>
+      `;
+        },
+        choices: ["A", "L"],
+        prompt:
+          "<p>To see if you understood the instructions, which key should you press if you see this number?</p>",
+        data: {
+          task: "instructions-check",
+        },
+        on_finish: (data) => {
+          data.correct = data.response === jsPsych.timelineVariable("answer");
+        },
+      },
+    ],
+    timeline_variables: [
+      { number: 3, answer: 0 },
+      { number: 6, answer: 1 },
+    ],
+    randomize_order: true,
+  };
+
+  const instructions_check_fail = {
+    timeline: [
+      {
+        type: jsPsychHtmlButtonResponse,
+        stimulus: `<p>You did not answer the questions correctly.</p>
+        <p>We'll show you the instructions again.</p>
+      `,
+        choices: ["Got it"],
+      },
+    ],
+    conditional_function: () => {
+      const ic_data = jsPsych.data.get().filter({ task: "instructions-check" }).last(2);
+      return !ic_data.select("correct").all(Boolean);
+    },
+  };
+
+  const instructions_loop = {
+    timeline: [instructions, instruction_check, instructions_check_fail],
+    loop_function: (data) =>
+      !data.filter({ task: "instructions-check" }).select("correct").all(Boolean),
+  };
+
+  const pre_task_start = {
+    type: jsPsychHtmlKeyboardResponse,
+    stimulus: `<p>Great! You are ready to begin the task.</p>
+    <p>Please place your hands over the A and L keys.</p>
+    <p>Press either A or L to begin.</p>
+  `,
+    choices: ["a", "l"],
+  };
+
+  const snarc = {
+    timeline: [
+      {
+        type: jsPsychHtmlKeyboardResponse,
+        stimulus: `<p class="stimulus">+</p>`,
+        trial_duration: 500,
+        choices: "NO_KEYS",
+      },
+      {
+        type: jsPsychHtmlKeyboardResponse,
+        stimulus: () => `<p class="stimulus">${jsPsych.timelineVariable("number")}</p>`,
+        choices: ["a", "l"],
+        data: {
+          digit: jsPsych.timelineVariable("number"),
+          parity: jsPsych.timelineVariable("parity"),
+          magnitude: jsPsych.timelineVariable("magnitude"),
+        },
+      },
+    ],
+    timeline_variables: [
+      { number: 1, parity: "odd", magnitude: "small" },
+      { number: 2, parity: "even", magnitude: "small" },
+      { number: 3, parity: "odd", magnitude: "small" },
+      { number: 4, parity: "even", magnitude: "small" },
+      { number: 6, parity: "even", magnitude: "large" },
+      { number: 7, parity: "odd", magnitude: "large" },
+      { number: 8, parity: "even", magnitude: "large" },
+      { number: 9, parity: "odd", magnitude: "large" },
+    ],
+    sample: {
+      type: "fixed-repetitions",
+      size: 5,
+    },
+  };
+
+  jsPsych.run([instructions_loop, pre_task_start, snarc]);
+
+</script>