jatos.onLoad and promises

Comments

• kri

  May 2024

  Hello,

  this should be possible. Can you send us some code here? We don't need the whole code, it should be enough to see the part of your JS with the jatos.onLoad, the part where you load the files, and the part where your start jsPsych.

  Best,

  Kristian
• steffejr

  May 2024

  I just made my code public. It is pretty massive, and I would love to chat with you at some point about all the cool things I did with JATOS and jsPsych.

  
  

  I am going to try and paraphrase what I have in this code (Note the branch is not main):

  https://github.com/NCMlab/NCMLabOnlineTools/blob/DynamicLoad/html/JATOS/Questionnaire.html

  
  

  I start an onLoad (line 89) and perform a lot of parameter loading which come from the setup script loaded in line 79. Once I figure out what the settings and spoken language to use are, I load the appropriate questionnaire on line 119. This uses a promise to load a JS file based on the parameters.

  I initialize jsPsych on line 139 and use some parameters I store in JATOS.

  I have another jatos.onLoad on line 175 where I call jsPsych.run(timeline)

  The problem is that this jsPsych.run (line 175) executes and begins before the promise on line 119 has finished. The beginning of the jsPsych timeline is below. The error will come from the "LoadQuestionnaire" condition when the optional "Welcome" condition is "turned off." The LoadQuestionnaire condition cannot find the "parameters."

  
  

  timeline.push(Welcome)

  timeline.push(LoadQuestionnaire)

  
  

  NOTE: line 110 hardcodes the ShowWelcome flag to true to always show the welcome screen requiring a button press. I want to not have this be a requirement.

  
  

  Thank you, Jason
• kri

  June 2024

  Hi Jason,

  sorry for taking so long to answer, I was busy releasing the new version of JATOS.

  You have some pretty complicated code here. It took me a while to see what I think is the culprit here.

  There is a lot going on in this script. Many scripts are loaded dynamically. But the good thing is, they are loaded sequential and we can rely on their execution one after another. The last loaded script is jatos.js. Afterwards we have three jatos.onLoad . Although they are called asynchronously when jatos.js is done initializing, we can at least rely on the three callbacks to be called sequentially: this means that jsPsych.run is called after promise1 = loadScript(fileName).

  What I think is the problem here, is that it uses Promises to load the script and Promises are by definition asynchronous. That means the browser, after starting the loading of the script, does not wait for it to be finished, it just continues with the next lines ... and finally runs jsPsych.run.

  It is in the nature of asynchronous that one can not determine the time when it will be executed, it depends on many factors, one of them is the Internet connection and how fast the script data can be loaded. So, the execution of the dynamically loaded script could be before or after the execution of jsPsych.run. The latter one is what I think causes your problem.

  The solution with asking the participant to click a button is not really a solution in my view (although I'm not sure at which point in the code the button is actually displayed in the code). It just adds time that the browser can use to finish downloading the script and executing it.

  An easy solution for this could be, since you already have a Promise, to put everything that comes afterwards in jatos.onLoad within the then callback. It could look similar to this:

  promise1 = loadScript(fileName)
      .then( data  => {
          console.log("Script loaded successfully", data);
  
          //load general label names
          pseudoSwitch(LANG+'_LabelNames')
          dynamicallyLoadScript("functions/Experiments/Questionnaire_experiment.js")
          
          var setup = []
          var TrialCount = 1;
          var jsPsych = initJsPsych({
              ...
          })
          
          var JATOSID = jatos.workerId;
          console.log(jatos)
          console.log(JATOSID)
  
          var resultsData = {'name':'JASON'};
          jatos.addJatosIds(resultsData);
          jsPsych.run(timeline);
          
          UpdateHeader()
      })  
  

  But I didn't test this code.

  Best,

  Kristian
• steffejr

  June 2024

  Hello Kristian,

  Thank you for this. The handling of the promise works well. But this introduced a new problem. The jsPsych variable can no longer be accessed in the jsPsych.run(timeline).

  The timeline will run but I have a step where I score the data to send to JATOS and I get errors saying that the jsPsych variable cannot be accessed.

  It turns out that I now need to replace a call like:

  jsPsych.data.get().filter({trial: 'Questionnaire'})

  with

  this.type.jsPsych.data.get().filter({trial: 'Questionnaire'})

  
  

  And now it works.

  Jason
• kri

  June 2024

  Nice you figured it out, Jason! Good luck with your experiment!