jPsych: Access shelf

Online experiments jsPsych
1

I know it is possible to access shelf variables when exporting a PsychoPy builder experiment to Pavlovia using some custom javascript code.

Is it also possible to access shelf variables when uploading a jsPsych experiment on Pavlovia? I could not find any documentation on this so far?

Thanks for any suggestions that could be made here :slight_smile:

2

Have you tried using the JavaScript code?

3

To follow up, it’s possible in principle using the PsychoJS library, which you have access to anyway if you’re running the experiment on Pavlovia. You might need to reference the psychoJS source code in your header, e.g.,

 <script src="lib/psychojs-2024.2.2.js"></script>

but if you do that you should just be able to use the code in Wakefield’s example to interact with the shelf without further modification.

1 Like
4

Thanks for the info @wakecarter and @jonathan.kominsky , I was not aware that you could still use the psychojs module within a jsPsych experiment. I will try it out and keep you updated!

5

Hi Christophe, I have the same issue. Did you manage to get wakecarter and jonathan’s suggestions to work?

I have included

<script src="lib/psychojs-2024.2.2.js"></script>

in my header but I get error “Uncaught ReferenceError: PsychoJS is not defined” when I try to create a psychoJS object at the top of my JSpsych experiment file,

const psychoJS = new PsychoJS({
  debug: true, // Set to false for production
});

Thank you for any suggestions or updates!

6

Hi oi-griffits,

No we were not able to solve it yet. We reduced it to a minimal version where in addition to having the jsPsych scripts, we only add the script tag that you are referring to, but are not referencing the PsychoJS module in our code.

<script src="lib/psychojs-2024.2.2.js"></script>

This already produces an error:

Uncaught SyntaxError: Unexpected token 'export' (at psychojs-2024.2.2.js:1397:60170)

So it seems as if even importing the psychojs module is not working. For reference, here is the full code that we are using:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/psychojs-2024.2.2.js"></script>

    <script src="https://unpkg.com/jspsych@8.2.1"></script>
    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
    <link href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="lib/jspsych-7-pavlovia-2022.1.1.js"></script>   
</head>

<body>
    <script>
        const jsPsych = initJsPsych();

        // Initialize connection with Pavlovia
        const pavlovia_init = {
            type: jsPsychPavlovia ,
            command: "init"
        };

        const hello_trial = {
            type: jsPsychHtmlKeyboardResponse,
            stimulus: 'Test'
        }

        /* finish connection with pavlovia.org */
        var pavlovia_finish = {
            type: jsPsychPavlovia,
            command: "finish"
        };

        jsPsych.run([pavlovia_init, hello_trial, pavlovia_finish]);        
    </script>
</body>
7

Hi Christophe,

Thank you for your response. Much appreciated!

Your code you posted in your reply was going to be my next step but that is dispiriting to hear you couldn’t import the psychojs module. I will try a minimal example myself and post an update if I find a solution.

Incidentally did you solve your jsPsych-Pavlovia server side variable issue using another method? I would like a participant counter variable to balance conditions for small pilot studies.

Thanks again.

8

For anyone who’s interested I may have a solution to the jsPsych access shelf problem.

A modified version of Christophe’s min working example,

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <!-- PsychoJS Dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js"></script>
  <script src="https://unpkg.com/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

  <script src="https://unpkg.com/jspsych@8.2.1"></script>
  <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
  <link
    href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css"
    rel="stylesheet"
    type="text/css"
  />
  <script
    type="text/javascript"
    src="lib/jspsych-7-pavlovia-2022.1.1.js"
  ></script>
</head>

<body>
  <!-- Add required DOM elements for PsychoJS -->
  <div id="root"></div>

  <script type="module">
    // Import PsychoJS as a module
    import * as PsychoJS from "./lib/psychojs-2024.2.2.js";

    async function runExperiment() {
      // Create PsychoJS instance
      const psychoJS = new PsychoJS.core.PsychoJS({
        debug: true,
      });

      await psychoJS.start();

      // Now you can use the shelf
      const shelf_test = await psychoJS.shelf.getIntegerValue({
        key: ["psychojs_test"],
        defaultValue: 0,
      });

      console.log("Shelf counter value: " + shelf_test);

      await psychoJS.shelf.addIntegerValue({
        key: ["psychojs_test"],
        delta: 1,
      });

      const jsPsych = initJsPsych();

      // Initialize connection with Pavlovia
      const pavlovia_init = {
        type: jsPsychPavlovia,
        command: "init",
      };

      const hello_trial = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: "Test1",
      };

      /* finish connection with pavlovia.org */
      var pavlovia_finish = {
        type: jsPsychPavlovia,
        command: "finish",
      };

      jsPsych.run([pavlovia_init, hello_trial, pavlovia_finish]);
    }

    runExperiment();
  </script>
</body>

successfully accesses shelf variable “psychojs_test” on Pavlovia ( you have to create it first ) and then increments the count by one.

The reason I wanted to do this was for counterbalancing when assigning conditions for a small pilot. For instance for 3 conditions

condition_number = shelf_test % 3;

cycles through conditions as participants arrive

2 Likes