The Flanker Task: A Deep Dive into Cognitive Interference

What is the Flanker Task?

The Flanker Task is a popular neuropsychological test used to assess the ability to suppress responses that are inappropriate in a particular context. Participants are required to focus on a designated stimulus while trying to inhibit the response to concurrent stimuli. This task showcases the phenomena of interference and response inhibition in cognitive processing.

Typically, participants are shown a series of arrows and are required to respond based on the direction of the center arrow, while trying to ignore the direction of surrounding arrows. The primary measure of interest is the reaction time difference between congruent (e.g., <<<<<) and incongruent (e.g., <<><<) stimuli.

Experience the Flanker Task Online

Here's your chance to take part in an online version of the Flanker Task. Engage in this interactive experiment and gain insights into your cognitive processing abilities:

Underlying Code for the Demo

    var jsPsych = initJsPsych({
      on_finish: function() {;

    /* experiment parameters */
    var reps_per_trial_type = 4;

    /*set up welcome block*/
    var welcome = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "Welcome to the experiment. Press any key to begin."

    /*set up instructions block*/
    var instructions = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "<p>In this task, you will see five arrows on the screen, like the example below.</p>"+
        "<img src='img/inc1.png'></img>"+
        "<p>Press the left arrow key if the middle arrow is pointing left. (<)</p>"+
        "<p>Press the right arrow key if the middle arrow is pointing right. (>)</p>"+
        "<p>Press any key to begin.</p>",
      post_trial_gap: 1000

    /*defining stimuli*/
    var test_stimuli = [
        stimulus: "img/con1.png",
        data: { stim_type: 'congruent', direction: 'left'}
        stimulus: "img/con2.png",
        data: { stim_type: 'congruent', direction: 'right'}
        stimulus: "img/inc1.png",
        data: { stim_type: 'incongruent', direction: 'right'}
        stimulus: "img/inc2.png",
        data: { stim_type: 'incongruent', direction: 'left'}

    /* defining test timeline */
    var test = {
      timeline: [{
        type: jsPsychImageKeyboardResponse,
        choices: ['ArrowLeft', 'ArrowRight'],
        trial_duration: 1500,
        stimulus: jsPsych.timelineVariable('stimulus'),
        data: jsPsych.timelineVariable('data'),
        on_finish: function(data) {
          var correct = false;
          if (data.direction == 'left' && jsPsych.pluginAPI.compareKeys(data.response, 'ArrowLeft') && data.rt > -1) {
            correct = true;
          } else if (data.direction == 'right' && jsPsych.pluginAPI.compareKeys(data.response, 'ArrowRight') && data.rt > -1) {
            correct = true;
          data.correct = correct;
        post_trial_gap: function() {
            return Math.floor(Math.random() * 1500) + 500;
      timeline_variables: test_stimuli,
      sample: {type: 'fixed-repetitions', size: reps_per_trial_type}

    /*defining debriefing block*/
    var debrief = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: function() {
        var total_trials ={trial_type: 'image-keyboard-response'}).count();
        var accuracy = Math.round({correct: true}).count() / total_trials * 100);
        var congruent_rt = Math.round({correct: true, stim_type: 'congruent'}).select('rt').mean());
        var incongruent_rt = Math.round({correct: true, stim_type: 'incongruent'}).select('rt').mean());
        return "<p>You responded correctly on <strong>"+accuracy+"%</strong> of the trials.</p> " +
        "<p>Your average response time for congruent trials was <strong>" + congruent_rt + "ms</strong>.</p>"+
        "<p>Your average response time for incongruent trials was <strong>" + incongruent_rt + "ms</strong>.</p>"+
        "<p>Press any key to complete the experiment. Thank you!</p>";

    // manually preload images due to presenting them with timeline variables
    var images = ["img/con1.png","img/con2.png","img/inc1.png","img/inc2.png"];
    var preload = {
      type: jsPsychPreload,
      images: images

    /*set up experiment structure*/
    var timeline = [];

    /*start experiment*/;

Behind the Scenes: The Technology

The demo above was created using the jsPsych library—a powerful tool for building behavioral experiments in a web browser. This library provides a flexible framework for designing a wide variety of cognitive tests, making it a favorite among researchers and educators.

What's even more exciting is that this demo is hosted using Cognition. Cognition offers a seamless platform to create, run, and manage online experiments, relieving users of the complexities related to web hosting, data storage, and security.

Take the Next Step with Cognition

Inspired by what you've seen? Ready to dive into the world of online experiments? With Cognition, you can run and share your experiments online effortlessly. Whether you're a seasoned researcher or just curious about cognitive tests, Cognition is here to simplify the journey.