Adding a Color Picker/External Library to jsPsych

[umutreldem]

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. This is after I use <script src="library/jscolor.js"></script> in the HTML page.

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 somehoe? Adding display_element.innerHTML += '<script src="library/jscolor.js"></script>'; does not work either.

How can I implement this in my plugin, or in my trials in general?

[jodeleeuw]

Hi @umutreldem,

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. I suspect if you comment out the jsPsych.finishTrial() line then you'll see the jscolor input appear on the page.

Another potential issue is that the jscolor library might expect the input to already be on the page when it loads. So you may need to tell jscolor that you've added a new input for it to modify. Based on a quick inspection of the docs, it looks like you'll need to call jscolor.install() (see here) after you modify the DOM.

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. For example, you could add a button to the page and then call jsPsych.finishTrial() when the user clicks the button.

[umutreldem]

Hi @jodeleeuw,

Your second suggestion did work! Putting jscolor.install() after inserting the input creates the color picker as intended. Surprisingly it works even without commenting jsPsych.finishTrial() out. Of course now I will modify the plugin to collect the color data and finish the trial on the click of a different button.

Thank you!

[becky-gilbert]

FYI, one reason your color picker might still work without commenting out jsPsych.finishTrial() is that this function doesn't actually clear the screen - most plugins do that right before the finish trial function is called. So I think your trial was probably ending immediately but the contents of the screen were never cleared. One way to check this is to add another trial with a different plugin (e.g. html-keyboard-response) after your color-picker trial. My guess is that you would see that your color picker stimulus is immediately replaced with the stimulus for the next trial.