Adding a Color Picker/External Library to a jsPsych Plugin

Question

I am trying to create a jsPsych plugin where the user can select a color for each stimulus. For this I am using jscolor. jscolor works well in vanilla HTML, but when I try to incorporate it in a jsPsych plugin it does not load the jscolor library.

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;   })();

I don't understand why this exactly happens. Maybe I need to load the library inside the plugin? Adding display_element.innerHTML += '<script src="library/jscolor.js"></script>'; does not work either.

How can I implement this in my plugin?

Answer 1

You can load the the jscolor library in your main experiment script and then reference the functions in the plugin.

One reason your plugin may not work right now is that the trial ends immediately after it begins because jsPsych.finishTrial() is called without waiting for any input from the user.

You'll likely want to move the jsPsych.finishTrial() call inside a function that is invoked based on the user submitting the form that includes the jscolor input element.