Accents in onscreen user keyboard input

URL of experiment: https://pavlovia.org/run/marie.cote/morphologie/html/
Source: https://gitlab.pavlovia.org/marie.cote/morphologie/

Description of the problem: I have a code component that allows the user’s keyboard input to appear onscreen. On the builder, it works like a charm. On Internet, though, only numbers and lower case letters appear. That means no capital letters, no special characters and, what really bothers me, no accents. My experiment is in French, so I REALLY need characters like “é”, “à”, “î”, etc. I saw a post about accents (Including utf-8/unicode characters in online experiments), and someone suggested to add <meta charset=“utf-8”> to the index.html file, but it’s already there. And I’m not trying to get accents in a results file, but directly online, onscreen, during the experiment.

So my question is : does PsychoPy/Pavlovia allows what I want? If so, how can I achieve this?

Thanks!

1 Like

The fact that you’ve done this in a Code Component in the Python, means that you’d need a similar facility in JavsScript. I don’t know it off the top of my head but I think something in Pixi will work (that’s the library that we use for the stimulus rendering in JS).

From a google it looks like you need to create a function that runs on a uniCharCode event:
https://www.w3schools.com/jsref/event_key_which.asp

I dare say we will add functions to PsychoPy/PsychoJS to make this easier but, right now, in both cases it is a matter of custom code right now.

I’ve already wrote the equivalent Python code in JavaScript, using uniCharCode, etc., but this is not my current problem…

My problem is that it’s only in Psychopy (builder or coder) that the detection of the key I’m pressing is accurate according to my keyboard settings. On the web, the experiment registers something else.

Example:

  1. I’m pressing “é” while running my experiment with the builder. “é” appears onscreen (yay!). I go look in the data file generated : “é” is recorded in the keys pressed.
  2. I’m pressing “é” while running my experiment online. Nothing appears onscreen. I go look in the data file generated : “slash” is recorded in the keys pressed. Slash is truly the symbol written on the key I’m pressing on my physical keyboard. But with my current keyboard settings, this key is supposed to be an “é”. My problem is that I can’t just write a line of code stating that “slash” equals “é” since some users may have other keyboard settings!

So, how can I get my online experiment to reflects keys according to the user’s keyboard settings, and not the “default” keyboard settings?

