diff --git a/.changeset/arrow-flanker-text-config.md b/.changeset/arrow-flanker-text-config.md
new file mode 100644
index 00000000..d2008a8b
--- /dev/null
+++ b/.changeset/arrow-flanker-text-config.md
@@ -0,0 +1,32 @@
+---
+"@jspsych-timelines/arrow-flanker": major
+---
+
+**Major refactor to use published @jspsych-contrib/plugin-flanker package**
+
+This release represents a comprehensive refactor of the arrow-flanker timeline to leverage the newly published `@jspsych-contrib/plugin-flanker` package, enabling more flexible stimulus types and improved performance.
+
+### Breaking Changes
+
+- Timeline implementation completely refactored to use the `@jspsych-contrib/plugin-flanker` package instead of custom trial logic
+- Internal architecture changes may affect advanced users who were directly importing internal utilities
+
+### New Features
+
+- **Text Configuration System**: All user-facing text is now configurable via the `text_object` parameter to facilitate translation and customization
+- **Improved Sequential Effects Tracking**: Now uses `jsPsych.data.get()` for more reliable tracking of previous trial data
+- **Cleaner API**: Utilities are now namespaced under `.utils` export following jspsych-timelines conventions
+
+### Improvements
+
+- SOA handling refactored with cleaner `has_soa` flag pattern instead of try/catch
+- Only user-facing utilities are exported; internal implementation details are no longer part of the public API
+- Better separation of concerns between plugin (stimulus presentation) and timeline (trial ordering, blocks, configuration)
+
+### Migration Guide
+
+For most users, this update should be backward compatible. The plugin dependency is automatically installed, so no additional installation steps are required.
+
+However, if you were:
+- Importing internal utilities: These are no longer exported. Use the public API via `utils.*`
+- Relying on specific trial implementation details: The underlying plugin has changed, though the timeline API remains the same
diff --git a/package-lock.json b/package-lock.json
index a33d0de6..747c1dcb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2394,6 +2394,15 @@
"jspsych": "^8.0.0"
}
},
+ "node_modules/@jspsych-contrib/plugin-flanker": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@jspsych-contrib/plugin-flanker/-/plugin-flanker-1.0.0.tgz",
+ "integrity": "sha512-ZVHhV297O9TxSEjj8Hu7LgFsYJaCcNnnMJ6FEfKmvNwI/ext6mN5G9C0kFsvooHye+AxUmKm1o8TEKUucSz0hw==",
+ "license": "MIT",
+ "dependencies": {
+ "jspsych": "^8.2.1"
+ }
+ },
"node_modules/@jspsych-contrib/plugin-spatial-nback": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@jspsych-contrib/plugin-spatial-nback/-/plugin-spatial-nback-1.1.0.tgz",
@@ -12038,9 +12047,10 @@
},
"packages/arrow-flanker": {
"name": "@jspsych-timelines/arrow-flanker",
- "version": "0.2.0",
+ "version": "0.3.0",
"license": "MIT",
"dependencies": {
+ "@jspsych-contrib/plugin-flanker": "^1.0.0",
"@jspsych/plugin-html-keyboard-response": "^2.0.0"
},
"devDependencies": {
diff --git a/packages/arrow-flanker/CHANGELOG.md b/packages/arrow-flanker/CHANGELOG.md
index f53204c9..188b4ad2 100644
--- a/packages/arrow-flanker/CHANGELOG.md
+++ b/packages/arrow-flanker/CHANGELOG.md
@@ -1,5 +1,16 @@
# @jspsych-timelines/arrow-flanker
+## 0.3.0
+
+### Minor Changes
+
+- Refactored to use @jspsych-contrib/plugin-flanker for stimulus presentation
+- Plugin now handles RAF-based SOA timing, response collection, and stimulus rendering
+- Timeline package focuses on experiment orchestration (trial order, blocks, congruency ratios)
+- Added peer dependency on @jspsych-contrib/plugin-flanker ^1.0.0
+- Removed internal stimulus generation code (now handled by plugin)
+- Improved timing precision with requestAnimationFrame implementation
+
## 0.2.0
### Minor Changes
diff --git a/packages/arrow-flanker/README.md b/packages/arrow-flanker/README.md
index ce7ee295..d55001e2 100644
--- a/packages/arrow-flanker/README.md
+++ b/packages/arrow-flanker/README.md
@@ -2,12 +2,187 @@
## Overview
-This timeline shows a sequence of arrow flanker trials. Participants are supposed to respond to the arrow in the middle of the screen and ignore the flankers. Half of the trials will be congruent (flankers match the target) and half incongruent.
+A comprehensive implementation of the Eriksen Flanker Task using arrow stimuli for jsPsych. Measures selective attention and response inhibition by requiring participants to respond to a central target arrow while ignoring flanking arrows. Supports extensive parameterization for research applications including temporal manipulation (SOA), spatial configuration, congruency ratio control, sequential effects tracking, and multiple block designs.
-## Functions
+## Loading
-### `createTimeline`
+### Via NPM
-### `timelineUnits`
+```bash
+npm install @jspsych-timelines/arrow-flanker
+```
-### `utils`
\ No newline at end of file
+```js
+import { createTimeline } from '@jspsych-timelines/arrow-flanker'
+```
+
+### In browser
+
+```html
+
+```
+
+## Compatibility
+
+`@jspsych-timelines/arrow-flanker` requires:
+- jsPsych v8.0.0 or later
+- `@jspsych-contrib/plugin-flanker` v1.0.0 or later (peer dependency)
+
+## Documentation
+
+### createTimeline
+
+#### jsPsychTimelineArrowFlankerTask.createTimeline(jsPsych, { *options* }) ⇒ timeline
+
+Creates a complete Arrow Flanker Task timeline with configurable parameters for research applications.
+
+**Basic usage:**
+```javascript
+const jsPsych = initJsPsych();
+
+const timeline = jsPsychTimelineArrowFlankerTask.createTimeline(jsPsych, {
+ fixation_duration: 500,
+ num_trials: 24
+});
+
+jsPsych.run(timeline.timeline);
+```
+
+**Advanced usage (SOA manipulation):**
+```javascript
+const timeline = jsPsychTimelineArrowFlankerTask.createTimeline(jsPsych, {
+ soa: [-200, -100, 0, 100, 200], // Temporal manipulation
+ stimulus_duration: 100,
+ congruency_ratio: { congruent: 30, incongruent: 70 },
+ track_sequence_effects: true,
+ num_blocks: 4,
+ num_trials: 84
+});
+```
+
+The following parameters can be specified in the **options** parameter.
+
+#### Temporal Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `soa` | number \| number[] \| {min, max} | `0` | Stimulus Onset Asynchrony (ms). Controls timing between flanker and target onset. Single value, array of values to sample, or range object. |
+| `stimulus_duration` | number \| null | `null` | Stimulus display duration (ms). `null` = response-terminated |
+| `fixation_duration` | number | `500` | Fixation cross duration (ms) |
+| `iti_duration` | number | `0` | Inter-trial interval (ms) |
+| `response_timeout` | number | `1500` | Maximum response time allowed (ms) |
+
+#### Spatial Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `stimulus_size` | string | `'48px'` | Size of individual arrow elements |
+| `target_flanker_separation` | string | `'10px'` | Space between target and flankers |
+| `fixation_size` | string | `'24px'` | Size of fixation cross |
+| `stimulus_container_height` | string | `'100px'` | Container height to prevent layout shifts |
+| `flanker_arrangement` | 'horizontal' \| 'vertical' | `'horizontal'` | Orientation of flanker array |
+| `num_flankers` | 4 \| 6 | `4` | Number of flankers (creates 5 or 7-item arrays) |
+
+#### Design Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `include_neutral` | boolean | `false` | Include neutral trials with non-directional flankers |
+| `neutral_stimulus` | string | (dash SVG) | Custom SVG for neutral flanker stimulus |
+| `block_design` | 'mixed' \| 'blocked' | `'mixed'` | Trial presentation order (randomized or grouped) |
+| `congruency_ratio` | object | `{congruent: 1, incongruent: 1}` | Relative proportions of trial types. E.g., `{congruent: 25, incongruent: 75}` |
+| `track_sequence_effects` | boolean | `false` | Add previous trial information for CSE analysis |
+| `num_blocks` | number | `1` | Number of experimental blocks |
+| `num_trials` | number | `12` | Number of trials per block |
+| `block_break_duration` | number \| null | `null` | Block break duration (ms). `null` shows continue button |
+
+#### Response Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `response_keys` | object | `{left: ['ArrowLeft'], right: ['ArrowRight']}` | Response key mapping for left/right |
+| `data_labels` | object | `{}` | Custom data labels added to all trials |
+
+#### Legacy Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `n` | number | - | Alias for `num_trials` (backward compatibility) |
+
+### timelineUnits
+
+Building blocks for custom timeline construction:
+
+- **`createFixationTrial(options)`**: Creates a fixation cross trial
+- **`createFlankerTrial(jsPsych, options)`**: Creates a flanker stimulus trial with response collection
+- **`createITITrial(options)`**: Creates an inter-trial interval blank screen
+- **`createBlockBreak(options)`**: Creates a block break screen
+
+**Example:**
+```javascript
+const fixation = jsPsychTimelineArrowFlankerTask.timelineUnits.createFixationTrial({
+ duration: 500
+});
+```
+
+### Exported utilities
+
+Additional functions for advanced customization:
+
+- **`generateTrialVariables(jsPsych, options)`**: Generates timeline variables for a block
+- **`createFlankerStimulus(direction, congruency, options)`**: Creates HTML for a flanker stimulus array
+- **`mergeConfig(userConfig, defaults)`**: Merges configurations
+
+## Data
+
+Each trial records the following data:
+
+| Name | Type | Description |
+|------|------|-------------|
+| `task` | string | Always 'flanker' |
+| `phase` | string | 'response', 'fixation', 'iti', or 'block_break' |
+| `direction` | string | Target direction: 'left' or 'right' |
+| `congruency` | string | Trial type: 'congruent', 'incongruent', or 'neutral' |
+| `soa` | number | SOA value for this trial (ms) |
+| `block_number` | number | Current block number |
+| `trial_number` | number | Trial number within block |
+| `previous_congruency` | string | Previous trial congruency (if `track_sequence_effects: true`) |
+| `previous_direction` | string | Previous trial direction (if `track_sequence_effects: true`) |
+| `rt` | number | Reaction time (ms) |
+| `response` | string | Key pressed |
+| `correct` | boolean | Response accuracy |
+
+## Examples
+
+Complete working examples are available in the [examples directory](examples/):
+
+- **[Basic Usage](examples/index.html)** - Simple flanker task with default settings
+- **[SOA Manipulation](examples/advanced-soa.html)** - Temporal dynamics research with multiple SOA values
+- **[Congruency Ratio](examples/congruency-ratio.html)** - Global control manipulation (high vs low conflict)
+- **[Neutral Trials](examples/neutral-trials.html)** - Separate facilitation from interference
+- **[Sequential Effects](examples/sequential-effects.html)** - Congruency Sequence Effect (Gratton effect)
+
+See [examples/README.md](examples/README.md) for detailed descriptions and research applications.
+
+## Research Applications
+
+This package supports investigating:
+
+1. **Response Competition** - Use SOA manipulation to isolate response selection stage
+2. **Perceptual Filtering** - Small separations + brief durations test visual processing
+3. **Cognitive Control Adaptation** - Sequential effects tracking enables CSE analysis
+4. **Global vs Local Control** - Congruency ratio manipulation tests proactive control
+5. **Temporal Dynamics** - SOA arrays reveal time course of interference
+
+## Author / Citation
+
+**Author:** Josh de Leeuw
+**GitHub:** [@jodeleeuw](https://github.com/jodeleeuw)
+
+If you use this package in your research, please cite:
+
+```
+Eriksen, B. A., & Eriksen, C. W. (1974). Effects of noise letters upon the
+identification of a target letter in a nonsearch task. Perception & Psychophysics,
+16(1), 143-149.
+```
diff --git a/packages/arrow-flanker/examples/README.md b/packages/arrow-flanker/examples/README.md
new file mode 100644
index 00000000..38ff8bee
--- /dev/null
+++ b/packages/arrow-flanker/examples/README.md
@@ -0,0 +1,214 @@
+# Arrow Flanker Task - Examples
+
+This directory contains working examples demonstrating various features of the arrow-flanker package.
+
+## Available Examples
+
+### 1. **index.html** - Basic Flanker Task
+A simple implementation with default settings.
+
+**Features demonstrated:**
+- Basic configuration
+- Fixation + stimulus + response sequence
+- Multiple blocks with breaks
+- Instructions
+
+**Configuration:**
+```javascript
+{
+ fixation_duration: 500,
+ num_trials: 24,
+ num_blocks: 2
+}
+```
+
+**Use case:** Standard flanker task experiment
+
+---
+
+### 2. **advanced-soa.html** - SOA Manipulation
+Demonstrates temporal manipulation using Stimulus Onset Asynchrony (SOA).
+
+**Features demonstrated:**
+- Array-based SOA sampling
+- Brief stimulus duration
+- Data analysis by SOA condition
+- Sequential effects tracking
+
+**Configuration:**
+```javascript
+{
+ soa: [-200, -100, 0, 100, 200],
+ stimulus_duration: 100,
+ track_sequence_effects: true,
+ num_trials: 40
+}
+```
+
+**Use case:** Research on temporal dynamics of response competition
+
+**Research application:** Isolate response selection vs perceptual filtering stages by varying when flankers appear relative to target
+
+---
+
+### 3. **congruency-ratio.html** - Global Control Manipulation
+Demonstrates manipulation of conflict expectation through trial proportions.
+
+**Features demonstrated:**
+- Custom congruency ratios
+- Multiple blocks with different contexts
+- High-conflict vs low-conflict environments
+- Block-specific data analysis
+
+**Configuration:**
+```javascript
+// Block 1: High-conflict
+{
+ congruency_ratio: { congruent: 25, incongruent: 75 }
+}
+
+// Block 2: Low-conflict
+{
+ congruency_ratio: { congruent: 75, incongruent: 25 }
+}
+```
+
+**Use case:** Study proactive vs reactive cognitive control
+
+**Research application:** Test predictions that high-conflict contexts reduce overall flanker effect due to sustained control
+
+---
+
+### 4. **neutral-trials.html** - Neutral Trials
+Demonstrates inclusion of neutral trials to separate facilitation from interference.
+
+**Features demonstrated:**
+- Three trial types (congruent, incongruent, neutral)
+- Equal proportions
+- Facilitation vs interference analysis
+
+**Configuration:**
+```javascript
+{
+ include_neutral: true,
+ congruency_ratio: {
+ congruent: 1,
+ incongruent: 1,
+ neutral: 1
+ },
+ num_trials: 36
+}
+```
+
+**Use case:** Distinguish response facilitation from response interference
+
+**Research application:** Determine whether flanker effects are driven by helpful congruent flankers, harmful incongruent flankers, or both
+
+---
+
+### 5. **sequential-effects.html** - Sequential Effects (Gratton Effect)
+Demonstrates trial-to-trial adaptations in cognitive control.
+
+**Features demonstrated:**
+- Sequential effects tracking
+- Congruency Sequence Effect (CSE) analysis
+- Four transition types (cC, cI, iC, iI)
+- Gratton effect calculation
+
+**Configuration:**
+```javascript
+{
+ track_sequence_effects: true,
+ congruency_ratio: { congruent: 1, incongruent: 1 },
+ num_trials: 64
+}
+```
+
+**Use case:** Examine dynamic adjustments in cognitive control
+
+**Research application:** Test whether experiencing conflict on trial n-1 reduces the flanker effect on trial n, supporting reactive control mechanisms
+
+---
+
+## Running the Examples
+
+### Method 1: Local Build
+1. Build the package: `npm run build`
+2. Open any HTML file in a web browser
+3. The examples load the built package from `../dist/index.global.js`
+
+### Method 2: From unpkg (see load-from-unpkg.html)
+Load the published package directly from unpkg CDN:
+```html
+
+```
+
+## Understanding the Output
+
+All examples include data analysis in the browser console. Open Developer Tools (F12) to see:
+
+- **Basic example:** Simple completion message
+- **SOA example:** RT and flanker effect by SOA condition
+- **Congruency ratio:** Flanker effect by block (high vs low conflict)
+- **Neutral trials:** Facilitation and interference components
+- **Sequential effects:** CSE analysis with all four transition types
+
+## Customization Tips
+
+### Timing Parameters
+```javascript
+fixation_duration: 500, // Time before stimulus
+stimulus_duration: 100, // How long stimulus shows (null = until response)
+iti_duration: 200, // Blank time after response
+response_timeout: 1500 // Max time to respond
+```
+
+### Spatial Parameters
+```javascript
+stimulus_size: '64px', // Make arrows bigger
+target_flanker_separation: '20px', // More spacing
+flanker_arrangement: 'vertical', // Stack vertically
+num_flankers: 6 // 7-item array instead of 5
+```
+
+### Response Keys
+```javascript
+response_keys: {
+ left: ['f', 'F'],
+ right: ['j', 'J']
+}
+```
+
+## Research Design Guidelines
+
+### Minimum Trial Counts
+- **Basic flanker effect:** 20-40 trials (balanced congruent/incongruent)
+- **SOA manipulation:** 80-140 trials (balanced across SOA × congruency)
+- **Sequential effects:** 60-100 trials (need sufficient n for all transitions)
+- **Between-subjects design:** Consider practice block of 10-20 trials
+
+### Block Structure
+- Use breaks every 50-80 trials to maintain attention
+- Consider counterbalancing block order for ratio manipulations
+- First block often shows practice effects - consider exclusion or longer practice
+
+### Data Quality
+- Monitor accuracy (typically >90% for valid data)
+- Check for outlier RTs (common cutoffs: <200ms or >2000ms)
+- Verify sufficient trials per condition after exclusions
+
+## Additional Resources
+
+- **README.md** - Package documentation and feature overview
+- **API.md** - Complete API reference with all parameters
+- **plan.md** - Research background and theoretical framework
+
+## Contributing
+
+Have an example demonstrating another use case? Feel free to contribute!
+
+Common requests:
+- Blocked design example
+- Custom stimulus sizing for visual angle control
+- Integration with other jsPsych plugins
+- Advanced data export and analysis
diff --git a/packages/arrow-flanker/examples/advanced-soa.html b/packages/arrow-flanker/examples/advanced-soa.html
new file mode 100644
index 00000000..2f8d2a8f
--- /dev/null
+++ b/packages/arrow-flanker/examples/advanced-soa.html
@@ -0,0 +1,91 @@
+
+
+
+