pack de iconos
This commit is contained in:
+252
-124
@@ -241,139 +241,267 @@ function closeModal(modalId) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Bloque 3: La Brújula IDE (Diagnóstico en 3 Pasos)
|
||||
========================================================================== */
|
||||
const brujulaState = {
|
||||
foco: null,
|
||||
focoTexto: '',
|
||||
dolor: null,
|
||||
dolorTexto: '',
|
||||
recomendacion: ''
|
||||
};
|
||||
/* ================================================================
|
||||
JS QUIZ
|
||||
================================================================ */
|
||||
|
||||
function initBrujulaIDE() {
|
||||
const container = document.getElementById('brujula-interactive-app');
|
||||
(function () {
|
||||
// ----- FLUJO DE NAVEGACIÓN (Opción B) -----
|
||||
const FLOW = {
|
||||
1: { desafio: '2a', objetivo: '2b', solucion: '2c', conocimiento: '2d' },
|
||||
'2a': 3, '2b': 3, '2c': 3, '2d': 3,
|
||||
3: 4,
|
||||
4: 'result'
|
||||
};
|
||||
|
||||
// ----- MAPEO DE RESULTADOS (Opción B) -----
|
||||
function buildResult(answers) {
|
||||
const p1 = answers[1];
|
||||
const p2 = answers['2a'] || answers['2b'] || answers['2c'] || answers['2d'];
|
||||
const p3 = answers[3];
|
||||
|
||||
// Perfil 4 · Requisito exigido
|
||||
if (p3 === 'requisito' || p2 === 'iso' || p2 === 'iso-form') {
|
||||
return {
|
||||
icon: '📋',
|
||||
profile: 'Perfil · Requisito o certificación',
|
||||
title: 'La certificación puede ser el punto de partida.',
|
||||
body: 'Comprendemos que tenés un requisito externo. En IDE no trabajamos para cumplir auditorías: trabajamos para que el sistema refleje cómo funciona tu organización y contribuya a gestionarla mejor.',
|
||||
chips: ['IDE Excellence', 'ISO 9001 / 14001 / 45001', 'Sistemas de gestión'],
|
||||
cta: 'Ver soluciones Excellence',
|
||||
url: 'soluciones.html'
|
||||
};
|
||||
}
|
||||
|
||||
// Perfil 5 · Conocimiento o formación
|
||||
if (p1 === 'conocimiento') {
|
||||
const map = {
|
||||
'iso-form': { chips: ['Auditoría interna', 'ISO 9001', 'Mejora continua'], extra: 'IDE Excellence' },
|
||||
'pm-form': { chips: ['Gestión de proyectos', 'Metodologías ágiles', 'PMP'], extra: 'IDE Project' },
|
||||
'liderazgo-form': { chips: ['Liderazgo', 'Cambio organizacional', 'Cultura'], extra: 'IDE Academy' },
|
||||
'ia-form': { chips: ['IA aplicada', 'Transformación digital', 'Automatización'], extra: 'IDE Digital' }
|
||||
};
|
||||
const m = map[p2] || { chips: ['Formación', 'Desarrollo', 'Academy'], extra: 'IDE Academy' };
|
||||
return {
|
||||
icon: '🎓',
|
||||
profile: 'Perfil · Formación y conocimiento',
|
||||
title: 'Desarrollamos las capacidades que hacen posible la transformación.',
|
||||
body: 'IDE Academy diseña programas de formación alineados con los desafíos reales de las organizaciones. No dictamos cursos estándar: trabajamos desde el contexto de cada equipo.',
|
||||
chips: [...m.chips, m.extra],
|
||||
cta: 'Conocer IDE Academy',
|
||||
url: 'academy.html'
|
||||
};
|
||||
}
|
||||
|
||||
// Perfil 3 · Sabe exactamente qué necesita
|
||||
if (p1 === 'solucion') {
|
||||
const map = {
|
||||
iso: {
|
||||
title: 'Respuesta concreta. Y algo más.',
|
||||
chips: ['ISO 9001', 'ISO 14001', 'IDE Excellence'],
|
||||
cta: 'Ver soluciones ISO',
|
||||
url: 'soluciones.html',
|
||||
body: 'Sí, implementamos y acompañamos certificaciones ISO. Y creemos que un sistema de gestión debe reflejar cómo funciona tu organización, no solo superar una auditoría.'
|
||||
},
|
||||
pmo: {
|
||||
title: 'Proyectos que llegan a destino.',
|
||||
chips: ['PMO', 'Gestión de proyectos', 'IDE Project'],
|
||||
cta: 'Ver soluciones Project',
|
||||
url: 'soluciones.html',
|
||||
body: 'Diseñamos PMOs y acompañamos la dirección de proyectos para que se entreguen en tiempo, costo y con los resultados esperados.'
|
||||
},
|
||||
formacion: {
|
||||
title: 'Formación desde el contexto real.',
|
||||
chips: ['In Company', 'Capacitación', 'IDE Academy'],
|
||||
cta: 'Ver IDE Academy',
|
||||
url: 'academy.html',
|
||||
body: 'Programas de formación diseñados para tu organización, sus desafíos y las capacidades que necesita desarrollar.'
|
||||
},
|
||||
'ia-digital': {
|
||||
title: 'Tecnología con propósito.',
|
||||
chips: ['Transformación digital', 'IA aplicada', 'IDE Digital'],
|
||||
cta: 'Ver soluciones Digital',
|
||||
url: 'soluciones.html',
|
||||
body: 'Te ayudamos a identificar dónde la IA y la digitalización generan valor real, y acompañamos su implementación de principio a fin.'
|
||||
}
|
||||
};
|
||||
const m = map[p2] || {
|
||||
title: 'Encontramos lo que buscás.',
|
||||
chips: ['Soluciones concretas', 'Ecosistema IDE'],
|
||||
cta: 'Ver soluciones',
|
||||
url: 'soluciones.html',
|
||||
body: 'Tenemos la respuesta concreta que buscás. Y una mirada que asegura que esa solución genere valor en el conjunto de tu organización.'
|
||||
};
|
||||
return { icon: '⚙️', profile: 'Perfil · Solución concreta', ...m };
|
||||
}
|
||||
|
||||
// Perfil 2 · Sabe qué quiere lograr
|
||||
if (p1 === 'objetivo') {
|
||||
const map = {
|
||||
'mejorar-gestion': { chips: ['IDE Excellence', 'Mejora de procesos'], body: 'Entendemos dónde querés llegar. Antes de proponer una solución, comprendemos tu operación para intervenir donde hay mayor impacto.' },
|
||||
'profesionalizar-proyectos':{ chips: ['IDE Project', 'PMO'], body: 'Traducimos tu objetivo en una estructura de gestión de proyectos adecuada a tu contexto, sin sobreingeniería.' },
|
||||
'desarrollar-equipo': { chips: ['IDE Academy', 'Formación In Company'], body: 'Desarrollamos capacidades alineadas con los desafíos reales de tu organización. La formación parte del contexto, no de un catálogo estándar.' },
|
||||
'transformar-digital': { chips: ['IDE Digital', 'IA aplicada'], body: 'Empezamos por entender tu organización para identificar dónde la tecnología realmente agrega valor, y avanzamos desde ahí.' }
|
||||
};
|
||||
const m = map[p2] || { chips: ['Ecosistema IDE'], body: 'Entendemos dónde querés llegar. Comprendemos el sistema para ayudarte a lograrlo.' };
|
||||
return {
|
||||
icon: '🎯',
|
||||
profile: 'Perfil · Objetivo claro',
|
||||
title: 'Entendemos dónde querés llegar. Te ayudamos a definir cómo.',
|
||||
body: m.body,
|
||||
chips: m.chips,
|
||||
cta: 'Explorar por desafío',
|
||||
url: 'desafios.html'
|
||||
};
|
||||
}
|
||||
|
||||
// Perfil 1 · Desafío sin solución definida
|
||||
const mapD = {
|
||||
gestion: { chips: ['Procesos', 'Gestión', 'IDE Excellence'] },
|
||||
proyectos: { chips: ['Proyectos', 'PMO', 'IDE Project'] },
|
||||
personas: { chips: ['Capacidades', 'Equipo', 'IDE Academy'] },
|
||||
tecnologia: { chips: ['IA', 'Digital', 'IDE Digital'] },
|
||||
nosabe: { chips: ['Diagnóstico sistémico', 'Ecosistema IDE'] }
|
||||
};
|
||||
const md = mapD[p2] || mapD.nosabe;
|
||||
return {
|
||||
icon: '🔍',
|
||||
profile: 'Perfil · Desafío sin solución definida',
|
||||
title: 'No necesitás tener la respuesta para empezar.',
|
||||
body: 'Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada. Eso diferencia una intervención puntual de una transformación real.',
|
||||
chips: md.chips,
|
||||
cta: 'Explorar desafíos',
|
||||
url: 'desafios.html'
|
||||
};
|
||||
}
|
||||
|
||||
// ----- ESTADO -----
|
||||
let currentStep = 1;
|
||||
let stepHistory = [];
|
||||
let answers = {};
|
||||
const TOTAL = 4;
|
||||
|
||||
const container = document.getElementById('quiz-interactive-app');
|
||||
if (!container) return;
|
||||
|
||||
const step1Options = container.querySelectorAll('.brujula-opt-step1');
|
||||
const step2Options = container.querySelectorAll('.brujula-opt-step2');
|
||||
const btnNext1 = document.getElementById('brujula-btn-next1');
|
||||
const btnNext2 = document.getElementById('brujula-btn-next2');
|
||||
const btnRestart = document.getElementById('brujula-btn-restart');
|
||||
// ----- FUNCIONES -----
|
||||
function showStep(id) {
|
||||
const steps = container.querySelectorAll('.quiz-step');
|
||||
steps.forEach(s => s.classList.remove('active'));
|
||||
|
||||
// Selección paso 1
|
||||
step1Options.forEach(opt => {
|
||||
opt.addEventListener('click', () => {
|
||||
step1Options.forEach(o => o.classList.remove('selected'));
|
||||
opt.classList.add('selected');
|
||||
brujulaState.foco = opt.getAttribute('data-val');
|
||||
brujulaState.focoTexto = opt.querySelector('.opt-title').innerText;
|
||||
if (btnNext1) btnNext1.removeAttribute('disabled');
|
||||
const el = document.getElementById('step-' + id);
|
||||
if (el) el.classList.add('active');
|
||||
|
||||
updateProgress(id);
|
||||
updateIndicator(id);
|
||||
}
|
||||
|
||||
function updateProgress(id) {
|
||||
const fill = document.getElementById('quiz-progress-fill');
|
||||
if (!fill) return;
|
||||
|
||||
let n = 1;
|
||||
if (id === 'result') n = 4;
|
||||
else if (['2a', '2b', '2c', '2d'].includes(String(id))) n = 2;
|
||||
else n = parseInt(id) || 1;
|
||||
|
||||
fill.style.width = (n / TOTAL * 100) + '%';
|
||||
}
|
||||
|
||||
function updateIndicator(id) {
|
||||
const label = document.getElementById('quiz-step-indicator');
|
||||
if (!label) return;
|
||||
|
||||
let text = '';
|
||||
if (id === 'result') text = '¡Orientación lista!';
|
||||
else if (['2a', '2b', '2c', '2d'].includes(String(id))) text = 'Paso 2 de 4';
|
||||
else text = 'Paso ' + id + ' de 4';
|
||||
|
||||
label.textContent = text;
|
||||
}
|
||||
|
||||
function renderResult(ans) {
|
||||
const r = buildResult(ans);
|
||||
|
||||
document.getElementById('resultIcon').textContent = r.icon;
|
||||
document.getElementById('resultProfile').textContent = r.profile;
|
||||
document.getElementById('resultTitle').textContent = r.title;
|
||||
document.getElementById('resultBody').textContent = r.body;
|
||||
|
||||
const chipsContainer = document.getElementById('resultChips');
|
||||
chipsContainer.innerHTML = r.chips.map(c =>
|
||||
`<span class="result-chip">${c}</span>`
|
||||
).join('');
|
||||
|
||||
const cta = document.getElementById('resultCTA');
|
||||
cta.textContent = r.cta;
|
||||
cta.href = r.url;
|
||||
|
||||
showStep('result');
|
||||
}
|
||||
|
||||
function handleOption(btn) {
|
||||
const step = btn.dataset.step;
|
||||
const val = btn.dataset.val;
|
||||
|
||||
// Deseleccionar otras opciones del mismo paso
|
||||
const parent = btn.closest('.quiz-options-grid');
|
||||
if (parent) {
|
||||
parent.querySelectorAll('.quiz-option-card').forEach(b => b.classList.remove('selected'));
|
||||
}
|
||||
btn.classList.add('selected');
|
||||
|
||||
answers[step] = val;
|
||||
stepHistory.push(step);
|
||||
|
||||
const next = FLOW[step];
|
||||
if (!next) return;
|
||||
|
||||
if (next === 'result') {
|
||||
renderResult(answers);
|
||||
return;
|
||||
}
|
||||
|
||||
const nextId = typeof next === 'object' ? (next[val] || '2a') : next;
|
||||
showStep(nextId);
|
||||
}
|
||||
|
||||
// ----- FUNCIONES GLOBALES (para onclick en HTML) -----
|
||||
window.goBack = function () {
|
||||
if (!stepHistory.length) return;
|
||||
const prev = stepHistory.pop();
|
||||
delete answers[prev];
|
||||
|
||||
const last = stepHistory[stepHistory.length - 1] || 1;
|
||||
showStep(last);
|
||||
};
|
||||
|
||||
window.restartQuiz = function () {
|
||||
answers = {};
|
||||
stepHistory = [];
|
||||
container.querySelectorAll('.quiz-option-card').forEach(b => b.classList.remove('selected'));
|
||||
showStep(1);
|
||||
};
|
||||
|
||||
// ----- INIT -----
|
||||
function initQuiz() {
|
||||
// Eventos en las cards de opción
|
||||
container.querySelectorAll('.quiz-option-card').forEach(btn => {
|
||||
btn.addEventListener('click', function () {
|
||||
handleOption(this);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (btnNext1) {
|
||||
btnNext1.addEventListener('click', () => {
|
||||
if (!brujulaState.foco) return;
|
||||
showBrujulaStep(2);
|
||||
});
|
||||
showStep(1);
|
||||
}
|
||||
|
||||
// Selección paso 2
|
||||
step2Options.forEach(opt => {
|
||||
opt.addEventListener('click', () => {
|
||||
step2Options.forEach(o => o.classList.remove('selected'));
|
||||
opt.classList.add('selected');
|
||||
brujulaState.dolor = opt.getAttribute('data-val');
|
||||
brujulaState.dolorTexto = opt.querySelector('.opt-title').innerText;
|
||||
if (btnNext2) btnNext2.removeAttribute('disabled');
|
||||
});
|
||||
});
|
||||
|
||||
if (btnNext2) {
|
||||
btnNext2.addEventListener('click', () => {
|
||||
if (!brujulaState.dolor) return;
|
||||
calculateBrujulaResult();
|
||||
showBrujulaStep(3);
|
||||
});
|
||||
// Ejecutar al cargar el DOM
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initQuiz);
|
||||
} else {
|
||||
initQuiz();
|
||||
}
|
||||
|
||||
if (btnRestart) {
|
||||
btnRestart.addEventListener('click', () => {
|
||||
brujulaState.foco = null;
|
||||
brujulaState.dolor = null;
|
||||
step1Options.forEach(o => o.classList.remove('selected'));
|
||||
step2Options.forEach(o => o.classList.remove('selected'));
|
||||
if (btnNext1) btnNext1.setAttribute('disabled', 'true');
|
||||
if (btnNext2) btnNext2.setAttribute('disabled', 'true');
|
||||
showBrujulaStep(1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showBrujulaStep(stepNumber) {
|
||||
const steps = document.querySelectorAll('.brujula-step');
|
||||
const fill = document.getElementById('brujula-progress-fill');
|
||||
const stepLabel = document.getElementById('brujula-step-indicator');
|
||||
|
||||
steps.forEach(step => step.classList.remove('active'));
|
||||
const activeStep = document.getElementById(`brujula-step-${stepNumber}`);
|
||||
if (activeStep) activeStep.classList.add('active');
|
||||
|
||||
if (fill) {
|
||||
fill.style.width = stepNumber === 1 ? '33.33%' : stepNumber === 2 ? '66.66%' : '100%';
|
||||
}
|
||||
if (stepLabel) {
|
||||
stepLabel.innerText = stepNumber <= 2 ? `Paso ${stepNumber} de 3` : 'Orientación recomendada';
|
||||
}
|
||||
}
|
||||
|
||||
function calculateBrujulaResult() {
|
||||
const resultTitle = document.getElementById('brujula-result-capacidades');
|
||||
const resultText = document.getElementById('brujula-result-desc');
|
||||
const resultCta = document.getElementById('brujula-result-cta');
|
||||
|
||||
let caps = 'IDE Excellence + IDE Academy';
|
||||
let desc = 'La implementación de procesos y normas es el primer paso. Para que sea sostenible, es clave trabajar en el desarrollo de capacidades de tu equipo.';
|
||||
let dropdownValue = 'Implementar o certificar una norma';
|
||||
|
||||
// Lógica de cruce sistémico
|
||||
if (brujulaState.foco === 'iso' && brujulaState.dolor === 'adopcion') {
|
||||
caps = 'IDE Excellence + IDE Academy';
|
||||
desc = 'Implementar normas como ISO 9001 sólo genera valor si las personas comprenden y adoptan el sistema. Recomendamos unir la consultoría de procesos con formación In-Company.';
|
||||
dropdownValue = 'Implementar o certificar una norma';
|
||||
} else if (brujulaState.foco === 'proyectos' || brujulaState.dolor === 'desvios') {
|
||||
caps = 'IDE Project + IDE Excellence';
|
||||
desc = 'Tus desafíos requieren profesionalizar la dirección de proyectos y alinear los flujos operativos con la estrategia de la organización.';
|
||||
dropdownValue = 'Gestionar o impulsar un proyecto';
|
||||
} else if (brujulaState.foco === 'tecnologia' || brujulaState.dolor === 'herramientas') {
|
||||
caps = 'IDE Digital + IDE Excellence';
|
||||
desc = 'La tecnología y la IA deben estar al servicio de procesos claros. Recomendamos mapear primero las oportunidades antes de sumar herramientas aisladas.';
|
||||
dropdownValue = 'Transformación digital / IA';
|
||||
} else if (brujulaState.foco === 'equipo' || brujulaState.dolor === 'procesos') {
|
||||
caps = 'IDE Academy + IDE Excellence';
|
||||
desc = 'Fortalecer el criterio y las competencias del equipo permite que los procesos organizacionales fluyan con menor fricción y mayor autonomía.';
|
||||
dropdownValue = 'Formación para mi organización';
|
||||
}
|
||||
|
||||
brujulaState.recomendacion = `${caps}: ${desc}`;
|
||||
|
||||
if (resultTitle) resultTitle.innerText = caps;
|
||||
if (resultText) resultText.innerText = desc;
|
||||
|
||||
if (resultCta) {
|
||||
// Generar enlace pre-cargado para Contacto
|
||||
const params = new URLSearchParams({
|
||||
origen: 'Brujula_IDE',
|
||||
busqueda: dropdownValue,
|
||||
foco: brujulaState.focoTexto,
|
||||
dolor: brujulaState.dolorTexto,
|
||||
recomendacion: caps
|
||||
});
|
||||
resultCta.setAttribute('href', `contacto.html?${params.toString()}`);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
/* ==========================================================================
|
||||
6. Carga Dinámica de Cursos en IDE Academy (cursos.json)
|
||||
|
||||
Reference in New Issue
Block a user