psychopy.org | Reference | Downloads | Github

Mouse events, typed responses not working on Safari Browser and some Mac devices

Hello,

The title is a bit self-explanatory, but when piloting my experiment, I have noticed that mouse events do not work on Safari Browsers (on a Mac OS). Specifically, they are not detected (I have code that highlights boxes on mouseover, and clicking them ends the routine). This works on Chrome browsers however.

Is there any fix to this, by any chance?

EDIT: Weird issue is that on 3 MacBook users, 2 of them said they couldn’t use their mouse, whereas one was able to

This issue has now extended to typed responses not working on MacBook Air (Chrome). I have already informed participants that it will not run properly on Safari browsers. Is there any possible explanation as to why this is happening? I am losing many potential participants because of this issue.

Please could you give the relevant code you are using (Python and JavaScript)? Is there a specific error message (PsychoPy or console)?

Hello @wakecarter,

Unfortunately there is no error for the mouse events on Safari browsers. During piloting, Mac users on Safari said they couldn’t click anything (I have 4 clickable stimuli that highlight upon mouseover - don’t know if this is interfering):

Python:

if Male.contains(Gender):
    Male.lineColor = red

else:
    Male.lineColor = black

if Female.contains(Gender):
    Female.lineColor = red
else:
    Female.lineColor = black

if Other.contains(Gender):
    Other.lineColor = red
else:
    Other.lineColor = black

if PreferNo.contains(Gender):
    PreferNo.lineColor = red
else:
    PreferNo.lineColor = black

JS:

if (Male.contains(Gender)) {
    Male.lineColor = red;
    MaleText.pos = MaleText.pos;
} else {
    Male.lineColor = black;
    MaleText.pos = MaleText.pos;
}
if (Female.contains(Gender)) {
    Female.lineColor = red;
    FemaleText.pos = FemaleText.pos;
} else {
    Female.lineColor = black;
    FemaleText.pos = FemaleText.pos;
}
if (Other.contains(Gender)) {
    Other.lineColor = red;
    OtherText.pos = OtherText.pos;
} else {
    Other.lineColor = black;
    OtherText.pos = OtherText.pos;
}
if (PreferNo.contains(Gender)) {
    PreferNo.lineColor = red;
    PreferText.pos = PreferText.pos;
} else {
    PreferNo.lineColor = black;
    PreferText.pos = PreferText.pos;
}

Where the mouse component is “Gender”, which ends routine on a valid click and has clickable polygon stimuli (Male, Female, Other, PreferNo), as routines were not ending when using the text stimuli as clickable objects (colours are specified in the beginning of the routine already, works offline and on other browsers).

Regarding the typed responses on Chrome, it looks like the participant was trying to run it off a tablet and the experiment will not work on mobile devices. So that’s (sort of) solved. The keyboard does not pop up when run on mobile devices:

#Begin routine
modify = False
AgeText.text = ''
event.clearEvents('keyboard')

#Each frame
keys = event.getKeys(keyList=['delete', 'insert', 'end', 'down', 'pagedown', 'left', 'right', 'home', 'up', 'pageup', 'num_decimal', 'num_0', 'num_1', 'num_2', 'num_3', 'num_4', 'num_5', 'num_6', 'num_7', 'num_8', 'num_9', 'num_0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'backspace', 'return', 'period'])
if len(keys):
    if 'space' in keys:
        AgeText.text = AgeText.text + ' '
    elif 'num_1' in keys or 'end' in keys:
        AgeText.text = AgeText.text + '1'
    elif 'num_2' in keys or 'down' in keys:
        AgeText.text = AgeText.text + '2'
    elif 'num_3' in keys or 'pagedown' in keys:
        AgeText.text = AgeText.text + '3'
    elif 'num_4' in keys or 'left' in keys:
        AgeText.text = AgeText.text + '4'
    elif 'num_5' in keys:
        AgeText.text = AgeText.text + '5'
    elif 'num_6' in keys or 'right' in keys:
        AgeText.text = AgeText.text + '6'
    elif 'num_7' in keys or 'home' in keys:
        AgeText.text = AgeText.text + '7'
    elif 'num_8' in keys or 'up' in keys:
        AgeText.text = AgeText.text + '8'
    elif 'num_9' in keys or 'pageup' in keys:
        AgeText.text = AgeText.text + '9'
    elif 'num_0' in keys or 'insert' in keys:
        AgeText.text = AgeText.text + '0'
    elif 'backspace' in keys:
        AgeText.text = AgeText.text[:-1]
    elif 'period' in keys or 'num_decimal' in keys or 'delete' in keys:
        AgeText.text = AgeText.text + '.'
    elif 'lshift' in keys or 'rshift' in keys:
        modify = True
    elif 'return' in keys:
        continueRoutine = False
    else:
        if modify:
            AgeText.text = AgeText.text + keys[0].upper()
            modify = False
        else:
            AgeText.text = AgeText.text + keys[0]

JS:

#Begin routine
modify = false;
AgeText.text = '';

#Each frame
let theseKeys = psychoJS.eventManager.getKeys({keyList: ['delete', 'insert', 'end', 'down', 'pagedown', 'left', 'right', 'home', 'up', 'pageup', 'num_decimal', 'num_0', 'num_1', 'num_2', 'num_3', 'num_4', 'num_5', 'num_6', 'num_7', 'num_8', 'num_9', 'num_0', '.', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'backspace', 'return', 'period']});
if (theseKeys.length > 0) {  // at least one key was pressed
  textAdd = theseKeys[theseKeys.length-1]; 
  }

if (textAdd === 'return') {
    textAdd = '';  // Add nothing
    continueRoutine = false;  // End routine (if that is what you want)
} else if (textAdd === 'space') {
    textAdd = ' ';  // Add a space
} else if (['num_1', 'end'].includes(textAdd)) {
    textAdd = '1';
} else if (['num_2', 'down'].includes(textAdd)) {
    textAdd = '2';
} else if (['num_3', 'pagedown'].includes(textAdd)) {
    textAdd = '3';
} else if (['num_4', 'left'].includes(textAdd)) {
    textAdd = '4';
} else if (textAdd === 'num_5') {
    textAdd = '5';
} else if (['num_6', 'right'].includes(textAdd)) {
    textAdd = '6';
} else if (['num_7', 'home'].includes(textAdd)) {
    textAdd = '7';
} else if (['num_8', 'up'].includes(textAdd)) {
    textAdd = '8';
} else if (['num_9', 'pageup'].includes(textAdd)) {
    textAdd = '9';
} else if (['num_0', 'insert'].includes(textAdd)) {
    textAdd = '0';
} else if (['num_decimal', 'period', 'delete'].includes(textAdd)) {
    textAdd = '.';
} else if (textAdd === 'backspace') {
    AgeText.text = AgeText.text.slice(0, -1);
    textAdd = undefined;
} else if (['lshift', 'rshift'].includes(textAdd)) {
    modify = true;
} else if (textAdd !== undefined) {
    if (modify) {
        AgeText.text = AgeText.text + textAdd.toUpperCase();
        modify = false;
    } else {
        AgeText.text = AgeText.text + textAdd
    }
    textAdd = undefined;
}

Try Male.setLineColor(red) etc.

I’ve found that that method works better