Differences in monitor size and resolution

[valentinavellani]

Hi All,
with this trial I aim to display some information to the participant.
However, I noticed that depending on the monitor I use to run the experiment the position of the elements varies.
I am afraid that in some monitor sizes and resolutions the words displayed might be one on the other, making impossible to perform the task.

How could I fix this issue?

var give_info = {
      type: 'html-keyboard-response',
      stimulus:  function() {
            
                  val_change_n=Math.floor(Math.random() * 2);
                    if (val_change_n==1){
                        val_change="POSITIVE";
                    } else if (val_change_n==0){ 
                        val_change="NEGATIVE";} 
                    return '<span style="font-size:36px;position: absolute; top: 30%; left: 35%; text-align: center; ">The Algorithm’s Prediction:  </span>'+'<span style="font-size:36px; ">The value of the stocks is </span>'+ '<span style="font-size:36px;font-weight:bold; text-decoration:underline; ">'+val_change+'</span>' },
      choices: jsPsych.NO_KEYS,
      trial_duration: 5000,
      prompt:  function() {
           accuracy=Math.floor(Math.random() * (99 - 1 + 1) ) + 1;  
   return '<span style="font-size:36px; position: absolute; top: 60%; left:  33%; text-align: center;">The algorithm has </span>'+ '<span style="font-size:36px; position: absolute; top: 60%; left: 51%; text-align: center;font-weight:bold; text-decoration:underline; ">'+accuracy+'</span>'+'<span style="font-size:36px;position: absolute; top: 60%; left: 54%; text-align: center; ">% accuracy  </span>'
          }}
 timeline.push(give_info);

Thank you very much

[DanielBruijn]

Hello! I had a similar issue. You might want to use the jsPsych-resize plugin: https://www.jspsych.org/plugins/jspsych-resize/

The participant holds up a creditcard to the screen, and adjusts the size of a box to make exactly even so large. Then the plugin uses a scale factor for the rest of your experiment, so that the experiment fits the participant's screen.

This should fix at least the size issue, and maybe also the position. Let me know if it works!

[valentinavellani]

Hi,
I actually solved the issue using
return '<span style="font-size:36px;position: relative....
instead of
return '<span style="font-size:36px;position: absolute; ...

thank you anyway for the suggestion!

[DanielBruijn]

Alright, perfect!