research – Dr. Jian Chen

Corsi Blocks Task with jsPsych

saturn — Mon, 25 Jul 2022 06:03:56 +0000

This piece of code is revised by Dr Jian Chen based on the published code from R. Gibeau (2021) The Corsi Blocks Task: Variations and coding with jsPsych. The Quantitative Methods for Psychology. 10.20982/tqmp.17.3.p299

In this version, I follow the classical Corsi task in which 9 sequences are presented in a fixed order. Blocks are presented in fixed positions. For each sequence has two trials. Participants need to pass at least one trial to get to the next sequence.

Please notice, given this piece code is based on a exisiting task, so some code look dumb here and there. There are better ways to achieve this but for the moment this is the most time efficient way for me. I will look into the possibility to recode it into a more neat way using the newest version of jsPsych.

This task runs in jsPsych v6.1.0. It does not work in other versions.

Updates:

25.7.2022 add termination if two continuous errors in one sequence.

Here is the main code (also available on my GitHub page (https://github.com/jianch/Corsi-Block-Task). You will also need a specific plugin to run this task: jspsych-html-keyboard-response-noerase.js.

Have fun.

/* url parameters*/
var id = jsPsych.data.getURLVariable("subjectid");
var debrifurl = "https://jianchen.info/?subjectid=".concat(id) // simple reaction task

// ****************************** 
// *   Defining general stuff   * 
// ****************************** 
console.log('Begining of the parameter definitions')

// Experiment parameters 
var nItems              = 9       // total number of squares on the display. Fixed in this experiment
// the sequence lengths to test the participant with, with the variable "OneSequenceLength"
var sequenceLengths_prac = [{OneSequenceLength: 2}];
var sequenceLengths     = [{OneSequenceLength: 2},{OneSequenceLength: 3},{OneSequenceLength: 4},{OneSequenceLength: 5},
                            {OneSequenceLength: 6},{OneSequenceLength: 7},{OneSequenceLength: 8},{OneSequenceLength: 9}];
var sequenceRandomOrder = false   // true for "random" or false for "sequential"
var sequenceRepetition  = 2       // how many times each length is tested

// Trial parameters 
var InterTrialDuration   = 100  // e.g., REF
var FixationDuration     = 400  // e.g., REF
var MouseToBeHidden      = false 
var PreBlinkDuration     = 500  // e.g., REF
var BlinkDuration        = 400  // e.g., REF
var PostBlinkDuration    = 500  // e.g., REF
var InterBlinkDuration   = 400  // e.g., REF
var RecallSignal         = 'https://raw.githubusercontent.com/RMG2424/Dr.-Mid-Nite/master/CorsiBlockjsPsych/500hz-400ms.wav'
var RecallSignalDuration = 400
var AcknowledgeDuration  = 200  // e.g., REF

// Item parameters; assembled using makeItem
var BackgroundColor   = "white"        // accept the HTML-defined colors
var TextColor         = "black"        					// 
var OneItemShape      = "rect"             // one of the svg primitive
var OneItemShownColor = "rgb(0,0,0)"       // black
var OneItemBlinkColor = "rgb(128,128,128)" // gray
var OneItemClickColor = "rgb(0,0,255)"     // blue
var OneItemSize       = 1/10               // proportion of the item relative to minscreen 
var OneItemMargin     = 1/50               // margin to leave empty around the item, relative to minscreen 

console.log('End of the parameter definitions')

var preload = {
  type: 'preload',
  auto_preload: true} 

// set the background color
document.body.style.backgroundColor = BackgroundColor; 
document.body.style.color = TextColor; 

// these two lines convert the relative sizes into pixel sizes LEAVE UNCHANGED
var OneItemSizePX     = Math.floor(OneItemSize * Math.min(screen.width, screen.height))
var OneItemMarginPX   = Math.floor(OneItemMargin * Math.min(screen.width, screen.height))
console.log(`Item dimensions in pixels are: (size) ${OneItemSizePX}, (margins) ${OneItemMarginPX}`);

// Function that builts an HTML svg (scalable vector graphic) image
// may need to be adapted if a different shape is chosen
var makeItem = function(color) {
    return(``);
}

// Empty lists of items; are to be populated by PositionFunction 
var ListOfItems         = new Array(nItems); // the array is full length bcse jsPsych updates it too slow 
var ListOfBlinkingItems = new Array(nItems); // idem                                                      
var ListOfButtons       = new Array(0);
var nBlinkingItems      = null;
var nBlinkingItems      = null;
var acc_accumulation    = null;

// create items positions
// relative X position of items
ListOfItems[0] = []; ListOfItems[1] = []; ListOfItems[2] = []; ListOfItems[3] = [];
ListOfItems[4] = []; ListOfItems[5] = []; ListOfItems[6] = []; ListOfItems[7] = []; ListOfItems[8] = [];

ListOfItems[0].x = 0.5 * screen.width;  
ListOfItems[1].x = 0.27 * screen.width; 
ListOfItems[2].x = 0.64 * screen.width; 
ListOfItems[3].x = 0.31 * screen.width; 
ListOfItems[4].x = 0.55 * screen.width; 
ListOfItems[5].x = 0.70 * screen.width; 
ListOfItems[6].x = 0.23 * screen.width; 
ListOfItems[7].x = 0.38 * screen.width; 
ListOfItems[8].x = 0.52 * screen.width; 

ListOfItemsXPositions = [ListOfItems[0].x, ListOfItems[1].x, ListOfItems[2].x, ListOfItems[3].x, ListOfItems[4].x,
                        ListOfItems[5].x,ListOfItems[6].x,ListOfItems[7].x, ListOfItems[8].x]


// relative Y position of items
ListOfItems[0].y = 0.25 * screen.height;  
ListOfItems[1].y = 0.14 * screen.height;  
ListOfItems[2].y = 0.29 * screen.height;  
ListOfItems[3].y = 0.35 * screen.height;  
ListOfItems[4].y = 0.42 * screen.height;  
ListOfItems[5].y = 0.51 * screen.height;  
ListOfItems[6].y = 0.52 * screen.height;  
ListOfItems[7].y = 0.63 * screen.height;  
ListOfItems[8].y = 0.58 * screen.height;  


ListOfItems[0].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[0].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[0].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

ListOfItems[1].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[1].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[1].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

ListOfItems[2].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[2].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[2].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

ListOfItems[3].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[3].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[3].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

ListOfItems[4].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[4].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[4].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

ListOfItems[5].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[5].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[5].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;


ListOfItems[6].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[6].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[6].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

                                        
ListOfItems[7].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[7].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[7].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

ListOfItems[8].ItemHTML  = ``+ `${makeItem(OneItemShownColor)} `;
ListOfItems[8].ItemBLANK = ``+ `${makeItem(OneItemBlinkColor)}`;
ListOfItems[8].ItemACKNW = ``+ `${makeItem(OneItemClickColor)}`;

console.log('List of items done.')
console.log(ListOfItems)
console.log(ListOfItems[1].x)


// list of blinking items
ListOfBlinkingItems[0] = [];
ListOfBlinkingItems[0].x = ListOfItems[0].x;
ListOfBlinkingItems[0].y = ListOfItems[0].y;
ListOfBlinkingItems[0].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[0].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;                                       

ListOfBlinkingItems[1] = [];
ListOfBlinkingItems[1].x = ListOfItems[1].x;
ListOfBlinkingItems[1].y = ListOfItems[1].y;
ListOfBlinkingItems[1].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[1].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

ListOfBlinkingItems[2] = [];
ListOfBlinkingItems[2].x = ListOfItems[2].x;
ListOfBlinkingItems[2].y = ListOfItems[2].y;
ListOfBlinkingItems[2].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[2].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

ListOfBlinkingItems[3] = [];
ListOfBlinkingItems[3].x = ListOfItems[3].x;
ListOfBlinkingItems[3].y = ListOfItems[3].y;
ListOfBlinkingItems[3].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[3].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

ListOfBlinkingItems[4] = [];
ListOfBlinkingItems[4].x = ListOfItems[4].x;
ListOfBlinkingItems[4].y = ListOfItems[4].y;
ListOfBlinkingItems[4].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[4].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

ListOfBlinkingItems[5] = [];
ListOfBlinkingItems[5].x = ListOfItems[5].x;
ListOfBlinkingItems[5].y = ListOfItems[5].y;
ListOfBlinkingItems[5].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[5].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

ListOfBlinkingItems[6] = [];
ListOfBlinkingItems[6].x = ListOfItems[6].x;
ListOfBlinkingItems[6].y = ListOfItems[6].y;
ListOfBlinkingItems[6].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[6].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

ListOfBlinkingItems[7] = [];
ListOfBlinkingItems[7].x = ListOfItems[7].x;
ListOfBlinkingItems[7].y = ListOfItems[7].y;
ListOfBlinkingItems[7].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[7].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

ListOfBlinkingItems[8] = [];
ListOfBlinkingItems[8].x = ListOfItems[8].x;
ListOfBlinkingItems[8].y = ListOfItems[8].y;
ListOfBlinkingItems[8].ItemHTML  = `${makeItem(OneItemShownColor)}`;
ListOfBlinkingItems[8].ItemBLANK = `${makeItem(OneItemBlinkColor)}`;   

console.log('List of bliking items done.')
console.log('End of the items definitions')
console.log(ListOfBlinkingItems)



// they are also concatenated in a list of buttons 
ListOfButtons.push(`` )

ListOfButtons.push(`` )

ListOfButtons.push(`` )

ListOfButtons.push(`` )

ListOfButtons.push(`` )

ListOfButtons.push(`` )

ListOfButtons.push(`` )

ListOfButtons.push(`` )

ListOfButtons.push(`` )

console.log('List of buttons done.')
console.log(ListOfButtons)





// mouse pointer functions 
var HideMouse = function() { if (MouseToBeHidden) {
        document.querySelector('head').insertAdjacentHTML('beforeend', '');
    }
}
var ShowMouse = function() { if (MouseToBeHidden) {
        document.querySelector('#cursor-toggle').remove();
    }
}

console.log('hide mouse ')

// *************************************** 
// *   Defining experiment-level events  * 
// *************************************** 

// // Toggle full screen on or off 
// var FullScreenOn = {
//     type: 'fullscreen',
//     message: "The experiment will be in full screen mode once you click on the button.",
//     button_label: 'Full Screen Mode',
//     fullscreen_mode: true
// }
// var FullScreenOff = {
//     type: 'fullscreen',
//     fullscreen_mode: false
// }
// the Welcome and Bye object descriptions 
var SayWelcome = {
    type: 'html-button-response',
    stimulus: 'Welcome to the Corsi Task. 
 In this task, we would like to know how well you can reproduce the order of blocks highlighted on the screen.  '+
    'First, you will be shown the order of blocks highlighted one by one on the screen and you should try to remember the order of the blocks highlighted as accurately as possible.' +
    'You will then immediately reproduce the same order of blocks highlighted by clicking on the blocks in exactly the same order as shown before.' +
    'Click on the Next button to begin the practice trials.',
    choices: ['Next'],
}

var SayFormal = {
    type: 'html-button-response',
    stimulus: 'This is the end of the practice trials. You will now begin the experiment trials. Click on the Next button to begin.',
    choices: ['Next'],
}

var SayBye = {
    type: 'html-button-response',
    stimulus: 'Thank you for your participation. Click on Next button to start next task.',
    choices: ['Next'],
}


// *************************************** 
// *     Defining trial-level events     * 
// *************************************** 

var SetnBlinkingItems = {
    type: 'call-function',
    func: function() {
            nBlinkingItems =  jsPsych.timelineVariable("OneSequenceLength", true); 
            console.log("<<<<<<<<<<<<<<<<<<<<<<<< element == xPositions)]
        }


        var stem = jsPsych.data.get().filter({trial_type: 'html-button-response'}).last(2*nBlinkingItems);
        var responses = stem.select('button_pressed').values.filter((a,i)=>i%2===0);
        responses = responses.map(Number);
        jsPsych.data.addProperties({resp: responses});
        console.log("click order: ", responses )

        var correct   =  Array.from(String(xPositions_index), Number);
        jsPsych.data.addProperties({stimuli: correct});
        console.log("Correct: ", correct)
        
        var acc       = responses.every(function(value, index) { return value === correct[index]});
        jsPsych.data.addProperties({accuracy: acc});
        
        var rts = stem.select('rt').values.filter((a,i)=>i%2===0);
        jsPsych.data.addProperties({RT: rts});
        
        console.log("Responses: ", responses, " accuracty: ", acc, " RT: ", rts);

        // calculate acc for two trials in one sequence
        if (j%2===0 && j!=0) {
            acc_accumulation = acc_accumulation+acc;
            // console.log("acc_accumulation 1: ",acc_accumulation)
            if (acc_accumulation==0){terminate = true;} else {terminate = false}
            // console.log("termination status 1:", terminate)
            acc_accumulation = 0;
            j = 1;
        } else {
            acc_accumulation = acc_accumulation+acc;
            j++;                    
        }

        // console.log("acc_accumulation: ",acc_accumulation, "j ",j, "termination status:", terminate)
    }
}



var break_trial = {
    type: 'html-button-response',
    stimulus:  " ",
    choices: " ",
    trial_duration: 1000,
  };
  
  var break_conditional = {
      timeline: [break_trial],
      // terminate experiment if two errors in a row. 
      conditional_function: function() {
          if (terminate==true) {
            return jsPsych.endExperiment('This task has been terminated.');;
          } else {
            return null;
          }
    }
  };



  var RunOneTrial_prac = {
    timeline: [ SetnBlinkingItems,
                WaitInterTrialDuration,
                ShowFixation, 
                ShowAllItems, 
                WaitPreBlinkDuration, 
                BlinkAllItems, 
                WaitPostBlinkDuration,
                StartResponding,
                ReadAllResponses,
                //GatherResponses,
            ],
    randomize_order:    false,
    repetitions:        sequenceRepetition
}



var RunOneTrial = {
    timeline: [ SetnBlinkingItems,
                WaitInterTrialDuration,
                ShowFixation, 
                ShowAllItems, 
                WaitPreBlinkDuration, 
                BlinkAllItems, 
                WaitPostBlinkDuration,
                StartResponding,
                ReadAllResponses,
                GatherResponses,
                break_conditional // break if fails both trials in one sequence. 
            ],
    randomize_order:    false,
    repetitions:        sequenceRepetition
}


var RunPractice = {
    timeline:           [ RunOneTrial_prac ],
    timeline_variables: sequenceLengths_prac,
    randomize_order:    sequenceRandomOrder
}

var RunAllTrials = {
    timeline:           [ RunOneTrial ],
    timeline_variables: sequenceLengths,
    randomize_order:    sequenceRandomOrder
}


jsPsych.init({
    use_webaudio: false,
    timeline: [SayWelcome, RunPractice, SayFormal, RunAllTrials, SayBye],
    on_finish: function(){
      window.location.href = debrifurl},
    })

Dot Enumeration Task with jsPsych

saturn — Wed, 29 Jun 2022 01:36:40 +0000

This task was coded with jsPsych v7.2. The source code and materials are available in my GitHub

https://github.com/jianch/dotEnumerationTask

Here is the key javascript.

var jsPsych = initJsPsych({
  on_finish: function(){
    window.location.href = debrifurl},
});

/* url parameters*/
var id = jsPsych.data.getURLVariable("subjectid");
var debrifurl = "https://www.jianchen.info/?subjectid=".concat(id)  // go to another task

 /* create timeline */
var timeline = []; 

/* preload images */
var preload = {
  type: jsPsychPreload,
  images: ['n1r1.png', 'n1r2.png', 'n1r3.png', 'n1r4.png','n1r5.png','n1r6.png', 'n1r7.png', 'n1r8.png',
           'n2r1.png', 'n2r2.png', 'n2r3.png', 'n2r4.png','n2r5.png','n2r6.png', 'n2r7.png', 'n2r8.png',
           'n3r1.png', 'n3r2.png', 'n3r3.png', 'n3r4.png','n3r5.png','n3r6.png', 'n3r7.png', 'n3r8.png',
           'n4r1.png', 'n4r2.png', 'n4r3.png', 'n4r4.png','n4r5.png','n4r6.png', 'n4r7.png', 'n4r8.png',
           'n5r1.png', 'n5r2.png', 'n5r3.png', 'n5r4.png','n5r5.png','n5r6.png', 'n5r7.png', 'n5r8.png',
           'n6r1.png', 'n6r2.png', 'n6r3.png', 'n6r4.png','n6r5.png','n6r6.png', 'n6r7.png', 'n6r8.png',
           'n7r1.png', 'n7r2.png', 'n7r3.png', 'n7r4.png','n7r5.png','n7r6.png', 'n7r7.png', 'n7r8.png',
           'n8r1.png', 'n8r2.png', 'n8r3.png', 'n8r4.png','n8r5.png','n8r6.png', 'n8r7.png', 'n8r8.png',
           'n9r1.png', 'n9r2.png', 'n9r3.png', 'n9r4.png','n9r5.png','n9r6.png', 'n9r7.png', 'n9r8.png',
           'n10r1.png', 'n10r2.png', 'n10r3.png', 'n10r4.png',
           ]};
timeline.push(preload);

// settings 
var pic_duration = 5000;
var fix_duration = [200,500,700,900,1000];
var pic_size = 400;


var FullScreenOn = {
    type: jsPsychFullscreen,
    message: "The experiment will be in full screen mode once you click on the button.",
    button_label: 'Full Screen Mode',
    fullscreen_mode: true
}
timeline.push(FullScreenOn)

/* instructions */
var welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: 'Welcome to the Dot Enumeration Task.' +
            'In this task, we would like to know, as fast as you can and without making any mistakes, how many dots you see on the screen.'+
            'A cross will appear on the screen followed by a display of dots. '+ 
            'Press the SPACE BAR as soon as you identify how many dots there are on the screen, and then select your answer immediately.'+
            '
Please respond as accurately and quickly as possible.'+
            'Press SPACEBAR to begin practice trials',
  choices: [' '],
};
timeline.push(welcome);


/* defining practice stimululi*/
var prac_stimuli = [
  {prac_stimulus: 'n1r1.png', correct_response:0},
  {prac_stimulus: 'n2r1.png', correct_response:1},
  {prac_stimulus: 'n3r1.png', correct_response:2},
  {prac_stimulus: 'n4r1.png', correct_response:3},
  {prac_stimulus: 'n5r1.png', correct_response:4},
  {prac_stimulus: 'n6r1.png', correct_response:5},
  {prac_stimulus: 'n7r1.png', correct_response:6},
  {prac_stimulus: 'n8r1.png', correct_response:7},
  {prac_stimulus: 'n9r1.png', correct_response:8},
  ];
  
  
var fixation = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: '+',
  choices: "NO_KEYS",
  trial_duration: jsPsych.randomization.sampleWithReplacement(fix_duration, 1),
  data: {phase: 'fixation',},
};


