Memory Game Demo

Amsterdam Edition, Psychonomics 2018

Variant on the well-known game. Click two cards with the left mouse button. If they are the same, they are taken out of the game. You win if all pairs have been found. A variant is to play the game with triplets instead of pairs. Or even higher tuplets.

Though this is a minimal implementation, it is fully functional and works on phones and tables too.

Games

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 cards = [], blocks = [], rows = 3, cols = 4,
    i, r, k, b, id, waiting = false,
    symbols = [], first = null, trials = 0, success = 0,
    message = main.addblock(20,2,70,10).text("0 trials")
                  .style("font-size","1.1em"),
    imb = main.addblock(1,'top',20,20) // Show QR code
              .setimage("https://scripting.neurotask.com/images/cache/a1c1a1ba8959bea43167f5206d71b5a2.png"),
    icons = [ 'noun_100341_cc.png', 'noun_100339_cc.png', 'noun_455410_cc.png',
        'noun_545027_cc.png', 'noun_858487_cc.png', 'noun_930663_cc.png', 'noun_510843_cc.png' ];

main.addblock(22,12,70,10,'',"Psychonomics 2018, Amsterdam")
    .style("font-size","0.8em");
                  
for (i = 1; i <= rows*cols/2; i++) {
    symbols.push(icons[i]); symbols.push(icons[i]); // Push two of the same
}
symbols = shuffle(symbols); // Shuffle the memory cards

function onClick(_b) {
    return function() {
        if (waiting) {
            return;
        }
        var b = _b;
        if (first) {
            waiting = true;
            if (first.id === b.id) {
                // This is currently the only way to 'unhide' hidden images
                b.showimagenode(b.getimagenode(b.id)).style("background-color","lightblue");
                await(1000);
                first.hideimage().style("background-color","silver");
                b.hideimage().style("background-color","silver");
                first.handler.remove();
                b.handler.remove();
                success += 2;
                if (success === rows*cols) {
                    message.text("Finished in " + (++trials)  + " trials!");
                } else {
                    message.text("" + (++trials) + " trial" + (trials === 1?"":"s"));
                }
            }
            else {
                b.showimagenode(b.getimagenode(b.id)).style("background-color","lightblue");
                await(2000);
                b.hideimage().style("background-color","steelblue");
                first.hideimage().style("background-color","steelblue");
                message.text("" + (++trials) + " trial" + (trials === 1?"":"s"));
            }
            first = null;
        }
        else {
            first = b;
            b.showimage(b.id).style("background-color","lightblue");
        }
        waiting = false;
    }
}

for (c = 0; c < cols; c++) {
    for (r = 0; r < rows; r++) {
        id = symbols[c*rows+r];
        b = main.addblock(c*(100/cols)+1,21+r*(80/rows),
                          90/cols,75/rows,"steelblue").style("font-size","2em");
        b.id = id;
        b.handler = b.on("click",onClick(b));
        b.preload(id); // Preload images here
    }
}
addblock(84,2,15,10,"lightgrey","Quit").await('click');
var x = addblock('center','center',100,100,"Preloading images");
image.await("preloading_completed"); // Wait until all images have been loaded
main.remove(x);