Customise button position in html-button-response plugin

[Alinaedr]

Hello!

I have a problem with the position of my buttons. I'm using html-button-response plugin, and I need my two buttons (which are images) to appear right on top of the stimulus image in the center of the screen (centred horizontally). I managed to do this using inline CSS in the "button_html" parameter. Here is the code (js with the timeline variable, and the html code below):

var test_trial_info = [
    {
        baseline: '<img src="stimuli_task/alien-color5-300.png">',
        condition: 'word',
        choices_baseline: ['<img src="stimuli_task/final_set/object1-150.jpg">'],
        button_html_baseline: '<button class="jspsych-btn" style = "border:5px solid; border-color: #696969; position:absolute; top:150px; left:643px;">%choice%</button>',
        target: '<img src="stimuli_task/alien-color6-300.png">',
        choices_target: ['<img src="stimuli_task/final_set/object2-150.jpg">', '<img src="stimuli_task/final_set/object1-150.jpg">'],
        correct_response: '0',
        button_html_target: ['<button class="jspsych-btn" style = "border:5px solid; border-color: #696969; position:absolute; top:140px; left:570px;">%choice%</button>', '<button class="jspsych-btn" style = "border:5px solid; border-color: #696969; position:absolute; top:140px; left:720px;">%choice%</button>']
    }

var target = {
            type: 'html-button-response',
            prompt: 'Click on the object the alien wants!',
            stimulus: jsPsych.timelineVariable('target'),
            choices: jsPsych.timelineVariable('choices_target'),
            button_html: jsPsych.timelineVariable('button_html_target'),
            data: {
                target: jsPsych.timelineVariable('target'),
                baseline: jsPsych.timelineVariable('baseline'),
                condition: jsPsych.timelineVariable('condition'),
                correct_response: jsPsych.timelineVariable('correct_response'),
            },
            on_finish: function(data) {
                var me_response = false;
                if (data.correct_response == data.button_pressed) {
                    me_response = true;
                }
                data.me_response = me_response;
            }
        };

The problem is that the position of the buttons is determined manually (using position:absolute), and it results in the change of position when you change the browser/computer. Is there an easy way to do what I want in a more general, clean way (without manually determining the absolute position)? How to integrate a possibly new CSS rule for button_html parameter in jsPsych?

Any help would be greatly appreciated! Thanks!

[becky-gilbert]

Hi @Alinaedr, I'm not sure how best to do this with CSS. Maybe someone else will chime in with a CSS solution!
If it were me, I would modify the plugin file so that the buttons come before the stimulus in the HTML string that's added to the page. This is lines 80-101 in the current version of the html-button-response file. You could move the lines that add the stimulus to the HTML string (lines 80-81) so that they come after the section that adds the buttons to the HTML string (lines 83-101).
The only other thing is that the html variable is created on line that adds the stimulus (line 81), and then other bits of HTML are added onto that same variable. So you would need to also change this. I would create an html variable as an empty string before the "buttons" section, and in the line that adds the stimulus (which now comes after the "buttons" section), remove the var keyword and add a + before the =. So altogether it would look like this:

    // create an empty html string
    var html = '';

    //display buttons
    var buttons = [];
    if (Array.isArray(trial.button_html)) {
      if (trial.button_html.length == trial.choices.length) {
        buttons = trial.button_html;
      } else {
        console.error('Error in html-button-response plugin. The length of the button_html array does not equal the length of the choices array');
      }
    } else {
      for (var i = 0; i < trial.choices.length; i++) {
        buttons.push(trial.button_html);
      }
    }
    html += '<div id="jspsych-html-button-response-btngroup">';
    for (var i = 0; i < trial.choices.length; i++) {
      var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
      html += '<div class="jspsych-html-button-response-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-html-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';
    }
    html += '</div>';

    // display stimulus
    html += '<div id="jspsych-html-button-response-stimulus">'+trial.stimulus+'</div>';

[Alinaedr]

thanks, it worked!!