adding JS in a custom plugin

[kernel52]

I was wondering if there is a best practice when one needs to add extra JS code in a plugin.

I am creating an experiment, and would like to have some js functions to be executed once the experiment is loaded.
I need to declare a couple of js functions to be able to use on a onclick event of the html in my experiment.
For now, I tried including a <script> in my display_element, but it doesn't seem to work :/

thank you in advance.

[kernel52]

i now I can always declare them in my HTML (with the rest of JS), but I would like to pack everything together in my plugin :)

[becky-gilbert]

Hi @kernel52, I think the way that you do this will depend on what exactly you want to do. For instance, if you have a function that you want to be called when the expeirment loads, then you could either define that function in your main script or in a separate .js file that you load in the head section. Then you could call the function when the experiment starts, for instance using the on_start event-related callback function that's available in all plugins, or using the call-function plugin.
If you want to call a function in response to a click event that occurs anywhere on the page throughout the whole experiment, then you might be able to attach your click event handler when the experiment first loads, using one of the methods described above.
Or if you want to attach click event handlers just to specific elements and/or during specific trials, then you're right that this will require modifying the plugin file. To do this, I suggest changing the plugin file name, as well as the plugin name in the file (e.g. line 11 and line 16 in the html- button-response plugin). Then you can just add a click event handler for any elements, or modify the existing click handler. And there's a jsPsych video tutorials page on the website with some tutorial videos, including one about creating and modifying plugins, which might also be useful. I hope this helps!

[kernel52]

thanks Becky!

In fact I am using the traditional way of declaration on the head of the page for my JS. But this unfortunately makes my plugin not portable as this will need extra steps from the user to be able to use the plugin in their experiments.

What I wanted to find out is if I can declare via the plugin some functions that I will use later on to make my elements draggable for example, making my plugin user-friendly.

I thought of the on_start and call-function but to my understanding these are to pass anonymous functions. I seek to declare functions to be able to use them in a specific stimulus during my experiment.

What I might do, is to pack my functions in a second .js file and just give the instructions to the user to include the file together with the plugin in the head.

[becky-gilbert]

@kernel52, ah, sorry for misunderstanding your question! I think I see what you mean now. Any custom functions that you want to use would typically be written into the plugin.trial function, and because plugins are self-contained, these functions are only available during that trial. But if you want to include functions with your plugin that are available throughout the whole experiment, then you're right that you'd need to ask users to load a separate file along with the plugin file in the head section. Some plugins have dependencies, e.g. virtual-chinrest, so asking the researcher to load an extra file alongside your plugin wouldn't be too unusual.

I'm curious about why your plugin needs to include functions that are used outside of the plugin itself. If you want your plugin to be able to modify or extend the behavior of other plugins, then you could consider using jsPsych's new extensions feature. Extensions can be used 'on top' of other plugins and would allow you to declare functions that are available throughout the whole experiment. For an example, these functions are available throughout the experiment when the WebGazer extension is used. The functions are declared in the jspsych-ext-webgazer.js file, which is in the extensions folder. However, this extensions option may not make sense for what you're trying to do.

I hope this helps!

[kernel52]

You have put me into thinking -and it took time. :)

In fact, I now that I think of it, I try to (almost) replicate the functionality of the free-sort plugin. I need draggable content, and a grid to put the content into.

I had already done the work on a plain html page and wanted just to import this to jspych. My approach is based on a guide I followed about draggable content.

The down-side is that I need to declare the functions I am using before the plugin loads. At least, when I tried to add the JS inside the plugin and just add it with the HTML via display_element, it did not work. I have no other way (known to me) to inject the JS functions on the page before the elements appear.

I think for v.1 I will do as you suggested at first, adding in manually on the head of my html.
For v.2 will try to see if teh extensions approach could work for me, as it seems that it can do the trick!

If you want, I can give you more details already on what I am doing, but in any case I plan (once the project is validated) to share my plugin with the community for further improvements/development :)

thank you very much for the time you take to discuss with me about this project, I deeply appreciate it :)
Nikolas

[becky-gilbert]

Glad to hear that our discussion was helpful! If you want to share more about what you're trying to do and/or your current code, we could have a look and see if we can offer more specific guidance.

In fact, I now that I think of it, I try to (almost) replicate the functionality of the free-sort plugin. I need draggable content, and a grid to put the content into.

Maybe there's a way of modifying the existing free-sort plugin to do what you need, without removing any of its existing features? If so, we'd be happy to consider extending the free-sort plugin. Feel free to submit an Github issue explaining what feature(s) you think should be added, and/or a pull request with your suggested changes to the code.

I have no other way (known to me) to inject the JS functions on the page before the elements appear.

In the plugin's plugin.trial function, you can control everything that happens during the trial, so you should be able to declare all of the functions you need so that they are available before the elements are created and added to the page. The most common way of doing this is to write the functions directly into the plugin.trial function code, which is ideal because then the plugin is self-contained. But again, this is tricky to figure out without knowing exactly what you're doing, and there may be some reason why this doesn't work in your specific case (e.g. because you need to load a whole separate JS library that's maintained by someone else, rather than just a few custom functions).

If you don't want to or can't declare the functions you need in plugin.trial, then you could try loading a separate .js file in the plugin code using an AJAX Loading or Dynamic Script Loading methods described here and here. But to be honest I don't think there's much advantage to doing it this way over asking the researcher to include the extra .js file in their head section.

Sorry if this is all stuff that you understand already - I just thought that I'd try to clarify in case this was still unclear. I hope this helps!

[kernel52]

On the contrary I do believe is useful to explain things in detail. If not useful for me, it might be a source of info for the community. so thumbs up on this :)

Thank you for offering help, is much appreciated. I'll get back to you soon(-ish), with more details on this, and potentially a clear explanation on what I am doing and what is the goal.
Nikolas