Index: /js/human_3d_alignment/index.html
===================================================================
--- /js/human_3d_alignment/index.html	(revision 963)
+++ /js/human_3d_alignment/index.html	(revision 964)
@@ -3,5 +3,5 @@
 <head lang="en">
     <meta charset="UTF-8">
-    <title>Badanie nakladania figur 3D</title>
+    <title>Badanie nakładania figur 3D</title>
     <link rel="stylesheet" type="text/css" href="node_modules/react-grid-layout/css/styles.css">
     <link rel="stylesheet" type="text/css" href="node_modules/react-resizable/css/styles.css">
Index: /js/human_3d_alignment/src/index.jsx
===================================================================
--- /js/human_3d_alignment/src/index.jsx	(revision 963)
+++ /js/human_3d_alignment/src/index.jsx	(revision 964)
@@ -4,4 +4,5 @@
 import React from 'react';
 import Genotypes from './utils/genotypes';
+import GenotypeParser from './utils/genotypeparser';
 import TitlePanel from './viewskeleton/titlepanel';
 import WidgetsContainer from './viewskeleton/widgetscontainer';
@@ -13,5 +14,5 @@
 import EndViewer from './widgets/endviewer';
 
-const ROUNDS = 15;
+const ROUNDS = 6;
 
 const styles = {
@@ -93,5 +94,7 @@
             selectedSportYears: {value: "empty", label: " "},
             selectedSportHours: {value: "empty", label: " "},
-            selectedSportType: {value: "empty", label: " "},
+            selectedSportStrength: {value: "empty", label: " "},
+            selectedSportCardio: {value: "empty", label: " "},
+            selectedSportIntellect: {value: "empty", label: " "},
             selectedCons: {value: "empty", label: " "},
             selectedCalculations: {value: "empty", label: " "},
@@ -105,5 +108,11 @@
             controlMode: 'translate',
             blockView: true,
-            result: ''
+            result: '',
+            random: false,
+            sequence1: [0, 2, 1, 2, 11, 2],
+            sequence2: [12, 11, 7, 3, 10, 10],
+            sequence_len: 6,
+            sequence_pos: 0,
+            textValue: ''
         };
 
@@ -135,9 +144,12 @@
         this.handleChangeSportYears = this.handleChangeSportYears.bind(this);
         this.handleChangeSportHours = this.handleChangeSportHours.bind(this);
-        this.handleChangeSportType = this.handleChangeSportType.bind(this);
+        this.handleChangeStrengthPercent = this.handleChangeStrengthPercent.bind(this);
+        this.handleChangeCardioPercent = this.handleChangeCardioPercent.bind(this);
+        this.handleChangeIntellectPercent = this.handleChangeIntellectPercent.bind(this);
         this.handleChangeCons = this.handleChangeCons.bind(this);
         this.handleChangeCalculations = this.handleChangeCalculations.bind(this);
         this.handleChangeNavigation = this.handleChangeNavigation.bind(this);
         this.handleChangePercent = this.handleChangePercent.bind(this);
+        this.handleChangeText = this.handleChangeText.bind(this);
         this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
         this.handleChangeFitHeight = this.handleChangeFitHeight.bind(this);
@@ -173,5 +185,5 @@
         this.genotypes = new Genotypes(this, "https://raw.githubusercontent.com/arturolejnik95/human_3d_alignment/master/walking.gen");   //load text from file to this.genotypes
         //or another URL...
-        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"
+        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"
         this.handleChangeResult(head);
     }
@@ -246,5 +258,7 @@
                     this.state.selectedSportYears.value + '|' +
                     this.state.selectedSportHours.value + '|' +
-                    this.state.selectedSportType.value + '|' +
+                    this.state.selectedSportStrength.value + '|' +
+                    this.state.selectedSportCardio.value + '|' +
+                    this.state.selectedSportIntellect.value + '|' +
                     this.state.selectedCons.value + '|' +
                     this.state.selectedCalculations.value + '|' +
@@ -267,5 +281,5 @@
             }
         }
