The jsPsych plugin for psychophysics.

[kurokida]

Please let me introduce a jsPsych plugin named as jspsych-psychophysics. This plugin is developed for the purpose of conducting online/Web-based psychophysical experiments using jsPsych.

What you can do with the jspsych-psychophysics plugin

• You can present multiple stimuli asynchronously, that is, you can set stimulus onset asynchronies (SOAs).
• You can present visual stimuli (e.g., image, line, rectangle, circle, and text) at intended coordinates in terms of milliseconds and frames. You can also present moving objects and play sound files.
• This plugin presents visual stimuli synchronized with the refresh of the display using the requestAnimationFrame method. According to my observation, the SOA between visual stimuli with the plugin was more accurate than that without the plugin.
• You can specify the mouse/keyboard event handler. For example, you can make a program in which a participant change the luminance of a stimulus pressing the ArrowUp/ArrowDown key, and finish the trial pressing the space key.
• Participants’ responses can be captured using the keyboard, mouse or buttons. The position of the mouse click can also be recorded as a response.

If you have any questions about this plugin, please post it here or in the issues of my GitHub page and contact @kurokida.

The website is https://jspsychophysics.hes.kyushu-u.ac.jp/

This plugin was published in Behavior Research Methods.

[RicciHannah]

Hi. I was wondering if there was a way to record a response when the mouse leaves/reaches an object rather having to click on it?

[RicciHannah]

So I think I get roughly which bits of the code to edit in the plugin. I'm just a little unsure about which object I would use with the addEventListener since I would want to use the mouseover/mouseenter events with drawn stimuli rather than images, e.g. a black rectangle 200x200 px in the top right hand corner. Currently the plugin applies the mouse event handlers to the canvas, e.g. canvas.addEventListener("mousedown", mouseDownFunc). Do you have any suggestions?

[becky-gilbert]

Ah, so this is a little trickier because I'm pretty sure that you can only attach the mouseover/mouseenter etc. handlers to a DOM element, and not to something that's drawn on the canvas. So if you don't want to change the way the stimuli is presented, then you could attach a mousemove event handler to the canvas, and inside that function, check whether the mouse coordinates are inside the rectangle. The mouse event gives you some different coordinates for the current mouse position, including offsetX and offsetY, which I think would give you the X/Y coordinates relative to the canvas (assuming the mousemove handler is attached to the canvas element). So your mousemove handler function might do something like this:

if ((x.offsetX >= (canvas.width - 200)) && (x.offsetY <= 200)) {
  // Mouse is inside the rectangle!
  // Do something here, like record a response and end the trial.
  // Probably also need to detach the handler here or add a check before this point 
  // to see whether a response has already been recorded, because the mousemove event will keep firing!
}

This page has a nice example of using a mousemove event to draw on a canvas, which you might find useful.

[kurokida]

Thank you, @becky-gilbert , for answering on my behalf.

@RicciHannah , I'll add a few things.
Please see the mouse_event.html in the demo folder of the psychophysics plugin.
You will find a code as follows:

mouse_move_func: function(event){ // This function will be automatically added as the event listener of the canvas.
            if (mouse_move_start === false) return;

            if (prev_mouseX === null){
              prev_mouseX = event.offsetX;
              return
            }

            // stim_array[0] means a circle, and stim_array[1] means a line.
            if (event.offsetX > prev_mouseX){
              jsPsych.currentTrial().stim_array[1].angle += 5; // The angle changes by 5 degrees.
            } else {
              jsPsych.currentTrial().stim_array[1].angle -= 5;
            }
            prev_mouseX = event.offsetX;
          },

Probably, you should specify the mouse_down_func on behalf of the mouse_move_func.
You can know the mouse-down coordinates via the event.offsetX/Y.
If you have no problem with the method I suggest, then you don't need to change the plugin code.
If you do change the code, make sure you have downloaded the latest version of the code.

[RicciHannah]

Thank you both again! :)

[becky-gilbert]

@kurokida sorry!! I chimed in above because I didn't realize that the psychophysics plugin supported mouse move events. Oops! 😬