Limit clickable position

[hkPark742]

Hello, Thank you for providing such a helpful plugin!

I'm trying to create an experiment that asks participants to click on the line to mark the position. Is there any way to limit the area of the mouse click to go to the next trial? I'm trying to make participants to click on the line instead of random position on the screen. I used a loop like this.

` var pretrial = { type: 'psychophysics', stimuli: [line_main, line_lower, line_upper], canvas_width: screenwidth, canvas_height: screenheight, response_type: 'mouse' };

var repeat_pretrial = {
    timeline: [pretrial],
    loop_function: function() {
        var last_button_x = jsPsych.data.getLastTrialData().values()[0].click_x;
        var last_button_y = jsPsych.data.getLastTrialData().values()[0].click_y;
        if (last_button_x < button_position_x-linewidth || last_button_x > button_position_x+linewidth 
         || last_button_y < button_position_y-linewidth || last_button_y > button_position_y+linewidth) {
             return true;
         } else {
             return false
         }
    }
};
timeline.push(repeat_pretrial); `

Even though it works, I was wondering if there is a better way to do this.

[kurokida]

Thank you for using my plugin!

Your idea would be good enough, but there are two other ways.

One is to use the mouse event handler. Please see the FAQ 7 https://jspsychophysics.hes.kyushu-u.ac.jp/faq.html

The other way is to superimpose an img element on the canvas and set an onclick event for the img element. But, you need to make a plugin for this procedure.