I found the problem… It’s in the way PsychoJS, and more specifically EventManager, is coded (https://github.com/psychopy/psychojs/blob/master/js/core/EventManager.js). There simply is no accented characters recognized by PsychoJS, that’s why they don’t appear in my online experiment.

Is this easy for the developers to fix? 'cause it’s really restrictive for people making experiments in languages other than English… :frowning:

Thanks for looking into this. Not that I understand much of that code, but it does look like it only falls back on a restricted set of keys if the browser doesn’t support certain features.

Would you mind testing what key is detected at https://w3c.github.io/uievents/tools/key-event-viewer.html when you push é, just to confirm that this isn’t a browser limitation?

Of course! Here you go:

OK, so not a browser limitation then.

This JavaScript issue is certainly beyond me, though: would need input from the expert, Alain @apitiot

Please, @apitiot?

Thanks for your post, we have the same issue. Did you find a solution please ? :slight_smile:

Dear @LittleMary,

I am sorry to bring such an old thread back to life but I hope you would be able to help me!

I am also working on an experiment in French (using PsycoPy3) and I have a code component allowing me to present the user’s keyboard input onscreen. However, I still haven’t managed to find a way to present letters with acccents (é, è, à, î, etc.) while participants are typing.
I downloaded your experiment (Epreuves_morpho.psyexp) and tried to figure out which part of your code allows for that but without much success. I included the shift_flag option in my code. When I press Shift + é/è/à, instead of an accentuated letter it shows a little square.
Could you point me to the specific Builder/Coder setup that I need to implement in order to include the accentuated letters?
Thank you very much in advance!
V

My code for now looks like this:

Begin Experiment

import string
allLetters = list(string.ascii_lowercase)

Begin Routine

textFill = ‘’
shift_flag = False

Each Frame

keys = event.getKeys()
n=len(keys)

if ‘escape’ in keys:
core.quit() # So you can quit
else:
if keys:
if keys[0] == ‘return’:
# go on to the next trial:
continueRoutine = False
elif keys[0] == ‘backspace’:
textFill = textFill[:-1] # Deletes
elif keys[0] in allLetters:
textFill+=keys[0] # Adds character to text if in alphabet.
elif keys[0] in [‘lshift’, ‘rshift’]:
shift_flag = True
else:
if len(keys[0]) == 1:
if shift_flag:
textFill += chr(ord(keys[0]) - ord(’ '))
shift_flag = False
else:
textFill += keys[0]
copyText.setText(textFill) # Set new text on screen
thisExp.addData(‘answer’, textFill) # record the answer in your data file:

There is no longer a need to use custom code to allow subjects to type on screen - there is a new TextBox component available from the “Responses” tab of the components panel. It automatically enables editable text for you. As for how it handles accented text – try it and tell us how you get on.

Hi @Michael

I am currently using the Textbox component, but with an AZERTY keyboard.

I can type the following accented letters: é, è, and à.

However, in my experiments I also need the letters í, ó and ú. When I try to type this the normal way (i.e., how I would normally type them on my azerty keyboard by using ALT GR and the % ù ´ key), it does not show me the correct accented letter. For instance, I only get ´o (so the accent is not on top of the letter o).

This is kind of strange because for all other key responses on azerty, it works. But these specific three accented letters: ó , ú, and í do not get registered by PsychoPy. I am trying to get this to work in the Builder first before I step into the scary world of Pavlovia and converting it to Javascript to make it work online.

I would really appreciate any help with. I have spent quite some time trying to figure out why this doesn’t work, maybe I should register these three accented letters by adding an additional code component? If so, how??

Is there a way to work around this?

I don’t have a solution, unfortunately, but I do have a similar issue with my local language. Those non-English characters that I type using a single key (e.g., ö) seem to work fine in the Textbox, but for characters that require two key-presses (e.g., é, í, ó, ý) it prints the components of the character separately (e.g., ´e). Combined with your description, this suggests to me that it’s the key-combination, rather than printing the letters themselves, that lies at the root of the problem.

@ps2, Yes exactly. That’s my problem too, but I really need to get it to work :(. So I am desperately hoping @Michael or @dvbridges might be able to help us with this (I feel like this should occur more often no?)

The new TextBox2 is @jon’s baby – I’d have to hand over to him as to how it could handle input like this.

I’m afraid I can’t help much in terms of the Python side. We take whatever characters the Pyglet window tells us were received.

BUT I have a feeling this is the sort of thing that will work better on pavlovia. In a browser I think this will have been worked out better (because Chrome has more users than a Pyglet!) so try pushing it online and see if it’s a problem you don’t need to fix after all! :slight_smile:

Hi @Jon, thank you for your prompt response (I thought it’ll take a while before anyone would respond, since I haven’t posted on this platform before though I have been using Psychopy for a while).

I will try to push it online and not worry about the offline experiment for now. @ps2 maybe you should also try to push it online too (if your experiment is online as well)? Hope it’ll work for the both of us!

thanks again!

Hi @esijye - I hope you don’t mind but I just deleted your following post since this is a separate issue that has now been resolved. Urgent: Editable TextBox2 component does not register keypresses

Please try to keep each request for help to a single thread so that we can easily keep track of user support issues :slight_smile:

Thanks,
Becca

No need @jon, this issue has already been resolved in this topic, where @Becca solved it:
https://discourse.psychopy.org/t/accents-in-onscreen-user-keyboard-input/7227/18

The topic above was posted after a running support thread in this post:

@esijye, from following these various threads, am I right in thinking that the double-key accented characters are now working for you online? If so, that’s good to know—I haven’t had the chance to test my experiment online yet, but I’m glad to hear it will work (or at least, this aspect of it will work—I’m not arrogant enough to assume that all my of code will) when I do!