-        fit = fit + '|' + this.state.percent + '\n';
+        fit = fit + '|' + this.state.percent + '|' + this.state.textValue.split("|").join(","); + '\n';
 
         this.sendToServer(fit);
@@ -310,65 +324,83 @@
      */
     loadNewGenotypes() {
-        //Firstly it chooses pair of genotypes that user doesnt used before
-        let rand1, rand2, amount1, amount2, gen1, gen2;
-
-        do {
-            rand1 = 0, rand2 = 0;
-            do  {
-                while (rand1 == rand2) {
-                    rand1 = Math.floor(Math.random() * this.state.genotypes);
-                    rand2 = Math.floor(Math.random() * this.state.genotypes);
-                }
-            } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
-
-            //This part load genotypes to the state
-            gen1 = this.genotypes.genotype[rand1];
-            gen2 = this.genotypes.genotype[rand2];
-            amount1 = gen1.split('').filter(function(sign){return sign === 'X'}).length;
-            amount2 = gen2.split('').filter(function(sign){return sign === 'X'}).length;
-            if (amount1 > 0) {
-                amount1++;
-            }
-            if (amount2 > 0) {
-                amount2++
-            }
-        } while (amount1 > 52 || amount2 > 52);
-
-        let newpairs = this.state.pairs;
-        if (amount1 <= amount2) {
-            newpairs.push([rand1, rand2]);
-            this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
-                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
-            });
-            this.setState({parts1: amount1, parts2: amount2}, function() {
-                console.log(this.state.parts1 + ' ' + this.state.parts2);
-            });
-        } else {
-            newpairs.push([rand2, rand1]);
-            this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
-                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
-            });
-            this.setState({parts1: amount2, parts2: amount1}, function() {
-                console.log(this.state.parts1 + ' ' + this.state.parts2);
-            });
-        }
-        this.setState({ pairs: newpairs }, function() {
-            console.log(`Pairs: `, this.state.pairs);
-        });
-
-        //Load tables of selected parts in fitviewer
-        let min = Math.min(amount1, amount2);
-        let s1 = [];
-        let s2 = [];
-        for (let i = 0; i < min; i++) {
-            s1.push((i+1).toString());
-            s2.push(' ');
-        }
-
-        //Start new round and load to state tables of selected and round
-        let r = this.state.round + 1;
-        this.setState({ round: r, selected1: s1, selected2: s2}, function() {
-            console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
-        });
+          
+               //Firstly it chooses pair of genotypes that user doesnt used before
+               let rand1, rand2, amount1, amount2, gen1, gen2;
+
+               do {
+                    if (this.state.random)
+                    {
+                         rand1 = 0, rand2 = 0;
+                         do  {
+                              while (rand1 == rand2) {
+                                   rand1 = Math.floor(Math.random() * this.state.genotypes);
+                                   rand2 = Math.floor(Math.random() * this.state.genotypes);
+                              }
+                         } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
+                    }
+                    else
+                    {
+                         if (this.state.sequence_pos==this.state.sequence_len)
+                         {
+                              this.onClickFinish();
+                         }
+                         else
+                         {
+                              rand1 = this.state.sequence1[this.state.sequence_pos];
+                              rand2 = this.state.sequence2[this.state.sequence_pos];
+							  this.setState({ sequence_pos: this.state.sequence_pos + 1 }, function() {
+                              });
+							  console.log("state", this.state.sequence_pos);
+                         }
+                    }
+
+                    //This part load genotypes to the state
+                    gen1 = this.genotypes.genotype[rand1];
+                    gen2 = this.genotypes.genotype[rand2];
+                    
+                    let model1 = GenotypeParser.getModelFromGenotype(gen1);
+                    let model2 = GenotypeParser.getModelFromGenotype(gen2);
+                    
+                    amount1 = model1.getPartCount();
+                    amount2 = model2.getPartCount();
+     
+               } while (amount1 > 52 || amount2 > 52);
+
+               let newpairs = this.state.pairs;
+               if (amount1 <= amount2) {
+                    newpairs.push([rand1, rand2]);
+                    this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
+                         console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
+                    });
+                    this.setState({parts1: amount1, parts2: amount2}, function() {
+                         console.log(this.state.parts1 + ' ' + this.state.parts2);
+                    });
+               } else {
+                    newpairs.push([rand2, rand1]);
+                    this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
+                         console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
+                    });
+                    this.setState({parts1: amount2, parts2: amount1}, function() {
+                         console.log(this.state.parts1 + ' ' + this.state.parts2);
+                    });
+               }
+               this.setState({ pairs: newpairs }, function() {
+                    console.log(`Pairs: `, this.state.pairs);
+               });
+
+               //Load tables of selected parts in fitviewer
+               let min = Math.min(amount1, amount2);
+               let s1 = [];
+               let s2 = [];
+               for (let i = 0; i < min; i++) {
+                    s1.push((i+1).toString());
+                    s2.push(' ');
+               }
+
+               //Start new round and load to state tables of selected and round
+               let r = this.state.round + 1;
+               this.setState({ round: r, selected1: s1, selected2: s2}, function() {
+                    console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
+               });
     }
 
