Graphics Circle and Events Demo Demo Experiment Run Experiment

Graphics Circle and Events Demo

Jaap Murre

Demo that illustrates how to draw circles with text, how to group these, catch mouse events, and how to connect them with a line on a mouse click. This script can be used as the basis for a full-fledged Trail Making Test.

This uses the Dojo GFX libraries, which is NeuroTask’s default (vector) graphics library. We like this library because it is both compehensive and very robust, supporting even ancient browsers. It also handles events in a similar manner as other parts of NeuroTask. The library is a bit complex, especially for beginning programmers, but there is a good tutorial

The script also demonstrates how to pull in additional components from the the Dojo system using ‘require’ and then making the component global (in this case, with window._mouse = mouse). 

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 circle(x,y,s,order) {
    var surface = main.centerblock.getsurface(), // Or use your own block

        size = 5, // %

        shape = surface.createCircle({
            cx: x + "%",
            cy: y + "%",
            r: size + "%",        
        text = surface.createText({
            x: x - size/2 + "%",
            y: y + size/2 + "%",
            text: s

    text.setFont({ family:"Arial", size:"30pt", weight:"bold" }) //set font
    require(["dojo/mouse"], function(mouse){
        window._mouse = mouse;
    var node = surface.createGroup();
        if (order - current === 1) {
            current = order;
            if (current > 1) {
                var line = surface.createLine({
                    x1: nodes[current-2][0] + "%",
                    y1: nodes[current-2][1] + "%",
                    x2: nodes[current-1][0] + "%",
                    y2: nodes[current-1][1] + "%"
        } else {

    return node;

var current = 0, // Current is 1 for the first node, 2 for the 2nd, etc.
    i, n,
    nodes = [

for (i = 0; i < nodes.length; i++) {
    n = nodes[i];


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.

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