jsPsych on Pavlovia

[adaniabutto]

Hi all,

I’ve set everything up to run my jsPsych experiment with Pavlovia, and the actual experiment displays and runs without issues locally (code here). The experiment uses jsPsych 6.0.

However, when I add the experiment to the Pavlovia platform and integrate Pavlovia into the timeline as per the instructions (see here), things stop working. I've created a minimal demo here https://pavlovia.org/ottuba/working-demo-representationalvar; the error that is displayed is the following:

**Uncaught TypeError: jsPsych.plugins.parameterType is undefined**
pavlovia https://run.pavlovia.org/ottuba/working-demo-representationalvar/jspsych/jspsych-pavlovia-3.2.5.js:66
<anonymous> https://run.pavlovia.org/ottuba/working-demo-representationalvar/jspsych/jspsych-pavlovia-3.2.5.js:532

The lines of code that are being referenced (line #66 in jspsych-pavlovia-3.2.5.js) are the following:

plugin.info = {
		name: 'pavlovia',
		description: 'communication with pavlovia.org',
		parameters: {
			command: {
				type: jsPsych.plugins.parameterType.STRING,
				pretty_name: 'Command',
				default: 'init',
				description: 'The pavlovia command: "init" (default) or "finish"'
			},
			participantId: {
				type: jsPsych.plugins.parameterType.STRING,
				pretty_name: 'Participant Id',
				default: 'PARTICIPANT',
				description: 'The participant Id: "PARTICIPANT" (default) or any string'
			},
			errorCallback: {
				type: jsPsych.plugins.parameterType.FUNCTION,
				pretty_name: 'ErrorCallback',
				default: defaultErrorCallback,
				description: 'The callback function called whenever an error has occurred'
			}
		}
	};

If I’m not mistaken, this means that the code in my timeline file (see here) lines 21–25 and 44–48) that initiates and terminates communication with Pavlovia is not being read because of some variable definition problem.

Now, when I check my jspsych.js file (see here), it is not clear to me that jsPsych.plugins.parameterType is undefined. There are a bunch of references in there to jsPsych.plugins, but since I didn’t write the jsPsych plugin code myself, I'm not really sure what to look for.

Can anybody tell me where the issue lies, or what variable I need to look for? Or might this be an issue arising from conflicting jsPsych and Pavlovia versions?

Thank you!

[nikbpetrov]

You are working with an older version of the jspsych.js file in your index.html. In your index.html, change your line 7 from:

<script type="text/javascript" src="jspsych/jspsych.js"></script>

to:

<script type="text/javascript" src="jspsych/jspsych-6.0.0.js"></script>

[adaniabutto]

You are working with an older version of the jspsych.js file in your index.html. In your index.html, change your line 7 from:

<script type="text/javascript" src="jspsych/jspsych.js"></script>

to:

<script type="text/javascript" src="jspsych/jspsych-6.0.0.js"></script>

Hey, really appreciate your response!

After enacting that change in line 7, I get the following error:

Uncaught DOMException: Document.querySelector: '#[object Object]' is not a valid selector jspsych-6.0.0.js:130
    init file:///Users/ottuba/representationalvar WORKING DEMO/jspsych/jspsych-6.0.0.js:130
    <anonymous> file:///Users/ottuba/representationalvar WORKING DEMO/scripts/swist-task.js:62
    jQuery 2

Line #62 in swist-task.js is the jspsychInit function:

        jsPsych.init({
            timeline: experiment_timeline,
            display_element: $('#jspsych-target'),
            default_iti: exp.pause_after_trial,
            fullscreen: false,
            show_progress_bar: true,
            on_trial_start: function(){
                // TODO: Fix window height?
                $('body').scrollTop(0);
            },
            on_finish: function (){
                $('#jspsych-target').hide();
                $('#thanks').show()
                
                //var turkInfo = jsPsych.turk.turkInfo();
                var lastTrial = jsPsych.data.getLastTrialData(); 
                
                exp_data = {
                    time_in_minutes: lastTrial['time_elapsed']/1000/60,
                    system: {
                        browser: BrowserDetect.browser,
                        OS: BrowserDetect.OS,
                        width: $(window).width(),
                        height: $(window).height()
                    },
                    subject_info: jsPsych.data.getTrialsOfType('sll-survey'),
                };

Do you know why this new issue pops up?

EDIT

The issue was that display_element: $('#jspsych-target'), needs to be display_element: 'jspsych-target' instead. I guess this was old syntax from jspsych 5 (found out through here). This fixes the error, but still is not compatible with current Pavlovia:

[jspsych-pavlovia plugin 2020.5] Error

    when configuring the plugin
    when reading the configuration file: config.json

Sigh. I will have to try and figure out what other syntax has changed with recent versions.

[nikbpetrov]

TBH, I would warmly encourage you to switch to a more recent version of jsPsych, despite some annoying changes you will have to make. For a lot of things it will be helpful, e.g. no need to use the BrowserDetect package as this is baked into jsPsych v7.

[adaniabutto]

You're definitely right! I landed in this awkward spot of using old jsPsych syntax because I'm adapting a task programmed by other people, and it would have been too hard for me to code it all from scratch. It was a good learning experience, though; next time, I'll be more careful in my decision-making around working with old code! :)