An easy-to-use platform for EEG experimentation in the classroom
design improved
authored by
Yury-Shevchenko
and committed by
Teon L Brooks
0e22195b
7919ef80
+85
-100
+1
-1
app/app.global.css
+1
-1
app/app.global.css
+1
-1
app/components/DesignComponent/CustomDesignComponent.js
+1
-1
app/components/DesignComponent/CustomDesignComponent.js
+2
-3
app/components/DesignComponent/index.js
+2
-3
app/components/DesignComponent/index.js
···
212
212
<Grid.Column stretched width={11}>
213
213
<Segment basic>
214
214
<Header as='h1'>{this.props.overview_title}</Header>
215
-
<Divider />
216
215
<p>{this.props.overview}</p>
217
216
</Segment>
218
217
</Grid.Column>
···
283
282
<Grid.Column width={9}>
284
283
<Grid>
285
284
<Grid.Row>
286
-
<Grid.Column width={3}>
285
+
<Grid.Column width={5}>
287
286
<Image
288
287
src={this.renderConditionIcon(this.props.protocol_condition_first_img)}
289
288
/>
···
297
296
</Grid.Row>
298
297
299
298
<Grid.Row>
300
-
<Grid.Column width={3}>
299
+
<Grid.Column width={5}>
301
300
<Image
302
301
src={this.renderConditionIcon(this.props.protocol_condition_second_img)}
303
302
/>
-3
app/components/HomeComponent/index.js
-3
app/components/HomeComponent/index.js
···
211
211
<Button
212
212
secondary
213
213
onClick={() => this.handleDeleteWorkspace(dir)}
214
-
className={styles.experimentBtn}
215
214
>
216
215
Delete
217
216
</Button>
218
217
<Button
219
218
secondary
220
219
onClick={() => openWorkspaceDir(dir)}
221
-
className={styles.experimentBtn}
222
220
>
223
221
Go to Folder
224
222
</Button>
225
223
<Button
226
224
primary
227
225
onClick={() => this.handleLoadRecentWorkspace(dir)}
228
-
className={styles.experimentBtn}
229
226
>
230
227
Open Experiment
231
228
</Button>
+4
app/components/styles/common.css
+4
app/components/styles/common.css
+3
-3
app/utils/labjs/protocols/faceshouses.js
+3
-3
app/utils/labjs/protocols/faceshouses.js
···
24
24
background_second_column_question: `Fun fact: Brad Pitt claims he has face blindness, but he has not been tested.
25
25
Do you know anyone who has face blindness?`,
26
26
protocol_title: `What participants are shown`,
27
-
protocol: `In the Faces/Houses experiment, you will see pictures of different faces and houses.`,
27
+
protocol: `In the Faces/Houses experiment, participants will see pictures of different faces and houses.`,
28
28
protocol_condition_first_img: `conditionFace`,
29
29
protocol_condition_first_title: `Faces`,
30
-
protocol_condition_first: `When you see a face, press the key “1”.`,
30
+
protocol_condition_first: `When participants see a face, they should press the key “1”.`,
31
31
protocol_condition_second_img: `conditionHouse`,
32
32
protocol_condition_second_title: `Houses`,
33
-
protocol_condition_second: `If you see a house, press “9”.`,
33
+
protocol_condition_second: `If participants see a house, they should press “9”.`,
34
34
overview_links: [],
35
35
background_links: [
36
36
{
+2
-2
app/utils/labjs/protocols/multi.js
+2
-2
app/utils/labjs/protocols/multi.js
···
23
23
background_second_column_question: `Do you think some people could be better brain ‘distributors’ than others?`,
24
24
protocol_title: `What participants are shown`,
25
25
protocol: `Participants are shown either a square or diamonds with dots inside.
26
-
The location of the object on the screen indicates which rule the participant needs to follow`,
26
+
The location of the object on the screen indicates which rule the participant needs to follow.`,
27
27
protocol_condition_first_img: `multiConditionShape`,
28
28
protocol_condition_first_title: `Rule 1`,
29
-
protocol_condition_first: `If the object is shown on top, they need to respond to the shape (pressing ‘n’ for square and ‘b’ for diamond).`,
29
+
protocol_condition_first: `If the object is shown on top, participants need to respond to the shape (pressing ‘n’ for square and ‘b’ for diamond).`,
30
30
protocol_condition_second_img: `multiConditionDots`,
31
31
protocol_condition_second_title: `Rule 2`,
32
32
protocol_condition_second: `If the object is shown on the bottom, they need to respond to the number of dots inside (pressing ‘n’ for 3 dots and ‘b’ for 2 dots). `,
+4
-4
app/utils/labjs/protocols/search.js
+4
-4
app/utils/labjs/protocols/search.js
···
26
26
Brain scientists aren’t the only ones who are interested in exploring the most optimal way in which visual searches occur.`,
27
27
background_second_column_question: `Can you think of who else might want to know this?`,
28
28
protocol_title: `What participants are shown`,
29
-
protocol: `In the Visual Search Task, your goal is to find the right-side up orange T while ignoring upside-down orange T’s or T’s in other colors.`,
29
+
protocol: `In the Visual Search Task, participants' goal is to find the right-side up orange T while ignoring upside-down orange T’s or T’s in other colors.`,
30
30
protocol_condition_first_img: `conditionOrangeT`,
31
31
protocol_condition_first_title: `Orange T`,
32
-
protocol_condition_first: `If you find the orange T, you should press the ‘b’ key. `,
32
+
protocol_condition_first: `If participants find the orange T, they should press the ‘b’ key. `,
33
33
protocol_condition_second_img: `conditionNoOrangeT`,
34
34
protocol_condition_second_title: `No orange T`,
35
-
protocol_condition_second: `If the orange T is not on the screen, press the ‘n’ key instead.`,
35
+
protocol_condition_second: `If the orange T is not on the screen, participants should press the ‘n’ key instead.`,
36
36
overview_links: [],
37
37
background_links: [],
38
38
protocal_links: [],
···
43
43
jitter: 200,
44
44
sampleType: 'with-replacement',
45
45
pluginName: 'callback-image-display',
46
-
intro: `You know how difficult it is to find your keys in a messy room! We want to know how good you are in quickly finding your keys! Instead of keys, we just want to know how quickly you can find an orange T amongst blue Ts and upside-down orange Ts. Sounds easy! But it is not at all that easy!`,
46
+
intro: `You know how difficult it is to find your keys in a messy room. We want to know how good you are in quickly finding your keys. Instead of keys, we just want to know how quickly you can find an orange T amongst blue Ts and upside-down orange Ts. Sounds easy! But it is not at all that easy!`,
47
47
showProgressBar: false,
48
48
stimulus1: {
49
49
dir: facesDir,
+3
-3
app/utils/labjs/protocols/stroop.js
+3
-3
app/utils/labjs/protocols/stroop.js
···
23
23
(for example, children with Attention-deficit/hyperactivity disorder (ADHD)).`,
24
24
background_second_column_question: `You can read more about the Stroop task at Link 1. `,
25
25
protocol_title: `What participants are shown`,
26
-
protocol: `In the Stroop task, you will see different words written in different colors
26
+
protocol: `In the Stroop task, participants will see different words written in different colors
27
27
(e.g., the word “GREEN” may be written in a green-colored font, but it may also be written in a red font).
28
-
You will respond only to the color of the font, ignoring the meaning of the word.
29
-
If the font is red, press the key ‘r’; if yellow, press ‘y’; if blue, press ‘b’; and if green, press ‘g’.`,
28
+
Participants need to respond only to the color of the font, ignoring the meaning of the word.
29
+
If the font is red, they should press the key ‘r’; if yellow, press ‘y’; if blue, press ‘b’; and if green, press ‘g’.`,
30
30
protocol_condition_first_img: `conditionCongruent`,
31
31
protocol_condition_first_title: `"Green" written in green`,
32
32
protocol_condition_first: `The color is green, so the correct response is ‘g’.`,
+1
-1
app/utils/labjs/scripts/stroop.js
+1
-1
app/utils/labjs/scripts/stroop.js
···
33
33
},
34
34
title: 'Instruction',
35
35
content:
36
-
'\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EStroop Task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \u003Cp\u003E\n Welcome to the \u003Cstrong\u003EStroop experiment\u003C\u002Fstrong\u003E!\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n To indicate the color of the word, please use the keys \u003Cstrong\u003Er\u003C\u002Fstrong\u003E, \u003Cstrong\u003Eg\u003C\u002Fstrong\u003E, \u003Cstrong\u003Eb\u003C\u002Fstrong\u003E and \u003Cstrong\u003Ey\u003C\u002Fstrong\u003E for \u003Cspan style="color: red;"\u003Ered\u003C\u002Fspan\u003E, \u003Cspan style="color: green;"\u003Egreen\u003C\u002Fspan\u003E, \u003Cspan style="color: blue;"\u003Eblue\u003C\u002Fspan\u003E and \u003Cspan style="color: #ffe32a;"\u003Eyellow\u003C\u002Fspan\u003E, respectively.\n \u003Cbr\u003E\n Please answer quickly, and as accurately as you can.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Press the the space bar on your keyboard to start doing the practice trials.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n If you want to skip the practice trials and go directly to the task, press the "q" button on your keyboard.\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E\n\n\n',
36
+
'\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EStroop Task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \u003Cp\u003E\n Welcome to the \u003Cstrong\u003EStroop experiment\u003C\u002Fstrong\u003E!\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n To indicate the color of the word, please use the keys \u003Cstrong\u003Er\u003C\u002Fstrong\u003E, \u003Cstrong\u003Eg\u003C\u002Fstrong\u003E, \u003Cstrong\u003Eb\u003C\u002Fstrong\u003E and \u003Cstrong\u003Ey\u003C\u002Fstrong\u003E for \u003Cspan style="color: red;"\u003Ered\u003C\u002Fspan\u003E, \u003Cspan style="color: green;"\u003Egreen\u003C\u002Fspan\u003E, \u003Cspan style="color: blue;"\u003Eblue\u003C\u002Fspan\u003E and \u003Cspan style="color: #c5ad0b;"\u003Eyellow\u003C\u002Fspan\u003E, respectively.\n \u003Cbr\u003E\n Please answer quickly, and as accurately as you can.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Press the the space bar on your keyboard to start doing the practice trials.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n If you want to skip the practice trials and go directly to the task, press the "q" button on your keyboard.\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E\n\n\n',
37
37
parameters: {},
38
38
files: {},
39
39
},
+32
-41
app/utils/labjs/scripts/visualsearch.js
+32
-41
app/utils/labjs/scripts/visualsearch.js
···
32
32
},
33
33
messageHandlers: {},
34
34
title: 'Instruction',
35
-
content:
36
-
'\u003Cstyle\u003E\n .letter{\n font-size: 90px;\n font-weight: bold;\n }\n\u003C\u002Fstyle\u003E\n\n\u003Cheader\u003E\n \u003Ch1\u003EVisual search task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \n \u003Cp\u003E\n Again, all you need to do is to find an \u003Cb\u003Eorange T\u003C\u002Fb\u003E. If you see the \u003Cb\u003Eorange T\u003C\u002Fb\u003E, press \u003Ckbd\u003Eb\u003C\u002Fkbd\u003E. Ignore the upside-down orange T, as well as blue Ts! IF THERE IS NO ORANGE T, press \u003Ckbd\u003En\u003C\u002Fkbd\u003E.\n It is very important to respond \u003Cb\u003EAS FAST AS YOU CAN\u003C\u002Fb\u003E.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Find \n \u003C\u002Fp\u003E\n \u003Cbr\u003E\n \u003Cdiv class="letter" style="color:orange"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003Cbr\u003E\u003Cbr\u003E\n \u003Cp\u003E\n But do not respond to any of these distractors:\n \u003C\u002Fp\u003E\n \u003Cbr\u003E\n \n \u003Cdiv style="display:grid; grid-template-columns: 100px 50px; justify-content: center"\u003E\n \u003Cdiv class="letter" style="color:lightblue"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003Cdiv class="letter" style="color:orange; transform: rotate(-180deg)"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \n \u003Cbr\u003E\u003Cbr\u003E\n\n \u003Cp\u003E\n Press the space bar on your keyboard to start doing the practice trials.\n If you want to skip the practice trials and go directly to the task, press the "q" button on your keyboard.\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E',
35
+
"content": "\u003Cstyle\u003E\n .letter{\n font-size: 90px;\n font-weight: bold;\n }\n\u003C\u002Fstyle\u003E\n\n\u003Cheader\u003E\n \u003Ch1\u003EVisual search task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \n \u003Cp\u003E\n Again, all you need to do is to find an \u003Cb\u003Eorange T\u003C\u002Fb\u003E. If you see the \u003Cb\u003Eorange T\u003C\u002Fb\u003E, press \u003Ckbd\u003Eb\u003C\u002Fkbd\u003E. Ignore the upside-down orange T, as well as blue Ts! IF THERE IS NO ORANGE T, press \u003Ckbd\u003En\u003C\u002Fkbd\u003E.\n It is very important to respond \u003Cb\u003EAS FAST AS YOU CAN\u003C\u002Fb\u003E.\n \u003C\u002Fp\u003E\n\n \u003Cdiv style=\"display:grid; grid-template-columns:1fr 1fr;\"\u003E\n \u003Cdiv\u003E\n \u003Cp\u003E\n Find \n \u003C\u002Fp\u003E\n \u003Cbr\u003E\n \u003Cdiv class=\"letter\" style=\"color:orange; height: 100px;\"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E\n \u003Cp\u003E\n But do not respond to any of these distractors:\n \u003C\u002Fp\u003E\n \u003Cbr\u003E\n \u003Cdiv style=\"display:grid; grid-template-columns: 100px 50px; justify-content: center; \"\u003E\n \u003Cdiv class=\"letter\" style=\"color:lightblue;\"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003Cdiv class=\"letter\" style=\"color:orange; transform: rotate(-180deg);\"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n\n \u003Cp\u003E\n Press the space bar on your keyboard to start doing the practice trials.\n If you want to skip the practice trials and go directly to the task, press the \"q\" button on your keyboard.\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E"
37
36
},
38
37
{
39
38
type: 'lab.flow.Loop',
···
49
48
let practiceTrialParameters = [];
50
49
51
50
function shuffle(a) {
52
-
var j, x, i;
51
+
let j, x, i;
53
52
for (i = a.length - 1; i > 0; i--) {
54
53
j = Math.floor(Math.random() * (i + 1));
55
54
x = a[i];
···
59
58
return a;
60
59
}
61
60
62
-
const randomBetween = (min, max) => {
63
-
return Math.floor(Math.random() * (max - min + 1)) + min;
64
-
};
61
+
const randomBetween = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
65
62
66
63
const makeStimuliArray = (arrLen, stLen, isTarget) => {
67
-
let arr = Array(arrLen).fill(0);
68
-
let shuffled = shuffle([...Array(arrLen).keys()]).slice(0, stLen);
69
-
for (let p of shuffled) {
64
+
const arr = Array(arrLen).fill(0);
65
+
const shuffled = shuffle([...Array(arrLen).keys()]).slice(0, stLen);
66
+
for (const p of shuffled) {
70
67
if (randomBetween(0, 1) === 0) {
71
68
arr[p] = 1;
72
69
} else {
···
118
115
);
119
116
}
120
117
121
-
//assign options values to parameters of this task
118
+
// assign options values to parameters of this task
122
119
this.options.templateParameters = practiceTrialParameters;
123
120
this.options.shuffle = true; // already shuffled before
124
121
},
···
224
221
const taskgrid = document.querySelector('#taskgrid');
225
222
const stimuli = this.parameters.stimuli;
226
223
227
-
for (let s of stimuli) {
228
-
let d = document.createElement('div');
224
+
for (const s of stimuli) {
225
+
const d = document.createElement('div');
229
226
d.classList.add('box');
230
-
let el = document.createElement('span');
227
+
const el = document.createElement('span');
231
228
el.classList.add('letter');
232
229
233
230
if (s > 0) {
···
265
262
const taskgrid = document.querySelector('#taskgrid');
266
263
const stimuli = this.parameters.stimuli;
267
264
268
-
for (let s of stimuli) {
269
-
let d = document.createElement('div');
265
+
for (const s of stimuli) {
266
+
const d = document.createElement('div');
270
267
d.classList.add('box');
271
-
let el = document.createElement('span');
268
+
const el = document.createElement('span');
272
269
el.classList.add('letter');
273
270
274
271
if (s > 0) {
···
292
289
}
293
290
294
291
if (this.state.response === 'noresponse') {
295
-
document.querySelector('#feedback').innerHTML = 'Please respond!';
292
+
document.querySelector('#feedback').innerHTML = 'Please respond.';
296
293
return;
297
294
}
298
295
299
296
if (this.state.correct) {
300
297
document.querySelector('#feedback').innerHTML = 'Well done!';
301
298
document.querySelector('#feedback').style.color = 'green';
302
-
} else {
303
-
if (this.parameters.target === 'yes') {
299
+
} else if (this.parameters.target === 'yes') {
304
300
document.querySelector('#feedback').innerHTML = 'Error! There was one!';
305
301
document.querySelector('#target').style.border = 'solid';
306
302
} else {
307
303
document.querySelector('#feedback').innerHTML = 'Error! There was none!';
308
304
}
309
-
}
310
305
},
311
306
'before:prepare': function anonymous() {
312
307
this.data.trial_number =
313
308
1 +
314
309
parseInt(this.options.id.split('_')[this.options.id.split('_').length - 2]);
315
310
316
-
this.data.condition = this.parameters.size + ' letters';
311
+
this.data.condition = `${this.parameters.size } letters`;
317
312
318
313
this.data.reaction_time = this.state.duration;
319
-
//this.data.target = this.parameters.target;
314
+
// this.data.target = this.parameters.target;
320
315
321
316
if (this.state.response === this.parameters.target) {
322
317
this.data.correct_response = true;
···
366
361
let trialParameters = [];
367
362
368
363
function shuffle(a) {
369
-
var j, x, i;
364
+
let j, x, i;
370
365
for (i = a.length - 1; i > 0; i--) {
371
366
j = Math.floor(Math.random() * (i + 1));
372
367
x = a[i];
···
376
371
return a;
377
372
}
378
373
379
-
const randomBetween = (min, max) => {
380
-
return Math.floor(Math.random() * (max - min + 1)) + min;
381
-
};
374
+
const randomBetween = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
382
375
383
376
const makeStimuliArray = (arrLen, stLen, isTarget) => {
384
-
let arr = Array(arrLen).fill(0);
385
-
let shuffled = shuffle([...Array(arrLen).keys()]).slice(0, stLen);
386
-
for (let p of shuffled) {
377
+
const arr = Array(arrLen).fill(0);
378
+
const shuffled = shuffle([...Array(arrLen).keys()]).slice(0, stLen);
379
+
for (const p of shuffled) {
387
380
if (randomBetween(0, 1) === 0) {
388
381
arr[p] = 1;
389
382
} else {
···
419
412
trialParameters = trialParameters.concat(trialConstructor(i, 20, 'no'));
420
413
}
421
414
422
-
//assign options values to parameters of this task
415
+
// assign options values to parameters of this task
423
416
this.options.templateParameters = trialParameters;
424
417
this.options.shuffle = true; // already shuffled before
425
418
},
···
524
517
const taskgrid = document.querySelector('#taskgrid');
525
518
const stimuli = this.parameters.stimuli;
526
519
527
-
for (let s of stimuli) {
528
-
let d = document.createElement('div');
520
+
for (const s of stimuli) {
521
+
const d = document.createElement('div');
529
522
d.classList.add('box');
530
-
let el = document.createElement('span');
523
+
const el = document.createElement('span');
531
524
el.classList.add('letter');
532
525
533
526
if (s > 0) {
···
565
558
const taskgrid = document.querySelector('#taskgrid');
566
559
const stimuli = this.parameters.stimuli;
567
560
568
-
for (let s of stimuli) {
569
-
let d = document.createElement('div');
561
+
for (const s of stimuli) {
562
+
const d = document.createElement('div');
570
563
d.classList.add('box');
571
-
let el = document.createElement('span');
564
+
const el = document.createElement('span');
572
565
el.classList.add('letter');
573
566
574
567
if (s > 0) {
···
599
592
if (this.state.correct) {
600
593
document.querySelector('#feedback').innerHTML = 'Well done!';
601
594
document.querySelector('#feedback').style.color = 'green';
602
-
} else {
603
-
if (this.parameters.target === 'yes') {
595
+
} else if (this.parameters.target === 'yes') {
604
596
document.querySelector('#feedback').innerHTML = 'Error! There was one!';
605
597
document.querySelector('#target').style.border = 'solid';
606
598
} else {
607
599
document.querySelector('#feedback').innerHTML = 'Error! There was none!';
608
600
}
609
-
}
610
601
},
611
602
'before:prepare': function anonymous() {
612
603
this.data.trial_number =
613
604
1 +
614
605
parseInt(this.options.id.split('_')[this.options.id.split('_').length - 2]);
615
606
616
-
this.data.condition = this.parameters.size + ' letters';
607
+
this.data.condition = `${this.parameters.size } letters`;
617
608
618
609
this.data.reaction_time = this.state.duration;
619
-
//this.data.target = this.parameters.target;
610
+
// this.data.target = this.parameters.target;
620
611
621
612
if (this.state.response === this.parameters.target) {
622
613
this.data.correct_response = true;