Build a Flanker Task
In about fifteen minutes you will build a working flanker task: five arrows in a row, where the participant answers the centre one and ignores the rest. You will end with a live link you could send to a real participant. Every cell in this guide is real; type what you see and it runs. Where the reasoning behind a column matters, there is a link to the page that covers it in full.
What you are building
Section titled “What you are building”Five arrows in a row. The participant presses the arrow key matching the centre arrow and ignores the four flanking it. Sometimes the flankers agree with the centre (> > > > >), sometimes they fight it (> > < > >). People slow down when the flankers disagree, and that slowing is the effect your data will capture.
What to have ready
Section titled “What to have ready”Three images: a left-pointing arrow, a right-pointing arrow, and a neutral shape with no direction, saved as left.png, right.png, and neutral.png. That is all the task needs. (PNG is one of many accepted formats; the full list is on the stimFormat page.)
A trial file cannot hold an image, only name one, so upload the three files in the Design/Stimuli tab of your project. Upload once, reference from as many trials as you like.
Starting the file
Section titled “Starting the file”Create a new project and choose the Natural Language form: instead of a blank file, you answer a few questions about the design, and Testable generates a starter trial file with the right columns and some example rows filled in. Describe a task with five image stimuli and keyboard responses, and you land in the editor with an instructions row up top, test rows below, and columns like stim1 through stim5, stimFormat, keyboard, and key already in place.
The rest of this guide is you replacing the placeholders with the real thing. Click any cell to edit it; the other four ways to start a project, including a fully blank one, are covered in Create Your First Experiment.
The opening screen
Section titled “The opening screen”A study should not drop a participant straight into arrows with no idea what to do, so it opens by telling them. That is an instructions row: a screen with a title, some text, and a button.
| type | title | content | button1 |
|---|---|---|---|
instructions | Flanker Arrows | Press the <b>left</b> arrow key when the centre arrow points left, and <b>right</b> when it points right. Try to ignore the arrows around it. | NEXT |
The content cell reads HTML, so <b>left</b> bolds a word and <br> starts a new line. Preview it and you get your screen with a NEXT button. Nothing is recorded; an instructions row is a signpost, not a measurement. (More in Instructions Trials.)
One trial
Section titled “One trial”Every trial is the same shape: give the participant a stimulus and a way to respond. Three short moves.
1. Get the arrows on screen. Two columns work together: the stim columns take the file names without their extension, and stimFormat takes the extension. Here is one trial, all arrows pointing left:
| type | stim1 | stim2 | stim3 | stim4 | stim5 | stimFormat |
|---|---|---|---|---|---|---|
test | left | left | left | left | left | .png |
That is everything Testable needs to show five images in a row.
2. Arrange them. To control where the stimuli sit and how big they are, add stimPos and stimSize:
| stimPos | stimSize |
|---|---|
35 0; 70 0; 0 0; -35 0; -70 0 | 50% |
Each pair in stimPos is a horizontal and vertical offset from the canvas centre, one per stimulus in order: stim3 gets 0 0, dead centre, and the rest fan out to either side. stimSize = 50% scales every image to half its natural size. (More in Define and Position Stimuli.)
3. Set the response. Testable groups response methods into three: keyboard for key presses, buttons for on-screen buttons, and responseType for everything else (clicks, sliders, text, voice, and more; see Responses in Experiments). A flanker is a key-press task, so:
| type | … | keyboard | key |
|---|---|---|---|
test | … | left right | left |
keyboard = left right enables the two arrow keys and nothing else. key names the correct answer for this trial; Testable checks each response against it and writes 1 (correct) or 0 (incorrect) into the correct column of your results.
Labelling your conditions
Section titled “Labelling your conditions”Add your own columns to tag what each trial is: condition1, condition2, anything. Testable ignores them on screen, but they ride along into your results, so you can sort and aggregate trials later:
| type | condition1 | condition2 | stim1 | … |
|---|---|---|---|---|
test | arrows | congruent | left | … |
One column is special: label gives a trial a name you can use in if/then logic and variables, and the wide results download can use labels as column headers, so the exported data reads back in your terms.
The rest of the trials
Section titled “The rest of the trials”Duplicate the row (open the row menu on the row number, then duplicate) and vary the arrows to build the three conditions: flankers that agree with the centre, flankers that fight it, and neutral flankers.
| type | condition2 | stim1 | stim2 | stim3 | stim4 | stim5 | key |
|---|---|---|---|---|---|---|---|
test | congruent | left | left | left | left | left | left |
test | congruent | right | right | right | right | right | right |
test | incongruent | left | left | right | left | left | right |
test | incongruent | right | right | left | right | right | left |
test | neutral | neutral | neutral | left | neutral | neutral | left |
test | neutral | neutral | neutral | right | neutral | neutral | right |
(The table drops the columns that stay constant, but every row still carries stimFormat, stimPos, stimSize, and keyboard.) Note the correct key always follows stim3, the centre arrow.
Telling participants how they did
Section titled “Telling participants how they did”Add a feedback column with a message per outcome:
| type | … | key | feedback |
|---|---|---|---|
test | … | left | correct: Correct!;incorrect: Wrong |
The thing that makes accuracy feedback work is key: correct and incorrect are the result of scoring the response against it, so without key those messages never match.
That dependency pattern is worth noticing, because columns often work together: add a timeout: Please respond faster segment to nudge participants who stall, and it only ever fires if there is a deadline to miss, so it needs a responseWindow value such as 2000 alongside it. Feedback can also be an image, hold for a set feedbackTime, and more; the Feedback page has the full range.
Mixing up the order
Section titled “Mixing up the order”Add a random column and give all six test rows the same value:
| type | condition2 | … | random |
|---|---|---|---|
test | congruent | … | 1 |
test | congruent | … | 1 |
test | incongruent | … | 1 |
test | incongruent | … | 1 |
test | neutral | … | 1 |
test | neutral | … | 1 |
Rows sharing the same number shuffle among themselves, fresh for each participant. The instructions row has no random value, so it sits out the shuffle and stays put at the top. (Much more in Randomisation, including sampling subsets and constraining the shuffled order.)
Preview, then go live
Section titled “Preview, then go live”Run the whole file from the editor first (Previewing Your Trials): check the arrows land in a row, the keys respond, and the feedback fires. Then click Publish. Edits in the editor are not visible to participants until published, so you can keep refining safely; publishing makes the current version live at your project’s short link, which you can open and run yourself for the only real proof.
First look at your data
Section titled “First look at your data”Run your link a couple of times, then open the project’s Data & Results tab (the Data & Results dashboard). Each session produces one results file with a row per trial: the key pressed, whether it matched key, and the reaction time. For everyone at once, download the study in wide format (one row per participant) or long format (one row per trial); see Results Formats.
Then the analysis this task exists for: group by condition2 and set the incongruent reaction times against the congruent ones. That gap is the flanker effect.
That is the whole loop
Section titled “That is the whole loop”Upload, build, position, respond, feedback, randomise, preview, publish, read the data. Everything else Testable does is a turn on one of those steps. A few ways this task can grow:
- More conditions. Swap arrows for letters (
stimFormatbecomeswordand the letters go straight into the stim cells) or coloured shapes; same trial, different contents. The Testable Library’s flanker template has a fuller version to import. - Conditions as blocks. A
randomBlockcolumn keeps each condition’s set whole while shuffling the sets themselves; see the Nested block shuffle recipe. - A condition per group. Tag each condition with
subjectGroupand the same file becomes a between-subjects design; see Between-subject conditions. - A warm-up. A few
practicerows before the test block let participants settle in on trials that write no results row; to gate entry on practice accuracy, see Accuracy-gated progression.
Wrapping it up in Settings
Section titled “Wrapping it up in Settings”Your trial file is the study; Project Settings is everything around it. None of it is required to run, but a real study usually wants a few things before it goes out: who gets in (participation caps, one session per device, bot protection, country or password restrictions), what participants meet first (consent screen, participant details form), and how it looks (colours, language, a progress bar).
That’s it
Section titled “That’s it”Your experiment is ready to run, and the workflow you just used is the same one underneath everything else Testable does. As you build, click the ? on any column header to see what it does right where you are working, or look the concept up in the Feature Manual when you want the full picture.