prueba/aplicar page

psicoadmin/src/Components/TipoTest.js

+export const inteligencia = [ 'TERMAN', 'BETAIIR', 'BETAIII', 'IE', 'RAVEN', 'DOMINOS', 'WONDERLIC', 'COIR']
+
+export const comportamiento = [ 'CLEAVER', 'ESTILO', 'VALORES', 'VALORES COMP', 'MOSS', 'KOSTICK', 'ZAVIC', 'VALPER', 'LIFO', ]
+
+export const personalidad = [ 'LUSCHER', 'CPI', 'PGV', 'BFQ', '16FP', 'PIP', 'IMP', 'PVC', 'NIC', ]

psicoadmin/src/Pages/PruebaAsignar.jsx

+import React, { useEffect } from 'react'
+import {Col, Row } from 'react-bootstrap'
+import $ from 'jquery'
+import { inteligencia, comportamiento, personalidad } from '../Components/TipoTest'
+
+
+function CardPrueba(props){
+    return(
+        <Col key={props.id} md="4">
+            <div className="body_prueba">
+                <div className="modern-Checkbox">
+                    <input type="checkbox"  name={`box-${props.id}` } id={`box-${props.id}` } />
+                    <label htmlFor={`box-${props.id}`}>{ props.name }</label>
+                </div>
+            </div>
+        </Col>
+    )
+}
+
 export function PruebaAsignar() {
+
+    function ShowComportamiento() {
+        $("#comportamiento_body").css('display', 'block');
+        $("#personalidad_body").css('display', 'none');
+        $("#inteligencia_body").css('display', 'none');
+        $("#personalidad").removeClass("active");
+        $("#inteligencia").removeClass("active");
+        $("#comportamiento").addClass("active");
+    };
+
+    function ShowPersonalidad() {
+        $("#comportamiento_body").css('display', 'none');
+        $("#personalidad_body").css('display', 'block');
+        $("#inteligencia_body").css('display', 'none');
+        $("#comportamiento").removeClass("active");
+        $("#inteligencia").removeClass("active");
+        $("#personalidad").addClass("active");
+    };
+
+    function ShowInteligencia() {
+        $("#comportamiento_body").css('display', 'none');
+        $("#personalidad_body").css('display', 'none');
+        $("#inteligencia_body").css('display', 'block');
+        $("#comportamiento").removeClass("active");
+        $("#personalidad").removeClass("active");
+        $("#inteligencia").addClass("active");
+    };
+
+
+    useEffect(() => {
+
+        $(".list-unstyled").find('li').removeClass("active");
+        $("#pruebas").addClass("active");
+        $("#aplicar").addClass("active");
+
+        ShowInteligencia();
+
+    },[])
+
+
     return(
         <section>
-            <div class="content-section">
-                <div class="main">
+            <div className="content-section">
+                <div className="main">
                     <h1>Asignación de pruebas</h1>
                     <p>Selecciona el código del candidato y posteriormente las pruebas que deberá ejecutar.</p>
-                    <div class="asignar_usuario">
-                        <div class="row">
-                            <div class="col-md-3">
-                                <div class="datos_candidato">
+                    <div className="asignar_usuario">
+                        <div className="row">
+                            <div className="col-md-3">
+                                <div className="datos_candidato">
                                     <label>Seleccionar código</label>
                                     <select>
                                         <option>001</option>
                                     </select>
                                 </div>
                             </div>
-                            <div class="col-md-3">
-                                <div class="datos_candidato">
+                            <div className="col-md-3">
+                                <div className="datos_candidato">
                                     <label>Nombre</label>
-                                    <input type="text" name="nombre" placeholder="Nombre candidato" readonly/>
+                                    <input type="text" name="nombre" placeholder="Nombre candidato" readOnly/>
                                 </div>
                             </div>
-                            <div class="col-md-3">
-                                <div class="datos_candidato">
+                            <div className="col-md-3">
+                                <div className="datos_candidato">
                                     <label>Edad</label>
-                                    <input type="number" name="text" placeholder="28" readonly/>
+                                    <input type="number" name="text" placeholder="28" readOnly/>
                                 </div>
                             </div>
-                            <div class="col-md-3">
-                                <div class="datos_candidato">
+                            <div className="col-md-3">
+                                <div className="datos_candidato">
                                     <label>Género</label>
-                                    <input type="text" name="genero" placeholder="Hombre" readonly/>
+                                    <input type="text" name="genero" placeholder="Hombre" readOnly/>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="tabs_pruebas">
-                        <div class="row">
-                            <div class="col-md-4">
-                                <div class="test_tab active" id="comportamiento" onclick="comportamiento()">
+                    <div className="tabs_pruebas">
+                        <Row className="row">
+                            <Col md="4">
+                                <div className="test_tab active" id="comportamiento" onClick={ShowComportamiento}>
                                     <p>COMPORTAMIENTO</p>
                                 </div>
-                            </div>
-                            <div class="col-md-4">
-                                <div class="test_tab" id="personalidad" onclick="personalidad()">
+                            </Col>
+                            <Col md="4">
+                                <div className="test_tab" id="personalidad" onClick={ShowPersonalidad}>
                                     <p>PERSONALIDAD</p>
                                 </div>
-                            </div>
-                            <div class="col-md-4">
-                                <div class="test_tab" id="inteligencia" onclick="inteligencia()">
+                            </Col>
+                            <Col md="4">
+                                <div className="test_tab" id="inteligencia" onClick={ShowInteligencia}>
                                     <p>INTELIGENCIA</p>
                                 </div>
-                            </div>
-                        </div>
+                            </Col>
+                        </Row>
                     </div>
-                    <div class="pruebas_grid">
-                        <div class="comportamiento_body" id="comportamiento_body">
-                            <div class="row">
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-1"/>
-                                            <label for="box-1">CLEAVER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-2"/>
-                                            <label for="box-2">ESTILO</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-3"/>
-                                            <label for="box-3">VALORES</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-4"/>
-                                            <label for="box-4">VALORES COMP.</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-5"/>
-                                            <label for="box-5">MOSS</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-6"/>
-                                            <label for="box-6">KOSTICK</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-7"/>
-                                            <label for="box-7">ZAVIC</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-8"/>
-                                            <label for="box-8">VALPER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-9"/>
-                                            <label for="box-9">LIFO</label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                    <div className="pruebas_grid">
+
+                        <div className="comportamiento_body" id="comportamiento_body">
+                            <Row>
+                                {
+                                    comportamiento.map( (test, index) => {
+                                        return (
+                                            <CardPrueba name={test} id={index}/>
+                                        )
+                                    })
+                                }
+                            </Row>
                         </div>
 
 
 
-                        <div class="personalidad_body" id="personalidad_body">
-                            <div class="row">
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-10"/>
-                                            <label for="box-10">LUSCHER</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-11"/>
-                                            <label for="box-11">CPI</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                            <input type="checkbox" id="box-12"/>
-                                            <label for="box-12">PGV</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="body_prueba">
-                                        <div class="modern-Checkbox">
-                                                <input type="checkbox" id="box-13"/>
-                                                <label for="box-13">BFQ</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                                <div class="col-md-4">
-                                                    <div class="body_prueba">
-                                                        <div class="modern-Checkbox">
-                                                            <input type="checkbox" id="box-14"/>
-                                                            <label for="box-14">16FP</label>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="col-md-4">
-                                                    <div class="body_prueba">
-                                                        <div class="modern-Checkbox">
-                                                            <input type="checkbox" id="box-15"/>
-                                                            <label for="box-15">PIP</label>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="col-md-4">
-                                                    <div class="body_prueba">
-                                                        <div class="modern-Checkbox">
-                                                            <input type="checkbox" id="box-16"/>
-                                                            <label for="box-16">IMP</label>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="col-md-4">
-                                                    <div class="body_prueba">
-                                                        <div class="modern-Checkbox">
-                                                            <input type="checkbox" id="box-17"/>
-                                                            <label for="box-17">PVC</label>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="col-md-4">
-                                                    <div class="body_prueba">
-                                                        <div class="modern-Checkbox">
-                                                            <input type="checkbox" id="box-18"/>
-                                                            <label for="box-18">NIC</label>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                </div>
-                            </div>
+                        <div className="personalidad_body" id="personalidad_body">
+                            <Row>
+                                {
+                                    personalidad.map( (test, index) => {
+                                        return (
+                                            <CardPrueba name={test} id={index}/>
+                                        )
+                                    })
+                                }
+                            </Row>
+                        </div>
 
 
 
-                                                <div class="inteligencia_body" id="inteligencia_body">
-                                                    <div class="row">
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-19"/>
-                                                                    <label for="box-19">TERMAN</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-20"/>
-                                                                    <label for="box-20">BETAIIR</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-21"/>
-                                                                    <label for="box-21">BETAIII</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-22"/>
-                                                                    <label for="box-22">IE</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-23"/>
-                                                                    <label for="box-23">RAVEN</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-24"/>
-                                                                    <label for="box-24">DOMINOS</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-25"/>
-                                                                    <label for="box-25">WONDERLIC</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-md-4">
-                                                            <div class="body_prueba">
-                                                                <div class="modern-Checkbox">
-                                                                    <input type="checkbox" id="box-26"/>
-                                                                    <label for="box-26">COIR</label>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
+                        <div className="inteligencia_body" id="inteligencia_body">
+                            <Row>
+                                {
+                                    inteligencia.map( (test, index) => {
+                                        return (
+                                            <CardPrueba name={test} id={index}/>
+                                        )
+                                    })
+                                }
+                            </Row>
+                        </div>
 
 
-                                                <div class="botones_interactivos_asignar">
-                                                    <div class="row">
-                                                        <div class="col-md-12">
-                                                            <a href="/" data-toggle="modal" data-target="#ayudaAsignar">Ayuda</a>
-                                                            <button>Asignar</button>
-                                                        </div>
-                                                    </div>
-                                                </div>
+                        <div className="botones_interactivos_asignar">
+                            <div className="row">
+                                <div className="col-md-12">
+                                    <a href="/" data-toggle="modal" data-target="#ayudaAsignar">Ayuda</a>
+                                    <button>Asignar</button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </section>
+            </div>
+        </section>
     )
 }

psicoadmin/src/Pages/Pruebas.jsx

 import EditIcon from '@mui/icons-material/Edit';
 
 import { useNavigate } from 'react-router-dom'
+import { inteligencia, comportamiento, personalidad } from '../Components/TipoTest'
 
 function Pagination () {
     return(
     
     let navigate = useNavigate()
 
-    var inteligencia = [ 'TERMAN', 'BETAIIR', 'BETAIII', 'IE', 'RAVEN', 'DOMINOS', 'WONDERLIC', 'COIR', ]
-
-    var comportamiento = [ 'CLEAVER', 'ESTILO', 'VALORES', 'VALORES COMP', 'MOSS', 'KOSTICK', 'ZAVIC', 'VALPER', 'LIFO', ]
-
-    var personalidad = [ 'LUSCHER', 'CPI', 'PGV', 'BFQ', '16FP', 'PIP', 'IMP', 'PVC', 'NIC', ]
-
     const all = [...inteligencia, ...comportamiento, ...personalidad]
 
     let [pruebas, setPruebas] = useState(all)