Customise the online dialog box to start the experiment

Online experiments
,
1

Description of the problem:

Does anyone know how to take this off from the little box with the green band in the beginning of the experiment, i.e., “Fields marked with an asterisk (*) are required.”?

Or how to substitute that with a more helpful message such as ‘Click “OK” to start task.’?

Is it possible to skip that box at all and go straight to the first routine in the experiment?

Thanks in advance !

2

I’m afraid right now that dialog doesn’t have settings for customization, but I agree we need to add more refinement/customization to it.

Other people have requested options like:

  • to have their uni emblem attached there (could/should probably make this automatic for institutions with a site license, and allow a custom one if you use self-purchased credits)
  • what we should do when all the parameters of the study are encoded into the url query? In this case the dialog is no longer strictly necessary but should we still have something there to wait for OK, or should we load resources and go straight into the study?
  • could we even allow that string to be customized according to participant locale?
3

Have these changes (or any) been made to allow customisation on this specific dialogue box?

4

The API that creates the dialog takes three parameters that you can customize: text, dictionary, title.

You can display custom text by setting the “text” parameter to a string. Setting “dictionary” allows you to ask information about the subject or setting parameters for your experiment.

let expName = 'your experiment name';
let expInfo = {'participant': '001', 'other': '', 'stuff': '', 'you': '', 'want': ''};
let expText = 'Click \"OK\" to start task.';

psychoJS.schedule(psychoJS.gui.DlgFromDict({
  dictionary: expInfo,
  title: expName,
  text: expText
}));
1 Like
5

thank you, i will give this a try :slight_smile:

is this editing the JS in gitlab, and nothing to do with the builder?

6

No problem. I’m not sure if there is a place in the builder to make easy changes. But you are right that it can be edited in the generated .js file. There should be only one “DlgFromDict” so it’s not difficult to find.

7

thank you, i have made the changes…just wondering, is it possible to change the background colour of the expText as it is default dark green…and wanted to make it a lighter colour…

8

No problem. It is possible but it needs some more work. Here is the code where that colour is defined.
line 379: https://psychopy.github.io/psychojs/core_GUI.js.html

The first option is to change ‘green’ to a different colour you like. But you have to make sure your online program loads this modified library. So the experiment .js file needs something like this

import * as core from './lib/core-2020.1.js';

instead of

import * as core from 'https://pavlovia.org/lib/core.js';

Also you would need to edit .gitignore to allow pushing of /html/lib if you want the builder to sync the changes.

You can also write js code to override the background colour in css of the dialog div id=msgDialog. Line 426 sets the background color if you want some reference.

9

Where to I find it if I’m on my gitlab page and where do I edit it? I’m sorry I’m new here