@@ -377,5 +409,5 @@
      */
     isReady() {
-        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) {
+        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) {
             this.setState({isDisable: false}, function() {
                 console.log(this.state.isDisable);
@@ -442,14 +474,36 @@
      /**
      * Allow to change sport type in state
-     * @param {string} sport type choosed sport type by user in listbox 
-     */
-    handleChangeSportType(sporttype) {
-        this.setState({ selectedSportType: sporttype }, function() {
-            console.log(`Sport type selected:`, this.state.selectedSportType);
-            this.isReady();
-        });
-    };
-    
-	 /**
+     * @param {Integer} sporttype choosed strenght component
+     */
+    handleChangeStrengthPercent(sporttype) {
+        this.setState({ selectedSportStrength: sporttype }, function() {
+            console.log(`Sport type selected:`, this.state.selectedSportStrength);
+            this.isReady();
+        });
+    };
+     
+     /**
+     * Allow to change sport type in state
+     * @param {Integer} sporttype choosed cardio component 
+     */
+    handleChangeCardioPercent(sporttype) {
+        this.setState({ selectedSportCardio: sporttype }, function() {
+            console.log(`Sport type selected:`, this.state.selectedSportCardio);
+            this.isReady();
+        });
+    };
+     
+     /**
+     * Allow to change sport type in state
+     * @param {Integer} sporttype choosed intellect component
+     */
+    handleChangeIntellectPercent(sporttype) {
+        this.setState({ selectedSportIntellect: sporttype }, function() {
+            console.log(`Sport type selected:`, this.state.selectedSportIntellect);
+            this.isReady();
+        });
+    };
+    
+     /**
      * Allow to years game playing type in state
      * @param {string} gameyp type choosed years game playing by user in listbox 
@@ -462,5 +516,5 @@
     };
 
-	 /**
+     /**
      * Allow to hours game playing type in state
      * @param {string} gamehp type choosed hours game playing by user in listbox 
@@ -643,4 +697,15 @@
         this.setState({ percent: per, sliderUpdated: true }, function() {
             console.log('Percent selected: ' + this.state.percent + ' ' + this.state.sliderUpdated);
+            this.isReady();
+        });
+    }
+     
+     /**
+     * Allow to change text area in state
+     * @param {string} per text input
+     */
+    handleChangeText(per) {
+        this.setState({ textValue: per }, function() {
+            console.log('Text value: ' + this.state.textValue);
             this.isReady();
         });
@@ -867,5 +932,7 @@
                             handleChangeSleepHoursToday = {(hours) => {this.handleChangeSleepHoursToday(hours)}}                            
                             handleChangeGender = {(gen) => {this.handleChangeGender(gen)}}
-                            handleChangeSportType = {(gen) => {this.handleChangeSportType(gen)}}
+                            handleChangeStrengthPercent = {(gen) => {this.handleChangeStrengthPercent(gen)}}
+                            handleChangeCardioPercent = {(gen) => {this.handleChangeCardioPercent(gen)}}
+                            handleChangeIntellectPercent = {(gen) => {this.handleChangeIntellectPercent(gen)}}
                             handleChangeMusicalExperience = {(gen) => {this.handleChangeMusicalExperience(gen)}}
                             handleChangeHand = {(hand) => {this.handleChangeHand(hand)}}
@@ -904,4 +971,5 @@
                             onClickNext = {() => {this.onClickNext()}}
                             onClickFinish = {() => {this.onClickFinish()}}
+                            handleChangeText = {(per) => {this.handleChangeText(per)}}
                             handleChangePercent = {(per) => {this.handleChangePercent(per)}}/>,
                         i: "" + i + 'sliderviewer',
Index: /js/human_3d_alignment/src/widgets/endviewer.jsx
===================================================================
--- /js/human_3d_alignment/src/widgets/endviewer.jsx	(revision 963)
+++ /js/human_3d_alignment/src/widgets/endviewer.jsx	(revision 964)
@@ -56,7 +56,8 @@
             <div id = 'end' style={styles.content}>
                 <div style={styles.text}>Dziękujemy za udział w badaniu!</div>
-                <!--div>
+					{/*<div>
                     <button styles={styles.text} onClick={() => {this.download('text/plain')}}>Pobierz wyniki</button>
-            </div-->
+				    </div>*/}
+			</div>
         );
     }
Index: /js/human_3d_alignment/src/widgets/fitviewer.jsx
===================================================================
--- /js/human_3d_alignment/src/widgets/fitviewer.jsx	(revision 963)
+++ /js/human_3d_alignment/src/widgets/fitviewer.jsx	(revision 964)
@@ -8,5 +8,16 @@
     header: {
         textAlign: 'center',
+        lineHeight: '0.1',
         letterSpacing: '5px',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
+        webkitUserSelect : 'none', 
+        mozUserSelect: 'none', 
+        msUserSelect: 'none', 
+        userSelect: 'none'
+    },
+        info: {
+        textAlign: 'center',
+        lineHeight: '0.1',
+        fontSize: '10px',
         fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
         webkitUserSelect : 'none', 
@@ -116,21 +127,16 @@
         this.createThirdRow = this.createThirdRow.bind(this);
         this.createFourthRow = this.createFourthRow.bind(this);
-        this.selectLetter = this.selectLetter.bind(this);
-        this.selectNumber = this.selectNumber.bind(this);
-    }
-
-    selectNumber(e) {
+        this.select = this.select.bind(this);
+    }
+
+    select(e) {
         let item = null;
         let index;
 
-        let type = 0;
-
         for (let i = 0; i < this.props.parts1; i++) {
             let index2 = (i+1).toString();
-            let itemRow1 =  document.querySelector('#rowField1');
             let itemD = document.querySelector('#creature' + index2);
             let itemP = document.querySelector('#p' + index2);
-            if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow1) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow1)) {
-                type = 1;
+            if (e.target === itemD || e.target === itemP) {
                 item = null;
                 index = index2;
@@ -138,43 +144,4 @@
             }
         }
-
-        if (this.state.choosed != ' ') {
-            if (type == 0) {
-                this.setState({ choosed: ' ' }, function() {
-                    console.log(this.state.choosed);
-                });
-            } else {
-                if (!isNaN(this.state.choosed)) {
-                    let index1 = this.props.selected1.indexOf(index.toString());
-                    let index2 = this.props.selected1.indexOf(this.state.choosed);
-
-                    this.props.handleChangeSelected(1, index1, this.state.choosed);
-                    this.props.handleChangeSelected(1, index2, index.toString());
-
-                    this.setState({ choosed: ' ' }, function() {
-                        console.log(this.state.choosed);
-                    });
-                } else {
-                    this.setState({ choosed: index }, function() {
-                        console.log(this.state.choosed);
-                    });
-                }
-    
-                    
-            }
-        } else {
-            if (item != null) {
-                this.setState({ choosed: index }, function() {
-                    console.log(this.state.choosed);
-                });
-            }
-        }
-    }
-
-    selectLetter(e) {
-        let index;
-        let indexL;
-
-        let type = 0;
 
         for (let i = 0; i < this.props.parts2; i++) {
@@ -184,94 +151,133 @@
             } else {
                 index2 = String.fromCharCode(i + 1 + 64);
-            }
-            let itemRow2 =  document.querySelector('#rowCreature2');
+            }     
             let itemD = document.querySelector('#creature' + index2);
             let itemP = document.querySelector('#p' + index2);
