Index: js/human_3d_alignment/src/widgets/endviewer.jsx
===================================================================
--- js/human_3d_alignment/src/widgets/endviewer.jsx	(revision 943)
+++ 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 943)
+++ 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 943)
+++ 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 943)
+++ 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>
