Arrange buttons in a grid with each button in an individual cell

[jaimielee97]

Hi!

I'm trying to create a 12x12 interactive grid, where every square is a clickable image/choice. I have tried combining the html-button-response plugin with the vsl-grid-scene plugin to create this, however, the way I have done this places all 144 button images in each square [e.g., 144 buttons in (0,0), 144 buttons in (0,1) and so on]. Instead, I want just one button per grid cell, and for each button to have a unique number identifying it so I can correctly register which button participants have clicked on when recording their data.response.

I've copied in the code from my modified jspsych-html-button-response plugin (v 6.3).

I'm pretty new to jsPysch so any advice would be greatly appreciated, thank you!

`//display buttons
var nrows = 12;
var ncols = 12;

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-grid 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 += '<table id="jspsych-vsl-grid-scene table" '+
  'style="border-collapse: collapse; margin-left: auto; margin-right: auto;">';

  for (var row = 0; row < nrows; row++) {
    html += '<tr id="jspsych-vsl-grid-scene-table-row-'+row+'" css="height: '+image_size[1]+'px;">';

    for (var col = 0; col < ncols; col++) {
      html += '<td id="jspsych-vsl-grid-scene-table-' + row + '-' + col +'" '+
        'style="padding: '+ (image_size[1] / 10) + 'px ' + (image_size[0] / 10) + 'px; border: 1px solid #555;">'+
        '<div id="jspsych-vsl-grid-scene-table-cell-' + row + '-' + col + '" style="width: '+image_size[0]+'px; height: '+image_size[1]+'px;">';
      if ([row][col] !== 13) {
        html += '<div id="jspsych-html-button-response-grid-btngroup">';
        for (var i = 0; i < trial.choices.length; i++) {
          var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
          html += '<img><div class="jspsych-html-button-response-grid-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-html-button-response-grid-button-' + i +'" data-choice="'+i+'">'+str+'</div></img>';
        }
        html += '</div>';
      }   
      html += '</div>'; 
      html += '</td>';
    }
    html += '</tr>';
  }
  html += '</table>';
  html += '</div>';`

And here is the code from the index file where I reference the custom plugin (also in v 6.3). The images are just white squares that turn grey on click.

`

var squares = new Array(144); 
    for (var t = 0; t < squares.length; t++) {   
        squares[t] = 'square' + t;
    }

var buttongrid = {   
    type: 'html-button-response-grid', 
    stimulus: [], 
    prompt: "<p>Please select a key</p>",
    choices: squares,
    button_html: '<button class= "jspsych-btn-grid" style = "display: grid" onclick = "color(this)"><img id="%choice%" src="img/%choice%-old.jpg"></button>', 
    response_ends_trial: false,
    trial_duration: 6000,
    on_finish: function(data){
        i = i + 1;
        data.i = i;
        var lastSquare = data.response; 
        clickedSquares.push(data.response); 
    }`

[ChristopheBossens]

I think you are seeing all 144 buttons within each square because you have three for-loops in the button-response-grid plugin:

• one for the rows
• one for the columns
• one for each button

As these are nested in each other, it makes sense that you are drawing all 144 buttons within each table cell. I think you have to remove the for-loop with
for (var i = 0; i < trial.choices.length; ++),

and calculate the value of i based on the row and column index:

i = (12 * row_index) + col_index;

[jaimielee97]

That makes sense, and it works perfectly now. Thank you!!