var prac_stimulus = {
  type: jsPsychImageKeyboardResponse,
  stimulus: jsPsych.timelineVariable('prac_stimulus'),
  stimulus_height: pic_size,  
  maintain_aspect_ratio: true,
  choices: [' '],
  data: {
    phase: 'prac_stimulus',
    prac_stimli:jsPsych.timelineVariable('prac_stimulus'),
  },
};

// response and feedback
var msg;
var prac_response = {
  type: jsPsychHtmlButtonResponse,
  stimulus: 'How many dots were on the screen?',
  choices: ['1','2','3','4','5','6','7','8','9','10'],
  prompt: "Select a number",
  data:{
    phase: 'practice_resp',
    correct_responses: jsPsych.timelineVariable('correct_response'),
  },
  on_finish: function(data){
    data.correct = data.response==jsPsych.timelineVariable('correct_response');
    if (data.correct){
      msg = "Correct!";
    } else {
      msg = "Incorrect!";
    }
  }
};

var practice_feedback = {
	type: jsPsychHtmlKeyboardResponse,
	trial_duration: 1000,
	choices: "NO_KEYS",
	stimulus: function(){return msg;},
};


var practice_procedure = {
  timeline: [fixation, prac_stimulus, prac_response, practice_feedback],
  timeline_variables: jsPsych.randomization.shuffleNoRepeats(prac_stimuli), // make sure that neighboring elements in the array are different.
  // randomize_order: true,
  repetitions: 1,
};	
timeline.push(practice_procedure);






