Change the textbox and button position conditionally with survey-text plugin

[pelintanberg]

Hi there!

I am trying to change the position of the text box and Continue button conditionally using the survey-text plugin. I tried to pinpoint where the positions of the text box and button are created in the plugin but I am quite new at these kinds of sophisticated changes in jsPsych and could not figure it out.

I am able to change the position of my stimuli using condition variable, so if a word pair belongs in probe category, it is presented to the left and if a word pair belongs in original category, it is presented to the right. However, the text box and Continue button remain in the center of the screen. I would like to implement the same condition variable to move the text box and Continue button left and right of the screen, depending on the category of the word pair. I really appreciate any opinions or help with this and thank you!
Below is my code so far:

var test_word = { type: jsPsychSurveyText, questions: [ {prompt: function() { var conditional_var = jsPsych.timelineVariable('recall'); if(conditional_var == 'probe'){ var test_stim =

+ jsPsych.timelineVariable('probe') + "-" + jsPsych.timelineVariable('target') +'</p>'; } else { var test_stim =

+ jsPsych.timelineVariable('cue') + "-" + jsPsych.timelineVariable('target') +'</p>'; } return test_stim } }], preamble: function() { var conditional_var = jsPsych.timelineVariable('recall'); if(conditional_var == 'probe'){ var test_stim =

Please type which studied target <br> was a member of the given category.

; } else { var test_stim =

Please type which studied target
was associated to the given word.;
} return test_stim },

This is what the screen looks like:

[ChristopheBossens]

Not sure if this is what you need, but with the following CSS styles you can move the whole content to the left or right:

<style>
      .jspsych-content-wrapper{
        display: flex;
        justify-content: flex-end;
      }

      .jspsych-content{
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 0;
        margin-right: 0;
      }
    </style>

In the justify-content property, you can use flex-start to set the content to the left and flex-end to move the content to the right.

It will probably require a somewhat different approach to set the styles on each trial, maybe by setting the css styles dynamically in your trial on_start function.