Studying Attention, Perception & Psychophysics with Cognition
Why these paradigms move online so well
Much of the classic literature on attention and perception rests on a small number of tasks that share a convenient structure: brief visual displays, a keypress response, and an effect measured as a difference in reaction time or accuracy between conditions run on the same person. That structure is exactly what a browser handles comfortably, and jsPsych ships plugins for every piece of it. Below are six paradigms that replicate reliably online, what each one measures, and the practical choices you will face when implementing it.
Flanker task (Eriksen & Eriksen, 1974)
A central target (e.g. an arrow) is surrounded by distractors that point the same way (congruent) or the opposite way (incongruent). Responses to incongruent displays are slower and less accurate, and the difference indexes how well participants filter out irrelevant spatial information.
Implementation. jsPsychHtmlKeyboardResponse with the arrow string as stimulus, choices: ["f", "j"], and a trial_duration of about 1500 ms so a missed response is recorded as null rather than stalling the experiment. Use timeline_variables for the four combinations of direction and congruency and randomise order. Flanker effects of 30–80 ms are easily detected with 100–150 trials. See the flanker task demo.
Stroop task (Stroop, 1935)
Colour words printed in congruent or incongruent ink colours. Naming the ink colour is slower when the word names a different colour, reflecting the automaticity of reading and the cost of resolving response conflict.
Implementation. Online Stroop uses manual responses (one key per colour) instead of vocal naming. Render the word with an inline style="color: …", map three or four colours to keys, and include a practice block so participants learn the mapping. A keyboard-response Stroop yields effects of roughly 100 ms. The Stroop demo and the step-by-step tutorial cover the full code.
Visual search (Treisman & Gelade, 1980)
Participants look for a target among distractors and report whether it is present. When the target differs by a single feature (a red item among green) search time barely depends on display size; when it is defined by a conjunction of features (a red T among red Ls and green Ts) reaction time increases linearly with the number of items. Treisman's Feature Integration Theory used this contrast to argue that features are registered in parallel but binding them requires serial attention.
Implementation. Generate the display as absolutely positioned <span> elements inside a fixed-size container, using jsPsychHtmlKeyboardResponse with present/absent keys. Vary set size (e.g. 4, 8, 16) and target presence in timeline_variables. Keep item positions on a jittered grid to avoid overlap, and record set size in data so you can fit the search slope.
Attentional blink (Raymond, Shapiro & Arnell, 1992)
In rapid serial visual presentation (RSVP), a stream of items appears at about 10 per second. Participants report two targets. If the second target appears 200–500 ms after the first, it is frequently missed; targets at lag 1 or after 600 ms are reported normally. The blink reveals a temporal bottleneck in consolidating items into working memory.
Implementation. This is the most timing-sensitive paradigm on the list. Each RSVP item is its own jsPsychHtmlKeyboardResponse trial with choices: "NO_KEYS" and trial_duration: 100, chained in a nested timeline, followed by two jsPsychSurveyText or keyboard trials for the reports. Because 100 ms is 6 frames at 60 Hz, items will occasionally last 5 or 7 frames; use jsPsychPreload for any images and ask participants to close other tabs. The blink is a large effect and survives this jitter.
Change blindness (Rensink, O'Regan & Clark, 1997)
Two versions of a scene alternate with a brief blank between them (the flicker paradigm). Even large changes can take many cycles to notice, showing that detailed scene representation depends on focused attention rather than being available "for free" from the retinal image.
Implementation. Preload both images with jsPsychPreload, then loop a nested timeline of image A (240 ms), blank (80 ms), image B, blank, using jsPsychImageKeyboardResponse with a response key that ends the loop via loop_function. The dependent variable is time or number of cycles to detection; add a follow-up trial where participants click the change location to verify they really saw it.
Posner cueing (Posner, 1980)
A cue indicates where a target is likely to appear. Valid cues speed detection, invalid cues slow it, and the difference measures covert orienting of spatial attention. With peripheral cues and cue-target intervals beyond roughly 300 ms the effect reverses (inhibition of return).
Implementation. Three trials per sequence: fixation, cue (a brightened box or a central arrow, 100 ms), and target presented after a variable stimulus onset asynchrony. Use jsPsychHtmlKeyboardResponse for the target with a single response key for detection or two keys for discrimination. Make 75–80 % of cues valid for endogenous cueing, 50 % for exogenous cueing, and include catch trials with no target to discourage anticipatory responses. The attention demo and go/no-go demo show related designs.
How precise is timing in the browser?
Two large validation studies answered this in 2020. Bridges, Pitiot, MacAskill and Peirce (2020) compared lab and web platforms across operating systems and browsers and found that stimulus durations online were generally accurate to within a frame, while response-time measurement carried additional lag and variability that depended on the keyboard and browser. Anwyl-Irvine, Dalmaijer, Hodges and Evershed (2020) reached similar conclusions: web-based platforms showed variability on the order of a few milliseconds for visual presentation and somewhat more for response timing, with Chrome and Firefox performing best, but the spread was small relative to typical reaction-time effects.
The practical recommendation from both papers is the same: a constant lag does not matter when you compare conditions within the same participant, because it cancels out. Design within-subject, randomise or counterbalance condition order, collect enough trials per cell, and exclude obviously implausible reaction times. Avoid designs that depend on absolute latencies, single-frame presentations or millisecond-level comparisons between participants using different hardware.
Running these tasks on Cognition
Cognition hosts jsPsych experiments (versions 6.0.5 to 8.2.3) from a web editor with a live preview and an error console, so you can build and debug a flanker or RSVP task without setting up a server. Stimuli are uploaded alongside the code, participants receive a https://<token>.cognition.run link, and each trial is stored the moment it finishes. Between-subject conditions (for example, cue validity 50 % vs. 80 %) are balanced on the server and exposed as window.CONDITION. Data download as CSV or JSON, with Prolific or SONA identifiers from the URL added as columns automatically.
Create a free account to try the demos above with your own participants, or browse the documentation.