无法在键入时显示文本

问题描述

我正在使用 jsPsych 库来编写任何实验。我对 js 很陌生，所以如果我的错误很明显，我深表歉意。

我正在尝试让文本在输入时显示在屏幕上。在创建者将 html-keyboard-response 插件修改为 this experiment 插件之后，这在 html-keyboard-multiple-response 中成功完成。

我尝试将这个插件与图像键盘响应结合起来，使用图像而不是 html 作为刺激。问题是文本不会在输入时出现，这与 html-keyboard-multiple-response 不同。我知道正在记录击键，因为它们在最后显示为 displayData()。

我改编的插件位于：jspsych-image-keyboard-multiple-response.js，实验在这里：image-keyboard-multiple-response.html。

是否可以快速浏览一下插件，看看我在组合其他两个插件时是否编码错误？我相信错误在我的图像插件中的第 83 行附近，如下所示：

 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>';

这意味着对应于 html 插件中的第 ~61 行：

  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: []
    };

是否应该在我的图像插件中更改某些内容，以便文本在键入时显示，就像在 html 插件中发生的那样？

解决方法

查看插件，我发现了三个潜在问题：

1. 试用提示是一个“字符串”，您将一个字符串附加到一个 html 元素

html += trial.prompt;

2. 试验刺激是一个“图像”，但 src 属性采用图像的网址，如 "https://www.w3docs.com/build/images/logo-color-w3.png" 或 数据网址，如 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" (来自 https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html)，因此您可能需要检查您的试验刺激实际上是什么。

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

3. 最后一个字符串应该是 '">';，html 图像标签不会被关闭。

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