Circular ROIs for mouse responses (inline JavaScript)

CarlaC

Hi,

I'm new to OpenSesame and I'm currently setting up an online experiment where participants are instructed to click on circles of different sizes located at specific coordinates (which change during the course of the experiment). Since I need information about whether participants successfully clicked on each circle or missed it (using the mouse), I would like to define regions of interest in the form of a circle.

As far as I know, it is only possible to define rectangular regions of interest using inline JavaScript if I want to run my experiment online via OSWeb. Is there any way or workaround to define circular ROIs (e.g., using inline_HTML)?

Thanks in advance!

Best,

Carla

Fab

Hi @CarlaC,

I'm not sure how you display your circles, whether you somehow draw then using coding or whether you're using pictures (most probably you're doing the latter). Regions of interest are indeed related to the objects and pictures are rectangular.

Let's assume that you're using a picture containign a circle with a radius of 100 pixels.

If you want to restrict responses to mouse clicks that are within a circle, you'll need to do some programming in Javascript to implement the following logic:

(1) Establish the (x,y) coordinate of your picture's center. In Open Sesame, that would simply be the x and y of your picture as pasted on your sketchpad.

(2) read out the (x,y) coordinates of the mouse click (cursor_x, cursor_y, whihc in Javascript gets accessed using vars.cursor_x, vars.cursos_y).

(3) dig into your memories from school to apply the Pythagorean theorem in order to establish whether the distance between the mouse click and the center of the circle is smaller or equal to the radius (in whihc case the subject clicked within the circle) or greater than the radius (in which case the subject clicked outside the circle).

Let's imagine that the subject clicked where you see the yellow dot here.

You know the radius of the circle (100 pixels), you know the coordinates of the center of your picture (x,y), and you can get the coordinates of the mouse click (cursor_x, cursor_y).

You want to know whether how c compares the radius.

All you have to do now is to apply the Pythagorean theorem:

You can calculate a by taking the absolute value of the difference between y and cursos_y (I say absolute valoue because that way you get a measure that is not dependent upon whether the subject clicks above or below the circle's center.

a = | y - cursos_y |

Apply a similar logic to b:

b = | x - cursos_x |

Now you just have to calculate the square root of (a2 + b2) to get c:

Then you'll just have to compare c to the radius.

You'll need to implement this in a loop that goes on for many cycles and use the "break if" parameter to interrupt it when a valid response has been registered (without doing this, your task will just take one mouse click and move on to the next bit of your task irrespective of whether the subject actually clicked on the circle).

Hope this helps,

Fabrice.

CarlaC

Hi Fabrice, 

thank you very much for your thorough response, that was very helpful!

Best,

Carla