<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test: ¿Qué perfil STEM financiero tienes?</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
/* Sección 1: Bienvenida */
.bienvenida {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
color: white;
padding: 50px 30px;
text-align: center;
}
.bienvenida h1 {
font-size: 2.8em;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.bienvenida .objetivo {
font-size: 1.2em;
line-height: 1.8;
opacity: 0.95;
max-width: 700px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(10px);
}
/* Sección 2: Formulario */
.formulario {
padding: 40px 30px;
}
.pregunta {
margin-bottom: 30px;
padding: 25px;
background: #f8f9fa;
border-radius: 10px;
border-left: 5px solid #2a5298;
transition: all 0.3s ease;
}
.pregunta:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.pregunta h3 {
color: #1e3c72;
margin-bottom: 18px;
font-size: 1.15em;
font-weight: 600;
}
.opciones {
display: flex;
flex-direction: column;
gap: 12px;
}
.opcion {
display: flex;
align-items: center;
padding: 15px;
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.opcion:hover {
background: #e3f2fd;
border-color: #2a5298;
transform: translateX(5px);
}
.opcion input[type="radio"] {
margin-right: 12px;
cursor: pointer;
width: 20px;
height: 20px;
accent-color: #2a5298;
}
.opcion label {
cursor: pointer;
flex: 1;
font-size: 1.05em;
}
.btn-enviar {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
color: white;
border: none;
padding: 18px 50px;
font-size: 1.2em;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
display: block;
margin: 40px auto 0;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(42, 82, 152, 0.4);
}
.btn-enviar:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(42, 82, 152, 0.6);
}
/* Sección 3: Resultado */
.resultado {
padding: 50px 30px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-top: 5px solid #2a5298;
display: none;
}
.resultado.mostrar {
display: block;
}
.resultado h2 {
color: #1e3c72;
text-align: center;
margin-bottom: 30px;
font-size: 2.2em;
}
.perfil-box {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
max-width: 700px;
margin: 0 auto;
}
.perfil-icono {
text-align: center;
font-size: 4em;
margin-bottom: 20px;
}
.perfil-tipo {
font-size: 2.5em;
font-weight: bold;
color: #2a5298;
margin-bottom: 20px;
text-align: center;
}
.perfil-descripcion {
font-size: 1.15em;
color: #333;
line-height: 1.8;
margin-bottom: 25px;
}
.perfil-caracteristicas {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #2a5298;
}
.perfil-caracteristicas h4 {
color: #1e3c72;
margin-bottom: 15px;
font-size: 1.3em;
}
.perfil-caracteristicas ul {
list-style: none;
padding: 0;
}
.perfil-caracteristicas li {
padding: 8px 0;
padding-left: 25px;
position: relative;
color: #555;
font-size: 1.05em;
}
.perfil-caracteristicas li:before {
content: "✓";
position: absolute;
left: 0;
color: #2a5298;
font-weight: bold;
font-size: 1.2em;
}
.error {
color: #dc3545;
text-align: center;
padding: 15px;
background: #f8d7da;
border-radius: 8px;
margin-top: 20px;
display: none;
border: 2px solid #f5c2c7;
}
.error.mostrar {
display: block;
}
@media (max-width: 600px) {
.bienvenida h1 {
font-size: 2em;
}
.formulario {
padding: 20px 15px;
}
.pregunta {
padding: 20px 15px;
}
.perfil-box {
padding: 25px 20px;
}
.perfil-tipo {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Sección 1: Bienvenida -->
<div class="bienvenida">
<h1>🧪 Test: ¿Qué perfil STEM financiero tienes?</h1>
<div class="objetivo">
<strong>🎯 Objetivo:</strong><br>
Identificar tu perfil profesional en el cruce entre finanzas y tecnología para inspirarte a explorar roles STEM. Responde honestamente y descubre cómo puedes potenciar tu carrera.
</div>
</div>
<!-- Sección 2: Formulario de Preguntas -->
<div class="formulario">
<form id="formularioPerfil">
<!-- Pregunta 1 -->
<div class="pregunta">
<h3>1. ¿Qué parte de tu trabajo disfrutas más?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p1" value="A" id="p1a">
<label for="p1a">Analizar datos y encontrar patrones.</label>
</div>
<div class="opcion">
<input type="radio" name="p1" value="B" id="p1b">
<label for="p1b">Optimizar procesos y eliminar tareas repetitivas.</label>
</div>
<div class="opcion">
<input type="radio" name="p1" value="C" id="p1c">
<label for="p1c">Evaluar impacto económico y tomar decisiones estratégicas.</label>
</div>
</div>
</div>
<!-- Pregunta 2 -->
<div class="pregunta">
<h3>2. ¿Qué herramienta te gustaría dominar?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p2" value="A" id="p2a">
<label for="p2a">Power BI, SQL, Python.</label>
</div>
<div class="opcion">
<input type="radio" name="p2" value="B" id="p2b">
<label for="p2b">RPA, Excel con macros, scripts.</label>
</div>
<div class="opcion">
<input type="radio" name="p2" value="C" id="p2c">
<label for="p2c">Excel avanzado, simuladores financieros.</label>
</div>
</div>
</div>
<!-- Pregunta 3 -->
<div class="pregunta">
<h3>3. ¿Qué tipo de proyecto te entusiasma más?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p3" value="A" id="p3a">
<label for="p3a">Crear dashboards para visualizar KPIs financieros.</label>
</div>
<div class="opcion">
<input type="radio" name="p3" value="B" id="p3b">
<label for="p3b">Automatizar tareas contables o de conciliación.</label>
</div>
<div class="opcion">
<input type="radio" name="p3" value="C" id="p3c">
<label for="p3c">Evaluar la rentabilidad de una nueva plataforma digital.</label>
</div>
</div>
</div>
<!-- Pregunta 4 -->
<div class="pregunta">
<h3>4. ¿Cuál de estas frases te representa mejor?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p4" value="A" id="p4a">
<label for="p4a">"Los datos me ayudan a tomar mejores decisiones."</label>
</div>
<div class="opcion">
<input type="radio" name="p4" value="B" id="p4b">
<label for="p4b">"Si algo se repite, ¡hay que automatizarlo!"</label>
</div>
<div class="opcion">
<input type="radio" name="p4" value="C" id="p4c">
<label for="p4c">"Toda inversión debe tener retorno."</label>
</div>
</div>
</div>
<!-- Pregunta 5 -->
<div class="pregunta">
<h3>5. ¿Qué impacto te gustaría generar en tu equipo?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p5" value="A" id="p5a">
<label for="p5a">Mejorar la toma de decisiones con datos.</label>
</div>
<div class="opcion">
<input type="radio" name="p5" value="B" id="p5b">
<label for="p5b">Liberar tiempo para tareas estratégicas.</label>
</div>
<div class="opcion">
<input type="radio" name="p5" value="C" id="p5c">
<label for="p5c">Asegurar que los proyectos sean rentables y sostenibles.</label>
</div>
</div>
</div>
<!-- Pregunta 6 -->
<div class="pregunta">
<h3>6. Cuando surge un problema, ¿cómo reaccionas?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p6" value="A" id="p6a">
<label for="p6a">Busco datos para entender la causa.</label>
</div>
<div class="opcion">
<input type="radio" name="p6" value="B" id="p6b">
<label for="p6b">Pienso cómo automatizar para evitar que se repita.</label>
</div>
<div class="opcion">
<input type="radio" name="p6" value="C" id="p6c">
<label for="p6c">Analizo el impacto financiero antes de actuar.</label>
</div>
</div>
</div>
<!-- Pregunta 7 -->
<div class="pregunta">
<h3>7. ¿Qué aprendizaje te motiva más?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p7" value="A" id="p7a">
<label for="p7a">Ciencia de datos aplicada a finanzas.</label>
</div>
<div class="opcion">
<input type="radio" name="p7" value="B" id="p7b">
<label for="p7b">Automatización y eficiencia operativa.</label>
</div>
<div class="opcion">
<input type="radio" name="p7" value="C" id="p7c">
<label for="p7c">Modelos de ROI y análisis estratégico.</label>
</div>
</div>
</div>
<div class="error" id="mensajeError">
⚠️ Por favor, responde todas las preguntas antes de continuar.
</div>
<button type="submit" class="btn-enviar">✨ Descubrir Mi Perfil STEM</button>
</form>
</div>
<!-- Sección 3: Resultado -->
<div class="resultado" id="resultadoPerfil">
<h2>🎉 ¡Tu Resultado!</h2>
<div class="perfil-box">
<div class="perfil-icono" id="iconoPerfil"></div>
<div class="perfil-tipo" id="tipoPerfil"></div>
<div class="perfil-descripcion" id="descripcionPerfil"></div>
<div class="perfil-caracteristicas" id="caracteristicasPerfil"></div>
</div>
</div>
</div>
<script>
document.getElementById('formularioPerfil').addEventListener('submit', function(e) {
e.preventDefault();
e.stopPropagation();
// Inicializar contadores
let contadorA = 0;
let contadorB = 0;
let contadorC = 0;
// Verificar que todas las preguntas estén respondidas
let todasRespondidas = true;
for (let i = 1; i <= 7; i++) {
const respuesta = document.querySelector(`input[name="p${i}"]:checked`);
if (!respuesta) {
todasRespondidas = false;
break;
}
}
// Mostrar error si falta alguna respuesta
const mensajeError = document.getElementById('mensajeError');
if (!todasRespondidas) {
mensajeError.classList.add('mostrar');
mensajeError.scrollIntoView({ behavior: 'smooth', block: 'center' });
return;
} else {
mensajeError.classList.remove('mostrar');
}
// Contar las respuestas
for (let i = 1; i <= 7; i++) {
const respuesta = document.querySelector(`input[name="p${i}"]:checked`).value;
if (respuesta === 'A') {
contadorA++;
} else if (respuesta === 'B') {
contadorB++;
} else if (respuesta === 'C') {
contadorC++;
}
}
// Determinar el perfil dominante usando IF
let icono = '';
let tipoPerfil = '';
let descripcionPerfil = '';
let caracteristicas = '';
if (contadorA > contadorB && contadorA > contadorC) {
// Perfil Analítico
icono = '📊';
tipoPerfil = 'Perfil Analítico';
descripcionPerfil = `Tu perfil es <strong>Analítico</strong> porque la mayoría de tus respuestas fueron A (${contadorA} de 7). Te apasiona transformar datos en decisiones estratégicas y visualizar información compleja de manera clara.`;
caracteristicas = `
<h4>🎯 Tu perfil ideal incluye:</h4>
<ul>
<li>Usar Power BI, Excel avanzado y Python para análisis de rentabilidad</li>
<li>Crear dashboards que faciliten la toma de decisiones</li>
<li>Identificar patrones y tendencias en datos financieros</li>
<li>Roles ideales: Analista Financiero Digital, Data Analyst, Business Intelligence Specialist</li>
</ul>
`;
} else if (contadorB > contadorA && contadorB > contadorC) {
// Perfil Operativo
icono = '⚙️';
tipoPerfil = 'Perfil Operativo';
descripcionPerfil = `Tu perfil es <strong>Operativo</strong> porque la mayoría de tus respuestas fueron B (${contadorB} de 7). Te motiva optimizar procesos, eliminar tareas repetitivas y hacer que todo funcione de manera más eficiente.`;
caracteristicas = `
<h4>🎯 Tu perfil ideal incluye:</h4>
<ul>
<li>Optimizar procesos con RPA (Robotic Process Automation) y macros</li>
<li>Automatizar tareas contables y de conciliación</li>
<li>Mejorar la eficiencia operativa del equipo</li>
<li>Roles ideales: Especialista en Automatización, Process Improvement Analyst, RPA Developer</li>
</ul>
`;
} else if (contadorC > contadorA && contadorC > contadorB) {
// Perfil Estratégico
icono = '🎯';
tipoPerfil = 'Perfil Estratégico';
descripcionPerfil = `Tu perfil es <strong>Estratégico</strong> porque la mayoría de tus respuestas fueron C (${contadorC} de 7). Te enfocas en el impacto económico, el retorno de inversión y las decisiones que impulsan el crecimiento sostenible.`;
caracteristicas = `
<h4>🎯 Tu perfil ideal incluye:</h4>
<ul>
<li>Evaluar el ROI de proyectos tecnológicos y de automatización</li>
<li>Participar en decisiones estratégicas de inversión</li>
<li>Analizar la rentabilidad de nuevas plataformas digitales</li>
<li>Roles ideales: Financial Planning & Analysis, Strategy Analyst, Investment Analyst</li>
</ul>
`;
} else {
// Perfil Híbrido (empate)
icono = '🌟';
tipoPerfil = 'Perfil Híbrido';
descripcionPerfil = `Tus respuestas muestran un <strong>Perfil Híbrido</strong> con características equilibradas (A: ${contadorA}, B: ${contadorB}, C: ${contadorC}). Esto significa que eres versátil y puedes adaptarte a diferentes roles en el ecosistema STEM financiero.`;
caracteristicas = `
<h4>🎯 Tu versatilidad te permite:</h4>
<ul>
<li>Combinar análisis de datos con optimización de procesos</li>
<li>Integrar visión estratégica con ejecución operativa</li>
<li>Adaptarte a diferentes proyectos y necesidades del equipo</li>
<li>Roles ideales: Business Analyst, Project Manager, Financial Analyst con enfoque tecnológico</li>
</ul>
`;
}
// Mostrar el resultado
document.getElementById('iconoPerfil').textContent = icono;
document.getElementById('tipoPerfil').textContent = tipoPerfil;
document.getElementById('descripcionPerfil').innerHTML = descripcionPerfil;
document.getElementById('caracteristicasPerfil').innerHTML = caracteristicas;
document.getElementById('resultadoPerfil').classList.add('mostrar');
// Hacer scroll suave al resultado
setTimeout(() => {
document.getElementById('resultadoPerfil').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}, 100);
});
</script>
</body>
</html>