Vertical alignment of two images on the screen

[steffejr]

Hello. I am building a Stroop color task. I would like to have a figure on the screen, centered at the bottom, as a reminder of the response buttons during the entire task. Therefore, the figure is there at the bottom of the screen during the stimuli presentation, the fixation cross and during any feedback. And I do not want this figure to move around, but to be fixed. The stimuli, fixation and feedback is in the center of the screen.
Can someone help me please?

This is how I am creating my stimuli. I am using SVG to create the colored boxes and an image for my instructions.

{ 
	stimulus: '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,255,0);  stroke-width:3;stroke:rgb(0,0,0)" /></svg><p><p><img src="StroopColorsKeyboard.png" style="position:fixed; bottom:100px">', 
	data: {test_part: 'trial', color: 'G', correct_response: 'n' } 
},

Here is my fixation:

stimulus: '<div style="font-size:60px;">+</div><p><p><img src="StroopColorsKeyboard.png" style="position:fixed; bottom:100px">',

Thank you,
Jason

[jodeleeuw]

Hi Jason,

I think using position: fixed; is reasonable in this situation. What's currently happening when you run your code? Can you post a screenshot?

[steffejr]

The colored rectangle automatically is centered in the screen, but the image is right aligned. I cannot get it centered. The position: fixed gets the image to the bottom of the screen, but how to I keep it in the center?

[steffejr]

I have come up with my own solution.

I have embedded things in a table. I then made a function so that I can pass what I want at the top, middle and bottom.

My function is in a JS script which gets imported and looks like this:

function PutIntoTable(top='top', middle='mid', width=600, height=300) {
      return '<table border="0" width="'+width+'"><tr height="'+height+'"><td>'+top+'</td></tr><tr height="'+height+'"><td><div style="font-size:60px;">'+middle+'</div></td></tr><tr height="'+height+'"><td valign="bottom"><img src="StroopColorsKeyboard.png"></td></tr></table>';
    }

I read my stimuli from a file and then format them with this function:

    var Stimulus = {
          type: 'html-keyboard-response',
          stimulus: function()
          { 
            var Stim = '<p class="stimulus" style="color:rgb'+jsPsych.timelineVariable('Color', true)+';">' +jsPsych.timelineVariable('Word', true)+'</p>'
            var temp = PutIntoTable('',Stim)
            return temp;
            //return '<p class="stimulus" style="color:rgb'+jsPsych.timelineVariable('Color', true)+';">' +jsPsych.timelineVariable('Word', true)+'</p>'; 
          },

This way if I want to change the vertical height I only need to do it one spot.
I hope this might help someone,
J

[becky-gilbert]

Thanks for sharing your solution @steffejr!