Ignore:
Timestamp:
06/27/20 17:57:53 (5 years ago)
Author:
Maciej Komosinski
Message:

Improved layout, added one free-text question, properly counted the number of Parts in the Model instead of counting 'X' in the genotype

Location:
js/human_3d_alignment/src/widgets
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • js/human_3d_alignment/src/widgets/endviewer.jsx

    r943 r964  
    5656            <div id = 'end' style={styles.content}>
    5757                <div style={styles.text}>Dziękujemy za udział w badaniu!</div>
    58                 <!--div>
     58                                        {/*<div>
    5959                    <button styles={styles.text} onClick={() => {this.download('text/plain')}}>Pobierz wyniki</button>
    60             </div-->
     60                                    </div>*/}
     61                        </div>
    6162        );
    6263    }

  • js/human_3d_alignment/src/widgets/fitviewer.jsx

    r912 r964  
    88    header: {
    99        textAlign: 'center',
     10        lineHeight: '0.1',
    1011        letterSpacing: '5px',
     12        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
     13        webkitUserSelect : 'none',
     14        mozUserSelect: 'none',
     15        msUserSelect: 'none',
     16        userSelect: 'none'
     17    },
     18        info: {
     19        textAlign: 'center',
     20        lineHeight: '0.1',
     21        fontSize: '10px',
    1122        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
    1223        webkitUserSelect : 'none',
    … …  
    116127        this.createThirdRow = this.createThirdRow.bind(this);
    117128        this.createFourthRow = this.createFourthRow.bind(this);
    118         this.selectLetter = this.selectLetter.bind(this);
    119         this.selectNumber = this.selectNumber.bind(this);
    120     }
    121 
    122     selectNumber(e) {
     129        this.select = this.select.bind(this);
     130    }
     131
     132    select(e) {
    123133        let item = null;
    124134        let index;
    125135
    126         let type = 0;
    127 
    128136        for (let i = 0; i < this.props.parts1; i++) {
    129137            let index2 = (i+1).toString();
    130             let itemRow1 =  document.querySelector('#rowField1');
    131138            let itemD = document.querySelector('#creature' + index2);
    132139            let itemP = document.querySelector('#p' + index2);
    133             if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow1) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow1)) {
    134                 type = 1;
     140            if (e.target === itemD || e.target === itemP) {
    135141                item = null;
    136142                index = index2;
    … …  
    138144            }
    139145        }
    140 
    141         if (this.state.choosed != ' ') {
    142             if (type == 0) {
    143                 this.setState({ choosed: ' ' }, function() {
    144                     console.log(this.state.choosed);
    145                 });
    146             } else {
    147                 if (!isNaN(this.state.choosed)) {
    148                     let index1 = this.props.selected1.indexOf(index.toString());
    149                     let index2 = this.props.selected1.indexOf(this.state.choosed);
    150 
    151                     this.props.handleChangeSelected(1, index1, this.state.choosed);
    152                     this.props.handleChangeSelected(1, index2, index.toString());
    153 
    154                     this.setState({ choosed: ' ' }, function() {
    155                         console.log(this.state.choosed);
    156                     });
    157                 } else {
    158                     this.setState({ choosed: index }, function() {
    159                         console.log(this.state.choosed);
    160                     });
    161                 }
    162    
    163                    
    164             }
    165         } else {
    166             if (item != null) {
    167                 this.setState({ choosed: index }, function() {
    168                     console.log(this.state.choosed);
    169                 });
    170             }
    171         }
    172     }
    173 
    174     selectLetter(e) {
    175         let index;
    176         let indexL;
    177 
    178         let type = 0;
    179146
    180147        for (let i = 0; i < this.props.parts2; i++) {
    … …  
    184151            } else {
    185152                index2 = String.fromCharCode(i + 1 + 64);
    186             }
    187             let itemRow2 =  document.querySelector('#rowCreature2');
     153            }     
    188154            let itemD = document.querySelector('#creature' + index2);
    189155            let itemP = document.querySelector('#p' + index2);
    190 
    191             if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow2) ||
    192                 (e.target === itemD && e.target.parentNode.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode.parentNode == itemRow2)) {
    193                 type = 1;
     156            if (e.target === itemD || e.target === itemP) {
     157                item = null;
    194158                index = index2;
    195                 indexL = index2;
    196                 if (indexL.charCodeAt(0) > 90) {
    197                     indexL = String.fromCharCode(indexL.charCodeAt(0) - 6);
    198                 }
     159                item = document.querySelector('#creature' + index);
    199160            }
    200161        }
    201162
    202163        if (this.state.choosed != ' ') {
    203             if (type == 0) {
    204                 for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
    205                     let index2 = (i+1).toString();
    206                     let itemD =  document.querySelector('#field2-' + index2);
    207 
    208                     if (e.target === itemD) {
    209                         let temp = this.state.choosed;
    210                         if (this.state.choosed.charCodeAt(0) > 90) {
    211                             temp = String.fromCharCode(temp.charCodeAt(0) - 6);
     164            if (!item) {
     165                if (!isNaN(this.state.choosed)) {
     166                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
     167                        let index2 = (i+1).toString();
     168                        let itemD =  document.querySelector('#field1-' + index2);
     169
     170                       
     171                        if (e.target === itemD) {
     172                            let index3 = this.props.selected1.indexOf(this.state.choosed);
     173
     174                            if (index3 > -1) {
     175                                this.props.handleChangeSelected(1, index3, ' ');
     176                            }
     177                            this.props.handleChangeSelected(1, i, this.state.choosed);
    212178                        }
    213 
    214                         let index3 = this.props.selected2.indexOf(temp);
    215 
    216                         if (index3 > -1) {
    217                             this.props.handleChangeSelected(2, index3, ' ');
     179                    }
     180                } else {
     181                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
     182                        let index2 = (i+1).toString();
     183                        let itemD =  document.querySelector('#field2-' + index2);
     184
     185                       
     186                        if (e.target === itemD) {
     187
     188                            let temp = this.state.choosed;
     189                            if (this.state.choosed.charCodeAt(0) > 90) {
     190                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
     191                            }
     192
     193                            let index3 = this.props.selected2.indexOf(temp);
     194
     195                            if (index3 > -1) {
     196                                this.props.handleChangeSelected(2, index3, ' ');
     197                            }
     198                            this.props.handleChangeSelected(2, i, this.state.choosed);
    218199                        }
    219                         this.props.handleChangeSelected(2, i, this.state.choosed);
    220200                    }
    221 
    222                 }
    223 
     201                }
    224202                this.setState({ choosed: ' ' }, function() {
    225203                    console.log(this.state.choosed);
    226204                });
     205
    227206            } else {
    228                 if (isNaN(this.state.choosed)) {
    229 
     207                let item2 = document.querySelector('#creature' + this.state.choosed);
     208                if ((item.parentNode.parentNode.parentNode.className == 'rowField' || item.parentNode.parentNode.parentNode.className == 'rowBench') &&
     209                    (item2.parentNode.parentNode.parentNode.className == 'rowField' || item2.parentNode.parentNode.parentNode.className == 'rowBench')) {
     210                    let nr = 0;
     211                    let index1 = 0;
     212                    let index2 = 0;
    230213                    let temp = this.state.choosed;
    231                     if (temp.charCodeAt(0) > 90) {
     214                    if (this.state.choosed.charCodeAt(0) > 90) {
    232215                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
    233216                    }
    234 
    235                     if (indexL == temp) {
     217                    if (!isNaN(this.state.choosed)) {
     218                        nr = 1;
     219                        index1 = this.props.selected1.indexOf(this.state.choosed);
     220                        index2 = this.props.selected1.indexOf(index);
     221                    } else {
     222                        nr = 2;
     223                        let temp1 = this.state.choosed;
     224                        let temp2 = index;
     225                        if (this.state.choosed.charCodeAt(0) > 90) {
     226                            temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6);
     227                        }
     228                        if (index.charCodeAt(0) > 90) {
     229                            temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
     230                        }
     231
     232                        index1 = this.props.selected2.indexOf(temp);
     233                        index2 = this.props.selected2.indexOf(temp2);
     234                    }
     235                    this.props.handleChangeSelected(nr, index1, index);
     236                    this.props.handleChangeSelected(nr, index2, this.state.choosed);
     237
     238                    this.setState({ choosed: ' ' }, function() {
     239                        console.log(this.state.choosed);
     240                    });
     241                } else {
     242                    if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode ||
     243                        item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) {
     244                        let nr = 0;
     245                        let index1 = 0;
     246                        let index2 = 0;
     247                        if (!isNaN(this.state.choosed)) {
     248                            nr = 1;
     249                            index1 = this.props.selected1.indexOf(this.state.choosed);
     250                            index2 = this.props.selected1.indexOf(index);
     251                        } else {
     252                            nr = 2;
     253                            let temp = this.state.choosed;
     254                            let temp2 = index;
     255                            if (this.state.choosed.charCodeAt(0) > 90) {
     256                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
     257                            }
     258                            if (index.charCodeAt(0) > 90) {
     259                                temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
     260                            }
     261                            index1 = this.props.selected2.indexOf(temp);
     262                            index2 = this.props.selected2.indexOf(temp2);
     263                        }
     264                        this.props.handleChangeSelected(nr, index1, index);
     265                        this.props.handleChangeSelected(nr, index2, this.state.choosed);
    236266                        this.setState({ choosed: ' ' }, function() {
    237267                            console.log(this.state.choosed);
    238268                        });
    239269                    } else {
    240                         let index1 = this.props.selected2.indexOf(indexL);
    241                         let index2 = this.props.selected2.indexOf(temp);
    242 
    243                         if (index1 > -1 && index2 > -1) {
    244                             this.props.handleChangeSelected(2, index1, this.state.choosed);
    245                             this.props.handleChangeSelected(2, index2, index);
    246                             this.setState({ choosed: ' ' }, function() {
    247                                 console.log(this.state.choosed);
    248                             });
    249                         } else if (index1 > -1 && index2 <= -1) {
    250                             this.props.handleChangeSelected(2, index1, this.state.choosed);
    251                             this.setState({ choosed: ' ' }, function() {
    252                                 console.log(this.state.choosed);
    253                             });
    254                         } else if (index1 <= -1 && index2 > -1) {
    255                             this.props.handleChangeSelected(2, index2, indexL);
    256                             this.setState({ choosed: ' ' }, function() {
    257                                 console.log(this.state.choosed);
    258                             });
    259                         } else {
    260                             this.setState({ choosed: index }, function() {
    261                                 console.log(this.state.choosed);
    262                             });
    263                         }
     270                        this.setState({ choosed: index }, function() {
     271                            console.log(this.state.choosed);
     272                        });
    264273                    }
    265                 } else {
    266                     this.setState({ choosed: index }, function() {
    267                         console.log(this.state.choosed);
    268                     });
    269                 }
    270             }
    271            
     274                }
     275            }
    272276        } else {
    273             this.setState({ choosed: index }, function() {
    274                 console.log(this.state.choosed);
    275             });
     277            if (item != null) {
     278                this.setState({ choosed: index }, function() {
     279                    console.log(this.state.choosed);
     280                });
     281            }
    276282        }
    277283    }
    … …  
    290296                                <div id={'creature' + this.props.selected1[i]}
    291297                                    className='creature1'
    292                                     onMouseDown={this.selectNumber}
     298                                    onMouseDown={this.select}
    293299                                    style={styles.creatureBench1}>
    294300                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
    … …  
    307313                                <div id={'creature' + this.props.selected1[i]}
    308314                                    className='creature1'
    309                                     onMouseDown={this.selectNumber}
     315                                    onMouseDown={this.select}
    310316                                    style={styles.creatureBench}>
    311317                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
    … …  
    321327                    <div id='cellnull' className='cell' style={styles.cell}>
    322328                        <div id={'field1-'+(i+1).toString()}
    323                             onMouseDown = {this.selectNumber}
     329                            onMouseDown = {this.select}
    324330                            className='field'
    325331                            style={styles.middleField}>
    … …  
    357363                                <div id={'creature' + value}
    358364                                    className='creature2'
    359                                     onMouseDown={this.selectLetter}
     365                                    onMouseDown={this.select}
    360366                                    style={styles.creatureBench2}>
    361367                                    <p id={'p' + value} style={styles.creatureText}>
    … …  
    374380                                <div id={'creature' + value}
    375381                                    className='creature2'
    376                                     onMouseDown={this.selectLetter}
     382                                    onMouseDown={this.select}
    377383                                    style={styles.creatureBench}>
    378384                                    <p id={'p' + value} style={styles.creatureText}>
    … …  
    388394                    <div id='cellnull' className='cell' style={styles.cell}>
    389395                        <div id={'field2-'+(i+1).toString()}
    390                             onMouseDown = {this.selectLetter}
     396                            onMouseDown = {this.select}
    391397                            className='field'
    392398                            style={styles.middleField}>
    … …  
    421427                            <div id={'creature' + idtext}
    422428                                className='creature2'
    423                                 onMouseDown={this.selectLetter}
     429                                onMouseDown={this.select}
    424430                                style={styles.creatureBench2}>
    425431                                <p id={'p' + idtext} style={styles.creatureText}>
    … …  
    434440                            <div id={'creature' + idtext}
    435441                                className='creature2'
    436                                 onMouseDown={this.selectLetter}
     442                                onMouseDown={this.select}
    437443                                style={styles.creatureBench}>
    438444                                <p id={'p' + idtext} style={styles.creatureText}>
    … …  
    460466
    461467        return (
    462             <div id='fit' className='fit' onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}} style={{position: 'relative', width: w, height: h, whiteSpace: 'no-wrap', overflow: 'auto'}}>
     468            <div id='fit' className='fit' onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>{/* style={{position: 'relative', width: w, height: h, whiteSpace: 'no-wrap', overflow: 'auto'}}>*/}
    463469                <h2 className='title' style={styles.header}>
    464470                    DOPASOWANIE
    465471                </h2>
    466 
    467                 <div key='rowsFields' className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
    468                     <div id='rowCreature1' onMouseDown = {this.selectNumber}>
    469                         <div id='rowField1' className='rowField' onMouseDown = {this.selectNumber} style={styles.row}>
     472                <div key='rowsFields' onMouseDown = {this.select} className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
     473                    <div id='rowCreature1' onMouseDown = {this.select}>
     474                        <div id='rowField1' className='rowField' onMouseDown = {this.select} style={styles.row}>
    470475                            {this.createSecondRow()}
    471476                        </div>
    472477                    </div>
    473                     <div id='rowCreature2' onMouseDown = {this.selectLetter}>
    474                         <div id='rowField2' className='rowField' onMouseDown = {this.selectLetter} style={styles.row}>
     478                  <div className='text' style={styles.info}>
     479                    w najwyższy rząd cyferek nie klikamy
     480                  </div>
     481                    <div id='rowCreature2'>
     482                        <div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
    475483                            {this.createThirdRow()}
    476484                        </div>
    477                         <div id='rowBench2' className='rowBench' onMouseDown = {this.selectLetter} style={styles.row}>
     485                        <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
    478486                            {this.createFourthRow()}
    479487                        </div>

  • js/human_3d_alignment/src/widgets/parmviewer.jsx

    r942 r964  
    5353for (let i = 0; i < 11; i += 1) {
    5454    language_num.push({ value: i, label: i });
     55}
     56
     57const percent_num = [];
     58percent_num.push({value: 'empty', label: ' '})
     59   
     60for (let i = 0; i < 101; i += 10) {
     61    percent_num.push({ value: i, label: i });
    5562}
    5663
    … …  
    136143                <div style={styles.header}/>
    137144                <div className='age' style={styles.row}>
    138                     <span htmlFor="age" style={styles.desc}>Wiek</span>
     145                    <span htmlFor="age" style={styles.desc}>Rok urodzenia</span>
    139146                    <Select
    140147                        options={years}
    … …  
    291298                    <div style={styles.ind}/>
    292299                </div>
    293                 <div className='sport_type' style={styles.row}>
    294                     <span htmlFor="sport_type" style={styles.desc}>Typ aktywności sportowej</span>
    295                     <Select
    296                         options= {sports}
    297                         onChange={this.props.handleChangeSportType}
    298                         placeholder={'Wybierz typ aktywności sportowej'}
    299                         display={'table-cell'}
    300                         height={'20px'}
    301                         styles={styles.select}
    302                         noValidate
    303                     />
    304                     <div style={styles.ind}/>
    305                 </div>
    306                
    307                 <div style={styles.interval}/>
     300                <div className='strength_percent' style={styles.row}>
     301                    <span htmlFor="strength_percent" style={styles.desc}>Procent komponentu siłowego w aktywności sportowej</span>
     302                    <Select
     303                        options= {percent_num}
     304                        onChange={this.props.handleChangeStrengthPercent}
     305                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent siłowy'}
     306                        display={'table-cell'}
     307                        height={'20px'}
     308                        styles={styles.select}
     309                        noValidate
     310                    />
     311                    <div style={styles.ind}/>
     312                </div>
     313                <div className='cardio_percent' style={styles.row}>
     314                    <span htmlFor="cardio_percent" style={styles.desc}>Procent komponentu wytrzymałościowego w aktywności sportowej</span>
     315                    <Select
     316                        options= {percent_num}
     317                        onChange={this.props.handleChangeCardioPercent}
     318                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent wytrzymałościowy'}
     319                        display={'table-cell'}
     320                        height={'20px'}
     321                        styles={styles.select}
     322                        noValidate
     323                    />
     324                    <div style={styles.ind}/>
     325                </div>
     326                    <div className='intellect_percent' style={styles.row}>
     327                    <span htmlFor="intellect_percent" style={styles.desc}>Procent komponentu intelektualnego w aktywności sportowej</span>
     328                    <Select
     329                        options= {percent_num}
     330                        onChange={this.props.handleChangeIntellectPercent}
     331                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent intelektualny'}
     332                        display={'table-cell'}
     333                        height={'20px'}
     334                        styles={styles.select}
     335                        noValidate
     336                    />
     337                    <div style={styles.ind}/>
     338                </div>
    308339                <div className='cons' style={styles.row}>
    309340                    <span htmlFor="cons" style={styles.desc}>Uważam się za osobę sumienną</span>

  • js/human_3d_alignment/src/widgets/sliderviewer.jsx

    r911 r964  
    4242        width: '80%'
    4343    },
     44    textArea: {
     45        display: 'table',
     46    marginLeft: 'auto',
     47    marginRight: 'auto'
     48    },
    4449    nextButton: {
    4550        width: '250px',
    … …  
    7681        this.props = props;
    7782        this.state = {
    78             percent: 50
     83            percent: 50,
     84            textValue: ''
    7985        }
    8086
    8187        this.handleChangePercent = this.handleChangePercent.bind(this);
     88        this.handleChangeText = this.handleChangeText.bind(this);
    8289        this.onClickNext = this.onClickNext.bind(this);
    8390    }
    … …  
    8895     */
    8996    handleChangePercent(per) {
    90                 this.setState({ percent: per.x }, function() {
     97        this.setState({ percent: per.x }, function() {
    9198            console.log(this.state.percent);
    9299            this.props.handleChangePercent(this.state.percent);
     100        });
     101    }
     102   
     103    handleChangeText(text_) {
     104        this.setState({ textValue: text_.target.value }, function() {
     105            this.props.handleChangeText(this.state.textValue);
    93106        });
    94107    }
    … …  
    103116                console.log(this.state.percent);
    104117                this.props.handleChangePercent(this.state.percent);
     118            });
     119            this.setState({ textValue: '' }, function() {
     120                console.log(this.state.percent);
     121                this.props.handleChangeText(this.state.textValue);
    105122            });
    106123        } else {
    … …  
    146163                    </button>
    147164                </div>
    148                 <div style={styles.small_interval}/>
     165                <div style={styles.interval}/>
     166               
     167                <div className="text">
     168                <textarea value={this.state.textValue} onChange={this.handleChangeText} cols={75} rows={1} style={styles.textArea} placeholder={'Napisz krótko dlaczego dokonałaś/eś akurat takiego dopasowania'}/>
     169                </div>
     170                {/*
    149171                <div style={styles.finishButton_position}>
    150172                    <button type='button' onClick={this.props.onClickFinish} style={styles.finishButton}>
    … …  
    152174                    </button>
    153175                </div>
     176                */}
    154177               
    155178            </div>
Note: See TracChangeset for help on using the changeset viewer.