// Formal Experiment 

var pre_test = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: 'This is the end of the practice trials. You will now begin the experiment trials.   '+
            'Feedback will NOT be provided ' + 
            'Press Spacebar to begin.',
  choices: [' '],
}; 
timeline.push(pre_test);



var test_stimuli = [
  {stimulus: "n1r1.png",  correct_response: 0},
  { stimulus: "n1r2.png",  correct_response: 0},
  { stimulus: "n1r3.png",  correct_response: 0},
  { stimulus: "n1r4.png",  correct_response: 0},
  { stimulus: "n1r5.png",  correct_response: 0},
  { stimulus: "n1r6.png",  correct_response: 0},
  { stimulus: "n1r7.png",  correct_response: 0},
  { stimulus: "n1r8.png",  correct_response: 0},

  {stimulus: "n2r1.png",  correct_response: 1},
  { stimulus: "n2r2.png",  correct_response: 1},
  { stimulus: "n2r3.png",  correct_response: 1},
  { stimulus: "n2r4.png",  correct_response: 1},
  { stimulus: "n2r5.png",  correct_response: 1},
  { stimulus: "n2r6.png",  correct_response: 1},
  { stimulus: "n2r7.png",  correct_response: 1},
  { stimulus: "n2r8.png",  correct_response: 1},

  {stimulus: "n3r1.png",  correct_response: 2},
  { stimulus: "n3r2.png",  correct_response: 2},
  { stimulus: "n3r3.png",  correct_response: 2},
  { stimulus: "n3r4.png",  correct_response: 2},
  { stimulus: "n3r5.png",  correct_response: 2},
  { stimulus: "n3r6.png",  correct_response: 2},
  { stimulus: "n3r7.png",  correct_response: 2},
  { stimulus: "n3r8.png",  correct_response: 2},
  
  {stimulus: "n4r1.png",  correct_response: 3},
  { stimulus: "n4r2.png",  correct_response: 3},
  { stimulus: "n4r3.png",  correct_response: 3},
  { stimulus: "n4r4.png",  correct_response: 3},
  { stimulus: "n4r5.png",  correct_response: 3},
  { stimulus: "n4r6.png",  correct_response: 3},
  { stimulus: "n4r7.png",  correct_response: 3},
  { stimulus: "n4r8.png",  correct_response: 3},

  {stimulus: "n5r1.png",  correct_response: 4},
  { stimulus: "n5r2.png",  correct_response: 4},
  { stimulus: "n5r3.png",  correct_response: 4},
  { stimulus: "n5r4.png",  correct_response: 4},
  { stimulus: "n5r5.png",  correct_response: 4},
  { stimulus: "n5r6.png",  correct_response: 4},
  { stimulus: "n5r7.png",  correct_response: 4},
  { stimulus: "n5r8.png",  correct_response: 4},

  {stimulus: "n6r1.png",  correct_response: 5},
  { stimulus: "n6r2.png",  correct_response: 5},
  { stimulus: "n6r3.png",  correct_response: 5},
  { stimulus: "n6r4.png",  correct_response: 5},
  { stimulus: "n6r5.png",  correct_response: 5},
  { stimulus: "n6r6.png",  correct_response: 5},
  { stimulus: "n6r7.png",  correct_response: 5},
  { stimulus: "n6r8.png",  correct_response: 5},
  
  {stimulus: "n7r1.png",  correct_response: 6},
  { stimulus: "n7r2.png",  correct_response: 6},
  { stimulus: "n7r3.png",  correct_response: 6},
  { stimulus: "n7r4.png",  correct_response: 6},
  { stimulus: "n7r5.png",  correct_response: 6},
  { stimulus: "n7r6.png",  correct_response: 6},
  { stimulus: "n7r7.png",  correct_response: 6},
  { stimulus: "n7r8.png",  correct_response: 6},
  
  {stimulus: "n8r1.png",  correct_response: 7},
  { stimulus: "n8r2.png",  correct_response: 7},
  { stimulus: "n8r3.png",  correct_response: 7},
  { stimulus: "n8r4.png",  correct_response: 7},
  { stimulus: "n8r5.png",  correct_response: 7},
  { stimulus: "n8r6.png",  correct_response: 7},
  { stimulus: "n8r7.png",  correct_response: 7},
  { stimulus: "n8r8.png",  correct_response: 7},
  
  {stimulus: "n9r1.png",  correct_response: 8},
  { stimulus: "n9r2.png",  correct_response: 8},
  { stimulus: "n9r3.png",  correct_response: 8},
  { stimulus: "n9r4.png",  correct_response: 8},
  { stimulus: "n9r5.png",  correct_response: 8},
  { stimulus: "n9r6.png",  correct_response: 8},
  { stimulus: "n9r7.png",  correct_response: 8},
  { stimulus: "n9r8.png",  correct_response: 8},
  
  { stimulus: "n10r1.png",  correct_response: 9},
  { stimulus: "n10r2.png",  correct_response: 9},
  { stimulus: "n10r3.png",  correct_response: 9},
  { stimulus: "n10r4.png",  correct_response: 9},
];


