Migrating custom plugin from jsPsych 6.0.4 to 7.2.3 returns internal function error

[anshu-97]

Hi!

I have been trying to implement an OSpan task using jspsych and recently came across a really helpful repository. However, the original repository includes a lot of custom plugins that make use of the jsPsych 6.0.4 lib. Since I am already implementing various other tasks using the newer 7.2.3 lib, I was hoping to adapt the script to make use of the newer version of jsPsych as well so that I would not have to download both sets of plugins.

While this has mostly been manageable, I have some trouble migrating one of the custom plugins (see below):

 var jsPsychOperationSpanRecall = (function (jspsych) {
 'use strict';
    const info = {
      name: 'operation-span-recall',
      description: '',
      parameters: {
          trial_duration: {
           type:jspsych.ParameterType.INT,
           pretty_name: 'Trial duration',
           default: null,
           description: 'How long to show the trial.'
         },
         size_cells: {
          type: jspsych.ParameterType.INT,
          pretty_name: 'Size of cell',
          default: 70,
          description: 'Size of each cell on numpad'
        },
       correct_order: {
        type:jspsych.ParameterType.INT,
        default: undefined,
        description: 'Record the correct array'
      }
   }
 }

class OperationSpanRecall {
  constructor(jsPsych) {
      this.jsPsych = jsPsych;
  }
  trial(display_element, trial) {
     var grid = 3;
     var recalledGrid = [];
     var correctLetters = trial.correct_order
     var display = " "

     var setSize = correctLetters.length
     var leftOver = 12-setSize

     var numbertobutton = {
         "0": "F",
         "1": "H",
         "2": "J",
         "3": "K",
         "4": "L",
         "5": "N",
         "6": "P",
         "7": "Q",
         "8": "R",
         "9": "S",
         "10": "T",
         "11": "V"
       }
   function indexOfArray(val, array) {
    var
      hash = {},
      indexes = {},
      i, j;
      for(i = 0; i < array.length; i++) {
         hash[array[i]] = i;
    }
   return (hash.hasOwnProperty(val)) ? hash[val] : -1;
  };


  function recordClick(data) {
    var tt = data.getAttribute('id')
    var tt = ("#"+tt)
    display_element.querySelector(tt).className = 'jspsych-operation-span-recall'
    recalledN = (data.getAttribute('data-choice'));
    recalledGrid.push(numbertobutton[recalledN])
    var div = document.getElementById('recall_space');
    display += numbertobutton[recalledN] + " "
    div.innerHTML = display;
  }

function clearSpace(){
    recalledGrid = recalledGrid.slice(0, (recalledGrid.length-1))
    console.log(recalledGrid)
    var div = document.getElementById('recall_space');
    display = display.slice(0, (display.length-2))
    div.innerHTML = display
}

  var matrix = [];
  for (var i=0; i<4; i++){
    var m1 = i;
    for (var h=0; h<3; h++){
      var m2 = h;
      matrix.push([m1,m2])
    }
  };

  var paper_size = [(3*(trial.size_cells+30)), ((4*(trial.size_cells+20))+100)];

  display_element.innerHTML = '<div id="jspsych-html-button-response-btngroup" style= "position: relative; width:' + paper_size[0] 
  +  'px; height:' + paper_size[1] + 'px"></div>';
  var paper = display_element.querySelector("#jspsych-html-button-response-btngroup");

  paper.innerHTML += '<div class="recall-space" style="position: absolute; top:'+ 0 +'px; left:'+(paper_size[0]/2-310)+'px;     
  width:600px; height:64px" id="recall_space">'+ recalledGrid+'</div>';


 var buttons = ["F","H","J","K","L","N","P","Q","R","S","T","V"]

 for (var i = 0; i < matrix.length; i++) {
      var str = buttons[i]
       paper.innerHTML += '<div class="jspsych-operation-span-recall" style="position: absolute; top:'+ (matrix[i][0]*( 
      (trial.size_cells+20)+80) +'px; left:'+matrix[i][1]*(trial.size_cells+30)+'px; width:'+(trial.size_cells-6)+'px; height:'+(trial.size_cells- 
      6)+'px"; id="jspsych-spatial-span-grid-button-' + i +'" data-choice="'+i+'" onclick="recordClick(this)">'+str+'</div>'
  }


 display_element.innerHTML += '<div class="jspsych-btn-numpad" style="display: inline-block; margin:'+10+' '+2+'" id="jspsych- 
 html-button-response-button-clear" onclick="clearSpace(this)">Backspace</div>';

display_element.innerHTML += '<div class="jspsych-btn-numpad" style="display: inline-block; margin:'+10+' '+40+'" id="jspsych- 
html-button-response-button">Continue</div>';


 var start_time = Date.now();

  display_element.querySelector('#jspsych-html-button-response-button').addEventListener('click', function(e){
        var acc=0
        for (var i=0; i<correctLetters.length; i++){
            if (recalledGrid[i] == correctLetters[i]){
            acc += 1
         }
     }
 after_response(acc);
  });

  var response = {
    rt: null,
    button: null
  };


 function after_response(choice) {
   // measure rt
   var end_time = Date.now();
   var rt = end_time - start_time;
   var choiceRecord = choice;
   response.button = choice;
   response.rt = rt;
   var btns = document.querySelectorAll('.jspsych-html-button-response-button button');
   for(var i=0; i<btns.length; i++){
        //btns[i].removeEventListener('click');
       btns[i].setAttribute('disabled', 'disabled');
    }

   clear_display();
   end_trial();
 };

if (trial.trial_duration !== null) {
    this.jsPsych.pluginAPI.setTimeout(function() {
       clear_display();
       end_trial();
     }, trial.trial_duration);
  }

 function clear_display(){
      display_element.innerHTML = '';
  }


 function end_trial() {
    this.jsPsych.pluginAPI.clearAllTimeouts();

    // gather the data to store for the trial
     var trial_data = {
         rt: response.rt,
         recall: recalledGrid,
         stimuli: correctLetters,
         accuracy: response.button
      };

    // move on to the next trial
   this.jsPsych.finishTrial(trial_data);
    }
 }};

  OperationSpanRecall.info = info;

  return OperationSpanRecall;

  })(jsPsychModule);

In particular, when implementing, I get the error message "Uncaught ReferenceError: recordClick is not defined at HTMLDivElement.onclick (operation_span_task.html:1:1)"

Would greatly appreciate any help on this since we are hoping to implement this task soon 😅
Thank you!

[jodeleeuw]

Hi @anshu-97

I'm guessing this is a scoping issue where the recordClick function is internal to the plugin and can't be accessed by adding the function call to the html of the button.

One solution would be to add the event handlers using addEventListener() instead of using the onclick attribute.

However, because you are modifying .innerHTML you have to wait to add the event listeners until you have finished modifying the HTML, or the event listeners will be destroyed. This is because .innerHTML += replaces all of the HTML when it runs, and destroys any existing DOM components.

I would add something like this:

for (var i = 0; i < matrix.length; i++) {
      paper.querySelector('#jspsych-spatial-span-grid-button-' + i).addEventListener('click', (e) => recordClick(e.target))
}

probably right before

 var start_time = Date.now();

[anshu-97]

Hi @jodeleeuw

Thanks for the quick reply! I implemented the for loop as suggested and while the error was fixed, the recalledGrid was not appearing on the div 'recall-space' when the buttons were clicked. However, making a slight change to the for-loop to:

for (var i = 0; i < matrix.length; i++) {
      display_element.querySelector('#jspsych-spatial-span-grid-button-' + i).addEventListener('click', (e) => recordClick(e.target))
}

got the function to work as expected!

Thanks a lot for the help!