Hello,
I am currently developing an online experiment on Pavlovia using PsychoJS. The experiment is intended for children, and I would like to add animations to make the experience more visually appealing. I started testing PsychoJS with the Builder, which generates JavaScript code but does not allow much customization of the various components.
I also discovered a tool called jsPsych, which seems to offer better support for customization. I was wondering if it would be better for me to switch to jsPsych, or if it is possible to add a CSS stylesheet to the JavaScript elements in PsychoJS to customize them.
Thank you in advance.
Adding custom backgrounds and animations to PsychoPy / PsychoJS is reasonably doable. For example, I sometimes resize a circular polygon based on a sine wave. I don’t think a CSS stylesheet would be possible, since PsychoJS experiments don’t display standard HTML elements.
For example
https://run.pavlovia.org/Wake/alien-polymorph/
https://run.pavlovia.org/Wake/bart/
https://run.pavlovia.org/demos/fishing_bandit/
1 Like
Hello,
In my case, I would like to be able to change the background of my experience and potentially add an animation when clicking a button (make it move or change its color). Do you have any idea how I could do that?
Thanks in advance.
You can change the background colour of the whole experiment in Experiment Settings / Screen
However, you might instead want to add a polygon or image to the top of your routines.
If you want to reuse the same background (e.g. bg_image) in multiple routines then in the first routine after the one with the background you can add bg_image.setAutoDraw(True) in Begin Routine. Then add bg_image.setAutoDraw(False) in End Routine of the last routine where you want it to show.
