RDK Staircase

[ashalenko]

Hey everyone,

Below is a RDK Staircase I've been working on. Currently it's a 4 forced choice 2 up/1 down staircase that ends after 10 reversals of 50 trials. However, this can be changed by changing the variables I've labelled.

I'm relatively new to JavaScript and jsPsych so any feedback or suggestions would be great. I'm sure my code is sloppy in some areas but I think it works as intended for now.

I've made it to be used in Gorilla.sc.

import gorilla = require("gorilla/gorilla");

// Make sure to upload the jsPsych files you need to the resources tab.
// This should include the main jsPsych.js, jsPsych.css and likely at least one plugin. 
// In this case, we use the jspsych-html-keyboard-response.js plugin file.
// Original creator of this script is Jordan Deakin. I built on top of all their work and made adjustments for a staircase version.
// Without their work I wouldn't have been able to work all this out. Thank you.

var jsPsych = window['jsPsych'];


gorilla.ready(function(){

var centreX = ((window.outerWidth)/2)+30;
var centreY = ((window.outerHeight)/2)+30;
var timeline = [];

// Force full screen
timeline.push({
  type: 'fullscreen',
  fullscreen_mode: true,
  message: '<p>This experiment needs to run in fullscreen mode. Please click the button below to enter fullscreen.</p>'
});


// Set starting coherence for practice to 1 (easiest)
var coherence = 1;
// This is the value that the coherence will decrease by after the fist reversal.
var coh_dec = 0.2;
// Set this value to the maximum number of trials before the experiment ends.
var trialLength = 50;
// Set this value to the maximum number of reversals to occur before the trials end.
var reversalsNum = 10;
// Set this value to the number of correct in a row before the staircase steps up (harder)
var correctStep = 2;
// Set to the number of dots you want displayed.
var totalDots = 400;
// Set to how long you want each trial to be presented for
var trialDuration = 1000;
// Set to change the size of the RDK displayed.
var RDKWidth = 600;
var RDKHeight = 600;

// These variables represent the direction you want the dots to move in. Remove directions you don't want (0 = dots moving from left)
var factors = {
    coherent_direction: [270,180,90,0],
};
var factors2 = [270,180,90,0];

// This variable sets which keys are allowed in trials. Match with the direction the dots are moving in.
var keychoices = ['leftarrow','rightarrow','uparrow','downarrow'];


var welcomeImage = gorilla.stimuliURL('dalmation.jpg');

// These variables are for the staircase aspect. You shouldn't need to change anything here.
var totalTrials = 0;
var correctInARow = 0;
var reversals = 0;
var correct_choice;
var coherent_direction;
var endTrial = false;
var streak = 'correct';


//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

// Welcome screen with an image.
var welcome = {
    type: 'image-button-response',
    choices: ["Continue"],
    stimulus: welcomeImage,
    prompt: "<h1>Random Dot Kinematogram</h1><br><br>"
};

// Instructions
var instructionBlock = {
    type: "instructions",
    pages: [
    "<h1>Instructions</h1>" +
    "<p>In this test you will see one field of moving dots known as a random-dot kinematogram (RDK).</p>" +
    "<p>This field contains a coherent motion signal that moves either left, right, up, or down.</p>" +
    "<p>Respond with whether the appropriate key based on which direction the motion is travelling." +
    "<p></p><p> Press the <strong>LEFT KEY</strong> if the motion travels to the <strong>LEFT</strong></p>"+
    "<p></p><p> Press the <strong>RIGHT KEY</strong> if the motion travels to the <strong>RIGHT</strong></p>"+
    "<p></p><p> Press the <strong>UP KEY</strong> if the motion travels to the <strong>UP</strong></p>"+
    "<p></p><p> Press the <strong>DOWN KEY</strong> if the motion travels to the <strong>DOWN</strong></p>"+
    "<p></p>Please respond as quickly and as accurately as possible."
    ],
    show_clickable_nav: true
};

var startButton = {
    type: 'html-keyboard-response',
    stimulus: "<p>We will first do some practice trials. There will be 10 trials where the difficulty will increase in each trial. </p><strong><p style=color:white>Press any key to start!</strong></p>",
    choices: jsPsych.ALL_KEYS,
    on_start: function() {$('body').css('cursor', 'none')},
};

var setCorrectResponse = function(design,practice){
    for(var t =0; t <= design['length']-1;t++){
        
        if (design[t].coherent_direction == 180){
           design[t].correct_choice = 37;
        } else if(design[t].coherent_direction == 0){
            design[t].correct_choice = 39;
        } else if(design[t].coherent_direction == 90){
            design[t].correct_choice = 38;
        } else if(design[t].coherent_direction == 270){
            design[t].correct_choice = 40;
        };
        
       
        if (practice == true){
            design[t].practice = 1;
        } else {
         design[t].practice = 0;   
        };
        
        
    };
    design = jsPsych.randomization.shuffle(design);
    if (practice == true){    
        for(var t =0; t <= design['length']-1;t++){
            design[t].coherence = coherence;
            coherence-=0.1;
        };
    };
    return design;
};


var feedback = {
    data: {screen_id: 'feedback'},
    type: 'html-keyboard-response',
    choices: jsPsych.NO_KEYS,
    trial_duration: 250,
    stimulus: function() {
        var lastAcc = jsPsych.data.get().last(1).values()[0].correct;
        if (lastAcc == true){
            return "<p style=color:green>Correct!</p>"
        } else{
            return "<p style=color:red>Incorrect!</p>"
        }
    }
};


var fixation = {
    data: {screen_id: "fixation"},
    type: "html-keyboard-response",
    stimulus: "<p style=color:white>+</p>",
    background_color: "black",
    choices: jsPsych.NO_KEYS,
    trial_duration: 250,
};
  
var byeScreen = {
    data: {screen_id: "bye"},
    type: "html-keyboard-response",
    stimulus: "<p style=color:white>Thank you for taking part in the experiment.</p>",
    background_color: "black",
    choices: jsPsych.ALL_KEYS,
    trial_duration: 3000,
    on_start: function() {$('body').css('cursor', 'default')},
};
  

var endOfPractice = {
    type: 'html-keyboard-response',
    data: {screen_id: "endOfPractice"},
    stimulus: "<p>That's the end of the practice trials.</p><strong><p style=color:white>Press any key to begin the testing trials.</p></strong>",
    background_color: "black",
    choices: jsPsych.ALL_KEYS,
};

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

timeline.push(welcome)
timeline.push(instructionBlock)
timeline.push(startButton)

// Gather trial information for practice demonstration

var practice = jsPsych.randomization.factorial(factors, 1);
practice = jsPsych.randomization.repeat(practice, 2);
practice = setCorrectResponse(practice,true);

// Practice Trials 
var singleTrial = {
    type: 'rdk',
    coherence: jsPsych.timelineVariable("coherence"),
    correct_choice: jsPsych.timelineVariable("correct_choice"),
    coherent_direction: jsPsych.timelineVariable("coherent_direction"),
    number_of_apertures: 1,
    move_distance: 1.5,
    aperture_center_x: centreX,
    aperture_center_y: centreY,
    aperture_width: RDKWidth,
    aperture_height: RDKHeight,
    number_of_dots: totalDots,
    choices: keychoices,
    response_ends_trial: true,
    background_color: 'black',
    dot_color: 'white',
    dot_radius: 4,
    trial_duration: 100000,
    data: {practice: jsPsych.timelineVariable("practice"),targetDirection: jsPsych.timelineVariable("coherent_direction")}
};


var practiceProcedure = {
  timeline: [fixation,singleTrial,feedback],
  timeline_variables: practice,
};

timeline.push(practiceProcedure)
timeline.push(endOfPractice)

var EsingleTrial = {
    type: 'rdk',
    coherence: function(){return coherence;},
    coherent_direction: function(){return coherent_direction;},
    correct_choice: function(){return correct_choice;},
    number_of_apertures: 1,
    move_distance: 1.5,
    aperture_center_x: centreX,
    aperture_center_y: centreY,
    aperture_width: RDKWidth,
    aperture_height: RDKHeight,
    number_of_dots: totalDots,
    choices: keychoices,
    response_ends_trial: true,
    background_color: 'black',
    dot_color: 'white',
    dot_radius: 4,
    trial_duration: trialDuration,
    data: {
        targetDirection: function() { 
            return coherent_direction;
        },
        revs: function() { 
            return reversals;
        },
    },
    on_finish: function(data) {
        var lastAcc = jsPsych.data.get().last(1).values()[0].correct;
        if (lastAcc == true){
            correctInARow+=1;
            if(correctInARow == correctStep){
                coherence-=coh_dec;
                if (streak == 'incorrect') { 
                    reversals+=1;
                    streak = 'correct' 
                }
                correctInARow = 0;
                if (reversals >= 3){
                    // Here I have the coherence decrease variable halve after 3 reversals.
                    coh_dec=coh_dec/2
                }
            }
        }else {
            correctInARow = 0;
            coherence+=coh_dec;
            if (streak == 'correct') {
                streak = 'incorrect'
                reversals+=1;
            }
        }
    }
}
var staircase_assess = {
    type: 'call-function',
    func: function(){
        totalTrials += 1;
        if (reversals >= reversalsNum) {
            endTrial = true;
        }
    }
}
var set_staircase = {
    type: 'call-function',
    func: function(){
        var random = jsPsych.randomization.sampleWithReplacement(factors2, 1);
        if (random == 0){
            correct_choice = 39;
            coherent_direction = 0;
        } 
        else if (random == 90){
            correct_choice = 38;
            coherent_direction = 90;
        }
        else if (random == 180){
            correct_choice = 37;
            coherent_direction = 180;
        }
        else if (random == 270){
            correct_choice = 40;
            coherent_direction = 270;
        }
        if (coherence > 1){
            coherence = 1;
        }
        else if (coherence < 0) {
            coherence = 0;
        }
        if (coh_dec < 0.025){
            coh_dec = 0.025;
        }
    }
}
var staircase = {
    timeline: [fixation,set_staircase,EsingleTrial,staircase_assess]
}

// Reset coherence to start at 1 (easiest)
coherence = 1;

var loop_node = {
        timeline: [staircase],
        loop_function: function(){
		if((totalTrials == trialLength) || (endTrial == true)) {
			return false;
		} else {
			return true;
		}
    }
}

timeline.push(loop_node)
timeline.push(byeScreen)

jsPsych.init({
	display_element: $('#gorilla')[0],
	timeline: timeline,
	on_data_update: function(data){
		gorilla.metric(data);
	},
	on_finish: function(){
		gorilla.finish();
	}
});
})