Graphics Circle and Events Demo
Jaap MurreDemo 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
});
shape.setFill("white");
shape.setStroke("black");
text.setFont({ family:"Arial", size:"30pt", weight:"bold" }) //set font
text.setFill("black");
require(["dojo/mouse"], function(mouse){
window._mouse = mouse;
});
var node = surface.createGroup();
node.add(shape);
node.add(text);
node.on(_mouse.enter,function(){
shape.setFill("lightgrey");
});
node.on(_mouse.leave,function(){
shape.setFill("white");
});
node.on("click",function(){
if (order - current === 1) {
shape.setFill("grey");
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] + "%"
});
line.setStroke("black");
line.moveToBack();
}
} else {
shape.setFill("red");
await(500);
shape.setFill("white");
}
});
return node;
}
var current = 0, // Current is 1 for the first node, 2 for the 2nd, etc.
i, n,
nodes = [
[20,20,"A",1],
[35,20,"B",2],
[50,20,"C",3],
[65,20,"D",4],
];
for (i = 0; i < nodes.length; i++) {
n = nodes[i];
circle(n[0],n[1],n[2],n[3]);
}
awaitkey("ESCAPE");