From 30e1e3e753676765114c7017c390c5ab49730672 Mon Sep 17 00:00:00 2001
From: CharlieHFFF <fwan@vassar.edu>
Date: Mon, 25 Nov 2024 02:14:46 -0500
Subject: [PATCH] Updating Stroop Task Timeline

---
 packages/stroop-task/README.md           | 71 ++++++++++++++++++++++++
 packages/stroop-task/docs/stroop-task.md | 51 +++++++++++++++++
 packages/stroop-task/examples/index.html | 44 +++++++++++++++
 packages/stroop-task/jest.config.js      |  1 +
 packages/stroop-task/package.json        | 37 ++++++++++++
 packages/stroop-task/src/index.ts        | 42 ++++++++++++++
 packages/stroop-task/tsconfig.json       | 10 ++++
 7 files changed, 256 insertions(+)
 create mode 100644 packages/stroop-task/README.md
 create mode 100644 packages/stroop-task/docs/stroop-task.md
 create mode 100644 packages/stroop-task/examples/index.html
 create mode 100644 packages/stroop-task/jest.config.js
 create mode 100644 packages/stroop-task/package.json
 create mode 100644 packages/stroop-task/src/index.ts
 create mode 100644 packages/stroop-task/tsconfig.json

diff --git a/packages/stroop-task/README.md b/packages/stroop-task/README.md
new file mode 100644
index 0000000..6a26119
--- /dev/null
+++ b/packages/stroop-task/README.md
@@ -0,0 +1,71 @@
+# n-back
+
+## Overview
+
+A timeline for the nback task
+
+## Loading
+
+### In browser
+
+```html
+<script src="https://unpkg.com/@jspsych-timelines/n-back">
+```
+
+### Via NPM
+
+```
+npm install @jspsych-timelines/n-back
+```
+
+```js
+import { createTimeline } from "@jspsych-timelines/n-back"
+```
+
+## Compatibility
+
+`@jspsych-timelines/n-back` requires jsPsych v7.0.0 or later.
+
+## Documentation
+
+### createTimeline
+
+#### jsPsychTimelineNBack.createTimeline(jsPsych, { *options* }) ⇒ <code>timeline</code>
+This timeline describes an N-back task setup that is customizable based on several parameters, allowing researchers to control the level of difficulty, timing, and data output format.
+
+| Parameter           | Type                      | Default       | Description                                                                                   |
+|---------------------|---------------------------|---------------|-----------------------------------------------------------------------------------------------|
+| `stimuli`           | `any`                     |               | Stimuli array used in the N-back task, which can be customized based on the experiment needs. |
+| `keyboard_response` | `string`                  | `"space"`     | Key used by participants to respond during trials.                                            |
+| `trial_duration`    | `number`                  | `1000` ms     | Duration of each trial in milliseconds.                                                       |
+| `post_trial_gap`    | `number`                  | `500` ms      | Gap between trials in milliseconds.                                                           |
+| `fixation_duration` | `number`                  | `500` ms      | Duration of the fixation cross before each trial.                                             |
+| `n`                 | `number`                  | `2`           | Level of N-back, determining how many trials back the participant should remember.            |
+| `num_trials`        | `number`                  | `20`          | Total number of trials in the experiment.                                                     |
+| `rep_ratio`         | `number`                  | `0.2`         | Probability that a stimulus will repeat in the N-back sequence, affecting task difficulty.     |
+| `debrief`           | `boolean`                 | `false`       | Whether to show a debrief screen at the end of the task.                                      |
+| `return_accuracy`   | `boolean`                 | `false`       | Whether to return participant accuracy as part of the output data.                            |
+| `data_output`       | `"none"`, `"json"`, `"csv"` | `"none"`    | Specifies the format for saving output data, if any.                                          |
+
+## Reference for Standard Performance
+
+### Standard N-back Task Performance
+
+The following table summarizes the standard performance (accuracy and reaction times) for control subjects in the 1-back, 2-back, and 3-back tasks, as reported by Harvey et al. (2004).
+
+| Condition | Accuracy (%)      | Reaction Time (ms)         |
+|-----------|-------------------|----------------------------|
+| 1-back    | 96.5 (±3.6)       | 749.3 (±199.0)             |
+| 2-back    | 85.6 (±8.8)       | 1005.5 (±247.2)            |
+| 3-back    | 80.0 (±7.4)       | 1049.5 (±214.8)            |
+
+with a sample size of 22 individuals. 
+
+## Reference
+
+Harvey, P. O., Le Bastard, G., Pochon, J. B., Levy, R., Allilaire, J. F., Dubois, B., & Fossati, P. (2004). Executive functions and updating of the contents of working memory in unipolar depression. Journal of Psychiatric Research, 38(6), 567–576. https://doi.org/10.1016/j.jpsychires.2004.03.003
+
+## Author 
+
+Feng Wan
+
diff --git a/packages/stroop-task/docs/stroop-task.md b/packages/stroop-task/docs/stroop-task.md
new file mode 100644
index 0000000..778ef1c
--- /dev/null
+++ b/packages/stroop-task/docs/stroop-task.md
@@ -0,0 +1,51 @@
+# stroop-task
+
+Implementing stroop task in JsPsych Timelines
+
+## Parameters
+
+### Initialization Parameters
+
+Initialization parameters can be set when calling `initJsPsych()`
+
+```js
+initJsPsych({
+  timelines: [
+    {type: jsPsychTimelineStroopTask, params: {...}}
+  ]
+})
+```
+
+Parameter | Type | Default Value | Description
+----------|------|---------------|------------
+          |      |               |
+
+### Trial Parameters
+
+Trial parameters can be set when adding the timeline to a trial object.
+
+```js
+var trial = {
+  type: jsPsych...,
+  timelines: [
+    {type: jsPsychTimelineStroopTask, params: {...}}
+  ]
+}
+```
+
+Parameter | Type | Default Value | Description
+----------|------|---------------|------------
+          |      |               |
+
+## Data Generated
+
+Name | Type | Value
+-----|------|------
+     |      |
+
+## Functions
+
+If the timeline adds any static functions, list them here.
+
+### function()
+
diff --git a/packages/stroop-task/examples/index.html b/packages/stroop-task/examples/index.html
new file mode 100644
index 0000000..5beae07
--- /dev/null
+++ b/packages/stroop-task/examples/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://unpkg.com/jspsych"></script>
+  <script src="https://unpkg.com/@jspsych-contrib/plugin-html-keyboard-response-raf"></script>
+  <script src="../dist/index.global.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css">
+</head>
+
+<body></body>
+<script>
+
+  const timeline = []
+
+  const jsPsych = initJsPsych();
+
+  const instructions = {
+    type: jsPsychHtmlKeyboardResponseRaf,
+    stimulus: `
+      <p>Welcome to the Stroop task.</p>
+      <p>You will see words in different colors.</p>
+      <p>Name the color of the text instead of the text itself.</p>
+      <p>Press any key to begin.</p>
+    `
+  };
+
+  const stimuli = [
+    { word: 'RED', color: 'red' },     // Congruent
+    { word: "BLUE", color: "blue" },   // Congruent
+    { word: "GREEN", color: "green" }, // Congruent
+    { word: "RED", color: "blue" },    // Incongruent
+    { word: "BLUE", color: "red" },    // Incongruent
+    { word: "GREEN", color: "yellow" } // Incongruent
+];
+
+  const stroopTimeline = jsPsychTimelineStroopTask.createTimeline(jsPsych, stimuli, 48, 2000, 500, 500, true);
+
+  timeline.push(instructions, stroopTimeline)
+
+  jsPsych.run(timeline);
+</script>
+
+</html>
\ No newline at end of file
diff --git a/packages/stroop-task/jest.config.js b/packages/stroop-task/jest.config.js
new file mode 100644
index 0000000..bd1aace
--- /dev/null
+++ b/packages/stroop-task/jest.config.js
@@ -0,0 +1 @@
+module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);
\ No newline at end of file
diff --git a/packages/stroop-task/package.json b/packages/stroop-task/package.json
new file mode 100644
index 0000000..de56665
--- /dev/null
+++ b/packages/stroop-task/package.json
@@ -0,0 +1,37 @@
+{
+    "name": "@jspsych-timelines/stroop-task",
+    "version": "0.0.1",
+    "description": "Implementing stroop task in JsPsych Timelines",
+    "type": "module",
+    "main": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "unpkg": "dist/index.browser.min.js",
+    "scripts": {
+      "build": "tsup src/index.ts --format esm,iife --sourcemap --dts --treeshake --clean --global-name jsPsychTimelineStroopTask"
+    },
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/jspsych/jspsych-timelines.git"
+    },
+    "keywords": [
+      "jsPsych"
+    ],
+    "author": {
+      "name": "Feng Wan",
+      "url": "https://github.com/CharlieHFFF"
+    },
+    "license": "MIT",
+    "bugs": {
+      "url": "https://github.com/jspsych/jspsych-timelines/issues"
+    },
+    "homepage": "https://github.com/jspsych/jspsych-timelines/packages/stroop-task#readme",
+    "peerDependencies": {
+      "jspsych": "^8.0.1"
+    },
+    "dependencies": {
+    },
+    "devDependencies": {
+      "tsup": "^6.7.0",
+      "typescript": "^5.0.2"
+    }
+  }
\ No newline at end of file
diff --git a/packages/stroop-task/src/index.ts b/packages/stroop-task/src/index.ts
new file mode 100644
index 0000000..fd41b6d
--- /dev/null
+++ b/packages/stroop-task/src/index.ts
@@ -0,0 +1,42 @@
+import jsPsychHtmlKeyboardResponse from '@jspsych/plugin-html-keyboard-response'
+
+export function createTimeline(jsPsych: any, 
+    stimuli: any,
+    font: number = 48,  
+    trial_duration: number = 10000,
+    post_trial_gap: number = 500, 
+    fixation_duration: number = 500,
+    randomize_trials: boolean = true, 
+) {
+
+    const timeline = []
+
+    const fixation = {
+        type: jsPsychHtmlKeyboardResponse,
+        stimulus: `<p style="font-size: 48px; color: gray;">+</p>`,
+        choices: "NO_KEYS",
+        trial_duration: fixation_duration, 
+    }
+
+    const trial = {
+        type: jsPsychHtmlKeyboardResponse, 
+        stimulus: function() {
+            console.log("Stimuli:", stimuli);
+            console.log("color", jsPsych.evaluateTimelineVariable('color'))
+            return `<p style="color:${jsPsych.evaluateTimelineVariable('color')}; font-size:${font}px;">${jsPsych.evaluateTimelineVariable('word')}</p>`;
+        },
+        choices: "NO_KEYS", 
+        trial_duration: trial_duration, 
+        post_trial_gap: post_trial_gap, 
+    }
+
+    const full_trial = {
+        timeline: [fixation, trial], 
+        timeline_variables: stimuli, 
+        randomize_order: randomize_trials, 
+    }  
+
+    timeline.push(full_trial)
+
+    return timeline
+}
\ No newline at end of file
diff --git a/packages/stroop-task/tsconfig.json b/packages/stroop-task/tsconfig.json
new file mode 100644
index 0000000..33655f7
--- /dev/null
+++ b/packages/stroop-task/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "extends": "@jspsych/config/tsconfig.contrib.json",
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "include": [
+        "src",
+        "../cli/src/build.js"
+    ]
+}
\ No newline at end of file