diagnostico medio
This commit is contained in:
+230
@@ -185,4 +185,234 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
if (yearEl) yearEl.textContent = new Date().getFullYear();
|
||||
|
||||
initServiciosAccordion();
|
||||
});
|
||||
|
||||
/* ============================================
|
||||
LÓGICA DEL CUESTIONARIO DE DIAGNÓSTICO
|
||||
============================================ */
|
||||
|
||||
// Datos del cuestionario
|
||||
const preguntas = [
|
||||
{
|
||||
id: 1,
|
||||
titulo: "¿En qué etapa se encuentra hoy tu negocio o proyecto?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "Creando el proyecto desde cero o formalizando una idea reciente." },
|
||||
{ letra: "B", texto: "Negocio o local activo, pero con una imagen visual que no refleja la calidad de lo que vendo." },
|
||||
{ letra: "C", texto: "En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo." },
|
||||
{ letra: "D", texto: "Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad." },
|
||||
{ letra: "E", texto: "Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing de punta a punta." },
|
||||
{ letra: "F", texto: "Emprendimiento personal que gestiono por mi cuenta y donde necesito resolver piezas puntuales." }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
titulo: "¿Cuál es tu cuello de botella más urgente hoy?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "No tengo logo profesional ni página web; me falta confianza frente a la competencia." },
|
||||
{ letra: "B", texto: "No tengo tiempo ni equipo para sacar fotos o grabar videos de buena calidad de mis productos/servicios." },
|
||||
{ letra: "C", texto: "Perdemos clientes potenciales porque tardamos horas en responder WhatsApp o mensajes de redes." },
|
||||
{ letra: "D", texto: "Dependemos del boca a boca o de publicar en redes sin conseguir ventas constantes ni predecibles." },
|
||||
{ letra: "E", texto: "Tenemos acciones aisladas sin una dirección estratégica clara ni medición profesional de métricas." },
|
||||
{ letra: "F", texto: "Me faltan herramientas gráficas o plantillas para diseñar mis propias publicaciones sin perder horas." }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
titulo: "¿Con qué infraestructura digital cuentas actualmente?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "Prácticamente nada formal (solo una idea, perfil personal o logo provisional)." },
|
||||
{ letra: "B", texto: "Perfil comercial en redes sociales, pero con fotos caseras tomadas con el celular." },
|
||||
{ letra: "C", texto: "Redes y/o tienda activa con alto volumen de mensajes directos diarios sin automatizar." },
|
||||
{ letra: "D", texto: "Redes y web en marcha, pero sin campañas activas de publicidad paga (Meta Ads / Google Ads)." },
|
||||
{ letra: "E", texto: "Ecosistema activo (redes, web, pauta), pero disperso entre distintos proveedores sin sinergia." },
|
||||
{ letra: "F", texto: "Manejo mis propios canales y solo requiero recursos gráficos específicos para seguir operando." }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
titulo: "¿Qué tipo de solución buscas contratar en Amor y Roma?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "Proyecto inicial integral: crear mi identidad de marca y mi sitio web para salir al mercado." },
|
||||
{ letra: "B", texto: "Acompañamiento mensual con sesiones presenciales de fotos/video para no preocuparme del contenido." },
|
||||
{ letra: "C", texto: "Implementación tecnológica: automatizaciones inteligentes y asistentes para WhatsApp y redes." },
|
||||
{ letra: "D", texto: "Gestión de campañas de publicidad digital y páginas de venta enfocadas 100% en conversión." },
|
||||
{ letra: "E", texto: "Gestión integral 360°: estrategia de marca completa, pauta multicanal, redes y dirección creativa." },
|
||||
{ letra: "F", texto: "Un entregable puntual (diseño de plantilla, digitalización de logo o sesión única de fotos)." }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Perfiles de resultado
|
||||
const perfiles = {
|
||||
A: {
|
||||
titulo: "Mix Lanzamiento Integral",
|
||||
diagnostico: "Tu proyecto necesita bases sólidas y credibilidad inmediata para competir y generar confianza.",
|
||||
solucion: "Identidad visual completa (Branding) + Diseño Web institucional + Gestión de Redes Sociales (Plan Esencial, $250.000/mes).",
|
||||
cta: "Cotizar Mix Lanzamiento"
|
||||
},
|
||||
B: {
|
||||
titulo: "Mix Comercio & Presencia Visual",
|
||||
diagnostico: "Tu producto o servicio tiene potencial comercial, pero la calidad visual actual en redes te resta ventas.",
|
||||
solucion: "Plan Premium de Redes Sociales ($650.000/mes), que incluye sesión presencial quincenal de fotos y videos profesionales, 8 reels, asistencia con IA y dirección creativa.",
|
||||
cta: "Ver Plan Premium"
|
||||
},
|
||||
C: {
|
||||
titulo: "Solución Eficiencia & Automatización",
|
||||
diagnostico: "Tu principal fuga de dinero es el tiempo de respuesta: consultas demoradas son ventas perdidas.",
|
||||
solucion: "Implementación de Automatizaciones con Asistentes Inteligentes para WhatsApp, Instagram y Facebook + Plan Impulso ($420.000/mes) para ordenar el flujo de mensajes.",
|
||||
cta: "Automatizar mi Atención"
|
||||
},
|
||||
D: {
|
||||
titulo: "Mix Acelerador & Conversión",
|
||||
diagnostico: "Tu marca ya está ordenada visualmente; ahora necesita tráfico calificado y un sistema predecible de atracción de clientes.",
|
||||
solucion: "Servicio de Paid Media (Meta Ads + Google Ads) + Optimización de Landing Page / Catálogo + Creatividades publicitarias de alto impacto.",
|
||||
cta: "Escalar mis Ventas"
|
||||
},
|
||||
E: {
|
||||
titulo: "Servicio Corporativo 360°",
|
||||
diagnostico: "Tu empresa busca liderazgo absoluto de mercado, unificación de imagen y tercerización completa del departamento de marketing.",
|
||||
solucion: "Plan Élite de Redes ($1.000.000/mes) + Branding Integral (packaging, cartelería física) + Pauta multicanal (Meta, TikTok, Google) + Reportes quincenales avanzados con KPIs.",
|
||||
cta: "Agendar Reunión Estratégica"
|
||||
},
|
||||
F: {
|
||||
titulo: "Solución Autogestor / Servicios Puntuales",
|
||||
diagnostico: "Buscas resolver necesidades gráficas puntuales sin comprometerte con un abono mensual recurrente.",
|
||||
solucion: "Paquetes individuales a medida: Digitalización y vectorización de logo, Pack de plantillas editables personalizadas o Producción fotográfica por jornada.",
|
||||
cta: "Elegir Servicios Puntuales"
|
||||
}
|
||||
};
|
||||
|
||||
// Estado del cuestionario
|
||||
let preguntaActual = 0;
|
||||
let respuestas = [];
|
||||
|
||||
// Función para calcular el perfil
|
||||
function calcularPerfil(respuestas) {
|
||||
const conteo = { A: 0, B: 0, C: 0, D: 0, E: 0, F: 0 };
|
||||
|
||||
respuestas.forEach(r => {
|
||||
if (conteo[r] !== undefined) conteo[r]++;
|
||||
});
|
||||
|
||||
// Encontrar la letra con mayor frecuencia
|
||||
let maxVotos = 0;
|
||||
let ganador = respuestas[1]; // Fallback por defecto: pregunta 2 (cuello de botella)
|
||||
|
||||
for (const letra in conteo) {
|
||||
if (conteo[letra] > maxVotos) {
|
||||
maxVotos = conteo[letra];
|
||||
ganador = letra;
|
||||
} else if (conteo[letra] === maxVotos && maxVotos > 0) {
|
||||
// Desempate: priorizar la respuesta de la Pregunta 2
|
||||
if (respuestas[1] === letra) {
|
||||
ganador = letra;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ganador;
|
||||
}
|
||||
|
||||
// Función para renderizar pregunta
|
||||
function renderizarPregunta() {
|
||||
const contenedor = document.getElementById('cuestionario-contenedor');
|
||||
const pregunta = preguntas[preguntaActual];
|
||||
|
||||
contenedor.innerHTML = `
|
||||
<div class="pregunta-contenedor">
|
||||
<h3 class="pregunta-titulo">${pregunta.titulo}</h3>
|
||||
<div class="opciones-contenedor">
|
||||
${pregunta.opciones.map(opcion => `
|
||||
<button class="opcion-tarjeta" data-letra="${opcion.letra}">
|
||||
${opcion.texto}
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Agregar event listeners a las opciones
|
||||
document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => {
|
||||
tarjeta.addEventListener('click', () => seleccionarOpcion(tarjeta.dataset.letra));
|
||||
});
|
||||
}
|
||||
|
||||
// Función para seleccionar opción
|
||||
function seleccionarOpcion(letra) {
|
||||
respuestas[preguntaActual] = letra;
|
||||
|
||||
// Actualizar barra de progreso
|
||||
const progreso = ((preguntaActual + 1) / preguntas.length) * 100;
|
||||
document.getElementById('progreso-completado').style.width = `${progreso}%`;
|
||||
|
||||
// Avanzar o mostrar resultado
|
||||
if (preguntaActual < preguntas.length - 1) {
|
||||
preguntaActual++;
|
||||
document.getElementById('progreso-texto').textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`;
|
||||
renderizarPregunta();
|
||||
} else {
|
||||
mostrarResultado();
|
||||
}
|
||||
}
|
||||
|
||||
// Función para mostrar resultado
|
||||
function mostrarResultado() {
|
||||
const perfilLetra = calcularPerfil(respuestas);
|
||||
const perfil = perfiles[perfilLetra];
|
||||
|
||||
// Ocultar cuestionario y barra de progreso
|
||||
document.getElementById('cuestionario-contenedor').style.display = 'none';
|
||||
document.querySelector('.progreso-barra').style.display = 'none';
|
||||
document.getElementById('progreso-texto').style.display = 'none';
|
||||
document.getElementById('btn-reiniciar').style.display = 'none';
|
||||
|
||||
// Mostrar resultado
|
||||
const resultadoContenedor = document.getElementById('resultado-contenedor');
|
||||
resultadoContenedor.innerHTML = `
|
||||
<h2 class="resultado-titulo">${perfil.titulo}</h2>
|
||||
<p class="resultado-diagnostico">${perfil.diagnostico}</p>
|
||||
<div class="resultado-solucion">
|
||||
<strong>Solución Amor y Roma:</strong><br>
|
||||
${perfil.solucion}
|
||||
</div>
|
||||
<button class="resultado-cta">${perfil.cta}</button>
|
||||
`;
|
||||
resultadoContenedor.style.display = 'block';
|
||||
|
||||
// Event listener al CTA (placeholder por ahora)
|
||||
document.querySelector('.resultado-cta').addEventListener('click', () => {
|
||||
alert('CTA - Por definir acción');
|
||||
});
|
||||
}
|
||||
|
||||
// Función para reiniciar
|
||||
function reiniciarCuestionario() {
|
||||
preguntaActual = 0;
|
||||
respuestas = [];
|
||||
|
||||
// Resetear barra de progreso
|
||||
document.getElementById('progreso-completado').style.width = '0%';
|
||||
document.getElementById('progreso-texto').textContent = 'Pregunta 1 de 4';
|
||||
|
||||
// Mostrar elementos
|
||||
document.getElementById('cuestionario-contenedor').style.display = 'block';
|
||||
document.querySelector('.progreso-barra').style.display = 'block';
|
||||
document.getElementById('progreso-texto').style.display = 'block';
|
||||
document.getElementById('btn-reiniciar').style.display = 'inline-flex';
|
||||
document.getElementById('resultado-contenedor').style.display = 'none';
|
||||
|
||||
// Renderizar primera pregunta
|
||||
renderizarPregunta();
|
||||
}
|
||||
|
||||
// Inicializar cuestionario al cargar la página
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Solo inicializar si estamos en la sección de diagnóstico
|
||||
if (document.getElementById('cuestionario-contenedor')) {
|
||||
renderizarPregunta();
|
||||
|
||||
// Event listener al botón de reiniciar
|
||||
document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user