My 7th Script: Advanced Images
howto_userMy 7th Script shows four pairs of images, one pair at a time. For each pair, the subject has to click (or, if using a touchscreen, press) on the image they like more. The subject isn’t told what the common difference between the photos is, but in each pair, one image uses mostly warm colors (e.g., reds, oranges) and the other uses mostly cool colors (e.g., blues, greens). In this example, the experimenter is actually testing whether subjects tend to prefer warm or cool colors. After each click, the subject’s answer is logged as either “warm” or “cool” in the script’s data section. “Block”s are created and used in order to show images in different locations on the screen at the same time (i.e., to manage screen layout.
Topics introduced: blocks, waitfor...or
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.
/*Blocks must be created within a box, in this case "main", which is the default square box that experiments are automatically displayed inside. The first number says how far in from the main's left edge to start the block. The second number says how far down from main's top edge to start the block. The third number says how wide to make the block. The fourth says how long to make the block.*/ var n; var leftblock = main.addblock(5,30,40,40); // Top-left: 5 in, 30 down. 40x40 big. var rightblock = main.addblock(55,30,40,40); // Top-left: 55 in, 30 down. 40x40 big. // This time, we preload images inside the block we want to show them in: leftblock.preload("catcool.png"); rightblock.preload("catwarm.png"); leftblock.preload("officecool.png"); rightblock.preload("officewarm.png"); leftblock.preload("bicyclewarm.png"); rightblock.preload("bicyclecool.png"); leftblock.preload("applewarm.png"); rightblock.preload("applecool.png"); image.await("preloading_completed"); instruction("You will be shown pairs of images. Click the image you prefer."); /* The "waitfor ... or ..." construct allows more than one thing ("event") to be an acceptable response that will make the computer move to the next line. Only the first event to occur will be processed; the rest will be ignored since the script will have already moved on. This way, once one block (i.e., image) has been clicked, the other is no longer awaited. Ignore the "i" errors in the margin; They only appear because "waitfor" isn't part of normal Javascript.*/ // Pair 1: Cat leftblock.setimage("catcool.png"); rightblock.setimage("catwarm.png"); waitfor { leftblock.await('click'); n = "cool"; // If this image was clicked, n's value is updated to "cool" } or { rightblock.await('click'); n = "warm"; // If this image was clicked, n's value is updated to "warm" } log(n,"cat"); // Logs current value of n (i.e., "warm" or "cool") as a new line // Pair 2: Office leftblock.setimage("officecool.png"); rightblock.setimage("officewarm.png"); waitfor { leftblock.await('click'); n = "cool"; } or { rightblock.await('click'); n = "warm"; } log(n,"office"); // Pair 3: Bicycle leftblock.setimage("bicyclewarm.png"); rightblock.setimage("bicyclecool.png"); waitfor { leftblock.await('click'); n = "warm"; } or { rightblock.await('click'); n = "cool"; } log(n,"office"); // Pair 4: Apple leftblock.setimage("applewarm.png"); rightblock.setimage("applecool.png"); waitfor { leftblock.await('click'); n = "warm"; } or { rightblock.await('click'); n = "cool"; } log(n,"apple"); main.removeblock(leftblock); main.removeblock(rightblock); text("Thank you!"); await(2000); clear();
You can download the files as follows: Click on the file (link) and then right-click and choose Save as... from the menu. Some media files (e.g., sound) will have a download button for this purpose.
applecool.png
applewarm.png
bicyclecool.png
bicyclewarm.png
catcool.png
catwarm.png
officecool.png
officewarm.png