Using mouse/touchscreen responses§

Mouse responses register as touch responses on touch screen devices, so they do make for a more portable online study.

_images/mouse_component.png

The parameters of a mouse component. To store click times use he settings in the “Data” tab.

1

Feedback from a mouse§

Response time feedback from a mouse

In our example, we could use a mouse response by allowing the participant to click on one of the numbers. So long as the data from the mouse is set to save On Click (see data tab) this will return several values we can use for feedback:

2

Feedback from a mouse§

Adding a text component and writing $mouse.time[-1] in the text field would show the time of the last mouse click.

3

Feedback from a mouse§

Accuracy feedback from a mouse

Imagine we wanted to check our participant had selected the correct object. We could add a column to our conditions file e.g. “corrClick” then use a code component to check if this was correct:

if mouse.clicked_name[-1] == corrClick:
    correct = 1
    print('correct!')
else:
    correct = 0
    print('incorrect')

Note that we use [-1] to retrieve the last object/time that was clicked.

4

Making the most of mouse inputs§

There are some neat aspects to the mouse that can make for interesting interactive experiments.

5

Stimuli that move with the mouse§

It’s the easiest thing in the world to make a stimulus appear at the location of the mouse:

6

Stimuli that act as buttons§

To turn a stimulus (almost any stimulus) into a button:

7

Is the mouse in this area?§

Most stimuli (except for text) have a method .contains() and so we can test whether the mouse is at that location.

Let’s create a circle called myStim and an object that tracks the mouse, called marker and make marker change color if it goes inside the circle.

All we need is a Code Component with “Each Frame” set to:

if myStim.contains(mouse):
  marker.color = 'red'
else:
  marker.color = 'blue'

Note

To take this online we need a slight edit:

polygon.fillColor = new util.Color("red");

instead of:

polygon.color = 'red'
8

Is the mouse in this area?§

The stimulus that you test can be moving and that’s fine too. The .contains() method doesn’t care if the position is changing!

The “stimulus” can also be invisible (so you’re effectively just using it to define an “area” rather than a stimulus).

9

Is the mouse “pressed in”§

You can continuously check if a mouse is pressed in an object using the mouse.isPressedIn(x) method. To check if the mouse is in the area of x and if one of the buttons is pressed in.

10

Creating a button§

Using the fact that we can easily work out where a mouse is we can create dynamic “buttons” with a bit of code as well:

You can even make your button change when it has been pressed (e.g. stimuli that disappear once you click them?) or when you hover over them

11

What next?§

OK so we have covered the basics of making a task and how to do exciting dynamic things with the mouse. Let’s touch on a relatively new response type…

Typed responses

12

Exercise (time pending)§

Let’s practice what we know about mouse inputs to make a dot to dot demo. Participants will see a set of polygons and connect them (this allows us also to try the brush component!). When the mouse enters a polygon change it’s colour.

13

Exercise (time pending)§

We need:

14

Exercise (time pending)§

If you still have time Repeat our dot-to-dot trial 3 times and present the dots in new locations on each trial. Use a clickable button to end each trial.

15

Side tip:§

We have already seen how we can use ‘conditional if’ statements in python. And we could just use several of these statements to check if the mouse is in each polygon individually e.g.:

if mouse.isPressedIn(polygon1):
  polygon1.color = 'red'
if mouse.isPressedIn(polygon2):
  polygon1.color = 'red'
if mouse.isPressedIn(polygon3):
  polygon1.color = 'red'

Alternatively, we could use a ‘for’ loop…

16

Side tip:§

For loops allow us to repeat the same set of code over a predefined n or over a set of objects. e.g.:

polygons=[polygon1, polygon2, polygon3]
for polygon in polygons:
  if mouse.isPressedIn(polygon):
      polygon.color = 'red'

Note

To take this online we need a slight edit:

polygon.fillColor = new util.Color("red");

instead of:

polygon.color = 'red'
For useful tips on getting things online use:
17