Grid Control Demo Demo Experiment Run Experiment

Grid Control Demo

Jaap Murre


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.

function grid(box,props)
{
    var a = props || {};
    
    a.type = a.type || "radio";
    
    a.hscale = a.hscale/100 || 1;
    a.vscale = a.vscale/100 || 0.5;
    a.textsize = a.textsize || 100;
    
    a.color_even = a.color_even || "#f8f8f8";
    a.color_odd = a.color_odd || "#f1f1f1";

    a.left_options = a.left_options || [];
    a.right_options = a.right_options || [];
    a.top_options = a.top_options || [];
    a.bottom_options = a.bottom_options || [];

    if (a.vertical)
    {
        if (!(a.left_options || a.right_options))
        {
            alert("Error: left and right options are both missing");
        }
        if (!(a.top_options.length || a.bottom_options.length))
        {
            a.top_options = range(1,6); // default is [1,2,3,4,5]
        }
    }
    else
    {
        if (!(a.top_options || a.bottom_options))
        {
            alert("Error: top and bottom options are both msising");
        }
        if (!(a.left_options.length || a.right_options.length))
        {
            a.left_options = range(1,6); // default is [1,2,3,4,5]
        }
    }

    var leftheader = 0,
        rightheader = 0,
        topheader = 0,
        bottomheader = 0;

    if (a.left_options.length)
    {
        leftheader = 1;
    }
    if (a.right_options.length)
    {
        rightheader = 1;
    }
    if (a.top_options.length)
    {
        topheader = 1;
    }
    if (a.bottom_options.length)
    {
        bottomheader = 1;
    }
    
    var hsize = Math.max(a.top_options.length,a.bottom_options.length),
        vsize = Math.max(a.left_options.length,a.right_options.length),
        csize = hsize + leftheader + rightheader, 
        rsize = vsize + topheader + bottomheader,
        cells = [], 
        r, c, b, w, h, s, t, l, odd,
        isheader = false;
    
    w = (100/csize)*a.hscale;
    h = (100/rsize)*a.vscale;
    
    var m = 0.5,                    // margin in %
        voff = (100-rsize*(h+m))/2, // vertical offset to center control
        hoff = (100-csize*(w+m))/2; // horizontal offset

    for (c = 0; c < csize; c++)
    {
        cells.push([]);
        
        for (r = 0; r < rsize; r++)
        {
            if (a.vertical && a.type === "radio")
            {
                s = '<input name="col_' + c + '" type="radio">'; 
            }
            else if (a.type === "radio")
            {
                s = '<input name="row_' + r + '" type="radio">'; 
            } 
            
            if (a.type === "check")
            {
                s = '<input name="cell_' + r + '_' + c + '" type="checkbox">';
            }

            if (a.type === "input")
            {
                s = '<input style="width:80%;" name="cell_' + r + '_' + c + '" type="text">'; 
            }

            t = c - leftheader; // t counts top _options if >= 0
            l = r - topheader;  // l counts left _options if >= 0
            
            if (a.top_options.length && r === 0 && t >= 0)
            {
                s = a.top_options[t];
                isheader = true;
            }
            if (a.bottom_options.length && r === rsize-1 && t >= 0)
            {
                s = a.bottom_options[t];
                isheader = true;
            }
            if (a.left_options.length && c === 0 && l >= 0)
            {
                s = a.left_options[l];
                isheader = true;
            }
            if (a.right_options.length && c === csize-1 && l >= 0)
            {
                s = a.right_options[l];
                isheader = true;
            }
            if (c === 0 && r === 0)
            {
                s = "";
                isheader = true;
            }
            
            if (a.vertical)
            {
                odd = c%2;
            }
            else
            {
                odd = r%2;
            }

            b = box.addblock(hoff+c*(w+m),voff+r*(h+m),w,h,
                             odd ? a.color_odd : a.color_even);
            
            b.text(s,a.textsize);
            
            if (isheader)
            {
                b.style("font-weight","bold");
            }
            
            cells[c].push(b);
        }
    }

}

var bottomblock = main.addblock("center","bottom",100,25);

setimage("jaap_cartoon.jpg",50);
await(3000);
bottomblock.text('Think of NeuroTaskJS as a system for developing new building blocks for experiments and surveys');
await(5000);
text("Like this grid control, which can easily be extended and customized");
await(5000);
text("")
await(500);

grid(main,{
            top_options: [-2,-1,0,1,2],
            left_options: ["Jantje","Pietje","Klaasje"],
            right_options: ["JP","PJ","KJ"],
            type: "input",
            hscale: 100,
            vscale: 40,
            textsize: 70,
            vertical: false
    });


awaitkey(' ');

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.


jaap_cartoon.jpg
This experiment has no YouTube links