Cannot get text to appear as it is typed

Question

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?

Answer 1

Looking at the plugin, I see three potential issues:

1. trial prompt is a "string", you're appending a string to an html element

html += trial.prompt;

2. trial stimulus is an "image", but the src attribute takes either a url to an image like "https://www.w3docs.com/build/images/logo-color-w3.png" or a data url like "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" (from https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html) so you might need to check what your trial stimulus actually is.

var html = '<img src="' + trial.stimulus + '" id="jspsych-image-keyboard-multiple-response-stimulus" style="';

3. The last string should be '">';, html image tags do not get closed.

html += '"></img>';