/* define break trial */
var trial_count = 0;

var break_trial = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus:  "Please take a short break if needed." + 
          "When you are ready, continue by pressing the SPACEBAR.",
};


var break_conditional = {
  timeline: [break_trial],
  // block rest determination
  conditional_function: function() {
    // increment trial count - in first run through the timeline variables procedure, trial_count will be equal to 1
    trial_count++;
    if (trial_count % 41 == 0 && trial_count!=0) {
      // if the trial count is divisible by 40, then run the break trial
      return true;
    } else {
      // otherwise skip the break trial
      return false;
    }
  }
};




var test_stimulus = {
  type: jsPsychImageKeyboardResponse,
  stimulus: jsPsych.timelineVariable('stimulus'),
  stimulus_height: pic_size,  
  maintain_aspect_ratio: true,
  choices: [' '],
  data: {
    phase: 'test_stimulus',
    test_stimli:jsPsych.timelineVariable('stimulus'),
  },
};


var test_response = {
  type: jsPsychHtmlButtonResponse,
  stimulus: 'How many dots were on the screen?',
  choices: ['1','2','3','4','5','6','7','8','9','10'],
  prompt: "Select a number",
  data:{
    phase: 'test_resp',
    correct_responses: jsPsych.timelineVariable('correct_response'),
  },
  on_finish: function(data){
    data.correct = data.response==jsPsych.timelineVariable('correct_response');},
};