-
-            if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow2) ||
-                (e.target === itemD && e.target.parentNode.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode.parentNode == itemRow2)) {
-                type = 1;
+            if (e.target === itemD || e.target === itemP) {
+                item = null;
                 index = index2;
-                indexL = index2;
-                if (indexL.charCodeAt(0) > 90) {
-                    indexL = String.fromCharCode(indexL.charCodeAt(0) - 6);
-                }
+                item = document.querySelector('#creature' + index);
             }
         }
 
         if (this.state.choosed != ' ') {
-            if (type == 0) {
-                for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
-                    let index2 = (i+1).toString();
-                    let itemD =  document.querySelector('#field2-' + index2);
-
-                    if (e.target === itemD) {
-                        let temp = this.state.choosed;
-                        if (this.state.choosed.charCodeAt(0) > 90) {
-                            temp = String.fromCharCode(temp.charCodeAt(0) - 6);
+            if (!item) {
+                if (!isNaN(this.state.choosed)) {
+                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
+                        let index2 = (i+1).toString();
+                        let itemD =  document.querySelector('#field1-' + index2);
+
+                        
+                        if (e.target === itemD) {
+                            let index3 = this.props.selected1.indexOf(this.state.choosed);
+
+                            if (index3 > -1) {
+                                this.props.handleChangeSelected(1, index3, ' ');
+                            }
+                            this.props.handleChangeSelected(1, i, this.state.choosed);
                         }
-
-                        let index3 = this.props.selected2.indexOf(temp);
-
-                        if (index3 > -1) {
-                            this.props.handleChangeSelected(2, index3, ' ');
+                    }
+                } else {
+                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
+                        let index2 = (i+1).toString();
+                        let itemD =  document.querySelector('#field2-' + index2);
+
+                        
+                        if (e.target === itemD) {
+
+                            let temp = this.state.choosed;
+                            if (this.state.choosed.charCodeAt(0) > 90) {
+                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
+                            }
+
+                            let index3 = this.props.selected2.indexOf(temp);
+
+                            if (index3 > -1) {
+                                this.props.handleChangeSelected(2, index3, ' ');
+                            }
+                            this.props.handleChangeSelected(2, i, this.state.choosed);
                         }
-                        this.props.handleChangeSelected(2, i, this.state.choosed);
                     }
-
-                }
-
+                }
                 this.setState({ choosed: ' ' }, function() {
                     console.log(this.state.choosed);
                 });
+
             } else {
-                if (isNaN(this.state.choosed)) {
-
+                let item2 = document.querySelector('#creature' + this.state.choosed);
+                if ((item.parentNode.parentNode.parentNode.className == 'rowField' || item.parentNode.parentNode.parentNode.className == 'rowBench') &&
+                    (item2.parentNode.parentNode.parentNode.className == 'rowField' || item2.parentNode.parentNode.parentNode.className == 'rowBench')) {
+                    let nr = 0;
+                    let index1 = 0;
+                    let index2 = 0;
                     let temp = this.state.choosed;
-                    if (temp.charCodeAt(0) > 90) {
+                    if (this.state.choosed.charCodeAt(0) > 90) {
                         temp = String.fromCharCode(temp.charCodeAt(0) - 6);
                     }
-
-                    if (indexL == temp) {
+                    if (!isNaN(this.state.choosed)) {
+                        nr = 1;
+                        index1 = this.props.selected1.indexOf(this.state.choosed);
+                        index2 = this.props.selected1.indexOf(index);
+                    } else {
+                        nr = 2;
+                        let temp1 = this.state.choosed;
+                        let temp2 = index;
+                        if (this.state.choosed.charCodeAt(0) > 90) {
+                            temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6);
+                        }
+                        if (index.charCodeAt(0) > 90) {
+                            temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
+                        }
+
+                        index1 = this.props.selected2.indexOf(temp);
+                        index2 = this.props.selected2.indexOf(temp2);
+                    }
+                    this.props.handleChangeSelected(nr, index1, index);
+                    this.props.handleChangeSelected(nr, index2, this.state.choosed);
+
+                    this.setState({ choosed: ' ' }, function() {
+                        console.log(this.state.choosed);
+                    });
+                } else {
+                    if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode || 
+                        item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) {
+                        let nr = 0;
+                        let index1 = 0;
+                        let index2 = 0;
+                        if (!isNaN(this.state.choosed)) {
+                            nr = 1;
+                            index1 = this.props.selected1.indexOf(this.state.choosed);
+                            index2 = this.props.selected1.indexOf(index);
+                        } else {
+                            nr = 2;
+                            let temp = this.state.choosed;
+                            let temp2 = index;
+                            if (this.state.choosed.charCodeAt(0) > 90) {
+                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
+                            }
+                            if (index.charCodeAt(0) > 90) {
+                                temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
+                            }
+                            index1 = this.props.selected2.indexOf(temp);
+                            index2 = this.props.selected2.indexOf(temp2);
+                        }
+                        this.props.handleChangeSelected(nr, index1, index);
+                        this.props.handleChangeSelected(nr, index2, this.state.choosed);
                         this.setState({ choosed: ' ' }, function() {
                             console.log(this.state.choosed);
                         });
                     } else {
-                        let index1 = this.props.selected2.indexOf(indexL);
-                        let index2 = this.props.selected2.indexOf(temp);
-
-                        if (index1 > -1 && index2 > -1) {
-                            this.props.handleChangeSelected(2, index1, this.state.choosed);
-                            this.props.handleChangeSelected(2, index2, index);
-                            this.setState({ choosed: ' ' }, function() {
-                                console.log(this.state.choosed);
-                            });
-                        } else if (index1 > -1 && index2 <= -1) {
-                            this.props.handleChangeSelected(2, index1, this.state.choosed);
-                            this.setState({ choosed: ' ' }, function() {
-                                console.log(this.state.choosed);
-                            });
-                        } else if (index1 <= -1 && index2 > -1) {
-                            this.props.handleChangeSelected(2, index2, indexL);
-                            this.setState({ choosed: ' ' }, function() {
-                                console.log(this.state.choosed);
-                            });
-                        } else {
-                            this.setState({ choosed: index }, function() {
-                                console.log(this.state.choosed);
-                            });
-                        }
+                        this.setState({ choosed: index }, function() {
+                            console.log(this.state.choosed);
+                        });
                     }
-                } else {
-                    this.setState({ choosed: index }, function() {
-                        console.log(this.state.choosed);
-                    });
-                }
-            }
-            
+                }
+            }
         } else {
-            this.setState({ choosed: index }, function() {
-                console.log(this.state.choosed);
-            });
+            if (item != null) {
+                this.setState({ choosed: index }, function() {
+                    console.log(this.state.choosed);
+                });
+            }
         }
     }
