How to Temporarily Hide a Block Demo Experiment Run Experiment

How to Temporarily Hide a Block

Jaap Murre

Sometimes you want to temporarily hide blocks. For example, you may want to show a bunch of images. Hide the block in which you present them, show some instructions for Part 2 of your experiment, and they show the block again. Destroying will work but this also destroys the preloaded images.

Here we are are setting the display style of a block to 'none' to hide it (but not destroy it). Later, we set it to 'block' to make it visible again. 'block' is the default display style of many HTML elements.

If you are a registered user and signed in, you can here copy this script and its stimuli to your own account, where you can edit it and change it in any way you want.

It is absolutely free to register (no credit card info asked!). You can then instantly copy this experiment with one click and edit it, change its accompanying texts, its landing page, stimuli, etc. Invite your colleagues, friends, or students to check out your experiment. There is no limit on how many people can do your experiment, even with a free account.

The catch? There is no catch! Just keep in mind that with a free account, you cannot collect data. For teaching that is usually not a problem. For research, prepaid data collection (unlimited subjects) starts as low as €10.00 for a 10-day period.

var b = addblock(20,20,60,60,"yellow");
b.text("Stimulus 1");
await(1000);
b.style('display','none'); // We are hiding the block to make room for instructions
await(1000);
instruction("Now the second part follows");
await(1000);
b.style('display','block'); // 'block' is the default display style of many HTML elements
b.text("Stimulus 2");
await(1000);
This experiment has no files of this type
This experiment has no files of this type
This experiment has no files of this type
This experiment has no YouTube links
This experiment has no files of this type