var test_procedure = {
  timeline: [fixation, test_stimulus, test_response, break_conditional],
  timeline_variables: jsPsych.randomization.shuffleNoRepeats(test_stimuli),
  // randomize_order: true,
  repetitions: 2,
};	
timeline.push(test_procedure);




var post_test = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: 'You have finished the Dot Enumeration Task. '+
            'Press Spacebar to start next task.',
  choices: [' '],
}; 
timeline.push(post_test);





/* start the experiment */
jsPsych.run(timeline);

Install Process in SPSS in MacOS Big Sur

saturn — Thu, 09 Sep 2021 00:14:18 +0000

I don’t like SPSS, but due to the need of teaching, I have to install SPSS in my own computer.

When I tried to install Hayes’ Process add-ons in the SPSS, it always said it has no permission to do so. This is quite annoying.

So the reason is that SPSS has no full disk access to the targeted folder. Why? I already gave full access to it.

It turns out that there are a few things changed since MacOS Catalina, the direct result is that SPSS lost full disk access to many folders in Mac. You have to give a quite specific permission to SPSS.

The video below is the solution for this issue.

After you fix the full disk access issue, then you will be able to install Process.

Digit Span Task in Qualtrics

saturn — Fri, 23 Jul 2021 00:13:10 +0000

The pandemic makes online psychological experiments very needed in the past few months. One commonly used tool is Qualtrics.