@@ -290,5 +296,5 @@
                                 <div id={'creature' + this.props.selected1[i]} 
                                     className='creature1' 
-                                    onMouseDown={this.selectNumber}
+                                    onMouseDown={this.select}
                                     style={styles.creatureBench1}>
                                     <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
@@ -307,5 +313,5 @@
                                 <div id={'creature' + this.props.selected1[i]} 
                                     className='creature1' 
-                                    onMouseDown={this.selectNumber}
+                                    onMouseDown={this.select}
                                     style={styles.creatureBench}>
                                     <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
@@ -321,5 +327,5 @@
                     <div id='cellnull' className='cell' style={styles.cell}>
                         <div id={'field1-'+(i+1).toString()} 
-                            onMouseDown = {this.selectNumber}
+                            onMouseDown = {this.select}
                             className='field'
                             style={styles.middleField}>
@@ -357,5 +363,5 @@
                                 <div id={'creature' + value}
                                     className='creature2' 
-                                    onMouseDown={this.selectLetter}
+                                    onMouseDown={this.select}
                                     style={styles.creatureBench2}>
                                     <p id={'p' + value} style={styles.creatureText}>
@@ -374,5 +380,5 @@
                                 <div id={'creature' + value} 
                                     className='creature2' 
-                                    onMouseDown={this.selectLetter}
+                                    onMouseDown={this.select}
                                     style={styles.creatureBench}>
                                     <p id={'p' + value} style={styles.creatureText}>
