Align prompt position on the screen

[HuangHam]

I am using [email protected] and the kind of task I'm using is showing subjects images. There is an intertrial interval between each image where subjects see a white cross for one second. I'd like to display a sentence under the image AND the same sentence under the white cross during the intertrial interval. I know I can achieve this through the PROMPT keyword like this:

type: jsPsychHtmlKeyboardResponse,
prompt: function(){return '<p style="position:absolute;top:'+0.613*browser_height+'pt;left:'+0.3035*browser_width+'pt">Each correct response gives you '+jsPsych.timelineVariable("points")+' point(s)</p>'},

I also want to fix the position of this sentence so that it doesn't change between the image and the white cross. I was able to do this by tuning the paragraph css so that this sentence is at the same position during the imaging trial and the intertrial interval. However, once I tried it on another computer with a different screen size, the positions are off again. Is there a solution to this?

[jodeleeuw]

Hi @HuangHam,

Forgive the quick response without much detail, but you could wrap the white cross in a <div> that is the same height as the image. If the images vary in size you can wrap the images in a <div> as well to ensure a consistent height.

[HuangHam]

sounds like what can work! I'll try it. Thank you!!

[HuangHam]

type: jsPsychHtmlKeyboardResponse,
prompt: function(){return '<p>Each correct response gives you '+points_to_play+' point(s)</p>'},
stimulus: '<div style="font-size:60px;height:'+stim_size_ROK+'px">+</div>',

I tried but doesn't seem to work. The prompt still displays right beneath the cross.

[HuangHam]

Now I tried this:
stimulus: function(){return '<div style="font-size:60px;height:'+stim_size_ROK+'px">+</div>'}, prompt: function(){return '<p>Each correct response gives you '+points_to_play+' point(s)</p>'},
It does create the div of the desired size. However, it seems that the prompt now is situated at the bottom of the div, and "+" is situated at the top of the div instead of at the center as it should be. Looks like there is some dependency of the "prompt" on the "stimulus" in the jsPsychHtmlKeyboardResponse plug-in?