Implementing an independant task into a jsPsych experiment

[LiseBrun]

Hello,

I would like to implement an independant task (running with javascript code) into a jsPsych experiment, but I did not managed to do it.

To provide you some context, I have a line tracing task coded in html and javascript in which participants have to reproduce a geometrical figure using their mouse or trackpad. In this study, there are two canvas: in the upper one the figure to be reproduced appears, and in the lower one the participants can move their mouses to reproduce the figure. The measure is the percentage of correct tracing (i.e., carried out on the lines of the figure).

This task works fine independently, using a javascript file (containing most of the study code) and a html file (in which the two canvas are drawn, the scripts needed are loaded, and the specific figure to reproduce is indicated). The study also needs two other js files: jquery and base64.
You can find all the scripts for this study here: https://github.com/LiseBrun/mirror_trace_jspsych/tree/main/task.

NB: This is a task created by another researcher, I just adapted the script to what I wanted.

As I mentioned, I would like to implement this independant task within a jsPsych experiment. I would like to be able to do a series of trials and add two questions after each figure reproduction (one question in forced choice and one question with a slider) using jsPsych.

I already created a jsPsych experiment containing the forced choice question and the slider question, but I cannot manage to implement the tracing task within this jsPsych experiment. You can find the jsPsych experiment containing the two questions here: https://github.com/LiseBrun/mirror_trace_jspsych.

I tried multiple things to implement this tracing task within a jsPsych experiment, without any success... I tried to copy-paste the javascript code of the line tracing task in the jsPsych experiment code to call the function of the task using the call-function plugin. I also tried to use the external html plugin also, but it did not work. Maybe these two ideas are not bad but I was not able to make it work.

This is where I am stuck, have you any piece of advice on how to deal with this issue?

[jodeleeuw]

Hi @LiseBrun,

Typically when you want to add a really different task to jsPsych the appropriate method is by creating a new plugin. Since you have a functional JavaScript task already, this will involve mostly just copying/pasting code into the template for a plugin and configuring how you want trial parameters to work.

I'd suggest watching this video introduction to creating plugins. There's also some written information in the overview of plugins in the documentation.

If you run into difficulty with the plugin creating feel free to follow up here.