I don’t have too many complains about Qualtrics except for its ability to DIY cognitive tasks. I don’t see why they don’t include this feature as many of us already bought their most expensive plans.

Nevertheless, there are alternative ways to run cognitive tasks with Qualtrics surveys. One way is to use Inquisit Web. But we all know that participants really don’t like to download and install any software in their personal devices, so we see many participants drop out the study due to this reason. May I say that we are lucky enough if we can have 50% participants complete the Inquisit Web-based cognitive tasks? Other ways to run online cognitive tasks include the PsychoPy and PsyToolkit, but I won’t talk about them in this article.

The ideal way to run cognitive tasks along with Qualtrics survey, of course, is to run cognitive tasks within Qualtrics.

Here is an example of running digit span task within Qualtrics. I need to explicitly state that, the code is not from me. I developed my own working version with the help from Dr Becky Gilbert (@BeckyAGilbert). You can find her at https://www.mrc-cbu.cam.ac.uk/people/becky.gilbert/. And of course, if you do use the task and the code, it would be appreciated either a citation or acknowledgment. You should also cite the QRTE paper: https://link.springer.com/article/10.3758/s13428-014-0530-7 .

You can find Dr Becky Gilbert’s Digit Span Task at this link: https://uclpsych.eu.qualtrics.com/jfe/form/SV_55fg8t1Q3MGO8U5?Q_JFE=qdg. The first half of the task works fine but the second half does not work. This is because QRTE JavaScript library is no longer supported.

Here is the QSF file that exported from Qualtrics.

digit_span_demo.qsf_Download

To get it to work properly, you may need to go into the survey settings and remove any default styling that your institution applies to Qualtrics surveys. You’ll want to use the plain/basic styling option for this task. You can also look at the QRTE documentation for more information about how it works: http://www.qrtengine.com/

