While Pavlovia/PsychoJS is seeing increased interest recently, some of PsychoPy’s components have not yet been implemented online. Additionally, there may always be an interest in custom components for online experiments even after all PsychoPy features are ported.
Of particular interest are PsychoPy’s form components, as the majority of IRB-approved online experiments require consent forms, demographic surveys, and feedback questionnaires, for example. However, forms functionality and rating scales are not currently available online.
Available options to consider:
- Make do with existing features: For example, use the Keyboard component for consent, the Slider component for demographics, multiple text inputs for surveys, custom coding for free-text inputs, etc. It is also possible to use the info dialog for demographics, though not in experiments that require consent first.
- Use something like Qualtrics instead: For example, it is possible to have a workflow such as Qualtrics -> Pavlovia -> Qualtrics if you want to have Qualtrics (or similar tool) handle consent and/or debrief, while Pavlovia handles only the core experiment component.
- Build a custom web component.
Note: I would not recommend this approach for anyone not familiar with web development. When PsychoJS catches up to PsychoPy, I would expect the built-in functionality to be far superior in terms of ease of use, cross-platform compatibility, and integration. Experienced web-developers know what it’s like to build that from scratch.
- Find and sync+fork (download) my sample project Custom Web Component from Pavlovia to PsychoPy, or download the experiment files directly from GitLab.
- Open the experiment (web-component.psyexp), and select any routine (they are all the same).
- Copy the routine (Experiment > Copy Routine) and paste it into your own experiment (Experiment > Paste Routine).
- Click the _code component in the routine, select the Begin Routine tab, and change the file name in the first line of code to your own html file.
- Create your own html file as desired, and place it in the html directory of your project.
Run the experiment using local debug mode to see how it works. The web component routine automatically includes the html file as an iframe, and usually requires no additional configuration.
The provided code automatically adjusts the iframe width and height to match its contents, centers it in the screen, and adds a vertical scrollbar if needed. It also automatically detects and handles a form within the file. If you require something more sophisticated (eg, multiple forms, or multi-step forms), then you will need to modify this code, but otherwise, it should just work. Feel free to use any of the provided sample html files as starting points.
One advantage of this approach is the ability to insert any custom web-based content (not just forms) anywhere in the experiment (eg, Consent -> Experiment Part 1 -> Distraction Survey -> Experiment Part 2 -> Debrief). The main advantage however, is the ability to include any custom web-based content not currently implemented in PsychoJS.