将颜色选择器/外部库添加到 jsPsych 插件

Question

我正在尝试创建一个jsPsych 插件，用户可以在其中为每个刺激选择一种颜色。为此，我使用jscolor。 jscolor 在原版 HTML 中运行良好，但是当我尝试将其合并到 jsPsych 插件中时，它不会加载 jscolor 库。

jsPsych.plugins["color-picker"] = (function() {

var plugin = {};

plugin.info = {
  name: "color-picker",
  parameters: {
  }
}

plugin.trial = function(display_element, trial) {

  display_element.innerHTML += '<input data-jscolor="">'; // <-- This should show a color picker if jscolor.js is loaded.

  // data saving
  var trial_data = {
    parameter_name: 'parameter value'
  };

  // end trial
  jsPsych.finishTrial(trial_data);
};

return plugin;   })();

我不明白为什么会发生这种情况。也许我需要在插件中加载库？添加display_element.innerHTML += '<script src="library/jscolor.js"></script>'; 也不起作用。

如何在我的插件中实现这一点？

Answer 1

您可以在主实验脚本中加载jscolor 库，然后引用插件中的函数。

您的插件现在可能无法运行的一个原因是试用在开始后立即结束，因为在没有等待用户输入的情况下调用了jsPsych.finishTrial()。

您可能希望将 jsPsych.finishTrial() 调用移动到一个函数内，该函数基于用户提交包含 jscolor 输入元素的表单而被调用。