Centre stimulus vertically

[Jessica-Schulz]

Hello!

I am using the html-keyboard-response plugin to show a series of stimuli (single words) following this pattern: fixation cross --> blank screen --> stimulus

I would like to include a prompt (reminder of response keys) that appears below the stimulus, whilst the stimulus itself remains centered both vertically and horizontally in the same position as where the fixation cross was. However, when I include a prompt using the prompt parameter, the stimulus appears above the position of the prior fixation cross and the prompt appears below it. In other words, stimulus and prompt are centered as one unit.

How do I make the stimulus appear in the centre of the screen where the fixation cross was, and the prompt below it? I have tried different things using css and html code, but I haven't been able to find a solution so far.

Any ideas would be greatly appreciated!

[kurokida]

Hi, @Jessica-Schulz ,

This is not a solution for the html-keyboard-response plugin, but a plugin I created may be useful. Please see the psychophysics plugin.

[Jessica-Schulz]

Hi @kurokida,

Thank you very much for your help! I used your plugin and it does exactly what I want it to do!

The text on the canvas shows up a bit blurry though - is there a way to achieve the same text sharpness as with html?

Thank you!

[kurokida]

Thank you for using my plugin!

I've never seen the blurring. Could you show me the code about the text object?
I think this problem is related to the font settings.

One more thing, please let me know what the text of this demo program looks like.

[Jessica-Schulz]

Thank you for your reply! Here is a screenshot of the code for one of my text objects - I have specified the font for the other text objects in a similar way:

This results in:

which I find more blurry than:

(The difference becomes more apparent on a larger screen, such as a laptop.)

The text of the demo you sent me looks a bit blurry to me too.

[kurokida]

Thank you for your reply.

I probably found a solution for this problem.
Perhaps this problem is related to the devicePixelRatio.

I've updated my plugin in a new branch named as blur_problem.

You can download the source and sample code from this branch. Please be careful to change the branch from master to blur_problem.

This is the sample page.

In a normal display, the devicePixelRatio retruns 1, while in a retina (high resolution) display you are using, it returns 2.
Could you check the value in your display?

Please note that a variety of displays will be used in online experiments. I believe this update will fix the problem, but you should check it works on a variety of displays.

[Jessica-Schulz]

Thank you very much for your help and for solving this problem for me! I checked the devicePixelRatio value on my display and it is indeed 2. The text is sharp now with your fix, and I will check to make sure that it works on other displays too!

Thank you very much!