@@ -388,5 +394,5 @@
                     <div id='cellnull' className='cell' style={styles.cell}>
                         <div id={'field2-'+(i+1).toString()} 
-                            onMouseDown = {this.selectLetter}
+                            onMouseDown = {this.select}
                             className='field'
                             style={styles.middleField}>
@@ -421,5 +427,5 @@
                             <div id={'creature' + idtext} 
                                 className='creature2' 
-                                onMouseDown={this.selectLetter}
+                                onMouseDown={this.select}
                                 style={styles.creatureBench2}>
                                 <p id={'p' + idtext} style={styles.creatureText}>
@@ -434,5 +440,5 @@
                             <div id={'creature' + idtext}
                                 className='creature2' 
-                                onMouseDown={this.selectLetter}
+                                onMouseDown={this.select}
                                 style={styles.creatureBench}>
                                 <p id={'p' + idtext} style={styles.creatureText}>
@@ -460,20 +466,22 @@
 
         return (
-            <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'}}>
+            <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'}}>*/}
                 <h2 className='title' style={styles.header}>
                     DOPASOWANIE
                 </h2>
-
-                <div key='rowsFields' className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
-                    <div id='rowCreature1' onMouseDown = {this.selectNumber}>
-                        <div id='rowField1' className='rowField' onMouseDown = {this.selectNumber} style={styles.row}>
+                <div key='rowsFields' onMouseDown = {this.select} className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
+                    <div id='rowCreature1' onMouseDown = {this.select}>
+                        <div id='rowField1' className='rowField' onMouseDown = {this.select} style={styles.row}>
                             {this.createSecondRow()}
                         </div>
                     </div>
-                    <div id='rowCreature2' onMouseDown = {this.selectLetter}>
-                        <div id='rowField2' className='rowField' onMouseDown = {this.selectLetter} style={styles.row}>
+                  <div className='text' style={styles.info}>
+                    w najwyższy rząd cyferek nie klikamy
+                  </div>
+                    <div id='rowCreature2'>
+                        <div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
                             {this.createThirdRow()}
                         </div>
-                        <div id='rowBench2' className='rowBench' onMouseDown = {this.selectLetter} style={styles.row}>
+                        <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
                             {this.createFourthRow()}
                         </div>
Index: /js/human_3d_alignment/src/widgets/parmviewer.jsx
===================================================================
--- /js/human_3d_alignment/src/widgets/parmviewer.jsx	(revision 963)
+++ /js/human_3d_alignment/src/widgets/parmviewer.jsx	(revision 964)
@@ -53,4 +53,11 @@
 for (let i = 0; i < 11; i += 1) {
     language_num.push({ value: i, label: i });
+}
+
+const percent_num = [];
+percent_num.push({value: 'empty', label: ' '})
+    
+for (let i = 0; i < 101; i += 10) {
+    percent_num.push({ value: i, label: i });
 }
 
@@ -136,5 +143,5 @@
                 <div style={styles.header}/>
                 <div className='age' style={styles.row}>
-                    <span htmlFor="age" style={styles.desc}>Wiek</span>
+                    <span htmlFor="age" style={styles.desc}>Rok urodzenia</span>
                     <Select 
                         options={years}
@@ -291,19 +298,43 @@
                     <div style={styles.ind}/>
                 </div>
-                <div className='sport_type' style={styles.row}>
-                    <span htmlFor="sport_type" style={styles.desc}>Typ aktywności sportowej</span>
-                    <Select 
-                        options= {sports}
-                        onChange={this.props.handleChangeSportType}
-                        placeholder={'Wybierz typ aktywności sportowej'}
-                        display={'table-cell'}
-                        height={'20px'} 
-                        styles={styles.select}
-                        noValidate
-                    />
-                    <div style={styles.ind}/>
-                </div>
-                
-                <div style={styles.interval}/>
+                <div className='strength_percent' style={styles.row}>
+                    <span htmlFor="strength_percent" style={styles.desc}>Procent komponentu siłowego w aktywności sportowej</span>
+                    <Select 
+                        options= {percent_num}
+                        onChange={this.props.handleChangeStrengthPercent}
+                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent siłowy'}
+                        display={'table-cell'}
+                        height={'20px'} 
+                        styles={styles.select}
+                        noValidate
+                    />
+                    <div style={styles.ind}/>
+                </div>
+                <div className='cardio_percent' style={styles.row}>
+                    <span htmlFor="cardio_percent" style={styles.desc}>Procent komponentu wytrzymałościowego w aktywności sportowej</span>
+                    <Select 
+                        options= {percent_num}
+                        onChange={this.props.handleChangeCardioPercent}
+                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent wytrzymałościowy'}
+                        display={'table-cell'}
+                        height={'20px'} 
+                        styles={styles.select}
+                        noValidate
+                    />
+                    <div style={styles.ind}/>
+                </div>
+                    <div className='intellect_percent' style={styles.row}>
+                    <span htmlFor="intellect_percent" style={styles.desc}>Procent komponentu intelektualnego w aktywności sportowej</span>
+                    <Select 
+                        options= {percent_num}
+                        onChange={this.props.handleChangeIntellectPercent}
+                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent intelektualny'}
+                        display={'table-cell'}
+                        height={'20px'} 
+                        styles={styles.select}
+                        noValidate
+                    />
+                    <div style={styles.ind}/>
+                </div>
                 <div className='cons' style={styles.row}>
                     <span htmlFor="cons" style={styles.desc}>Uważam się za osobę sumienną</span>
Index: /js/human_3d_alignment/src/widgets/sliderviewer.jsx
===================================================================
--- /js/human_3d_alignment/src/widgets/sliderviewer.jsx	(revision 963)
+++ /js/human_3d_alignment/src/widgets/sliderviewer.jsx	(revision 964)
@@ -42,4 +42,9 @@
         width: '80%'
     },
