Cannot get text to appear as it is typed

[angoodkind]

I am using the jsPsych library to code any experiment. I am very new to js, so I apologize if my error is obvious.

I am trying to get text to appear on-screen as it is typed. This was done successfully in this experiment, after the creator modified the html-keyboard-response plugin to be a html-keyboard-multiple-response plugin.

I have tried to combine this plugin with the image-keyboard-response, to use images instead of html as stimuli. The problem is that the text doesn't appear as it is typed, unlike in html-keyboard-multiple-response. I know the keystrokes are being logged, since they show up at the end with displayData().

My adapted plugin is located here: jspsych-image-keyboard-multiple-response.js, and the experiment is here: image-keyboard-multiple-response.html.

Would it be possible to take a quick look at the plugin, to see if I miscoded something in combining the other two plugins? I believe the error is near line 83 in my image plugin, which looks like this:

 plugin.trial = function(display_element, trial) {

    // display stimulus
    var html = '<img src="'+trial.stimulus+'" id="jspsych-image-keyboard-multiple-response-stimulus" style="';
    
    if(trial.stimulus_height !== null){
      html += 'height:'+trial.stimulus_height+'px; '
      if(trial.stimulus_width == null && trial.maintain_aspect_ratio){
        html += 'width: auto; ';
      }
    }
    if(trial.stimulus_width !== null){
      html += 'width:'+trial.stimulus_width+'px; '
      if(trial.stimulus_height == null && trial.maintain_aspect_ratio){
        html += 'height: auto; ';
      }
    }
    html +='"></img>';

This is meant to correspond to line ~61 in the html plugin:

  plugin.trial = function(display_element, trial) {

    var new_html = '<div id="jspsych-html-keyboard-multiple-response-stimulus">'+trial.stimulus+'</div>';

    // add prompt
   // if(trial.prompt !== null){
      new_html += trial.prompt;
    //}

    // draw
    display_element.innerHTML = new_html;

    // store response
    var response = {
      rt: [],
      key: [],
      char: []
    };

Is there something I should change in my image plugin so that the text appears as it is typed, as occurs in the html plugin?

[angoodkind]

I have resolved this issue.