Changeset 964 for js/human_3d_alignment


Ignore:
Timestamp:
06/27/20 17:57:53 (4 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
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • js/human_3d_alignment/index.html

    r943 r964  
    33<head lang="en">
    44    <meta charset="UTF-8">
    5     <title>Badanie nakladania figur 3D</title>
     5    <title>Badanie nakładania figur 3D</title>
    66    <link rel="stylesheet" type="text/css" href="node_modules/react-grid-layout/css/styles.css">
    77    <link rel="stylesheet" type="text/css" href="node_modules/react-resizable/css/styles.css">

  • js/human_3d_alignment/src/index.jsx

    r942 r964  
    44import React from 'react';
    55import Genotypes from './utils/genotypes';
     6import GenotypeParser from './utils/genotypeparser';
    67import TitlePanel from './viewskeleton/titlepanel';
    78import WidgetsContainer from './viewskeleton/widgetscontainer';
    … …  
    1314import EndViewer from './widgets/endviewer';
    1415
    15 const ROUNDS = 15;
     16const ROUNDS = 6;
    1617
    1718const styles = {
    … …  
    9394            selectedSportYears: {value: "empty", label: " "},
    9495            selectedSportHours: {value: "empty", label: " "},
    95             selectedSportType: {value: "empty", label: " "},
     96            selectedSportStrength: {value: "empty", label: " "},
     97            selectedSportCardio: {value: "empty", label: " "},
     98            selectedSportIntellect: {value: "empty", label: " "},
    9699            selectedCons: {value: "empty", label: " "},
    97100            selectedCalculations: {value: "empty", label: " "},
    … …  
    105108            controlMode: 'translate',
    106109            blockView: true,
    107             result: ''
     110            result: '',
     111            random: false,
     112            sequence1: [0, 2, 1, 2, 11, 2],
     113            sequence2: [12, 11, 7, 3, 10, 10],
     114            sequence_len: 6,
     115            sequence_pos: 0,
     116            textValue: ''
    108117        };
    109118
    … …  
    135144        this.handleChangeSportYears = this.handleChangeSportYears.bind(this);
    136145        this.handleChangeSportHours = this.handleChangeSportHours.bind(this);
    137         this.handleChangeSportType = this.handleChangeSportType.bind(this);
     146        this.handleChangeStrengthPercent = this.handleChangeStrengthPercent.bind(this);
     147        this.handleChangeCardioPercent = this.handleChangeCardioPercent.bind(this);
     148        this.handleChangeIntellectPercent = this.handleChangeIntellectPercent.bind(this);
    138149        this.handleChangeCons = this.handleChangeCons.bind(this);
    139150        this.handleChangeCalculations = this.handleChangeCalculations.bind(this);
    140151        this.handleChangeNavigation = this.handleChangeNavigation.bind(this);
    141152        this.handleChangePercent = this.handleChangePercent.bind(this);
     153        this.handleChangeText = this.handleChangeText.bind(this);
    142154        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
    143155        this.handleChangeFitHeight = this.handleChangeFitHeight.bind(this);
    … …  
    173185        this.genotypes = new Genotypes(this, "https://raw.githubusercontent.com/arturolejnik95/human_3d_alignment/master/walking.gen");   //load text from file to this.genotypes
    174186        //or another URL...
    175         let head = "'User ID'|'User IP'|'Gender'|'Year of birth'|'Handeness'|'Sleep hours'|'Sleep hours today'|'YearsGamePlaying'|'HoursGamePlaying'|'Musical experience'|'MusicalDuration'|'Languages'|'SportYears'|'SportHours'|'SportType'|'Cons'|'Calculations'|'Navigation'|'Start time'|'Stop time'|'Position of 1st'|'Position of 2nd'|'Rotation of 1st'|'Rotation of 2nd'|'ID 1st'|'ID 2nd'|'Fit'|'Result'\n"
     187        let head = "'User ID'|'User IP'|'Gender'|'Year of birth'|'Handeness'|'Sleep hours'|'Sleep hours today'|'YearsGamePlaying'|'HoursGamePlaying'|'Musical experience'|'MusicalDuration'|'Languages'|'SportYears'|'SportHours'|'StrengthPercent'|'CardioPercent'|'IntellectPercent'|'Cons'|'Calculations'|'Navigation'|'Start time'|'Stop time'|'Position of 1st'|'Position of 2nd'|'Rotation of 1st'|'Rotation of 2nd'|'ID 1st'|'ID 2nd'|'Fit'|'Result'|'Reason|\n"
    176188        this.handleChangeResult(head);
    177189    }
    … …  
    246258                    this.state.selectedSportYears.value + '|' +
    247259                    this.state.selectedSportHours.value + '|' +
    248                     this.state.selectedSportType.value + '|' +
     260                    this.state.selectedSportStrength.value + '|' +
     261                    this.state.selectedSportCardio.value + '|' +
     262                    this.state.selectedSportIntellect.value + '|' +
    249263                    this.state.selectedCons.value + '|' +
    250264                    this.state.selectedCalculations.value + '|' +
    … …  
    267281            }
    268282        }
    269         fit = fit + '|' + this.state.percent + '\n';
     283        fit = fit + '|' + this.state.percent + '|' + this.state.textValue.split("|").join(","); + '\n';
    270284
    271285        this.sendToServer(fit);
    … …  
    310324     */
    311325    loadNewGenotypes() {
    312         //Firstly it chooses pair of genotypes that user doesnt used before
    313         let rand1, rand2, amount1, amount2, gen1, gen2;
    314 
    315         do {
    316             rand1 = 0, rand2 = 0;
    317             do  {
    318                 while (rand1 == rand2) {
    319                     rand1 = Math.floor(Math.random() * this.state.genotypes);
    320                     rand2 = Math.floor(Math.random() * this.state.genotypes);
    321                 }
    322             } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
    323 
    324             //This part load genotypes to the state
    325             gen1 = this.genotypes.genotype[rand1];
    326             gen2 = this.genotypes.genotype[rand2];
    327             amount1 = gen1.split('').filter(function(sign){return sign === 'X'}).length;
    328             amount2 = gen2.split('').filter(function(sign){return sign === 'X'}).length;
    329             if (amount1 > 0) {
    330                 amount1++;
    331             }
    332             if (amount2 > 0) {
    333                 amount2++
    334             }
    335         } while (amount1 > 52 || amount2 > 52);
    336 
    337         let newpairs = this.state.pairs;
    338         if (amount1 <= amount2) {
    339             newpairs.push([rand1, rand2]);
    340             this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
    341                 console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
    342             });
    343             this.setState({parts1: amount1, parts2: amount2}, function() {
    344                 console.log(this.state.parts1 + ' ' + this.state.parts2);
    345             });
    346         } else {
    347             newpairs.push([rand2, rand1]);
    348             this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
    349                 console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
    350             });
    351             this.setState({parts1: amount2, parts2: amount1}, function() {
    352                 console.log(this.state.parts1 + ' ' + this.state.parts2);
    353             });
    354         }
    355         this.setState({ pairs: newpairs }, function() {
    356             console.log(`Pairs: `, this.state.pairs);
    357         });
    358 
    359         //Load tables of selected parts in fitviewer
    360         let min = Math.min(amount1, amount2);
    361         let s1 = [];
    362         let s2 = [];
    363         for (let i = 0; i < min; i++) {
    364             s1.push((i+1).toString());
    365             s2.push(' ');
    366         }
    367 
    368         //Start new round and load to state tables of selected and round
    369         let r = this.state.round + 1;
    370         this.setState({ round: r, selected1: s1, selected2: s2}, function() {
    371             console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
    372         });
     326         
     327               //Firstly it chooses pair of genotypes that user doesnt used before
     328               let rand1, rand2, amount1, amount2, gen1, gen2;
     329
     330               do {
     331                    if (this.state.random)
     332                    {
     333                         rand1 = 0, rand2 = 0;
     334                         do  {
     335                              while (rand1 == rand2) {
     336                                   rand1 = Math.floor(Math.random() * this.state.genotypes);
     337                                   rand2 = Math.floor(Math.random() * this.state.genotypes);
     338                              }
     339                         } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
     340                    }
     341                    else
     342                    {
     343                         if (this.state.sequence_pos==this.state.sequence_len)
     344                         {
     345                              this.onClickFinish();
     346                         }
     347                         else
     348                         {
     349                              rand1 = this.state.sequence1[this.state.sequence_pos];
     350                              rand2 = this.state.sequence2[this.state.sequence_pos];
     351                                                          this.setState({ sequence_pos: this.state.sequence_pos + 1 }, function() {
     352                              });
     353                                                          console.log("state", this.state.sequence_pos);
     354                         }
     355                    }
     356
     357                    //This part load genotypes to the state
     358                    gen1 = this.genotypes.genotype[rand1];
     359                    gen2 = this.genotypes.genotype[rand2];
     360                   
     361                    let model1 = GenotypeParser.getModelFromGenotype(gen1);
     362                    let model2 = GenotypeParser.getModelFromGenotype(gen2);
     363                   
     364                    amount1 = model1.getPartCount();
     365                    amount2 = model2.getPartCount();
     366     
     367               } while (amount1 > 52 || amount2 > 52);
     368
     369               let newpairs = this.state.pairs;
     370               if (amount1 <= amount2) {
     371                    newpairs.push([rand1, rand2]);
     372                    this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
     373                         console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
     374                    });
     375                    this.setState({parts1: amount1, parts2: amount2}, function() {
     376                         console.log(this.state.parts1 + ' ' + this.state.parts2);
     377                    });
     378               } else {
     379                    newpairs.push([rand2, rand1]);
     380                    this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
     381                         console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
     382                    });
     383                    this.setState({parts1: amount2, parts2: amount1}, function() {
     384                         console.log(this.state.parts1 + ' ' + this.state.parts2);
     385                    });
     386               }
     387               this.setState({ pairs: newpairs }, function() {
     388                    console.log(`Pairs: `, this.state.pairs);
     389               });
     390
     391               //Load tables of selected parts in fitviewer
     392               let min = Math.min(amount1, amount2);
     393               let s1 = [];
     394               let s2 = [];
     395               for (let i = 0; i < min; i++) {
     396                    s1.push((i+1).toString());
     397                    s2.push(' ');
     398               }
     399
     400               //Start new round and load to state tables of selected and round
     401               let r = this.state.round + 1;
     402               this.setState({ round: r, selected1: s1, selected2: s2}, function() {
     403                    console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
     404               });
    373405    }
    374406
    … …  
    377409     */
    378410    isReady() {
    379         if (this.state.selectedSportType.value != 'empty' && this.state.selectedYearsGamePlaying.value != 'empty' && this.state.selectedHoursGamePlaying.value != 'empty' && this.state.selectedMusicalDuration.value != 'empty' && this.state.selectedLanguages.value != 'empty' && this.state.selectedSportYears.value != 'empty' && this.state.selectedSportHours.value != 'empty' && this.state.selectedCons.value != 'empty' && this.state.selectedCalculations.value != 'empty' && this.state.selectedNavigation.value != 'empty' && this.state.selectedMusicalExperience.value != 'empty' && this.state.selectedGender.value != 'empty' && this.state.selectedSleepHoursToday.value != 'empty' && this.state.selectedSleepHours.value != 'empty' && this.state.selectedHand.value != 'empty' && this.state.selectedYear.value != 'empty' && this.state.sliderUpdated) {
     411        if (this.state.textValue && this.state.selectedSportIntellect.value != 'empty' && this.state.selectedSportCardio.value != 'empty' && this.state.selectedSportStrength.value != 'empty' && this.state.selectedYearsGamePlaying.value != 'empty' && this.state.selectedHoursGamePlaying.value != 'empty' && this.state.selectedMusicalDuration.value != 'empty' && this.state.selectedLanguages.value != 'empty' && this.state.selectedSportYears.value != 'empty' && this.state.selectedSportHours.value != 'empty' && this.state.selectedCons.value != 'empty' && this.state.selectedCalculations.value != 'empty' && this.state.selectedNavigation.value != 'empty' && this.state.selectedMusicalExperience.value != 'empty' && this.state.selectedGender.value != 'empty' && this.state.selectedSleepHoursToday.value != 'empty' && this.state.selectedSleepHours.value != 'empty' && this.state.selectedHand.value != 'empty' && this.state.selectedYear.value != 'empty' && this.state.sliderUpdated) {
    380412            this.setState({isDisable: false}, function() {
    381413                console.log(this.state.isDisable);
    … …  
    442474     /**
    443475     * Allow to change sport type in state
    444      * @param {string} sport type choosed sport type by user in listbox
    445      */
    446     handleChangeSportType(sporttype) {
    447         this.setState({ selectedSportType: sporttype }, function() {
    448             console.log(`Sport type selected:`, this.state.selectedSportType);
    449             this.isReady();
    450         });
    451     };
    452    
    453          /**
     476     * @param {Integer} sporttype choosed strenght component
     477     */
     478    handleChangeStrengthPercent(sporttype) {
     479        this.setState({ selectedSportStrength: sporttype }, function() {
     480            console.log(`Sport type selected:`, this.state.selectedSportStrength);
     481            this.isReady();
     482        });
     483    };
     484     
     485     /**
     486     * Allow to change sport type in state
     487     * @param {Integer} sporttype choosed cardio component
     488     */
     489    handleChangeCardioPercent(sporttype) {
     490        this.setState({ selectedSportCardio: sporttype }, function() {
     491            console.log(`Sport type selected:`, this.state.selectedSportCardio);
     492            this.isReady();
     493        });
     494    };
     495     
     496     /**
     497     * Allow to change sport type in state
     498     * @param {Integer} sporttype choosed intellect component
     499     */
     500    handleChangeIntellectPercent(sporttype) {
     501        this.setState({ selectedSportIntellect: sporttype }, function() {
     502            console.log(`Sport type selected:`, this.state.selectedSportIntellect);
     503            this.isReady();
     504        });
     505    };
     506   
     507     /**
    454508     * Allow to years game playing type in state
    455509     * @param {string} gameyp type choosed years game playing by user in listbox
    … …  
    462516    };
    463517
    464         /**
     518    /**
    465519     * Allow to hours game playing type in state
    466520     * @param {string} gamehp type choosed hours game playing by user in listbox
    … …  
    643697        this.setState({ percent: per, sliderUpdated: true }, function() {
    644698            console.log('Percent selected: ' + this.state.percent + ' ' + this.state.sliderUpdated);
     699            this.isReady();
     700        });
     701    }
     702     
     703     /**
     704     * Allow to change text area in state
     705     * @param {string} per text input
     706     */
     707    handleChangeText(per) {
     708        this.setState({ textValue: per }, function() {
     709            console.log('Text value: ' + this.state.textValue);
    645710            this.isReady();
    646711        });
    … …  
    867932                            handleChangeSleepHoursToday = {(hours) => {this.handleChangeSleepHoursToday(hours)}}                           
    868933                            handleChangeGender = {(gen) => {this.handleChangeGender(gen)}}
    869                             handleChangeSportType = {(gen) => {this.handleChangeSportType(gen)}}
     934                            handleChangeStrengthPercent = {(gen) => {this.handleChangeStrengthPercent(gen)}}
     935                            handleChangeCardioPercent = {(gen) => {this.handleChangeCardioPercent(gen)}}
     936                            handleChangeIntellectPercent = {(gen) => {this.handleChangeIntellectPercent(gen)}}
    870937                            handleChangeMusicalExperience = {(gen) => {this.handleChangeMusicalExperience(gen)}}
    871938                            handleChangeHand = {(hand) => {this.handleChangeHand(hand)}}
    … …  
    904971                            onClickNext = {() => {this.onClickNext()}}
    905972                            onClickFinish = {() => {this.onClickFinish()}}
     973                            handleChangeText = {(per) => {this.handleChangeText(per)}}
    906974                            handleChangePercent = {(per) => {this.handleChangePercent(per)}}/>,
    907975                        i: "" + i + 'sliderviewer',

  • 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.