How to successfully preview an experiment with canvas plugin on Cognition.run?

[prashantig25]

Hi All,
I am trying to upload my experiment made using jsPsych on Cognition. run. The experiment preview is as expected until a point in the timeline wherein the stimulus presented is created using the canvas keyboard plugin. I use a function to draw the stimulus on Canvas. However, the stimulus is not presented in the task preview. Here is the code:

var timeline = []; //array with every stage of the experiment.
var duration = 1000; //trial duration
var welcome = {
        type: "html-keyboard-response", stimulus: "Welcome",
    };
timeline.push(welcome);
var fix = {
        type: 'canvas-keyboard-response',
        stimulus: function(c) {
            fixation(c);
        },
        trial_duration: 500, choices: jsPsych.NO_KEYS,
    };
var highprac_instruct = {
        type: "html-keyboard-response", stimulus: "<p style=\"font-size: 20px;color: #000000\"> Here are the instructions for the task.</p>" +
            "<p style=\"font-size: 20px;color: #000000\"> Before you do the actual task, please take part in the practice blocks. In these practice blocks, trials will begin with a fixation cross. In each trial, you will be presented with two images. Both images may have different levels of brightness on each trial. Your task is to choose the image which higher contrast level. If the image on your left has higher contrast level, press the <strong> left arrow </strong>. If the image on your right has higher contrast level, press the <strong> right arrow </strong>.</p>" +
            "<p> If you have understood the instructions, please press any key to proceed.</p>"
    };
var prac_highPU_s0 = {
        type: 'canvas-keyboard-response',
        on_start: function(prac_highPU_s0){ //generates a random contrast level after every trial and it acts as input in the gabor function
            prac_highPU_s0.contrast = Math.random(); prac_highPU_s0.contrast1 = jsPsych.currentTrial().contrast  + randbet(0.05,0.35);
        },
        stimulus: function(c) {
            gabor(c);
        },
        choices: [37,39],
        trial_duration: duration,
    };
var prac_highPU_s1 = {
        type: 'canvas-keyboard-response',
        on_start: function(prac_highPU_s1){ //generates a random contrast level after every trial and it acts as input in the gabor function
            prac_highPU_s1.contrast = Math.random(); prac_highPU_s1.contrast1 = jsPsych.currentTrial().contrast - randbet(0.05,0.35);
        },
        stimulus: function(c) {
            gabor(c);
        },
        choices: [37,39],
        trial_duration: duration,
    };
var stim_high_s1_prac = { timeline: [fix, prac_highPU_s0] };
var stim_high_s0_prac = { timeline: [fix, prac_highPU_s1] };

var prac_highPU = {
        timeline: [stim_high_s1_prac, stim_high_s0_prac],
        repetitions: 50,
        randomize_order: true
    };

var prac_block = {
        type: "html-keyboard-response", stimulus: "Practice Block",
    };
timeline.push(welcome);
timeline.push(highprac_instruct);
timeline.push(prac_block);
timeline.push(prac_highPU);

The task preview is successful from Welcome to the display of instructions. However, when I try to display the fixation and stimulus patches using the fixations, the fixation and stimulus do not appear in the task preview. Could someone help me with this? Should I upload the functions fixation and Gabor as external js files? However, that also seems to not work. Any help is appreciated. Thank you.

[GEJ1]

Hi @prashantig25 ,

I think we have a simmilar issue. Look the answer from @jodeleeuw : #754 (comment)

I think we need to wait until released of 6.3 version.

Best,

Gustavo.

[prashantig25]

Thanks for the reply. However, I have been successfully running the task on my device using jsPsych 6.0.5. So I am not sure it is a version issue.

[prashantig25]

Hi @GEJ1
I was able to successfully preview all stimuli using the canvas keyboard plugin. I just changed the version of jsPsych that I was using on Cognition.run. I chose 6.2.0 and the preview was fine. May be you could try that too. I also uploaded the function used to draw the stimulus on canvas as a separate file and called it under the canvas keyboard plugin.

var prac_highPU_s0 = {
        type: 'canvas-keyboard-response',
        on_start: function(prac_highPU_s0){ //generates a random contrast level after every trial and it acts as input in the gabor function
            prac_highPU_s0.contrast = Math.random(); prac_highPU_s0.contrast1 = jsPsych.currentTrial().contrast  + randbet(0.05,0.35);
        },
        stimulus: gabor,
        choices: [37,39],
        trial_duration: duration,
        response_ends_trial: false,
    };

May be this could help!
Good Luck,
Prashanti

[GEJ1]

It's great that it works! I'll try your recomendation.