Buttons shift the object on the screen

[caregrad]

Hi all,
I have an issue with the html-button-response. I would be very grateful for some help. I'm new to jsPsych and I'm pretty sure I just don't see what I'm doing wrong.

I need my stimuli to appear at a specific location on the screen. To do this, I created 2 zones and described the position of the stimuli (dots), using div:

// two working zones, from left and right from the center:

   `div.L {
      width: 350px;
       height: 600px;
       overflow: auto;
       margin: auto;
       position: absolute;
       top: 0; bottom: 0; right: 0;
       background-color:transparent;
       ont-size: 40px;
       z-index: -1;
          }
 
  div.R {
    width: 350px;
    height: 600px;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color:transparent;
    font-size: 40px;
    z-index: -1;
  }`

// the idea is that the first dot appears (memo), and after some time the second dot appears (probe) on the same or on the different position:

  `var stimulus = [
            { "memo":"<div class='R'> <div style= 'position:absolute; right:10px; top:10px;' ><img src= 'img/1.png'></img> </div> </div>", 
             "probe":"<div class='R'> <div style= 'position:absolute; right:10px; top:10px;' ><img src= 'img/1.png'></img> </div </div>", 
             "buttons_arrange":["yes","no"] }]`

   `var dot_memo = { 
            type: 'html-keyboard-response',
             prompt: '<div style="font-size:40px;">+</div>',
             stimulus: jsPsych.timelineVariable('memo'),
             choices: jsPsych.NO_KEYS,
             trial_duration: 3500 }`

/// and when probe dot appears I want two buttons to appear (yes, no) for answering about position:

    `var  dot_probe = {
            type: "html-button-response",
            stimulus: jsPsych.timelineVariable('probe'),
            choices: jsPsych.timelineVariable('buttons_arrange'),
            response_ends_trial: true}`

My problem is that my working zone is somehow shifted to the center when I use the button response, so that the second (probe) dot is not on the same position anymore!
Interestingly, It doesn't happen with the keyboard response.
It looks like the buttons 'shift' the zone to themselves.

Where am I wrong? Could you help me?
Thank you!

P.s.: I have attached the example how it looks like:

[ChristopheBossens]

Hi Caregrad,

Do you have the full code sample lying around somewhere? I cannot seem to reproduce the phenomenon (using jsPsych 6.3), and for one thing the probes appear above the buttons in my case :)

I have tried to replicate the gist of what you are trying to achieve (fixation cross with a dot, followed by a button trial with a dot). Maybe this helps to put you in another direction?

styles:

  <style>
    .stimulus_container {
        width: 500px;
        height: 200px;
    }

    .stim_left {
        text-align: left
    }

    .stim_right {
        text-align: right
    }

  </style>

For the jsPsych JavaScript code:

var stimulus ={ 
        "memo":"<div class='stimulus_container stim_left'><img src= 'img/1.png'></div>", 
        "probe":"<div class='stimulus_container stim_left'><img src= 'img/1.png'></div>", 
        "buttons_arrange":["yes","no"] 
    }
    
    var dot_memo = { 
        type: 'html-keyboard-response',
        prompt: '<div style="font-size:40px; height: 33.594px;">+</div>',
        stimulus: stimulus['memo'], 
        choices: jsPsych.NO_KEYS,
        trial_duration: 3500 
    }

    var  dot_probe_button = {
        type: "html-button-response",
        
        stimulus: stimulus['probe'],
        choices: stimulus['buttons_arrange'],
        response_ends_trial: true
    }

    var  dot_probe_keyboard = {
        type: "html-keyboard-response",
        stimulus: stimulus['probe'],//jsPsych.timelineVariable('probe'),
        prompt: '<div style="font-size:40px; height: 33.594px;">(Y)es or (N)o</div>',
        response_ends_trial: true
    }

Note that for the html-keyboard-responses, I have added in a fixed height based on the height that the buttons get in the html-button-response trial. If these two don't match I noticed that the stimulus itself jumps between trials.

[caregrad]

Hi! Thank you a lot, it worked!!!
P.s.: I used jspsych-6.1.0, maybe the phenomenon appeared only there...