Does cognition.run support xml files?

[sophief10]

Hi everyone!

My experiment uses an xml file. Will I be able to administer the experiment using cognition.run?

[jodeleeuw]

Hi @woodenchair,

How do you use the XML file in the experiment?

[sophief10]

I am new to XML so I am unsure whether what I am about to say will make sense. But I have created a grid of 16 canvases to show in one of my trials, where I randomly select 5 canvases to draw on. In a later trial, I need to reuse the grid and draw on the same 5 canvases. So what I would like to do is create an external XML file to which I can send the data after the first trial, so I have a record of which 5 canvases were chosen. Then, for the second trial, I would like to access the XML data so I know which of the 5 canvases to use.

[javidalpe]

Hello @woodenchair,

Let me take a step back and think about the problem before diving into the solution.

The problema here is that you have a task A and a task B. The task B needs some data from the task A, right? So now we have two problemas:

1. We have to encode the data in a computer readable format. XML is a well known format, but you can also think about using JSON or YAML. Given that you are coding your experiment in Javascript, JSON is your best option here.
2. Unfortunately, there no API or feature in cognition.run to store/retrieve arbitrary data intra-experiment. This means you cannot "store" the grid and "restore" later.

To solve 3) I have two suggestions:
A) Merge both task A and B into the same cognition.run task. This would require the participant to run both tasks sequentially. This won't work if tasks are designed for different moments.
B) On task A, encode the Grid into a string variable grid. Save that variable as a new column in the jspsych data (https://www.jspsych.org/7.0/reference/jspsych-data/#jspsychdataaddproperties). Access the recorded data on cognition.run as spot the value of the column grid. When sharing the link to the task B, manually append the value of the column grid as a query parameter to the link. Example: xxxx.cognition.run/?grid=blablablablabla On Task B, read the value of query param grid (https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get)
c) Similar to B. On Task A, using Javascript, generate the URL to the Task B. Include the grid in the generated URL. Example: xxxx.cognition.run/?grid=blablablablabla. On Task finish, redirect the participant to the Task B using the generated URL. On Task B, read the value of query param grid (https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get)

[sophief10]

@javidalpe Thank you for your help! Are you saying that I need to run two separate experiments? Can't I create the Trial B canvas dynamically using the data from Trial A, so that both tasks are in the same experiment?

For example, would something like this work?

var TrialB = {
        type: 'html-keyboard-response',
        stimulus: function(display_element) {
                display_element.innerHTML = grid;
                let c1 = document.getElementById(location1); //the locations of each of the 5 randomly selected canvases were saved after 
//Trial A
                let ctx1 = c1.getContext("2d");
                let c2 = document.getElementById(location2);
                let ctx2 = c2.getContext("2d");
                //etc.
        }
};

I have tried to access the display_element from inside my experiments (e.g., function(display_element) ) before, but I always get an error stating that display_element is undefined. So, I know that the above code would not work. But isn't there a way that I could change the appearance of the display_element from within my experiment, so that I can generate my Trial B canvas dynamically and only use one experiment instead of two?

By the way, if it helps, I will give you the code defining my grid. I created it by modifying the canvas-keyboard-response plugin:

const canvasIds = ['canvas1', 'canvas2', 'canvas3', 'canvas4', 'canvas5', 'canvas6', 'canvas7', 'canvas8', 'canvas9', 'canvas10', 'canvas11', 'canvas12', 'canvas13', 'canvas14', 'canvas15', 'canvas16'];

    for (let i = canvasIds.length - 1; i > 0; i--) { //place the canvas ids in a random order to randomly select shape locations
        let j = Math.floor(Math.random()*i);
        let k = canvasIds[i];
        canvasIds[i] = canvasIds[j];
        canvasIds[j] = k;
    };

      //each shape location consists of a canvas
      var new_html = `<div class="WM_canvasArray_row" id="row1>
                          <div class="WM_canvasArray_doubleColumn" style="float:left">
                              <canvas class="WM_canvasArray_canvas" id="canvas1" style="float:left;"></canvas> 
                              <canvas class="WM_canvasArray_canvas" id="canvas2" style="float:right;"></canvas>
                          </div>
                          <div class="WM_canvasArray_doubleColumn" style="float:right">
                              <canvas class="WM_canvasArray_canvas" id="canvas3" style="float:left;"></canvas>
                              <canvas class="WM_canvasArray_canvas" id="canvas4" style="float:right;"></canvas>
                          </div>
                      </div>
                      <div class="WM_canvasArray_row" id="row2>
                          <div class="WM_canvasArray_doubleColumn" style="float:left">
                              <canvas class="WM_canvasArray_canvas" id="canvas5" style="float:left;"></canvas>
                              <canvas class="WM_canvasArray_canvas" id="canvas6" style="float:right;"></canvas>
                          </div>
                          <div class="WM_canvasArray_doubleColumn" style="float:right">
                              <canvas class="WM_canvasArray_canvas" id="canvas7" style="float:left;"></canvas>
                              <canvas class="WM_canvasArray_canvas" id="canvas8" style="float:right;"></canvas>
                          </div>
                      </div>
                      <div class="WM_canvasArray_row" id="row3>
                          <div class="WM_canvasArray_doubleColumn" style="float:left">
                              <canvas class="WM_canvasArray_canvas" id="canvas9" style="float:left;"></canvas>
                              <canvas class="WM_canvasArray_canvas" id="canvas10" style="float:right;"></canvas>
                          </div>
                          <div class="WM_canvasArray_doubleColumn" style="float:right">
                              <canvas class="WM_canvasArray_canvas" id="canvas11" style="float:left;"></canvas>
                              <canvas class="WM_canvasArray_canvas" id="canvas12" style="float:right;"></canvas>
                          </div>
                      </div>
                      <div class="WM_canvasArray_row" id="row4>
                          <div class="WM_canvasArray_doubleColumn" style="float:left">
                              <canvas class="WM_canvasArray_canvas" id="canvas13" style="float:left;"></canvas>
                              <canvas class="WM_canvasArray_canvas" id="canvas14" style="float:right;"></canvas>
                          </div>
                          <div class="WM_canvasArray_doubleColumn" style="float:right">
                              <canvas class="WM_canvasArray_canvas" id="canvas15" style="float:left;"></canvas>
                              <canvas class="WM_canvasArray_canvas" id="canvas16" style="float:right;"></canvas>
                          </div>
                      </div>`
                        

      // add prompt
      if (trial.prompt !== null) {
        new_html += trial.prompt;
      }
  
      // draw
      display_element.innerHTML = new_html;
      let c1 = document.getElementById(canvasIds[0]); //each shape parameter is assigned to a randomly located canvas because the canvasIds array was randomized
      trial.shape1(c1); 
      let c2 = document.getElementById(canvasIds[1]);
      trial.shape2(c2);
      let c3 = document.getElementById(canvasIds[2]);
      trial.shape3(c3);
      let c4 = document.getElementById(canvasIds[3]);
      trial.shape4(c4);
      let c5 = document.getElementById(canvasIds[4]);
      trial.shape5(c5);

[sophief10]

Update: I have figured out how to code the experiment without using XML. I created two custom plugins, each one derived from the canvas-keyboard-response plugin. Within the first plugin, I use a web storage API function to log the selected canvases, by element ID, in the user's browser (e.g., sessionStorage.setItem("c1", canvasIDs[0])). Then, in the second plugin, I just retrieve the canvas data from the browser (e.g., sessionStorage.getItem("c1")).

Thank you, everyone, for your help!