An easy-to-use platform for EEG experimentation in the classroom
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

updates to the experiment protocol scripts

Co-Authored-By: Yury-Shevchenko <shevchenko_yury@mail.ru>

+99 -96
+29 -29
app/utils/labjs/scripts/faceshouses.js
··· 1 + import * as path from 'path'; 2 + const rootFolder = __dirname; 3 + const assetsDirectory = path.join(rootFolder, 'assets', 'labjs', 'faceshouses'); 4 + 1 5 // Define study 2 6 const studyObject = { 3 7 "title": "root", ··· 6 10 "plugins": [ 7 11 { 8 12 "type": "lab.plugins.Metadata" 9 - }, 10 - { 11 - "type": "lab.plugins.Download", 12 - "filePrefix": "the-face-house-task" 13 13 } 14 14 ], 15 15 "metadata": { ··· 24 24 { 25 25 "type": "lab.flow.Sequence", 26 26 "files": { 27 - "Annie_3.jpg": "./utils/labjs/scripts/faceshouses/7a536fba60226293bf351cb6f9719fee15f3b693915c0a55b0f107377f10a7e1.jpg", 28 - "Blake_3.jpg": "./utils/labjs/scripts/faceshouses/3138f2fd1cba5a07f0b0ac61f8ee4754e6e0f07bd3ea520a75bc39c2d05ecece.jpg", 29 - "Don_3.jpg": "./utils/labjs/scripts/faceshouses/cc6bf44e75c27e0d57956ae95d4c2c64f0d41f666a1e3f9fff20927fe3844dfd.jpg", 30 - "Estelle_3.jpg": "./utils/labjs/scripts/faceshouses/5ce843ee780ba0c902ee1b06326c7e65fe840769c8621a8d9f8b75b5eb67bcd9.jpg", 31 - "Frank_3.jpg": "./utils/labjs/scripts/faceshouses/856ae9bd5ec82567011ae41e10dcfa2de9cfa7ddadc5c1388df2998142ab4d7f.jpg", 32 - "Janie_3.jpg": "./utils/labjs/scripts/faceshouses/a82a652abb85637af9fba1f4dbf7f69d906a14172a70df610e3be33c0058b9f6.jpg", 33 - "Joan_3.jpg": "./utils/labjs/scripts/faceshouses/d92c1965ad53b7533d5f00ace843e8f1c161ae7e72ad52b4511f3ab84a8eea73.jpg", 34 - "Jodi_3.jpg": "./utils/labjs/scripts/faceshouses/b746cdfd1099dfbe200a661a81ef2315935a5eafc855b8b373d9b633fadd8e6c.jpg", 35 - "Joe_3.jpg": "./utils/labjs/scripts/faceshouses/3e55b3ce099ffea5a4ebde02c7a0cb055fb6f9768116efc932e77e4319841bea.jpg", 36 - "Tim_3.jpg": "./utils/labjs/scripts/faceshouses/56136f19fc574a3a99761c9a7ce1fcc5149d6edcc60e942cc8e5db2f66e0db91.jpg", 37 - "Tom_3.jpg": "./utils/labjs/scripts/faceshouses/b87301f741db5d27e05e8d127ae729af9bb7e2e38484c8f29b52e442c333989d.jpg", 38 - "Wallace_3.jpg": "./utils/labjs/scripts/faceshouses/5ba782ee30b8213b554d61adb62091b63c509a539bdd693ed27c1cbc3db40272.jpg", 39 - "house1.3.jpg": "./utils/labjs/scripts/faceshouses/9f0121c6a70040d4abbcd41daf909797cef7438f406fc471c0def07f477f920e.jpg", 40 - "house2.2.jpg": "./utils/labjs/scripts/faceshouses/461aa813adbb5117b26b791c02864b2e88e6c2899c821f14d58b042c26628b92.jpg", 41 - "house3.1.jpg": "./utils/labjs/scripts/faceshouses/269317cfd165abfdbc48e400a6cfc89c2cfcd98a9c738ece5222e8d513bcf83a.jpg", 42 - "house4.3.jpg": "./utils/labjs/scripts/faceshouses/a87186061326f3e11259a95ba1229cfc3f1a4f4b06fb50c16ad3757105a2b69c.jpg", 43 - "house5.2.jpg": "./utils/labjs/scripts/faceshouses/f78f496ab685b1ae4661c6071358f1a6ab0e1238a0ed1bd157a32317c41a8eaf.jpg", 44 - "house6.3.jpg": "./utils/labjs/scripts/faceshouses/b589ac23b4918605f777f45ad32149fa7327fccdd452d4037451c8c28e19c7c0.jpg", 45 - "house7.1.jpg": "./utils/labjs/scripts/faceshouses/f528aa7c5e2618c4e8b7ae1e1eced370788e698a339b60be085b46c0044b58e3.jpg", 46 - "house8.4.jpg": "./utils/labjs/scripts/faceshouses/28f97e1e523564c8fa7942675ea1609265532de0c715e1b4058cf8ceb4220f9b.jpg", 47 - "house9.2.jpg": "./utils/labjs/scripts/faceshouses/6720b60aa89355682657837dca11fc69d684e77cca2cd26029115ac49e940efe.jpg", 48 - "house10.4.jpg": "./utils/labjs/scripts/faceshouses/c424a87e1b2220efb59423664e7293de2ed37e60d463bfe3261d8b967183740f.jpg", 49 - "house11.2.jpg": "./utils/labjs/scripts/faceshouses/19a8664bab5a3c491510b7f3485d5498c41b680c4695c317be659b4d8e092358.jpg", 50 - "house12.1.jpg": "./utils/labjs/scripts/faceshouses/38178a7ec6cc54ed9e61b5fec7790dc85d2debe2dad0b3e960686db660d9428c.jpg" 27 + "Annie_3.jpg": `${assetsDirectory}/7a536fba60226293bf351cb6f9719fee15f3b693915c0a55b0f107377f10a7e1.jpg`, 28 + "Blake_3.jpg": `${assetsDirectory}/3138f2fd1cba5a07f0b0ac61f8ee4754e6e0f07bd3ea520a75bc39c2d05ecece.jpg`, 29 + "Don_3.jpg": `${assetsDirectory}/cc6bf44e75c27e0d57956ae95d4c2c64f0d41f666a1e3f9fff20927fe3844dfd.jpg`, 30 + "Estelle_3.jpg": `${assetsDirectory}/5ce843ee780ba0c902ee1b06326c7e65fe840769c8621a8d9f8b75b5eb67bcd9.jpg`, 31 + "Frank_3.jpg": `${assetsDirectory}/856ae9bd5ec82567011ae41e10dcfa2de9cfa7ddadc5c1388df2998142ab4d7f.jpg`, 32 + "Janie_3.jpg": `${assetsDirectory}/a82a652abb85637af9fba1f4dbf7f69d906a14172a70df610e3be33c0058b9f6.jpg`, 33 + "Joan_3.jpg": `${assetsDirectory}/d92c1965ad53b7533d5f00ace843e8f1c161ae7e72ad52b4511f3ab84a8eea73.jpg`, 34 + "Jodi_3.jpg": `${assetsDirectory}/b746cdfd1099dfbe200a661a81ef2315935a5eafc855b8b373d9b633fadd8e6c.jpg`, 35 + "Joe_3.jpg": `${assetsDirectory}/3e55b3ce099ffea5a4ebde02c7a0cb055fb6f9768116efc932e77e4319841bea.jpg`, 36 + "Tim_3.jpg": `${assetsDirectory}/56136f19fc574a3a99761c9a7ce1fcc5149d6edcc60e942cc8e5db2f66e0db91.jpg`, 37 + "Tom_3.jpg": `${assetsDirectory}/b87301f741db5d27e05e8d127ae729af9bb7e2e38484c8f29b52e442c333989d.jpg`, 38 + "Wallace_3.jpg": `${assetsDirectory}/5ba782ee30b8213b554d61adb62091b63c509a539bdd693ed27c1cbc3db40272.jpg`, 39 + "house1.3.jpg": `${assetsDirectory}/9f0121c6a70040d4abbcd41daf909797cef7438f406fc471c0def07f477f920e.jpg`, 40 + "house2.2.jpg": `${assetsDirectory}/461aa813adbb5117b26b791c02864b2e88e6c2899c821f14d58b042c26628b92.jpg`, 41 + "house3.1.jpg": `${assetsDirectory}/269317cfd165abfdbc48e400a6cfc89c2cfcd98a9c738ece5222e8d513bcf83a.jpg`, 42 + "house4.3.jpg": `${assetsDirectory}/a87186061326f3e11259a95ba1229cfc3f1a4f4b06fb50c16ad3757105a2b69c.jpg`, 43 + "house5.2.jpg": `${assetsDirectory}/f78f496ab685b1ae4661c6071358f1a6ab0e1238a0ed1bd157a32317c41a8eaf.jpg`, 44 + "house6.3.jpg": `${assetsDirectory}/b589ac23b4918605f777f45ad32149fa7327fccdd452d4037451c8c28e19c7c0.jpg`, 45 + "house7.1.jpg": `${assetsDirectory}/f528aa7c5e2618c4e8b7ae1e1eced370788e698a339b60be085b46c0044b58e3.jpg`, 46 + "house8.4.jpg": `${assetsDirectory}/28f97e1e523564c8fa7942675ea1609265532de0c715e1b4058cf8ceb4220f9b.jpg`, 47 + "house9.2.jpg": `${assetsDirectory}/6720b60aa89355682657837dca11fc69d684e77cca2cd26029115ac49e940efe.jpg`, 48 + "house10.4.jpg": `${assetsDirectory}/c424a87e1b2220efb59423664e7293de2ed37e60d463bfe3261d8b967183740f.jpg`, 49 + "house11.2.jpg": `${assetsDirectory}/19a8664bab5a3c491510b7f3485d5498c41b680c4695c317be659b4d8e092358.jpg`, 50 + "house12.1.jpg": `${assetsDirectory}/38178a7ec6cc54ed9e61b5fec7790dc85d2debe2dad0b3e960686db660d9428c.jpg` 51 51 }, 52 52 "parameters": { 53 53 "fixationCrossDuration": 500, ··· 197 197 ], 198 198 "sample": { 199 199 "mode": "draw-shuffle", 200 - "n": "" 200 + "n": "96" 201 201 }, 202 202 "responses": {}, 203 203 "messageHandlers": {},
+45 -31
app/utils/labjs/scripts/multitasking.js
··· 1 + import * as path from 'path'; 2 + const rootFolder = __dirname; 3 + const assetsDirectory = path.join(rootFolder, 'assets', 'labjs', 'multitasking'); 4 + 1 5 // Define study 2 6 const studyObject = { 3 7 "title": "root", ··· 6 10 "plugins": [ 7 11 { 8 12 "type": "lab.plugins.Metadata" 9 - }, 10 - { 11 - "type": "lab.plugins.Download", 12 - "filePrefix": "study" 13 13 } 14 14 ], 15 15 "metadata": { 16 - "title": "", 16 + "title": "Multitasking", 17 17 "description": "", 18 18 "repository": "", 19 19 "contributors": "" ··· 43 43 { 44 44 "type": "lab.html.Screen", 45 45 "files": { 46 - "diamond_2.png": "./utils/labjs/scripts/multitasking/diamond_2.png", 47 - "diamond_3.png": "./utils/labjs/scripts/multitasking/diamond_3.png", 48 - "rectangle_2.png": "./utils/labjs/scripts/multitasking/rectangle_2.png", 49 - "rectangle_3.png": "./utils/labjs/scripts/multitasking/rectangle_3.png", 50 - "filling.png": "./utils/labjs/scripts/multitasking/filling.png", 51 - "shape.png": "./utils/labjs/scripts/multitasking/shape.png", 52 - "example_1.png": "./utils/labjs/scripts/multitasking/example_1.png", 53 - "example_2.png": "./utils/labjs/scripts/multitasking/example_2.png", 54 - "example_3.png": "./utils/labjs/scripts/multitasking/example_3.png", 55 - "example_4.png": "./utils/labjs/scripts/multitasking/example_4.png", 56 - "all_conditions.png": "./utils/labjs/scripts/multitasking/all_conditions.png" 46 + "diamond_2.png": `${assetsDirectory}/diamond_2.png`, 47 + "diamond_3.png": `${assetsDirectory}/diamond_3.png`, 48 + "rectangle_2.png": `${assetsDirectory}/rectangle_2.png`, 49 + "rectangle_3.png": `${assetsDirectory}/rectangle_3.png`, 50 + "filling.png": `${assetsDirectory}/filling.png`, 51 + "shape.png": `${assetsDirectory}/shape.png`, 52 + "example_1.png": `${assetsDirectory}/example_1.png`, 53 + "example_2.png": `${assetsDirectory}/example_2.png`, 54 + "example_3.png": `${assetsDirectory}/example_3.png`, 55 + "example_4.png": `${assetsDirectory}/example_4.png`, 56 + "all_conditions.png": `${assetsDirectory}/all_conditions.png` 57 57 }, 58 58 "parameters": {}, 59 59 "responses": { 60 - "keypress(q)": "continue" 60 + "keypress(p)": "continue" 61 61 }, 62 62 "messageHandlers": { 63 63 "before:prepare": function anonymous( 64 64 ) { 65 65 this.options.events['keydown'] = (e) => { 66 - if(e.code === 'ArrowLeft' || e.code === 'ArrowRight'){ 66 + 67 + if (e.code === 'KeyT') { 68 + this.data.skipTraining = true 69 + this.end() 70 + } 71 + 72 + if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') { 67 73 68 74 let instructions = document.querySelectorAll('div.instruction') 69 75 let notFound = true ··· 94 100 } 95 101 }, 96 102 "title": "Instructions", 97 - "content": "\u003Cmain\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_1' style=\"display:block\"\u003E\n \u003Cp\u003E\n In the following, you will respond to various figures. These are the figures that you will see: diamonds and rectangles with a filling of 2 or 3 dots:\n \u003C\u002Fp\u003E\n \u003Ctable\u003E\n \u003Cthead\u003E\n \u003Ctr\u003E\n \u003Cth\u003EDiamond with filling of 3 dots\u003C\u002Fth\u003E\n \u003Cth\u003EDiamond with filling of 2 dots\u003C\u002Fth\u003E\n \u003Cth\u003ERectangle with filling of 3 dots\u003C\u002Fth\u003E\n \u003Cth\u003ERectangle with filling of 2 dots\u003C\u002Fth\u003E\n \u003C\u002Ftr\u003E\n \u003C\u002Fthead\u003E\n \u003Ctbody\u003E\n \u003Ctr\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['diamond_3.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['diamond_2.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['rectangle_3.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['rectangle_2.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003C\u002Ftr\u003E\n \u003C\u002Ftbody\u003E\n \u003C\u002Ftable\u003E\n\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_2' style=\"display:none\"\u003E\n\n \u003Cp\u003E\n You will be shown these figures in sequences of trials.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Each time you will need to respond with a button press.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n How exactly will be explained in the next screens.\n \u003C\u002Fp\u003E\n\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_3' style=\"display:none\"\u003E\n \u003Cp\u003E\n In the shape task, a diamond requires a b button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the shape task, a rectangle requires a n button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In this task, ignore the filling (dots) of the shape!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['shape.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_4' style=\"display:none\"\u003E\n \u003Cp\u003E\n In the filling task, a filling of two dots requires a b button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, a filling with three dots requires a n button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, ignore the outer shape!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['filling.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_5' style=\"display:none\"\u003E\n \u003Cp\u003E\n Example 1. If you see a figure in the upper part of the frame, you know you need to do the shape task, that is easy, because the word shape is at the top. Here you see a diamond, which requires a button press of the keyboard key \u003Cstrong\u003E\u003Cem\u003Eb\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the shape task, entirely ignore the filling dots!!!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['example_1.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_6' style=\"display:none\" style=\"width:400px\"\u003E\n \u003Cp\u003E\n Example 2. If you see a figure in the lower part of the frame, you know you need to do the filling task, that is easy, because the word filling is at the bottom. This diamond is filled with 3 dots, and thus press the keyboard key \u003Cstrong\u003E\u003Cem\u003En\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, entirely ignore the outer shape (here a diamond)!!!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['example_2.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_7' style=\"display:none\"\u003E\n \u003Cimg src=${this.files['example_3.png']} style=\"width:400px\"\u003E\n \u003Cp\u003E\n Example 3. If you see a figure in the upper part of the frame, you know you need to do the shape task, that is easy, because the word shape is at the top. Here you see a rectangle, which requires the \u003Cstrong\u003E\u003Cem\u003En\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E key.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the shape task, entirely ignore the filling (here 2 dots)!!!\n \u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_8' style=\"display:none\"\u003E\n \u003Cp\u003E\n Example 4. If you see a figure in the lower part of the frame, you know you need to do the filling task, that is easy, because the word filling is at the bottom. This diamond is filled with 2 dots, and thus press \u003Cstrong\u003E\u003Cem\u003Eb\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E key.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, entirely ignore the outer shape (here a diamond)!!!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['example_4.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\n\u003Cdiv class=\"instruction\" id='screen_9' style=\"display:none\"\u003E\n \u003Cp\u003E\n Here, you can see how to respond in all conditions...\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Just look at shape in the shape task, and at the dots in the filling task...\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['all_conditions.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_10' style=\"display:none\"\u003E\n \u003Cp\u003E\n Are you ready? Press the \"q\" button on your keyboard to quit the instructions and start doing the task.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Or you can browse back to the previous screens until you understand what you need to do in the two tasks (use the arrow keys).\n \u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\n\u003C\u002Fmain\u003E\n\n\n\u003Cfooter\u003E\n Use left\u002Fright arrow keys to go further or back.\n\u003C\u002Ffooter\u003E" 103 + "content": "\u003Cmain\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_1' style=\"display:block\"\u003E\n \u003Cp\u003E\n In the following, you will respond to various figures. These are the figures that you will see: diamonds and rectangles with a filling of 2 or 3 dots:\n \u003C\u002Fp\u003E\n \u003Ctable\u003E\n \u003Cthead\u003E\n \u003Ctr\u003E\n \u003Cth\u003EDiamond with filling of 3 dots\u003C\u002Fth\u003E\n \u003Cth\u003EDiamond with filling of 2 dots\u003C\u002Fth\u003E\n \u003Cth\u003ERectangle with filling of 3 dots\u003C\u002Fth\u003E\n \u003Cth\u003ERectangle with filling of 2 dots\u003C\u002Fth\u003E\n \u003C\u002Ftr\u003E\n \u003C\u002Fthead\u003E\n \u003Ctbody\u003E\n \u003Ctr\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['diamond_3.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['diamond_2.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['rectangle_3.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003Ctd\u003E\u003Cimg src=${this.files['rectangle_2.png']} style=\"width:100px\"\u003E\u003C\u002Ftd\u003E\n \u003C\u002Ftr\u003E\n \u003C\u002Ftbody\u003E\n \u003C\u002Ftable\u003E\n \u003Cp\u003E\n Use the right arrow key to move to the next instruction.\n \u003C\u002Fp\u003E\n\n \u003Cp\u003E\n If you want to skip the instruction with practice trials and go directly to the task, press the \"t\" button on your keyboard.\n \u003C\u002Fp\u003E\n\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_2' style=\"display:none\"\u003E\n\n \u003Cp\u003E\n You will be shown these figures in sequences of trials.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Each time you will need to respond with a button press.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n How exactly will be explained in the next screens.\n \u003C\u002Fp\u003E\n\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_3' style=\"display:none\"\u003E\n \u003Cp\u003E\n In the shape task, a diamond requires a b button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the shape task, a rectangle requires a n button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In this task, ignore the filling (dots) of the shape!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['shape.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_4' style=\"display:none\"\u003E\n \u003Cp\u003E\n In the filling task, a filling of two dots requires a b button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, a filling with three dots requires a n button press. \n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, ignore the outer shape!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['filling.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_5' style=\"display:none\"\u003E\n \u003Cp\u003E\n Example 1. If you see a figure in the upper part of the frame, you know you need to do the shape task, that is easy, because the word shape is at the top. Here you see a diamond, which requires a button press of the keyboard key \u003Cstrong\u003E\u003Cem\u003Eb\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the shape task, entirely ignore the filling dots!!!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['example_1.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_6' style=\"display:none\" style=\"width:400px\"\u003E\n \u003Cp\u003E\n Example 2. If you see a figure in the lower part of the frame, you know you need to do the filling task, that is easy, because the word filling is at the bottom. This diamond is filled with 3 dots, and thus press the keyboard key \u003Cstrong\u003E\u003Cem\u003En\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, entirely ignore the outer shape (here a diamond)!!!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['example_2.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_7' style=\"display:none\"\u003E\n \u003Cimg src=${this.files['example_3.png']} style=\"width:400px\"\u003E\n \u003Cp\u003E\n Example 3. If you see a figure in the upper part of the frame, you know you need to do the shape task, that is easy, because the word shape is at the top. Here you see a rectangle, which requires the \u003Cstrong\u003E\u003Cem\u003En\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E key.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the shape task, entirely ignore the filling (here 2 dots)!!!\n \u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_8' style=\"display:none\"\u003E\n \u003Cp\u003E\n Example 4. If you see a figure in the lower part of the frame, you know you need to do the filling task, that is easy, because the word filling is at the bottom. This diamond is filled with 2 dots, and thus press \u003Cstrong\u003E\u003Cem\u003Eb\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E key.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In the filling task, entirely ignore the outer shape (here a diamond)!!!\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['example_4.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\n\u003Cdiv class=\"instruction\" id='screen_9' style=\"display:none\"\u003E\n \u003Cp\u003E\n Here, you can see how to respond in all conditions...\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Just look at shape in the shape task, and at the dots in the filling task...\n \u003C\u002Fp\u003E\n \u003Cimg src=${this.files['all_conditions.png']} style=\"width:400px\"\u003E\n\u003C\u002Fdiv\u003E\n\n\u003Cdiv class=\"instruction\" id='screen_10' style=\"display:none\"\u003E\n \u003Cp\u003E\n Are you ready? Press the \"p\" button on your keyboard to quit the instructions and start doing the practice trials.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n Or you can browse back to the previous screens until you understand what you need to do in the two tasks (use the arrow keys).\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n If you want to skip practice trials and go directly to the task, press the \"t\" button on your keyboard.\n \u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\n\u003C\u002Fmain\u003E\n\n\n\u003Cfooter\u003E\n Use left\u002Fright arrow keys to go further or back.\n\u003C\u002Ffooter\u003E" 98 104 }, 99 105 { 100 106 "type": "lab.flow.Loop", ··· 104 110 { 105 111 "block": "shape", 106 112 "task": "training", 107 - "num_trials": "5" 113 + "num_trials": "5", 114 + "cond": "No switching" 108 115 }, 109 116 { 110 117 "block": "filling", 111 118 "task": "training", 112 - "num_trials": "5" 119 + "num_trials": "5", 120 + "cond": "No switching" 113 121 }, 114 122 { 115 123 "block": "mixed", 116 124 "task": "training", 117 - "num_trials": "10" 125 + "num_trials": "10", 126 + "cond": "Switching" 118 127 }, 119 128 { 120 129 "block": "shape", 121 130 "task": "main", 122 - "num_trials": "15" 131 + "num_trials": "15", 132 + "cond": "No switching" 123 133 }, 124 134 { 125 135 "block": "filling", 126 136 "task": "main", 127 - "num_trials": "15" 137 + "num_trials": "15", 138 + "cond": "No switching" 128 139 }, 129 140 { 130 141 "block": "mixed", 131 142 "task": "main", 132 - "num_trials": "30" 143 + "num_trials": "30", 144 + "cond": "Switching" 133 145 } 134 146 ], 135 147 "sample": { ··· 139 151 "responses": {}, 140 152 "messageHandlers": {}, 141 153 "title": "Block loop", 154 + "tardy": true, 142 155 "shuffleGroups": [], 143 156 "template": { 144 157 "type": "lab.flow.Sequence", ··· 147 160 "responses": {}, 148 161 "messageHandlers": {}, 149 162 "title": "Block sequence", 163 + "skip": "${this.parameters.task === 'training' && this.state.skipTraining === true}", 150 164 "content": [ 151 165 { 152 166 "type": "lab.canvas.Screen", ··· 1904 1918 "messageHandlers": { 1905 1919 "before:prepare": function anonymous( 1906 1920 ) { 1907 - 1908 1921 this.data.trial_number = 1 + parseInt(this.options.id.split('_')[this.options.id.split('_').length-2]); 1909 - this.data.condition = this.parameters.type.charAt(0).toUpperCase() + this.parameters.type.slice(1); 1922 + this.data.condition = this.parameters.cond; 1910 1923 this.data.reaction_time = this.state.duration; 1911 1924 1912 1925 if(this.state.response === this.parameters.cor_response){ ··· 1915 1928 this.data.correct_response = false; 1916 1929 } 1917 1930 1918 - this.data.response_given = this.state.correct === 'empty' ? 'no' : 'yes'; 1919 - 1920 - 1921 - 1931 + if(this.parameters.task === 'main'){ 1932 + this.data.response_given = this.state.correct === 'empty' ? 'no' : 'yes'; 1933 + } else { 1934 + this.data.response_given = 'practice'; 1935 + } 1922 1936 1923 1937 1924 1938 }
+23 -26
app/utils/labjs/scripts/stroop.js
··· 6 6 "plugins": [ 7 7 { 8 8 "type": "lab.plugins.Metadata" 9 - }, 10 - { 11 - "type": "lab.plugins.Download", 12 - "filePrefix": "stroop-task" 13 9 } 14 10 ], 15 11 "metadata": { ··· 29 25 "keypress(Space)": "continue" 30 26 }, 31 27 "title": "Instruction", 32 - "content": "\u003Cheader class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ch1\u003EStroop Task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\u003Cmain\u003E\n \u003Cp\u003E\n Welcome to the \u003Cstrong\u003EStroop experiment\u003C\u002Fstrong\u003E!\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In this experiment, your task will be to \n \u003Cstrong\u003Eidentify the color of the word shown \n on the screen\u003C\u002Fstrong\u003E.\u003Cbr\u003E\n The word itself is immaterial &mdash; \n you can safely ignore it.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n To indicate the color of the word, \n please use the keys \u003Cstrong\u003Er\u003C\u002Fstrong\u003E, \n \u003Cstrong\u003Eg\u003C\u002Fstrong\u003E, \u003Cstrong\u003Eb\u003C\u002Fstrong\u003E and \n \u003Cstrong\u003Eo\u003C\u002Fstrong\u003E for \n \u003Cspan style=\"color: red;\"\u003Ered\u003C\u002Fspan\u003E, \n \u003Cspan style=\"color: green;\"\u003Egreen\u003C\u002Fspan\u003E, \n \u003Cspan style=\"color: blue;\"\u003Eblue\u003C\u002Fspan\u003E and \n \u003Cspan style=\"color: orange;\"\u003Eorange\u003C\u002Fspan\u003E, \n respectively.\u003Cbr\u003E\n Please answer quickly, and as \n accurately as you can.\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E\n\u003Cfooter class=\"content-vertical-center content-horizontal-center\"\u003E\n Please press the space bar when you're ready.\n\u003C\u002Ffooter\u003E\n", 28 + "content": "\u003Cheader class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ch1\u003EStroop Task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\u003Cmain\u003E\n \u003Cp\u003E\n Welcome to the \u003Cstrong\u003EStroop experiment\u003C\u002Fstrong\u003E!\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n In this experiment, your task will be to \n \u003Cstrong\u003Eidentify the color of the word shown \n on the screen\u003C\u002Fstrong\u003E.\u003Cbr\u003E\n The word itself is immaterial &mdash; \n you can safely ignore it.\n \u003C\u002Fp\u003E\n \u003Cp\u003E\n To indicate the color of the word, \n please use the keys \u003Cstrong\u003Er\u003C\u002Fstrong\u003E, \n \u003Cstrong\u003Eg\u003C\u002Fstrong\u003E, \u003Cstrong\u003Eb\u003C\u002Fstrong\u003E and \n \u003Cstrong\u003Ey\u003C\u002Fstrong\u003E for \n \u003Cspan style=\"color: red;\"\u003Ered\u003C\u002Fspan\u003E, \n \u003Cspan style=\"color: green;\"\u003Egreen\u003C\u002Fspan\u003E, \n \u003Cspan style=\"color: blue;\"\u003Eblue\u003C\u002Fspan\u003E and \n \u003Cspan style=\"color: #ffe32a;\"\u003Eyellow\u003C\u002Fspan\u003E, \n respectively.\u003Cbr\u003E\n Please answer quickly, and as \n accurately as you can.\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E\n\u003Cfooter class=\"content-vertical-center content-horizontal-center\"\u003E\n Please press the space bar when you're ready.\n\u003C\u002Ffooter\u003E\n", 33 29 "parameters": {}, 34 30 "files": {} 35 31 }, 36 32 { 37 33 "type": "lab.canvas.Frame", 38 - "context": "\u003Cmain class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ccanvas \u002F\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Cp\u003E\n What's the \u003Cem\u003Ecolor\u003C\u002Fem\u003E of \n the word shown above? \u003Cbr\u003E\n Please press \u003Ckbd\u003Er\u003C\u002Fkbd\u003E for red,\n \u003Ckbd\u003Eg\u003C\u002Fkbd\u003E for green,\n \u003Ckbd\u003Eb\u003C\u002Fkbd\u003E for blue and \u003Ckbd\u003Eo\u003C\u002Fkbd\u003E for orange.\n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E\n", 34 + "context": "\u003Cmain class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ccanvas \u002F\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Cp\u003E\n What's the \u003Cem\u003Ecolor\u003C\u002Fem\u003E of \n the word shown above? \u003Cbr\u003E\n Please press \u003Ckbd\u003Er\u003C\u002Fkbd\u003E for red,\n \u003Ckbd\u003Eg\u003C\u002Fkbd\u003E for green,\n \u003Ckbd\u003Eb\u003C\u002Fkbd\u003E for blue and \u003Ckbd\u003Ey\u003C\u002Fkbd\u003E for yellow.\n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E\n", 39 35 "contextSelector": "canvas", 40 36 "files": {}, 41 37 "parameters": {}, ··· 63 59 "phase": "practice" 64 60 }, 65 61 { 66 - "color": "orange", 67 - "word": "orange", 62 + "color": "#ffe32a", 63 + "word": "yellow", 68 64 "phase": "practice" 69 65 } 70 66 ], ··· 209 205 "keydown(r)": "red", 210 206 "keydown(g)": "green", 211 207 "keydown(b)": "blue", 212 - "keydown(o)": "orange" 208 + "keydown(y)": "#ffe32a" 213 209 }, 214 210 "messageHandlers": {}, 215 211 "viewport": [ ··· 260 256 }, 261 257 { 262 258 "type": "lab.canvas.Frame", 263 - "context": "\u003Cmain class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ccanvas \u002F\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Cp\u003E\n What's the \u003Cem\u003Ecolor\u003C\u002Fem\u003E of \n the word shown above? \u003Cbr\u003E\n Please press \u003Ckbd\u003Er\u003C\u002Fkbd\u003E for red,\n \u003Ckbd\u003Eg\u003C\u002Fkbd\u003E for green,\n \u003Ckbd\u003Eb\u003C\u002Fkbd\u003E for blue and \u003Ckbd\u003Eo\u003C\u002Fkbd\u003E for orange.\n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E\n", 259 + "context": "\u003Cmain class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ccanvas \u002F\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Cp\u003E\n What's the \u003Cem\u003Ecolor\u003C\u002Fem\u003E of \n the word shown above? \u003Cbr\u003E\n Please press \u003Ckbd\u003Er\u003C\u002Fkbd\u003E for red,\n \u003Ckbd\u003Eg\u003C\u002Fkbd\u003E for green,\n \u003Ckbd\u003Eb\u003C\u002Fkbd\u003E for blue and \u003Ckbd\u003Ey\u003C\u002Fkbd\u003E for yellow.\n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E\n", 264 260 "contextSelector": "canvas", 265 261 "files": {}, 266 262 "parameters": {}, ··· 304 300 }, 305 301 { 306 302 "color": "red", 307 - "word": "orange", 303 + "word": "yellow", 308 304 "phase": "task", 309 305 "congruent": "no" 310 306 }, ··· 340 336 }, 341 337 { 342 338 "color": "green", 343 - "word": "orange", 339 + "word": "yellow", 344 340 "phase": "task", 345 341 "congruent": "no" 346 342 }, ··· 376 372 }, 377 373 { 378 374 "color": "blue", 379 - "word": "orange", 375 + "word": "yellow", 380 376 "phase": "task", 381 377 "congruent": "no" 382 378 }, 383 379 { 384 - "color": "orange", 380 + "color": "#ffe32a", 385 381 "word": "red", 386 382 "phase": "task", 387 383 "congruent": "no" 388 384 }, 389 385 { 390 - "color": "orange", 386 + "color": "#ffe32a", 391 387 "word": "green", 392 388 "phase": "task", 393 389 "congruent": "no" 394 390 }, 395 391 { 396 - "color": "orange", 392 + "color": "#ffe32a", 397 393 "word": "blue", 398 394 "phase": "task", 399 395 "congruent": "no" 400 396 }, 401 397 { 402 - "color": "orange", 403 - "word": "orange", 398 + "color": "#ffe32a", 399 + "word": "yellow", 404 400 "phase": "task", 405 401 "congruent": "yes" 406 402 }, 407 403 { 408 - "color": "orange", 409 - "word": "orange", 404 + "color": "#ffe32a", 405 + "word": "yellow", 410 406 "phase": "task", 411 407 "congruent": "yes" 412 408 }, 413 409 { 414 - "color": "orange", 415 - "word": "orange", 410 + "color": "#ffe32a", 411 + "word": "yellow", 416 412 "phase": "task", 417 413 "congruent": "yes" 418 414 } ··· 421 417 "parameters": {}, 422 418 "files": {}, 423 419 "sample": { 424 - "mode": "draw-shuffle" 420 + "mode": "draw-shuffle", 421 + "n": "96" 425 422 }, 426 423 "shuffleGroups": [], 427 424 "template": { ··· 558 555 "keydown(r)": "red", 559 556 "keydown(g)": "green", 560 557 "keydown(b)": "blue", 561 - "keydown(o)": "orange" 558 + "keydown(y)": "#ffe32a" 562 559 }, 563 560 "messageHandlers": {}, 564 561 "viewport": [ ··· 612 609 "type": "lab.html.Screen", 613 610 "responses": {}, 614 611 "title": "Thanks", 615 - "content": "\u003Cheader class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ch1\u003EThank you!\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\u003Cmain\u003E\n \u003Cp\u003E\n You did a great job, thanks for taking the time!\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E\n\u003Cfooter class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Cp\u003E\n If you have any questions or comments about this \n experiment,\u003Cbr\u003E please be invited to contact\n \u003Ca href=\"http:\u002F\u002Ffelixhenninger.com\"\u003E\n Felix Henninger\u003C\u002Fa\u003E.\n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E\n", 616 - "timeout": "10", 612 + "content": "\u003Cheader class=\"content-vertical-center content-horizontal-center\"\u003E\n \u003Ch1\u003EThank you!\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \u003Cp\u003E\n You did a great job, thanks for taking the time!\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E\n\n", 613 + "timeout": "1000", 617 614 "parameters": {}, 618 615 "files": {} 619 616 }
+2 -10
app/utils/labjs/scripts/visualsearch.js
··· 6 6 "plugins": [ 7 7 { 8 8 "type": "lab.plugins.Metadata" 9 - }, 10 - { 11 - "type": "lab.plugins.Download", 12 - "filePrefix": "visual-search" 13 9 } 14 10 ], 15 11 "metadata": { ··· 321 317 ) { 322 318 this.data.trial_number = 1 + parseInt(this.options.id.split('_')[this.options.id.split('_').length-2]); 323 319 324 - this.data.condition = this.parameters.target === 'yes' ? 'Target' : 'No target'; 320 + this.data.condition = this.parameters.size + ' letters'; 325 321 326 322 this.data.reaction_time = this.state.duration; 327 323 ··· 342 338 }, 343 339 { 344 340 "type": "lab.html.Screen", 345 - "files": { 346 - "grid.gif": "./utils/labjs/scripts/visualsearch/grid.gif" 347 - }, 341 + "files": {}, 348 342 "parameters": {}, 349 343 "responses": {}, 350 344 "messageHandlers": {}, 351 345 "title": "Grid", 352 - "content": "\u003Cheader\u003E\n\n\u003C\u002Fheader\u003E\n\n\u003Cmain class=\"content-vertical-center content-horizontal-center\"\u003E\n\n \u003Cimg src=${this.files['grid.gif']} style=\"height: 400px; width: auto;\"\u003E\n\n\u003C\u002Fmain\u003E\n\n", 353 346 "timeout": "500" 354 347 } 355 348 ] ··· 5744 5737 } 5745 5738 ] 5746 5739 } 5747 - 5748 5740 // export 5749 5741 export default studyObject;
app/utils/labjs/scripts/visualsearch/grid.gif

This is a binary file and will not be displayed.