Give feedback based on all buttons previously pressed

[jaimielee97]

Hi!

I'm attempting to code an experiment where there is a 12x12 grid of buttons, and participants receive feedback based on which buttons/squares they choose to explore. When they click a square for the first time, they discover if it is either a normal square, which results in a small loss, or a rare critical square, which will result in a large gain. However, if they re-click on a square that has already been clicked in subsequent trials, they will receive 0 points. I am struggling to work out how to code this in a way that remembers where participants have clicked for previous trials.

I've attached the code I have so far below. I have it working so that it registers when a square is a critical square, but can't get it working so it knows if a square is new or has been previously explored. I think it may be including the current trial in the list of clicked squares at the moment, although moving clickedSquares.push(data.response) after the if statements didn't seem to help either. Any help would be greatly appreciated, thank you!

/* setting up variables */

var i = 0; // for keeping track of trials

// generate 15 random numbers between 0 and 143 
var allSquares = Array.apply(null, {length: 143}).map(Number.call, Number);
var criticalSquares = jsPsych.randomization.sampleWithoutReplacement(allSquares, 15);

// if the button clicked on current trial was one of the critical squares
function isCriticalSquare(lastSquare){
    return criticalSquares.includes(lastSquare)
};  

// if the button clicked has been clicked in a previous trial
var clickedSquares = []; 

function exploredSquare(lastSquare){
    return clickedSquares.includes(lastSquare)
}; 

/* trials */

var treasure_block = {    
    type: jsPsychHtmlButtonResponseGrid, // custom plugin arranges buttons in 12 x 12 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>', 
    image_size: 100,
    on_finish: function(data){
        i = i + 1;
        data.i = i;
        var lastSquare = jsPsych.data.getLastTrialData().trials[0].response;
        clickedSquares.push(data.response); 
        if (!exploredSquare(lastSquare)) {
            if (isCriticalSquare(lastSquare)) {
                return pointsAdded = 10;
            } else {                                           
                return pointsAdded = -1;
            } 
        } else {
            return pointsAdded = 0;
        }
    },
};

[nikbpetrov]

Shouldn't you be able to work that out from the clickedSquares array? Each button in your trial should have be unique so when you push data.response that should constitute a unique identifier for a button.

Perhaps a use case would be:

var currentSquare = data.response
if (clickedSquares.includes(currentSquare)) {
  //this square has been clicked
} else {
  //this square has not been clicked
}

Although this means you need to adjust your code so it takes into account the fact that not every button click is 'valid', i.e. you can have 10 trials (so i increments to 9) but only 2 of these would be legit if they just clicked on the same button over and over again - depends on your setup.

Another way to go about this could be to disabled buttons once they are clicked, e.g.

on_load: function(){
  for (let square of clickedSquare) {
    document.querySelector('some-way-to-target-your-button-by-their-data.response').disabled = true
  }
}

[jaimielee97]

Thanks for your help! I think I'm almost there, using the code you suggested it's now registering which squares have been clicked. However, it's counting the square just clicked (i.e., the current square) as one of the squares previously clicked, because it's adding the response data to the clickedSquares array immediately. Is there a way I can delay the clickedSquares.push by one trial to avoid this?

on_finish: function(data){
    var currentSquare = data.response;
    clickedSquares.push(data.response); 
    if (clickedSquares.includes(currentSquare)){
        return clicked = true;
    } else {
        return clicked = false;
    }

[nikbpetrov]

Yup, your comment makes sense; that's exactly why I included my last code block in the on_load function rather than on_finish - so that when the current trial loads, then you disable previously clicked buttons. Hope this helps!

[jaimielee97]

Hi, thanks again for your help. The participant should still be able to click on buttons that were previously clicked, they just won't receive points if they do, so I'm not sure if disabling the button will help. Instead I just want to remove the current trial from the clickedSquares array so that it isn't mistaken as a clicked square.

I've tried using slice to create a new variable so that the last square pressed won't be counted as a clicked button for that feedback round, but am receiving this error message - Uncaught ReferenceError: clicked is not defined.

clickedSquares.push(data.response);
var clicked = clickedSquares.slice(0, -1);

Not sure if there is a better way to go about this, but any help would be great.

[jaimielee97]

Never mind, I figured it out by adding slice as a function and then changing the if statement to if (SquareSlice(clickedSquares).includes(lastSquare)) in the treasure_block variable. Thanks for your help!

function SquareSlice(clickedSquares) {  
  let squareArrays = clickedSquares.slice(0, -1)
  return squareArrays
}