problem with button customization using button_html parameter in the image-button-response plugin

[yuvalharr]

Hello,

In order to group my buttons below each other (vertically) instead of side by side (horizontally) I'm trying to use the button_html parameter in the image-button-response plugin. In order to do so I have made a new css class in the 'jspsych.css' file. I have set the 'display' property in the css class to 'block' as to my understanding this should make the buttons appear one below the other. For some reason it just doesn't work, and the buttons keep appearing one next to the other horizontally . Any help will be really appreciated!

css:

.jspsych-btn-yuval {
  
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

the image-button-response trial as appearing inside the timeline:

{
         type: 'image-button-response',
         stimulus: jsPsych.timelineVariable('detection_image'),
         choices: ['A', 'B', 'C', 'D'],
         prompt: "<p>What collumn is it?</p>",
         margin_horizontal: '16px',
         button_html: '<button class="jspsych-btn-yuval">%choice%</button>'
}

[vijaymarupudi]

That's because the parent element has the inline-block style.

element {
    display: inline-block;
    margin: 0px 8px;
}

You might want to remove the inline-block part here:

jsPsych/plugins/jspsych-image-button-response.js

Line 133 in 8398008

html += '<div class="jspsych-image-button-response-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-image-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';

[yuvalharr]

Great, thanks! I removed the inline-block part and now the buttons are aligned vertically. However they are still positioned below the stimulus image. Any ideas as to how I can move the buttons to appear in-line with the image to its left? I can't seem to sort it out...

[vijaymarupudi]

I'll let you figure out the javascript part and I'll explain the css. If you're having difficulty, let's talk. Edit the javascript so that it produces this html (or with appropriate css classes corresponding to your .css file).

You'll want to use css flexbox to position items side by side.

<div style='display: flex;'>
  // <img>
  // <div> buttons container
</div>

I also suspect that you'll need the justify-content flexbox property. You'll find some useful instructions in that link!

[yuvalharr]

Thank you very much for your help! Actually I now think that it might be better for me to take down the stimulus image (i.e the big picture), and instead to make a grid of image buttons (e.g 3X3) that will together make up the image. I'm trying to get it working now and if I'll need any help it is probably better I'll open a new discussion. thanks again!