In my case, I have to put the forward and backward parts separately into two Qualtrics surveys, otherwise it just won’t work. I would recommend you do the same thing.

Embed Youtube video in the Inquisit Web in Windows and Mac

saturn — Mon, 06 Apr 2020 00:11:19 +0000

It is necessary to use online video source when you want to present long video clips in an Inquisit Web script. This is because the Inquisit Web server only provides 60MB space for you, although we all pay them a big amount of money, such a small storage space can only host a few short and low resolution videos.

Thankfully, Inquisit is able to handle html page, which is great. Theoretically, you only need to embed an iframe element in the Inquisit script and it should be able to fetch video from Youtube or other sources.

You will need an embeded video link like this, it can be obtained from Youtube Share.

https://youtube.com/watch?v=LW2oswdWs4Q%3Frel%3D0%26controls%3D0%26showinfo%3D0%26autoplay%3D1

Then you need to add a html element in the Inquisit, it looks like this:


/ items = videos
/ select = 1
/ size = (100%,100%)
/ showborders = false
/ showscrollbars = false

However, this method only works fine in MacOS, it shows blank when you run the Inquisit script in a Windows computer. This is a known issue and there is no official solution yet.

————————————
Q:
I’ve used html to embed videos in my experiment that I have uploaded on youtube.
The embedded links when directly entered into the browser (firefox, internet explorer) work fine. Within inquisit it also works fine on a mac, but I’m encountering problems on windows (on some windows laptops it only shows a black box rather than the video). Also, there seem to be a difference between windows 10 and windows 7, since it did work on someone’s windows 7 laptop.
Is there a difference for html on mac vs windows?

A:
Yes, there are differences between OSX and Windows in how HTML is handled. Essentially, under Windows, Inquisit embeds Internet Explorer (because it is reliably available on all Windows systems) to render HTML. When run in embedded mode like this, however, Internet Explorer enforces various restrictions that may keep embedded / interactive content such as videos from working. The way a given system is set up and what security settings the user or organization applied to Internet Explorer installations also play a role under some circumstances, i.e. content may work on one system, but not on a different one with different settings / restrictions applied.
I’m afraid there isn’t a really good or universal solution here. Ideally, you’d not embed Youtube videos, but instead you’d use standard \ elements in Inquisit to play the videos. For online use, you can set the \ elements’ /stream attributes to true, that way the won’t have to be downloaded in full before the experiment launches, they’ll be streamed instead at runtime.
https://www.millisecond.com/forums/Topic25195.aspx
————————————

A possible workaround is to right click on the black screen and then choose a different encoding, such as “Western European (Windows)”. Then the online video will be loaded and displayed on the Inquisit. There seems to be an encoding issue in running Inquisit script in Windows.

So, is there a “really good or universal solution” for this problem? The answer is YES.

My idea here is, if the Inquisit is able to handle html element, can we directly insert a DIY html page rather than let the Inquisit build a html page?