+    textArea: {
+        display: 'table',
+    marginLeft: 'auto',
+    marginRight: 'auto'
+    },
     nextButton: {
         width: '250px',
@@ -76,8 +81,10 @@
         this.props = props;
         this.state = { 
-            percent: 50
+            percent: 50,
+            textValue: ''
         }
 
         this.handleChangePercent = this.handleChangePercent.bind(this);
+        this.handleChangeText = this.handleChangeText.bind(this);
         this.onClickNext = this.onClickNext.bind(this);
     }
@@ -88,7 +95,13 @@
      */
     handleChangePercent(per) {
-		this.setState({ percent: per.x }, function() {
+        this.setState({ percent: per.x }, function() {
             console.log(this.state.percent);
             this.props.handleChangePercent(this.state.percent);
+        });
+    }
+    
+    handleChangeText(text_) {
+        this.setState({ textValue: text_.target.value }, function() {
+            this.props.handleChangeText(this.state.textValue);
         });
     }
@@ -103,4 +116,8 @@
                 console.log(this.state.percent);
                 this.props.handleChangePercent(this.state.percent);
+            });
+            this.setState({ textValue: '' }, function() {
+                console.log(this.state.percent);
+                this.props.handleChangeText(this.state.textValue);
             });
         } else {
@@ -146,5 +163,10 @@
                     </button>
                 </div>
-                <div style={styles.small_interval}/>
+                <div style={styles.interval}/>
+                
+                <div className="text">
+                <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'}/>
+                </div>
+                {/*
                 <div style={styles.finishButton_position}>
                     <button type='button' onClick={this.props.onClickFinish} style={styles.finishButton}>
@@ -152,4 +174,5 @@
                     </button>
                 </div>
+                */}
                 
             </div>
