Typed text in Text box doesn't appear in Pavlovia

URL of experiment: https://run.pavlovia.org/fioannidou/experiment3_cubefold_ge

Description of the problem:

I want to use the text box component for my participants to enter their response. The component works fine locally but in Pavlovia it doesn’t do anything. Upon checking the .js code it appears that the editable is set to true. So I cannot figure out what is problem. My PsychoPy version is 2021.1.2. Any help or an alternative to the textbox would be really appreciated.

Hi There,

To make it faster for others to directly get to your textbox please can you load the routine with the textbox in it to be presented first?

Also, depending what version of psychopy you are using, textbox isn’t given focus online - you have to click on it first before typed responses are measures. This should be fixed in more recent releases.

Thanks,
Becca

Hello Becca,

Thank you so much for your quick response.

I created a second version of the experiment and I placed the routine with the textbox component at the beginning of the experiment for you to check.
This is the experiment’s URL:
https://run.pavlovia.org/fioannidou/experiment3_textboxfirst

Again many thanks,

Flora

Nice, thankyou! I see what you mean, please can you make your repo public or share the .psyexp file so we can see the underlying files. Searching for experiments on Pavlovia — PsychoPy v2023.2.3

Thanks!

Hello again,

I made the experiment public. Now you should have access to the experiment.

Many thanks :slight_smile:

Hi There,

OK this does look like a bug. I’m flagging to the JS team textbox not editable · Issue #295 · psychopy/psychojs · GitHub

For now I have added a patch to your experiment so that is uses a legacy version of PsychoJS. You can access those files here Rebecca Hirst / Experiment3_TextboxFirst · GitLab.

Important here is that in experiment settings in your online tab export html is set to manual. Until we have a permanent fix you will need to do the following when making edits:

  1. after making edits in builder select file > export html
  2. open the file called Experiment3_TextboxFirst.js in a text editor and replace the import lines with the following:
import { PsychoJS } from './custom-lib/core-2020.2.js';
import * as core from './custom-lib/core-2020.2.js';
import { TrialHandler } from './custom-lib/data-2020.2.js';
import { Scheduler } from './custom-lib/util-2020.2.js';
import * as visual from './custom-lib/visual-2020.2.js';
import * as sound from './custom-lib/sound-2020.2.js';
import * as util from './custom-lib/util-2020.2.js';

To load the legacy psychojs.
3. sync to pavlovia.

Sorry this is a bit of a work around but hopefully this suits for now and we will keep you posted when we have a more permanent fix!

Becca

Hello Becca,

Again thank you so much for the help and quick response :slight_smile:
I will follow your instruction for the original version of the experiment and come back to you in case something is still wrong.

A quick question: Does Pavlovia still has a problem with saving the typed response in TextBox?

Best,

Flora

Hi There,

You will also need to make sure that your repository has the custom-lib folder in the gitlab I linked there.

No there shouldn’t be a problem with saving. But if you encounter one let us know :textbox:

Have a nice day!
Becca

Hey Becca,

Just to let you know that your solution worked :slight_smile:

However, it doesn’t save the typed response in text box.
Any idea how deal with this?

Many thanks again! you saved my experiment!

Flora

Hi There,

If it isn’t saving add a code component with code type as Auto - > JS in the each frame tab type

response = textbox.text

then in the end routine

thisExp.addData('typedResponse', response)

Finally add a code component to the begining of your experiment, set code type to JS and type:


thisExp = psychoJS.experiment;

Hope this helps!
Becca

Hello Becca,

I added the code but when the experiment reached the textbox routine in Pavlovia I got a Reference Error saying textbox is not defined.
Just to make sure that I added the code properly: thisExp = psychoJS.experiment;
should be placed in a code component at the beginning of the experiment and under the begin experiment tab. Right?
Also and it might be a stupid question should I rename the textbox.text with the name I have given to my textbox component? For instance MentalTextbox.text.

Many thanks,

Flora

Hi there,

Replace textbox with the name of your textbox component :blush:

I was about to write to you.

I already did this and it works. :slight_smile:

One thing I noticed is that when you open the data csv the textbox response doens’t appear immediately. You need to click at the cell for the response to appear.

A final question: If i want to add another routine with a textbox component, do you think the patch you added for Pavlovia will still work?

Many thanks for all your help

Hi Becca,

I’m also running into this issue, and I went looking for the “custom lib” that you linked in your version of Flora’s experiment, but I got a 404 ( Rebecca Hirst / Experiment3_TextboxFirst · GitLab )

Is this something general that you would be able to share with me, or was it custom built for Flora’s study? I can make my study public but making it so the section with the textbox comes up first is more complicated (Psychopy crashes whenever it generates a .js, it seems, although it does succeed in writing the .js even when I quit.)

Thank you!
Eli

Hi Eli,

Sorry about that - can you access the folder here? customLibForTextbox - Google Drive

Becca

Hi Becca,

Yes, this link works!

I’ve updated PsychoPy to the newest version because I read somewhere that textboxes should automatically gain focus in newer versions. Will “downgrading” the Javascript in this case make it so that participants have to click on the textbox before beginning to type, and if so, is there a way around that?

Thank you,

Eli

Hi Eli,

OK yes (sorry about that awkward trade off you are currently in!) to automatically give a textbox focus add a code component and in the each frame tab write


textbox._pixi.focus()

where textbox is the name of your textbox component.

Hope that helps,
Becca

It does, thank you!

Eli

Hi,
I have just run into the same problem when using Hebrew text as an input to the Text box (an Identical code for English works).
In addition, the entered text (in English) isn’t saved to the CSV file, although I followed your instructions above. The local version works in both regards.

Thanks,

Avi

This worked for me, too-- however, a caution: the code component needed to be below my textbox component in the builder view. Otherwise, it tries to call the textbox properties before the textbox exists and you get this error:

TypeError: textbox._pixi is undefined