Here, I created a html page with some help from W3Schools and other resources:_(https://benmarshall.me/responsive-iframes/; https://www.w3schools.com/tags/att_body_bgcolor.asp; https://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width)_










 https://www.youtube.com/embed/LW2oswdWs4Q?~~start=10&rel=0&controls=0&showinfo=0&autoplay=1" allowfullscreen=1>

You can create an empty html document and the copy these code into your document, or you can download a html file from here.

When you have the DIY html file, let’s see an Inquisit demo. This demo is extracted and modified from somewhere in the Inquisit forum. Nevertheless, it’s quite easy to make your own one.


/ items = ("demo.html")
/ size = (100%, 100%) 
/ erase = true(255, 255, 255)
/ showborders = false
/ showscrollbars = false



/ stimulustimes = [500=videoDemo]
/ trialduration = 50000
/ ontrialend= [trial.videoDemo.resetstimulusframes();]



/ trials = [1=videoDemo]



/ blocks = [1=videoDemo]

And boom! It works! Now we can display Youtube video in Inquisit in a damn Windows pc!

Change the space between paragraphs in Qualtrics

saturn — Tue, 12 Nov 2019 00:10:12 +0000

The space between paragraphs in the Qualtrics might be too large, how to reduce the space?

One solution is to add JS code in the “Question JavaScript” to change the padding size or margin size before and after one paragraph.

jQuery("#"+this.questionId).find('.QuestionText:first').css("padding-bottom", "0px");
jQuery("#"+this.questionId).find('.QuestionText:first').css("padding-top", "0px");

Note, Qualtrics appears to set up some kind of minimum space between paragraphs so even if you change the padding value to 0, the space might still be large.

Plot Heatmap from Eye Tracking Data

saturn — Thu, 07 Sep 2017 00:09:14 +0000

There are many ways/toolbox to plot a heat map from eye tracking data. but I prefer DIY

Here is the source code:

%% Data Structure Explanation
% Explanation from Eyelink Programers Guide 3.0

%--------------------------------------------------------
% dataEyelink =
%
%       samples: [401341x4 double]()
%     fixations: [3965x6 double]()
%      saccades: [3964x9 double]()
%        blinks: [1720x3 double]()
%      triggers: [1080x3 double]()

%--------------------------------------------------------
% dataEyelink.samples
%       column1         column2         column3     column4
%       timepoint       x               y           pupil size
%--------------------------------------------------------
% dataEyelink.fixations
%       column1         column2         column3     column4 column5 column6
%       tmepoint_start  timepoint_end   duration    x       y       avg pupil size
%--------------------------------------------------------
% dataEyelink.saccades
%       column1         column2         column3     column4 column5 column6
%       tmepoint_start  timepoint_end   duration    x_from  y_from  x_to
%       column7         column8         column9
%       y_to            amplitude       peak velocity
%                       in degrees      degr/sec
%--------------------------------------------------------
% dataEyelink.blinks
%       column1         column2         column3
%       tmepoint_start  timepoint_end   duration
%--------------------------------------------------------
% dataEyelink.triggers
%       column1         column2         column3
%       tmepoint        1=SYNCON        Trial(I also wrote trial number)
%                       0=SYNCOFF
%--------------------------------------------------------



clear;
load xxxxEyelink.mat

%% variables
gaussSigma = 0.05;
posX = round(dataEyelink.fixations(:,4));
posY = round(dataEyelink.fixations(:,5));
gazeDuration = dataEyelink.fixations(:,3) / max(dataEyelink.fixations(:,3)); % rescale to 0-1

%% generating data for heatmap
gazedata = [posX/1024, posY/768](); % rescale to 0-1
gazedata = gazedata((gazedata(:, 1))\>0, :); % remove possible negative value...

%% make gaussians
figure;
[X,Y]() = meshgrid(0:0.001:1, 0:0.001:1);
z = zeros(size(X,1),size(X,2));

for i = 1:length(gazedata)
z = z + gazeDuration(i) * exp(-( ((X - gazedata(i,1)).^2 ./ (2*gaussSigma^2)) + ((Y - gazedata(i,2)).^2 ./ (2*gaussSigma^2)) ) );
end

mesh(X,Y,z); % plot the heatmap
colorbar;
caxis([0,300]());
view(0,90);


print('heatmap', '-dtiff','-r300');

Corrected Vision May Still Bias the Gabor Patch Detection

saturn — Wed, 12 Jul 2017 00:07:57 +0000

As said in the title, participants with corrected vision (wearing glass or contact lens) may still have distorted vision due to whatever reason, especially in Gabor patch detection task.

This question comes from my personal experience, I always feel that the vertical Gabor patch is brighter than horizontal ones, and is easier to detect. Below is my test data from 800 trials of a detection task (error bar represents 1 SE).

I gradually increased the Gabor patch contrast from 0 to 100%, I pressed a button when I saw something on the screen (grey background).

Session 1

Session 2

I am quite curious about why I feel so differently for these two kinds of Gabor patch, am I special? Do I have something wrong with my eye?

So I asked two colleague (they don’t wear glass regularly) to do the same task, and it turns out no difference between vertical and horizontal Gabor patches.

Colleague 1

Colleague 2

Then what’s going on underneath?

I doubt that although I have a glass to correct my vision, I may not have astigmatism corrected. So I asked a friend, who also wear a glass, to do the same task. As you can see, he has the same problem.

Friend 1

Insofar, my guess of the explanation for such results is astigmatism. Me and my friend both have inappropriately corrected vision, which leads to the difference in detection task.

You may have a quick test to see if you have astigmatism. All the bars in below should have similar brightness.

Astigmatism Test

What’s the hint from this observation? Well, it may remind us to make sure that participants who claim a correctly corrected vision should be re-checked, especially in those vision tasks relying on Gabor patch detection.

Get real-time gaze positions from the eye tracker

saturn — Thu, 30 Mar 2017 00:06:55 +0000

If I want to make sure the participants are fixating on the cross before starting each trial, how should I do?

With the help of Eyetracker (Eyelink in this case), we can get the realtime gaze position and therefore we can monitor the gaze position to make sure it falls into a certain area before the participants start the trial.

% make sure participants are fixating on the central
while isEyeLink  % if Eyelink was connected
status = Eyelink('newfloatsampleavailable');  % check to see if everything is fine in Eyelink
if status /=0; % if all is fine
evt = Eyelink('newestfloatsample'); % get the newest float sample from Eyelink
realtime.x = evt.gx(1);  % get the x axis of gaze
realtime.y = evt.gy(1);  % get the y axis of gaze
end;

if abs(realtime.x-512)\<=50&abs(realtime.y-384)\<=50  % if the gaze falls into  a 50\*50 pixel square around the cross
break; % jump out the loop and start the trial
end
end

Keyboard Calibration Using the Damn Laser

saturn — Thu, 09 Mar 2017 00:04:34 +0000

Almost no one care about how precise/reliable the keyboard pressing is, here, we built a damn cool equipment to examine this question. Broadly speaking, the time precision is good, mean variance is less than 0.2 ms.

Environment: MATLAB with Linux (Ubuntu 14.04)

Monitor: SONY Triniton at 120Hz

Keyboard: Mechanic number board

In short, the delay is about 12 ms and the variation is quite small.