multiple parameters in a drawStim like function for the stimuli parameter in keyboard-canvas-response #1956

Max-Lovell · 2021-07-01T11:11:23Z

Max-Lovell
Jul 1, 2021

Looking to this page: https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ it seems that by default the function passed to the stimuli parameter takes one argument 'c'. However, I am trying to staircase my stimuli (i.e. change the number of dots presented to participants based on previous correct responses), and so I need to change the stimuli that is drawn each time.

Is there a way to have the drawStim example function in the link above accept multiple parameters - in this case, just a number of dots?

Some example code below, if helpful:

<!DOCTYPE html>
<html>
    <head>
        <title>Experimental task</title>
        <script src="jspsych-6.3.1/jspsych.js"></script>
        <script src="jspsych-6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
        <script src="jspsych-6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
        <link href="jspsych-6.3.1/css/jspsych.css" rel="stylesheet" type="text/css"></link>
        <link href="style.css" rel="stylesheet"></link>
    </head>
    <body>
    </body>
    <script>

    var timeline = [];
    var resp_keys = ['e','i']
    
    var fixation = {
          type: 'html-keyboard-response',
          stimulus: '<div style="font-size:60px;">+</div>',
          choices: jsPsych.NO_KEYS,
          trial_duration: 300,
        }

    var squareWidth = 250;
    //Note: in original code, the main canvas is 800px wide, auto (596px?) or 600px height
        //stim are drawn on blank canvases W:400px,H:540, left starts at 0,0, and right is right floated
        //stim start point is (canvas_widthORheight-squareWidth)/2
        //stim box starts at X=75 so right box at is X=475, with both Y=145

    function drawDots(ctx, x_coord, y_coord, nDots){
        var cellSize = 10;
        var dotIndex = jsPsych.randomization.shuffle([...Array(625).keys()]);
        var y_coord = 145;
        var mat_no = 0;
        for (var x = x_coord ; x < x_coord + squareWidth; x += cellSize){
            for (var y = y_coord ; y < y_coord + squareWidth; y += cellSize){
                if (dotIndex[mat_no] < (312 + nDots)){
                   ctx.beginPath() // stops tearing of the graphics
                   ctx.arc(x + (cellSize/2) , y + (cellSize/2), 2, 0, Math.PI*2);
                   ctx.fillStyle = "white";
                   ctx.fill();
                }
                mat_no++;
            }
        }
    };

    function drawStim(c){
        var ctx = c.getContext('2d')
        var l_x = 75
        var r_x = 475
        var y_coord = 145
        ctx.fillRect(l_x, y_coord, squareWidth, squareWidth);
        ctx.fillRect(r_x, y_coord, squareWidth, squareWidth);
        drawDots(ctx,l_x, y_coord, 70);
        drawDots(ctx,r_x, y_coord, 70);
     };

    var n_Dots;

    var trial_stim = [
      {stimulus: drawStim, correct_response: resp_keys[0]},
      {stimulus: drawStim, correct_response: resp_keys[1]}
    ];

    var trial = {
        type: 'canvas-keyboard-response',
        canvas_size: [540, 800],
        stimulus: jsPsych.timelineVariable('stimulus'),
        choices: resp_keys,
        prompt: `<p style="position:relative; top:150px; font-size:28px">right or left?</p>`,
        data:{
            task: 'response',
            correct_response: jsPsych.timelineVariable('correct_response'),
            difficulty: function() { 
                return n_Dots; // changes during the experiment
            }
        }
    };

    var exp_procedure = {
      timeline: [fixation, trial],
      timeline_variables: trial_stim,
      randomize_order: true,
      repetitions: 2
    }

    timeline.push(exp_procedure);

    jsPsych.init({
      timeline: timeline
    });
    </script>
</html>

Answered by becky-gilbert

Jul 1, 2021

Hi @Max-Lovell! You can find an example of a canvas stimulus function with multiple arguments in the "jspsych-canvas-button-response.html" file in the /examples folder. The trick is to use a function for the stimulus parameter that just takes the canvas argument, but then inside that function, you can call a different function that takes multiple arguments.

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

The additional arguments used by the filledCirc function above could be calculated before this function is called. So to apply that to your task - inside the main stimulus function, you could add some code to check the par…

View full answer

becky-gilbert · 2021-07-01T16:45:12Z

becky-gilbert
Jul 1, 2021
Maintainer

Hi @Max-Lovell! You can find an example of a canvas stimulus function with multiple arguments in the "jspsych-canvas-button-response.html" file in the /examples folder. The trick is to use a function for the stimulus parameter that just takes the canvas argument, but then inside that function, you can call a different function that takes multiple arguments.

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

The additional arguments used by the filledCirc function above could be calculated before this function is called. So to apply that to your task - inside the main stimulus function, you could add some code to check the participant's prior performance and calculate the n_Dots value, and then call another stimulus drawing function that takes n_Dots as an argument.
Does this help?

1 reply

Max-Lovell Jul 3, 2021
Author

Hi again Becky, yep that's exactly what I was looking for thanks, seems obvious now you say it!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

multiple parameters in a drawStim like function for the stimuli parameter in keyboard-canvas-response #1956

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

multiple parameters in a drawStim like function for the stimuli parameter in keyboard-canvas-response #1956

Uh oh!

Max-Lovell Jul 1, 2021

Replies: 1 comment · 1 reply

Uh oh!

becky-gilbert Jul 1, 2021 Maintainer

Uh oh!

Max-Lovell Jul 3, 2021 Author

Max-Lovell
Jul 1, 2021

Replies: 1 comment 1 reply

becky-gilbert
Jul 1, 2021
Maintainer

Max-Lovell Jul 3, 2021
Author