How to change the position of buttons in a canvas-button-response trial

[sp-conway]

Hi all,

I have a choice experiment where I'm using the canvas-button-response trial to draw a varying number of options (Either 1, 4, or 8). On each trial, participants will choose one of these option's buttons, or if they prefer none, a button labeled "None of these".

I have a function that I use to draw each option, but I would like to move the buttons to go underneath the corresponding option. Any ideas how to do this?

stimulus: function(c, data) {
          
          var n_opts = jsPsych.timelineVariable("n_opts");
          var opts = jsPsych.data.get().last(1).values()[0].opts_shuffled;
          var score = jsPsych.data.get().last(1).values()[0].score;
          draw_score(c,score,canvas_width,canvas_height);
          if (n_opts == 1) {
              draw_bars(c, box1["coords"], opts[0][0], opts[0][1], 1);
          } else if (n_opts == 4) {
              draw_bars(c, box1["coords"], opts[0][0], opts[0][1], 1);
              draw_bars(c, box2["coords"], opts[1][0], opts[1][1], 2);
              draw_bars(c, box3["coords"], opts[2][0], opts[2][1], 3);
              draw_bars(c, box4["coords"], opts[3][0], opts[3][1], 4);
          } else if (n_opts == 8) {
              draw_bars(c, box1["coords"], opts[0][0], opts[0][1], 1);
              draw_bars(c, box2["coords"], opts[1][0], opts[1][1], 2);
              draw_bars(c, box3["coords"], opts[2][0], opts[2][1], 3);
              draw_bars(c, box4["coords"], opts[3][0], opts[3][1], 4);
              draw_bars(c, box5["coords"], opts[4][0], opts[4][1], 5);
              draw_bars(c, box6["coords"], opts[5][0], opts[5][1], 6);
              draw_bars(c, box7["coords"], opts[6][0], opts[6][1], 7);
              draw_bars(c, box8["coords"], opts[7][0], opts[7][1], 8);
          }
      },
      choices: function(data) {
          var n_opts = jsPsych.timelineVariable("n_opts");
          if (n_opts == 1) {
              var choices = ["1", "None of these"];
          } else if (n_opts == 4) {
              var choices = ["1", "2", "3", "4", "None of these"];
          } else if (n_opts == 8) {
              var choices = ["1", "2", "3", "4", "5", "6", "7", "8", "None of these"];
          }
          return choices;
      }

[jodeleeuw]

Hey @sp-conway,

You can customize the HTML/CSS of the buttons using the button_html parameter (docs). Specifically, you can pass an array to this function that is the length of choices, which will apply the html in the first array slot to the first choice, second to second, and so forth. If you combine this with some clever CSS positioning you should be able to make it work. Feel free to follow up here if there are CSS problems.

[sp-conway]

@jodeleeuw
I tried something, and I think I'm getting there, but I still get an error. A simplified version of my code is below:

button_html: function(data){
        var html = [];
        var ncx = .4*canvas_width;
        var ncy = .9*canvas_height;
        var b1x = ( box1.coords[0][0] + box1.coords[1][0])/2;
        var b1y = ( ( box1.coords[2][1] + box1.coords[3][1])/2 ) + 50;
              html.push(['<button class="jspsych-button"<div style="position: fixed: top'+b1y+'px; left:'+b1x+'"</div></button>']);
              html.push(['<button class="jspsych-button"<div style="position: fixed: top'+ncy+'px; left:'+ncx+'"</div></button>']);
              console.log(html);
         return html
},
choices: ["opt1", "no choice"]
}

Specifically, the console tells me
plugin-canvas-button-response.js:110 Uncaught TypeError: buttons[i].replace is not a function at CanvasButtonResponsePlugin.trial (plugin-canvas-button-response.js:110:36) at JsPsych.doTrial (jspsych.js:3059:45) at JsPsych.nextTrial (jspsych.js:3002:18) at onExtensionCallbacksFinished (jspsych.js:2806:30) at JsPsych.finishTrial (jspsych.js:2823:17) at end_trial (plugin-canvas-keyboard-response.js:101:28) at plugin-canvas-keyboard-response.js:136:19

[jodeleeuw]

It looks like you are using html.push() with an array on the inside, so the resulting array is nested two levels deep. Try removing the [ ] in the push function. There's also a > missing after class="jspsych-button" and before <div style="...

[sp-conway]

@jodeleeuw Thank you! That seemed to help. I do get the buttons on screen now, but the labels on them now read the html text (e.g., style="position: fixed: top700px; left:118.75"). I'm pretty naive to html coding, so I assumed I missed something simple somewhere.

       var html = [];
        var ncx = .4*canvas_width;
        var ncy = .9*canvas_height;
        var b1x = ( box1["coords"][0][0] + box1["coords"][1][0])/2;
        var b1y = ( ( box1["coords"][2][1] + box1["coords"][3][1])/2 ) + 50;
        console.log(b1x)
        html.push('<button class="jspsych-button>"<div> style="position: fixed: top'+b1y+'px; left:'+b1x+'"</div></button>');
        html.push('<button class="jspsych-button>"<div> style="position: fixed: top'+ncy+'px; left:'+ncx+'"</div></button>');

[jodeleeuw]

I think

html.push('<button class="jspsych-button>"<div> style="position: fixed: top'+b1y+'px; left:'+b1x+'"</div></button>');

should be

html.push('<button class="jspsych-button"><div style="position: fixed: top'+b1y+'px; left:'+b1x+'">%choice%</div></button>');

Note that the style attribute for the div element is inside the <>. I added the %choice% parameter which is a jsPsych plugin specific thing that will print the corresponding values of the choices array.

[sp-conway]

@jodeleeuw Great, thank you so much.

A couple more questions - I noticed that this still puts the buttons at the bottom of the screen. I also noticed that they're now quite small. Do you know why this is?