jspsych-canvas-button-response function from inside a plugin

[GEJ1]

Hi everyone,

I'm making a modification of jspsych-canvas-button-response plugin and I'm wondered if it's possible to include a drawing function from inside the plugin into the function that stimulus receive.

For example:

function filledCirc(canvas, radius, color){
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(250, 250, radius, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill()
}

var circle_1 = {
    type: 'canvas-button-response',
    stimulus: function (c) {
        filledCirc(c, 100, 'blue');
    },
    choices: ['Red', 'Green', 'Blue'],
    prompt: '<p>What color is the circle?</p>',
    data: {color: 'blue', radius: 100}
};

In this case I would like to insert the function filledCirc inside my plugin. When I try to do that I have the following error:
Uncaught ReferenceError: filledCirc is not defined

Thank you!

Best,

Gustavo.

[becky-gilbert]

Hi @GEJ1! Just to clarify: you're defining the filledCirc function in the plugin file, but your trial definition in the HTML references that function name, like this:

var circle_1 = {
    type: 'canvas-button-response-filledCirc',
    stimulus: function(c) {
        filledCirc(c, 100, 'blue'
    }
    // etc.
};

In this case I would expect that you'd get the "filledCirc is not defined" error because the functions contained in the plugin file are not accessible from the HTML file (even when called inside of a dynamic parameter). If your trials always need to use the filledCirc function, then you should just be able to use that function in the plugin file without calling it anywhere in the trial definition in your HTML file. And if you want your trials to be able to set the parameters for this function, then you could create new parameters for these values in your modified plugin:

var circle_1 = {
    type: 'canvas-button-response-filledCirc',
    radius: 100,  // parameter for filledCirc
    color: 'blue',  // parameter for filledCirc
    choices: ['Red', 'Green', 'Blue'],
    prompt: '<p>What color is the circle?</p>'
};

Then in the plugin file, you can define the filledCirc function and call it using the trial's canvas object, along with radius and color values that were passed into the trial. The code below comes from modifying the bit of the canvas-button-response plugin file that draws the stimulus after the canvas has been added to the page (around lines 117-119):

//draw
let c = document.getElementById("jspsych-canvas-stimulus")
filledCirc(c, trial.color, trial.radius);  // canvas object c is defined by the plugin, but color and radius come from parameters

Does that make sense, and does it help with what you're trying to do?

[GEJ1]

Thank you Becky! That it's the exact answer I was looking for.