Presenting two words at the same time

[waitun...@gmail.com]

Hi,

I am very new to jspsych and coding and appreciate help please. I would like to ask if there is a known way to present two words in a trial. Currently, I am using jspsych-html-keyboard-response, but it only allows for one stimulus so i can write it as such:

var trial_2 = {
type: 'html-keyboard-response',
stimulus: "<div style='font-size:55px';'>bad bed",
choices: ['s', 'l']
}

This means the two words are too close together. I tried to rewrite as the following but the words do not align regardless of width.

var trial_1 = {
type: 'html-keyboard-response',
stimulus:
"<div style='width: 60px;'>" +
"<div style='float:left';'>"+
"<div style='font-size:50px';'>bed" +
"</div>" +
"<div style='width: 80px;'>" +
"<div style='float:right';'>"+
"<div style='font-size:50px';'>bad" +
"</div>",
choices: ['s', 'l']
}

Please advise if i need to write a plugin to get it to work well. I have something here but i am not sure how to write it into a plugin.

Html:

<div id="block2">
source
</div>
<div id="block1">
sauce
</div>

CSS:
#block2 {
background-color: #F5F5F5;
margin: 20px;
padding: 20px;
width: 180px;
height: 90px;
float: left;
text-align: center;
vertical-align: middle;
line-height: 70px;
font-size:60px
}

#block1 {
background-color: #F5F5F5;
margin: 20px;
padding: 20px;
width: 180px;
height: 90px;
float: left;
text-align: center;
vertical-align: middle;
line-height: 70px;
font-size: 60px
}

Thank you so much!

[Genisius Hartanto]

Hey there.

You can try putting the two words in two different divs:

<div *setting 1*>Bad</div> <div *setting 2*>Bed</div>

Hope that answers it!

[waitun...@gmail.com]

Thanks for your reply! I tried that already but the words end up not being on the same line. Somehow the words do not align properly although i tried to vary the div width and font size.

[Genisius Hartanto]

You might need to add position: absolute. In CSS, write "position: absolute;", and the rest of your desired setting. You might want to put the same amount of pixel in "top: *** px;" in both words to keep it horizontally aligned. For example:

#word1 {

     position: absolute;

     top: 400px;

     left: 200px;

     font-size: 55px;

}

#word2 {

     position: absolute;

     top: 400px;

     left: 600px;

     font-size: 55px;

}

Then label it in script: "<div id="word1" class="*anything*">Bad</div><div id="word2" class="*anything*">Bed</div>"

Try it out!

[waitun...@gmail.com]

Thanks! I finally managed to get it to work with the float function!