teonbrooks.com / BrainWaves
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.

Update CustomDesignComponent.js

Teon L Brooks 744f4e45 ec5ac4cc

+58 -188
+58 -188
app/components/DesignComponent/CustomDesignComponent.js
··· 28 28 TRIALS: 'TRIALS', 29 29 PARAMETERS: 'PARAMETERS', 30 30 INSTRUCTIONS: 'INSTRUCTIONS', 31 - PREVIEW: 'PREVIEW' 31 + PREVIEW: 'PREVIEW', 32 32 }; 33 33 34 34 const FIELDS = { ··· 133 133 { name: 'stimulus4', number: 4 }, 134 134 ]; 135 135 switch (this.state.activeStep) { 136 - 137 136 case CUSTOM_STEPS.OVERVIEW: 138 137 default: 139 138 return ( 140 - <Grid 141 - stretched 142 - relaxed 143 - padded 144 - columns="equal" 145 - className={styles.contentGrid} 146 - > 147 - <Grid.Column stretched verticalAlign="middle"> 139 + <Grid stretched relaxed padded columns='equal' className={styles.contentGrid}> 140 + <Grid.Column stretched verticalAlign='middle'> 148 141 <Image 149 142 as={Segment} 150 143 basic ··· 158 151 style={{ minHeight: 100, maxHeight: 400 }} 159 152 label={FIELDS.QUESTION} 160 153 value={this.state.description.question} 161 - placeholder="Explain your research question here." 154 + placeholder='Explain your research question here.' 162 155 onChange={(event, data) => 163 156 this.setState({ 164 157 description: { 165 158 ...this.state.description, 166 - question: data.value 159 + question: data.value, 167 160 }, 168 161 saved: false, 169 162 }) ··· 171 164 /> 172 165 </Form> 173 166 </Grid.Column> 174 - <Grid.Column stretched verticalAlign="middle"> 167 + <Grid.Column stretched verticalAlign='middle'> 175 168 <Image 176 169 as={Segment} 177 170 basic ··· 185 178 style={{ minHeight: 100, maxHeight: 400 }} 186 179 label={FIELDS.HYPOTHESIS} 187 180 value={this.state.description.hypothesis} 188 - placeholder="Describe your hypothesis here." 181 + placeholder='Describe your hypothesis here.' 189 182 onChange={(event, data) => 190 183 this.setState({ 191 184 description: { 192 185 ...this.state.description, 193 - hypothesis: data.value 186 + hypothesis: data.value, 194 187 }, 195 188 saved: false, 196 189 }) ··· 198 191 /> 199 192 </Form> 200 193 </Grid.Column> 201 - <Grid.Column verticalAlign="middle"> 194 + <Grid.Column verticalAlign='middle'> 202 195 <Image 203 196 as={Segment} 204 197 basic ··· 212 205 style={{ minHeight: 100, maxHeight: 400 }} 213 206 label={FIELDS.METHODS} 214 207 value={this.state.description.methods} 215 - placeholder="Explain how you will design your experiment to answer the question here." 208 + placeholder='Explain how you will design your experiment to answer the question here.' 216 209 onChange={(event, data) => 217 210 this.setState({ 218 211 description: { 219 212 ...this.state.description, 220 - methods: data.value 213 + methods: data.value, 221 214 }, 222 215 saved: false, 223 216 }) ··· 236 229 <p> 237 230 Select the folder with images for each condition and choose the correct response. 238 231 You can upload image files with the following extensions: ".png", ".jpg", ".jpeg". 239 - Make sure when you preview your experiment that the resolution is high enough. 240 - You can resize or compress your images in an image editing program or on one of the websites online. 232 + Make sure when you preview your experiment that the resolution is high enough. You 233 + can resize or compress your images in an image editing program or on one of the 234 + websites online. 241 235 </p> 242 236 </Segment> 243 237 ··· 303 297 </Grid> 304 298 ); 305 299 306 - case CUSTOM_STEPS.TRIALS: 307 - return ( 308 - <Grid> 309 - <div className={styles.trialsHeader}> 310 - <div> 311 - <Header as="h1">Trials</Header> 312 - <p> 313 - Edit the correct key response and type of each trial. 314 - </p> 315 - </div> 316 - 317 - <div> 318 - <Form style={{ alignSelf: 'flex-end' }}> 319 - <Form.Group className={styles.trialsTopInfoBar}> 320 - <Form.Select 321 - fluid 322 - selection 323 - label="Order" 324 - value={this.state.params.randomize} 325 - onChange={(event, data) => 326 - this.setState({ 327 - params: { 328 - ...this.state.params, 329 - randomize: data.value 330 - }, 331 - saved: false, 332 - }) 333 - } 334 - placeholder="Response" 335 - options={[{key: 'random', text: 'Random', value: 'random'}, 336 - {key: 'sequential', text: 'Sequential', value: 'sequential'}]} 337 - /> 338 - <Form.Input 339 - label="Total experimental trials" 340 - type="number" 341 - fluid 342 - value={this.state.params.nbTrials} 343 - onChange={(event, data) => 344 - this.setState({ 345 - params: { 346 - ...this.state.params, 347 - nbTrials: parseInt(data.value) 348 - }, 349 - saved: false, 350 - }) 351 - } 352 - /> 353 - <Form.Input 354 - label="Total practice trials" 355 - type="number" 356 - fluid 357 - value={this.state.params.nbPracticeTrials} 358 - onChange={(event, data) => 359 - this.setState({ 360 - params: { 361 - ...this.state.params, 362 - nbPracticeTrials: parseInt(data.value) 363 - }, 364 - saved: false, 365 - }) 366 - } 367 - /> 368 - </Form.Group> 369 - </Form> 370 - </div> 300 + case CUSTOM_STEPS.TRIALS: 301 + return ( 302 + <Grid> 303 + <div className={styles.trialsHeader}> 304 + <div> 305 + <Header as='h1'>Trials</Header> 306 + <p>Edit the correct key response and type of each trial.</p> 371 307 </div> 372 308 373 309 <div> 374 310 <Form style={{ alignSelf: 'flex-end' }}> 375 - <Form.Group 376 - style={{ 377 - display: 'grid', 378 - gridTemplateColumns: '1fr 1fr 1fr', 379 - gridColumnGap: '10px', 380 - }} 381 - > 311 + <Form.Group className={styles.trialsTopInfoBar}> 382 312 <Form.Select 383 313 fluid 384 314 selection ··· 396 326 placeholder='Response' 397 327 options={[ 398 328 { key: 'random', text: 'Random', value: 'random' }, 399 - { 400 - key: 'sequential', 401 - text: 'Sequential', 402 - value: 'sequential', 403 - }, 329 + { key: 'sequential', text: 'Sequential', value: 'sequential' }, 404 330 ]} 405 331 /> 406 332 <Form.Input ··· 436 362 </Form.Group> 437 363 </Form> 438 364 </div> 439 - </Grid> 365 + </div> 440 366 441 367 <Table basic='very'> 442 368 <Table.Header> ··· 498 424 </Table> 499 425 </Grid> 500 426 ); 427 + 501 428 case CUSTOM_STEPS.PARAMETERS: 502 429 return ( 503 430 <Grid> ··· 548 475 label='Self-paced data collection' 549 476 onChange={(value) => 550 477 this.setState({ 551 - params: { 552 - ...this.state.params, 553 - selfPaced: !this.state.params.selfPaced, 554 - }, 478 + params: { ...this.state.params, selfPaced: !this.state.params.selfPaced }, 555 479 saved: false, 556 480 }) 557 481 } 558 482 /> 559 483 </Segment> 560 484 561 - </Grid> 562 - ); 563 - 564 - case CUSTOM_STEPS.PARAMETERS: 565 - return ( 566 - <Grid> 567 - <Grid.Column width={8} style={{display: 'grid', 'alignContent': 'space-between'}}> 485 + {!this.state.params.selfPaced ? ( 568 486 <Segment basic> 569 - <Header as="h1">Inter-trial interval</Header> 570 - <p> 571 - Select the inter-trial interval duration. This is the amount 572 - of time between trials measured from the end of one trial to 573 - the start of the next one. 574 - </p> 575 - </Segment> 576 - <Segment basic style={{'marginTop': '100px'}}> 577 487 <ParamSlider 578 488 label='Presentation time (seconds)' 579 489 value={this.state.params.presentationTime} ··· 590 500 ms_conversion='250' 591 501 onChange={(value) => 592 502 this.setState({ 593 - params: { ...this.state.params, iti: value }, 594 - saved: false, 595 - }) 596 - } 597 - /> 598 - </Segment> 599 - </Grid.Column> 600 - 601 - <Grid.Column width={8} style={{display: 'grid', 'alignContent': 'space-between'}}> 602 - <Segment basic> 603 - <Header as="h1">Image duration</Header> 604 - <p> 605 - Select the time of presentation or make it self-paced - present the image until participants respond. 606 - </p> 607 - </Segment> 608 - <Segment basic> 609 - <Checkbox 610 - defaultChecked={this.state.params.selfPaced} 611 - label="Self-paced data collection" 612 - onChange={value => 613 - this.setState({ 614 - params: { ...this.state.params, selfPaced: !this.state.params.selfPaced }, 503 + params: { ...this.state.params, presentationTime: value }, 615 504 saved: false, 616 505 }) 617 506 } 618 507 /> 619 508 </Segment> 620 - 621 - 622 - {!this.state.params.selfPaced ? <Segment basic><ParamSlider 623 - label="Presentation time (seconds)" 624 - value={this.state.params.presentationTime} 625 - marks={{ 626 - 1: '0.25', 627 - 2: '0.5', 628 - 3: '0.75', 629 - 4: '1', 630 - 5: '1.25', 631 - 6: '1.5', 632 - 7: '1.75', 633 - 8: '2' 634 - }} 635 - ms_conversion='250' 636 - onChange={value => 637 - this.setState({ 638 - params: { ...this.state.params, presentationTime: value }, 639 - saved: false, 640 - }) 641 - } 642 - /> 643 - </Segment> : <Segment basic style={{'marginBottom': '85px'}} />} 644 - 645 - </Grid.Column> 646 - 647 - </Grid> 648 - ); 509 + ) : ( 510 + <Segment basic style={{ marginBottom: '85px' }} /> 511 + )} 512 + </Grid.Column> 513 + </Grid> 514 + ); 649 515 650 516 case CUSTOM_STEPS.INSTRUCTIONS: 651 517 return ( 652 518 <Grid stretched> 653 - <Grid.Column width={8} stretched style={{display: 'grid', 'alignContent': 'space-between'}}> 519 + <Grid.Column 520 + width={8} 521 + stretched 522 + style={{ display: 'grid', alignContent: 'space-between' }} 523 + > 654 524 <Segment basic> 655 - <Header as="h1">Experiment Instructions</Header> 656 - <p> 657 - Edit the instruction that will be displayed on the first screen. 658 - </p> 525 + <Header as='h1'>Experiment Instructions</Header> 526 + <p>Edit the instruction that will be displayed on the first screen.</p> 659 527 <Form> 660 528 <Form.TextArea 661 529 autoHeight ··· 672 540 </Segment> 673 541 </Grid.Column> 674 542 675 - <Grid.Column width={8} stretched style={{display: 'grid', 'alignContent': 'space-between'}}> 543 + <Grid.Column 544 + width={8} 545 + stretched 546 + style={{ display: 'grid', alignContent: 'space-between' }} 547 + > 676 548 <Segment basic> 677 - <Header as="h1">Instructions for the task screen</Header> 678 - <p> 679 - Edit the instruction that will be displayed in the footer during the task. 680 - </p> 549 + <Header as='h1'>Instructions for the task screen</Header> 550 + <p>Edit the instruction that will be displayed in the footer during the task.</p> 681 551 <Form> 682 552 <Form.TextArea 683 553 autoHeight 684 554 value={this.state.params.taskHelp} 685 - placeholder="e.g., Press 1 for a face and 9 for a house" 555 + placeholder='e.g., Press 1 for a face and 9 for a house' 686 556 onChange={(event, data) => 687 - this.setState({ 688 - params: { ...this.state.params, taskHelp: data.value }, 689 - saved: false, 690 - }) 691 - } 557 + this.setState({ 558 + params: { ...this.state.params, taskHelp: data.value }, 559 + saved: false, 560 + }) 561 + } 692 562 /> 693 563 </Form> 694 564 </Segment> ··· 702 572 <Grid.Column 703 573 stretched 704 574 width={14} 705 - textAlign="right" 706 - verticalAlign="middle" 575 + textAlign='right' 576 + verticalAlign='middle' 707 577 className={styles.previewWindow} 708 578 > 709 579 <PreviewExperimentComponent ··· 717 587 /> 718 588 </Grid.Column> 719 589 720 - <Grid.Column width={2} verticalAlign="top"> 590 + <Grid.Column width={2} verticalAlign='top'> 721 591 <Segment basic> 722 592 <PreviewButton 723 593 isPreviewing={this.state.isPreviewing} 724 - onClick={e => this.handlePreview(e)} 594 + onClick={(e) => this.handlePreview(e)} 725 595 /> 726 596 </Segment> 727 597 </Grid.Column>