# Pavlovia + phaser3: tips for writing data?

**URL:** <https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238>\
**Category:** Online experiments\
**Tags:** pavlovia\
**Created:** [September 4, 2020, 2:19pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238 "2020-09-04T14:19:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![agnesnorbury](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@agnesnorbury](https://discourse.psychopy.org/u/agnesnorbury)\
**Post date:** [September 4, 2020, 2:19pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/1 "2020-09-04T14:19:56Z")

</div>

Hi!

I’ve previously hosted experiments on Pavlovia written using the jsPsych library, which has worked very nicely.

My next task is written in js/html using phaser 3 ([https://phaser.io/phaser3](https://phaser.io/phaser3)). At the current stage of testing, participant responses are being written client-side into a JSON structure.

Is there an easy way to ensure that this data can be written to the Pavlovia server? One option I’m thinking of is just using the jsPsych data write function ( jsPsych.data.get().addToLast({key: value, …}); ), but it seems like there might be a more straightforward way to do this that doesn’t require importing additional libraries?

Any tips would be much appreciated.

Best,

Agnes

NB I haven’t uploaded the task repository to Pavlovia yet as I wanted to try and work out where best to host this study first, but am happy to do so if this would be helpful to answer the question or be useful for other users

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [September 8, 2020, 8:29pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/2 "2020-09-08T20:29:45Z")

</div>

Hey @agnesnorbury, what an interesting question, apologies for the late reply. If you are happy using PsychoJS, `ExperimentHandler.save()` would be the way to go I believe. Should you be willing to share if only a short sample of what your experiment looks like, I might be able to provide you with more details. Here to help, thanks, s.

---

<div class="post-metadata">

**Author:** ![agnesnorbury](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@agnesnorbury](https://discourse.psychopy.org/u/agnesnorbury)\
**Post date:** [September 11, 2020, 3:55pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/3 "2020-09-11T15:55:18Z")

</div>

Thanks so much for getting back to me @sotiri , I’m sure it’s a busy time in the world of online studies…

I uploaded a test version of the game code at [https://gitlab.pavlovia.org/agnes.norbury/study-game-1](https://gitlab.pavlovia.org/agnes.norbury/study-game-1) (see [https://run.pavlovia.org/agnes.norbury/study-game-1/](https://run.pavlovia.org/agnes.norbury/study-game-1/) for a demo).

All the game functionality seems to work when I run it from the Pavlovia dashboard in pilot mode. I can also see the trial data logging in the console (as set up for debugging purposes), which is great.

Currently, trial data generated in the different game scenes is being stored in the global phaser data registry using this.registry.set() (see e.g. js/scenes/platformerSceneA.js, line 384).

Should it then be as straightforward as loading the psychoJS library in index.html, importing it into the relevant scene modules (e.g. js/scenes/platformerSceneA.js), and calling something like ExperimentHandler.save(this.registry.getAll()) on each update?  
I have not actually used PsychoJS to code experiments before so am not sure if it’s possible to just cherry pick it’s functions like this, without using the PsychoJS experiment structure.

I’ll have a go at implementing the above workaround this afternoon, and update this post if successful in case it’s useful to anyone else.

Best

Agnes

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [September 11, 2020, 4:36pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/4 "2020-09-11T16:36:10Z")

</div>

OK this is one super cool experiment you have in the works! What you propose makes a lot of sense, please allow me some time to run a few tests, I should be able to have a definite answer for you fairly soon. Happy coding! s.

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [September 15, 2020, 10:18pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/5 "2020-09-15T22:18:10Z")

</div>

Hey Agnes, how is your project coming along? As it happens getting the data to save on demand like you describe requires first adding script tags for a few of the runtime dependencies for PsychoJS, like you do with phaser in your index.html, then importing the library in your code and calling the appropriate methods. You can see how [in this fork](https://gitlab.pavlovia.org/thewhodidthis/study-game-1) -note the IIFE for initialising the psychoJS controller inside the [platformerSceneA module](https://gitlab.pavlovia.org/thewhodidthis/study-game-1/blob/master/js/scenes/platformerSceneA.js#L67) because it’s an asynchronous call 😊

You can test that below with data up to the second trial saved when you close the browser tab:

> **[Test game!](https://run.pavlovia.org/thewhodidthis/study-game-1/)**

I suspect your use case is slightly more involved, but I’m hoping that should help get you started for now. On standby in case you need more details, x

---

<div class="post-metadata">

**Author:** ![agnesnorbury](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@agnesnorbury](https://discourse.psychopy.org/u/agnesnorbury)\
**Post date:** [September 16, 2020, 6:16pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/6 "2020-09-16T18:16:50Z")

</div>

Thanks so much for taking the time to do this, this is incredibly helpful! I’ll have a go at implementing this method (hopefully this week) and will let you know then if everything seems to be working OK.

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [September 16, 2020, 6:34pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/7 "2020-09-16T18:34:14Z")

</div>

😊

---

<div class="post-metadata">

**Author:** ![agnesnorbury](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@agnesnorbury](https://discourse.psychopy.org/u/agnesnorbury)\
**Post date:** [September 23, 2020, 4:34pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/8 "2020-09-23T16:34:51Z")

</div>

Hi, I am running into a few issues when trying to adapt this solution for use across modules (I suspect this might be due to my lack of js knowledge rather than anything specific to pavlovia…)

1. I assume that I need to create a single PyschoJS object for the entire experiment by calling `const psychoJS = new PsychoJS` in the first scene/module (here, `js/scenes/platformerSceneA.js`). Within the scene, this object is updated on after trial using a function that calls to `psychoJS.experiment.addData(key, value)`.

2. So, when the next module (scene/stage of the experiment) starts (here, `js/scenes/platformerSceneB.js`), what I want to do is continue adding to the same psychoJS object as before.  
I think I have achieved this by using export/import across modules, i.e.:  
in platformerSceneA.js:  
`export const psychoJS = new PsychoJS({ debug: true })`  
in platformerSceneB.js:  
`import { psychoJS } from "./platformerSceneA.js"`

This seems to work, up until the end of the task (last module, `js/scenes/taskEndScene.js`, when I am getting a fatal javascript error if I either try to log the psychoJS object to the console (to check that everything is getting stored), or call `psychoJS.experiment.save();` (see below):

```auto

FATAL unknown | {} [log4javascript.min.js:1:40074](https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js)

append https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1

doAppend https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1

callAppenders https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1

log https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1

fatal https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1

dialog https://run.pavlovia.org/agnes.norbury/study-game-1/lib/core-2020.2.js:1151

onerror https://run.pavlovia.org/agnes.norbury/study-game-1/lib/core-2020.2.js:1823

```

I am also not generating any csv datafiles on gitlab.

I am wondering if either I am doing something wrong in with import/export above, or if I am missing something simple in my script to communicate with the core library to say that I’m ending my experiment? (I am also getting a couple of uncaught type errors, `TypeError: this._setRequiredKeys is undefined` [at the start of the experiment, I think related to downloading resources, and assume I can ignore], and `Uncaught TypeError: dialogElement is null` [which I think might relate to the fatal error at the end, may something to do with not setting psychoJS.Status correctly]).

I don’t know if this makes a difference, but I am currently testing in pilot mode (so as not to consume credits), might this be adding an extra layer of complication?

Sorry for the very long message, I will keep trying to look into this this afternoon but any help would be much appreciated.

Best

Agnes

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [September 23, 2020, 4:56pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/9 "2020-09-23T16:56:05Z")

</div>

OK, alright, yes, I think I follow, please allow me some time to look into how to best make those adjustments, thanks, s.

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [September 28, 2020, 11:14pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/10 "2020-09-28T23:14:08Z")

</div>

Hey Agnes,

I was able to get the study to save by ~~assigning~~ attaching the `psychoJS` instance to the `window` object, which in turn makes it globally available. There are other ways of achieving the same result in JS (e.g., using a Singleton), but none less complicated. I also added [a ‘util’ module](https://gitlab.pavlovia.org/thewhodidthis/study-game-1/blob/master/js/util.js) to host `saveTrialData()` for sharing across scenes.

The one resources related error at the very beginning is [a PsychoJS bug](https://github.com/psychopy/psychojs/issues/193) I’m hoping to have fixed in the next few days.

Commenting out the [taskEndScene.js#L100](https://gitlab.pavlovia.org/thewhodidthis/study-game-1/blob/master/js/scenes/taskEndScene.js#L100) `psychoJS.quit()` call seems to have made the rest of errors go away. That allowed for the data to be saved as expected I believe, but I could be missing something 😊

> **[Study game 1](https://run.pavlovia.org/thewhodidthis/study-game-1/)**

x

---

<div class="post-metadata">

**Author:** ![agnesnorbury](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@agnesnorbury](https://discourse.psychopy.org/u/agnesnorbury)\
**Post date:** [September 29, 2020, 7:40pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/11 "2020-09-29T19:40:59Z")

</div>

That is amazing! Thank you so much for taking the time to work on this. I implemented the changes you suggested in my branch and can confirm that data from across all the different task scenes is saving as expected in the output .csv file.

Hopefully this will be useful for anyone in the future who wants to use Phaser for their experiments.

Thanks again,

Agnes

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [September 29, 2020, 7:44pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/12 "2020-09-29T19:44:14Z")

</div>

Thank you Agnes 😊

---

<div class="post-metadata">

**Author:** ![XXXiV-QN](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/xxxiv-qn/32/12403_2.png) [@XXXiV-QN](https://discourse.psychopy.org/u/XXXiV-QN)\
**Post date:** [November 19, 2020, 2:41pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/13 "2020-11-19T14:41:04Z")

</div>

Hey Sotiri,

I have been following Agnes’ example and your post to implement a similar data saving in my task ([project](https://pavlovia.org/QxF/swim-task)). However, I have been getting this error “log4javascript is not defined” in the console.

I did script load in index.html, and borrowed Agnes’ code from enterID.js. I assume this is a problem with JS integration/loading module? Any thoughts or feedback will be appreciated!

best,  
QN

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [November 19, 2020, 4:03pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/14 "2020-11-19T16:03:56Z")

</div>

Hi @XXXiV-QN, sounds like you are missing the log4javascript.js dependency. Could you give me developer access so I can look at your project? Or try adding [a script tag for it](https://gitlab.pavlovia.org/support/study-game-1/blob/master/index.html#L39) to your index.html? Thanks, s.

---

<div class="post-metadata">

**Author:** ![XXXiV-QN](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/xxxiv-qn/32/12403_2.png) [@XXXiV-QN](https://discourse.psychopy.org/u/XXXiV-QN)\
**Post date:** [November 19, 2020, 4:58pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/15 "2020-11-19T16:58:38Z")

</div>

Hi Sotiri, just added you as the developer! I will take a look at the script tag you mentioned later. Thank you so much for all the help. I am very new to JavaScript and Pavlovia, so everything I have now are mostly taken from tutorials/examples.

Best,  
QN

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [November 20, 2020, 1:37pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/16 "2020-11-20T13:37:13Z")

</div>

Hi @XXXiV-QN, cool project 👍 As it happens, PsychoJS is [wired to intercept and display every JS error](https://github.com/psychopy/psychojs/blob/master/js/core/PsychoJS.js#L125) across all page scripts. I believe it’s meant as a convenience for easier debugging, but in this case it seems to be getting in the way.

In particular, if you look at the browser console once the diver hits the sea bed, you should be able to confirm the source of the problem is how you are calling [`sprite.anims.play('swim', true);`](https://gitlab.pavlovia.org/QxF/swim-task/blob/master/js/elements/player.js#L112) inside of `Player.update_float()` and `Player.update_sink()`. The sprite is missing that ‘swim’ animation somehow?

I don’t know phaser well enough to have this sorted out for you on the spot 😊 But it looks like you would need to tweak that [`anims.create();`](https://gitlab.pavlovia.org/QxF/swim-task/blob/master/js/elements/player.js#L80) call in your constructor to then let `this.sprite` know?

Please feel free to follow up if you need more support, x

---

<div class="post-metadata">

**Author:** ![XXXiV-QN](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/xxxiv-qn/32/12403_2.png) [@XXXiV-QN](https://discourse.psychopy.org/u/XXXiV-QN)\
**Post date:** [November 20, 2020, 2:58pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/17 "2020-11-20T14:58:47Z")

</div>

Dear Sotiri,

Thank you so much for the suggestion. It was indeed a logical mistake (trying to play animation on a sprite that’s already destroyed). I changed things around, and added the same PsychoJS code like yesterday, the error is gone! I think I will work from there to continue implementing data saving then.

Cheers! 🥳  
QN

---

<div class="post-metadata">

**Author:** ![sotiri](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@sotiri](https://discourse.psychopy.org/u/sotiri)\
**Post date:** [November 20, 2020, 4:54pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/18 "2020-11-20T16:54:00Z")

</div>

No problem QN, happy coding 🌞

---

<div class="post-metadata">

**Author:** ![agnesnorbury](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@agnesnorbury](https://discourse.psychopy.org/u/agnesnorbury)\
**Post date:** [December 17, 2020, 9:42pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/19 "2020-12-17T21:42:28Z")

</div>

Hi @sotiri!

Do you know if anything was changed in lib/core-2020.2.js recently? Today I’m getting a fatal error when I attempt to run the task, which seems to trace back to there:

> FATAL unknown | {} log4javascript.min.js:1:40074  
> append [https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1](https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1)  
> doAppend [https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1](https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1)  
> callAppenders [https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1](https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1)  
> log [https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1](https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1)  
> fatal [https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1](https://cdnjs.cloudflare.com/ajax/libs/log4javascript/1.4.9/log4javascript.min.js:1)  
> dialog [https://run.pavlovia.org/agnes.norbury/study-game-1/lib/core-2020.2.js:1157](https://run.pavlovia.org/agnes.norbury/study-game-1/lib/core-2020.2.js:1157)  
> onerror [https://run.pavlovia.org/agnes.norbury/study-game-1/lib/core-2020.2.js:1847](https://run.pavlovia.org/agnes.norbury/study-game-1/lib/core-2020.2.js:1847)

In the previously working setup, we were using

```auto
import * as data from "../../lib/data-2020.2.js";

```

to grab some relevant data-saving functions from the pavlovia lib, if something has changed in the source code is there a way I can edit the above so to make it work again?

Thank you!

Agnes

---

<div class="post-metadata">

**Author:** ![agnesnorbury](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@agnesnorbury](https://discourse.psychopy.org/u/agnesnorbury)\
**Post date:** [December 18, 2020, 6:45pm UTC](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238/20 "2020-12-18T18:45:23Z")

</div>

If there have been changes to `lib/data-2020.2.js`, maybe the best solution would for me to host a local version of the older code as part of my experiment rather than relying on the lib files (which might be subject to change) - is this available anywhere?

[Next page](https://discourse.psychopy.org/t/pavlovia-phaser3-tips-for-writing-data/16238.md?page=2)