Cuestionario de Admisiones – Colegio Plenus<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.8\/css\/intlTelInput.css\" \/>\n\n <style>\n \/* Estilos personalizados *\/\n body { \n font-family: 'Poppins', sans-serif; \n background-image: url('https:\/\/www.micole.net\/assets\/img\/gallery\/22PPR0213P\/dB0mwUCiPWBLhYBg.jpg?v=MjAyNS0wNi0wNiAxODowNzowNg==');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n background-color: #f4f6f9; \/* Fallback color *\/\n }\n #quiz-main-container { max-width: 800px; margin: 2rem auto; padding: 1rem; }\n .question-step { background-color: white; border-radius: 1.5rem; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transition: opacity 0.5s ease-in-out; }\n .hidden-step { display: none; }\n .option-card { border: 2px solid #D1D5DB; transition: all 0.2s ease-in-out; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; }\n .option-card.selected { border-color: #004a99; background-color: #e6f0ff; box-shadow: 0 4px 14px 0 rgba(0, 74, 153, 0.2); }\n .continue-button, .skip-button { width: 100%; font-weight: bold; padding: 1rem; border-radius: 0.75rem; text-align: center; cursor: pointer; transition: background-color 0.2s ease; }\n .continue-button { background-color: #004a99; color: white; }\n .continue-button:hover:not(:disabled) { background-color: #003366; }\n .continue-button:disabled { background-color: #9CA3AF; cursor: not-allowed; }\n .skip-button { background-color: #0d9488; color: white; } \/* Color azul para el bot\u00f3n de omitir *\/\n .skip-button:hover { background-color: #0f766e; }\n .input-error .form-control, .input-error .select, .input-error .iti__input {\n border-color: #EF4444 !important;\n box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;\n }\n .input-error .iti {\n box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);\n border-radius: 0.75rem;\n }\n\n \/* Estilos para el Header y Footer del Colegio Plenus *\/\n .plenus-header {\n background-color: #fff;\n padding: 1rem 2rem;\n border-bottom: 1px solid #e5e7eb;\n }\n .plenus-header a:not(.no-disable) { pointer-events: none; cursor: default; }\n .plenus-footer {\n background-color: #004a99;\n color: #ffffff;\n padding: 3rem 2rem;\n }\n .plenus-footer a { pointer-events: none; cursor: default; }\n #title-section {\n background: #004a99;\n color: white;\n padding: 2rem 1.5rem;\n border-radius: 1rem;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n margin-bottom: 2rem;\n text-align: center;\n }\n\n \/* Estilos para el campo de tel\u00e9fono *\/\n .iti { width: 100%; }\n .iti__flag-container { border-radius: 0.75rem 0 0 0.75rem; }\n .iti input[type=\"tel\"].form-control {\n border-radius: 0 0.75rem 0.75rem 0 !important;\n padding-left: 95px !important;\n border: 2px solid #D1D5DB;\n height: 100%;\n width: 100%;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n <header class=\"plenus-header\">\n <div class=\"max-w-7xl mx-auto flex justify-between items-center\">\n <div>\n <a href=\"javascript:void(0);\" class=\"no-disable\">\n <img decoding=\"async\" class=\"h-16 w-auto\" src=\"https:\/\/plenus.edu.mx\/wp-content\/uploads\/2024\/03\/logo_colegio200-1.webp\" alt=\"Logo Colegio Plenus\">\n <\/a>\n <\/div>\n <nav class=\"hidden lg:flex items-center space-x-8 text-sm font-semibold uppercase\">\n <a href=\"javascript:void(0);\">Qui\u00e9nes Somos<\/a>\n <a href=\"javascript:void(0);\">Modelo Educativo<\/a>\n <a href=\"javascript:void(0);\">Niveles<\/a>\n <a href=\"javascript:void(0);\">Instalaciones<\/a>\n <a href=\"javascript:void(0);\">Contacto<\/a>\n <\/nav>\n <div class=\"hidden md:flex\">\n <a href=\"javascript:void(0);\" class=\"bg-blue-800 text-white font-bold py-3 px-6 rounded-full text-sm uppercase\">\n Admisiones\n <\/a>\n <\/div>\n <\/div>\n <\/header>\n \n <main id=\"quiz-main-container\">\n <div id=\"title-section\">\n <h1 class=\"text-2xl md:text-4xl font-extrabold\">Solicita Informes<\/h1>\n <p class=\"text-sm text-blue-100 mt-2\">Completa estos sencillos pasos para recibir informaci\u00f3n detallada.<\/p>\n <\/div>\n\n <div id=\"step-container\" class=\"mt-8\">\n <div id=\"step-school-year\" class=\"question-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">Elige el ciclo escolar de tu inter\u00e9s<\/h1><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><\/div><\/div>\n <div id=\"step-level\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfPara qu\u00e9 nivel educativo te interesa recibir informes?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><\/div><\/div>\n <div id=\"step-kinder-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Preescolar deseas aplicar?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-primary-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Primaria deseas aplicar?<\/h1><div class=\"grid grid-cols-2 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-secondary-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Secundaria deseas aplicar?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-highschool-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Preparatoria deseas aplicar?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-extracurricular\" class=\"question-step hidden-step\">\n <h1 class=\"text-xl sm:text-2xl font-bold mb-2 text-center\">Actividades Extraescolares<\/h1>\n <p class=\"text-gray-500 mb-6 text-center\">En Plenus, tu mensualidad incluye 2 actividades. \u00a1Elige las de tu agrado!<\/p>\n <div id=\"extracurricular-grid\" class=\"grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 md:gap-4\"><\/div>\n <p class=\"text-xs text-gray-400 mt-4 text-center\">*Algunas actividades tienen una cuota de recuperaci\u00f3n m\u00ednima.<\/p>\n <div class=\"mt-6 flex flex-col sm:flex-row gap-4\">\n <button id=\"extracurricular-continue\" class=\"continue-button\" disabled>Continuar<\/button>\n <button id=\"extracurricular-skip\" class=\"skip-button\">Omitir por ahora<\/button>\n <\/div>\n <\/div>\n <div id=\"step-contact\" class=\"question-step hidden-step\">\n <h1 class=\"text-xl sm:text-2xl font-bold mb-4 text-center\">\u00a1Casi terminamos!<\/h1>\n <p class=\"text-gray-500 mb-6 text-center\">Por favor, d\u00e9janos tus datos y recibir\u00e1s informes inmediatamente.<\/p>\n <div class=\"space-y-4\">\n <div class=\"form-control-wrapper\"><input type=\"text\" name=\"name\" placeholder=\"Nombre completo del padre\/tutor\" class=\"form-control w-full p-4 border-2 border-gray-300 rounded-xl text-lg focus:outline-none focus:border-blue-800 transition\"><\/div>\n <div class=\"phone-input-container\">\n <label for=\"whatsapp-input\" class=\"block text-sm font-medium text-gray-700 mb-1\">Tu n\u00famero de WhatsApp<\/label>\n <input id=\"whatsapp-input\" type=\"tel\" name=\"whatsapp\" class=\"form-control w-full p-4 rounded-xl text-lg\">\n <\/div>\n <\/div>\n <button id=\"submit-button\" class=\"continue-button mt-6\" disabled>Solicitar Informes<\/button>\n <\/div>\n <div id=\"step-final\" class=\"question-step hidden-step text-center\">\n <div class=\"text-6xl mb-4\">\u2705<\/div>\n <h1 class=\"text-3xl font-bold text-blue-800 mb-4\">\u00a1Gracias!<\/h1>\n <p class=\"text-lg text-gray-600\">Hemos recibido tu solicitud. Un asesor educativo se pondr\u00e1 en contacto contigo a la brevedad.<\/p>\n <\/div>\n <\/div>\n <\/main>\n\n <footer class=\"plenus-footer\">\n <div class=\"max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div>\n <img decoding=\"async\" class=\"h-16 bg-white p-2 rounded-md\" src=\"https:\/\/plenus.edu.mx\/wp-content\/uploads\/2024\/03\/logo_colegio200-1.webp\" alt=\"Logo Colegio Plenus\">\n <p class=\"mt-4 text-sm text-gray-300\">Formando l\u00edderes con valores y visi\u00f3n global.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-bold tracking-wider uppercase\">Contacto<\/h4>\n <ul class=\"mt-4 space-y-2 text-sm text-gray-300\">\n <li class=\"flex items-start\">\n <svg class=\"w-5 h-5 mr-2 mt-1 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><\/svg>\n <span>Sn. Fco. de As\u00eds 13. Col. Sn. Francisco, 76911 Corregidora, Qro.<\/span>\n <\/li>\n <li class=\"flex items-center mt-2\"><svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"><\/path><\/svg><a href=\"javascript:void(0);\">442 213 8717<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h4 class=\"font-bold tracking-wider uppercase\">Redes Sociales<\/h4>\n <div class=\"flex space-x-4 mt-4\">\n <a href=\"javascript:void(0);\" class=\"text-gray-300\"><svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\" \/><\/svg><\/a>\n <a href=\"javascript:void(0);\" class=\"text-gray-300\"><svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.08 2.525c.636-.247 1.363-.416 2.427-.465C9.53 2.013 9.884 2 12.315 2zM12 7a5 5 0 100 10 5 5 0 000-10zm0 8a3 3 0 110-6 3 3 0 010 6zm5.456-9.873a1.144 1.144 0 10-2.288 0 1.144 1.144 0 002.288 0z\" clip-rule=\"evenodd\" \/><\/svg><\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"max-w-7xl mx-auto mt-8 pt-8 border-t border-gray-700 text-center text-gray-500\">\n <p class=\"mt-4 text-sm\">© 2024 Colegio Plenus | Todos los derechos reservados.<\/p>\n <\/div>\n <\/footer>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.8\/js\/intlTelInput.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- CONSTANTES Y VARIABLES ---\n const stepContainer = document.getElementById('step-container');\n let formData = {};\n let iti; \/\/ Instancia del input de tel\u00e9fono\n\n const questions = {\n 'step-school-year': { options: [ { value: '2025-2026', icon: '\ud83d\udcc5' }, { value: '2026-2027', icon: '\ud83d\uddd3\ufe0f' }] },\n 'step-level': { options: [ { value: 'Kinder', icon: '\ud83e\uddf8' }, { value: 'Primaria', icon: '\ud83d\udcda' }, { value: 'Secundaria', icon: '\ud83d\udd2c' }, { value: 'Preparatoria', icon: '\ud83c\udf93' }] },\n 'step-kinder-grade': { options: [ { value: '1\u00ba Kinder' }, { value: '2\u00ba Kinder' }, { value: '3\u00ba Kinder' } ]},\n 'step-primary-grade': { options: [ { value: '1\u00ba Primaria' }, { value: '2\u00ba Primaria' }, { value: '3\u00ba Primaria' }, { value: '4\u00ba Primaria' }, { value: '5\u00ba Primaria' }, { value: '6\u00ba Primaria' } ]},\n 'step-secondary-grade': { options: [ { value: '1\u00ba Secundaria' }, { value: '2\u00ba Secundaria' }, { value: '3\u00ba Secundaria' } ]},\n 'step-highschool-grade': { options: [ { value: '1\u00ba Preparatoria' }, { value: '2\u00ba Preparatoria' }, { value: '3\u00ba Preparatoria' } ]},\n 'step-extracurricular': { options: [\n { value: 'Aloha', icon: '\ud83c\udf3a' }, { value: 'Artes Pl\u00e1sticas', icon: '\ud83c\udfa8' }, { value: 'Atletismo', icon: '\ud83c\udfc3' },\n { value: 'Bajo y Guitarra', icon: '\ud83c\udfb8' }, { value: 'Baby Dance', icon: '\ud83d\udc76' }, { value: 'Ballet', icon: '\ud83e\ude70' },\n { value: 'B\u00e1squet', icon: '\ud83c\udfc0' }, { value: 'Bater\u00eda', icon: '\ud83e\udd41' }, { value: 'Danza', icon: '\ud83d\udc83' },\n { value: 'Escalada', icon: '\ud83e\uddd7' }, { value: 'Escultura', icon: '\ud83d\uddff' }, { value: 'F\u00fatbol', icon: '\u26bd' },\n { value: 'Gimnasia', icon: '\ud83e\udd38' }, { value: 'Nataci\u00f3n', icon: '\ud83c\udfca' }, { value: 'Taekwondo', icon: '\ud83e\udd4b' },\n { value: 'Teclado', icon: '\ud83c\udfb9' }, { value: 'Teatro', icon: '\ud83c\udfad' }, { value: 'Tenis', icon: '\ud83c\udfbe' },\n { value: 'Voleibol', icon: '\ud83c\udfd0' }\n ]}\n };\n\n \/\/ --- FUNCIONES DE RENDERIZADO Y L\u00d3GICA ---\n const renderOptions = (container, questionOptions) => {\n if (!container) return;\n container.innerHTML = '';\n questionOptions.forEach(opt => {\n const value = opt.value || opt;\n const label = opt.label || value;\n const icon = opt.icon || '';\n const element = document.createElement('div');\n element.dataset.value = value;\n element.className = 'option-card p-2 rounded-xl h-24 text-center font-semibold';\n element.innerHTML = `<div class=\"text-3xl mb-1\">${icon}<\/div><span class=\"text-xs\">${label}<\/span>`;\n container.appendChild(element);\n });\n };\n \n const initializeQuiz = () => {\n Object.keys(questions).forEach(stepId => {\n const stepEl = document.getElementById(stepId);\n if (!stepEl) return;\n const container = stepEl.querySelector('div.grid');\n if(container) renderOptions(container, questions[stepId].options);\n });\n \n const phoneInput = document.querySelector(\"#whatsapp-input\");\n iti = window.intlTelInput(phoneInput, {\n initialCountry: \"mx\",\n separateDialCode: true,\n utilsScript: \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.8\/js\/utils.js\",\n placeholderNumberType: \"MOBILE\"\n });\n\n document.querySelectorAll('#step-contact input').forEach(input => {\n input.addEventListener('input', () => updateContinueButtonState());\n });\n };\n\n const showStep = (stepId) => {\n const stepEl = document.getElementById(stepId);\n if (stepEl) {\n stepEl.classList.remove('hidden-step');\n setTimeout(() => {\n stepEl.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }, 100);\n }\n };\n\n const saveData = (key, value) => {\n formData[key] = value;\n };\n \n const handleSchoolYearSelection = (year) => {\n saveData('schoolYear', year);\n showStep('step-level');\n };\n\n const handleLevelSelection = (level) => {\n saveData('level', level);\n let gradeStepId;\n switch(level) {\n case 'Kinder': gradeStepId = 'step-kinder-grade'; break;\n case 'Primaria': gradeStepId = 'step-primary-grade'; break;\n case 'Secundaria': gradeStepId = 'step-secondary-grade'; break;\n case 'Preparatoria': gradeStepId = 'step-highschool-grade'; break;\n }\n showStep(gradeStepId);\n };\n\n const handleGradeSelection = (grade) => {\n saveData('grade', grade);\n showStep('step-extracurricular');\n };\n\n const handleExtracurricularSelection = () => {\n showStep('step-contact');\n };\n\n const validateAndShowErrors = () => {\n let isStepValid = true;\n document.querySelectorAll('#step-contact .input-error').forEach(el => el.classList.remove('input-error'));\n \n const nameInput = document.querySelector('input[name=\"name\"]');\n if (nameInput.value.trim() === '') {\n nameInput.closest('.form-control-wrapper').classList.add('input-error');\n isStepValid = false;\n }\n\n if (!iti.isValidNumber()) {\n document.querySelector('.phone-input-container').classList.add('input-error');\n isStepValid = false;\n }\n return isStepValid;\n };\n \n const updateContinueButtonState = () => {\n const button = document.getElementById('submit-button');\n const name = document.querySelector('input[name=\"name\"]').value.trim();\n button.disabled = !(name !== '' && iti.isValidNumber());\n };\n\n const sendToWebhook = async () => {\n formData.name = document.querySelector('input[name=\"name\"]').value;\n formData.whatsapp = iti.getNumber().replace('+', '');\n \n const finalData = {\n ciclo_escolar: formData.schoolYear,\n nombre_tutor: formData.name,\n whatsapp: formData.whatsapp,\n interes: `${formData.level} - ${formData.grade}`,\n actividades_extra: formData.extracurriculars ? formData.extracurriculars.join(', ') : 'Omitido'\n };\n const webhookURL = 'PON TU WEBHOOK AQU\u00cd';\n try { \n await fetch(webhookURL, { \n method: 'POST', \n mode: 'no-cors', \n headers: { 'Content-Type': 'application\/json' }, \n body: JSON.stringify(finalData), \n }); \n console.log('Lead enviado al webhook.');\n } catch (error) { \n console.error('Error al enviar el lead:', error);\n }\n console.log('Formulario completado. Datos a enviar:', finalData);\n };\n\n \/\/ --- MANEJADORES DE EVENTOS ---\n stepContainer.addEventListener('click', (e) => {\n const card = e.target.closest('.option-card');\n if (!card) return;\n\n const stepId = card.closest('.question-step').id;\n const value = card.dataset.value;\n \n if (stepId !== 'step-extracurricular') {\n card.parentElement.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n card.classList.add('selected');\n }\n\n if (stepId === 'step-school-year') {\n handleSchoolYearSelection(value);\n } else if (stepId === 'step-level') {\n handleLevelSelection(value);\n } else if (stepId.includes('-grade')) {\n handleGradeSelection(value);\n }\n });\n\n document.getElementById('extracurricular-grid').addEventListener('click', (e) => {\n const card = e.target.closest('.option-card');\n if (!card) return;\n\n if (!formData.extracurriculars) {\n formData.extracurriculars = [];\n }\n\n const value = card.dataset.value;\n const isSelected = card.classList.toggle('selected'); \/\/ Alterna la selecci\u00f3n\n\n if (isSelected) {\n formData.extracurriculars.push(value);\n } else {\n formData.extracurriculars = formData.extracurriculars.filter(activity => activity !== value);\n }\n document.getElementById('extracurricular-continue').disabled = formData.extracurriculars.length === 0;\n });\n \n document.getElementById('extracurricular-continue').addEventListener('click', handleExtracurricularSelection);\n document.getElementById('extracurricular-skip').addEventListener('click', () => {\n formData.extracurriculars = []; \/\/ Limpiar selecci\u00f3n si omite\n handleExtracurricularSelection();\n });\n\n document.getElementById('submit-button').addEventListener('click', () => {\n if (validateAndShowErrors()) {\n sendToWebhook();\n document.getElementById('step-contact').classList.add('hidden-step');\n showStep('step-final');\n }\n });\n\n document.querySelectorAll('#step-contact input').forEach(input => {\n input.addEventListener('input', () => {\n input.closest('.form-control-wrapper, .phone-input-container')?.classList.remove('input-error');\n updateContinueButtonState();\n });\n });\n\n initializeQuiz();\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Cuestionario de Admisiones – Colegio Plenus Qui\u00e9nes Somos Modelo Educativo Niveles Instalaciones Contacto Admisiones Solicita Informes Completa estos sencillos pasos para recibir informaci\u00f3n detallada. Elige el ciclo escolar de tu inter\u00e9s \u00bfPara qu\u00e9 nivel educativo te interesa recibir informes? \u00bfA qu\u00e9 grado de Preescolar deseas aplicar? \u00bfA qu\u00e9 grado de Primaria deseas aplicar? \u00bfA qu\u00e9 […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"iawp_total_views":10,"footnotes":""},"class_list":["post-9355","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages\/9355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/comments?post=9355"}],"version-history":[{"count":4,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages\/9355\/revisions"}],"predecessor-version":[{"id":9360,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages\/9355\/revisions\/9360"}],"wp:attachment":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/media?parent=9355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9355,"date":"2025-06-18T13:04:50","date_gmt":"2025-06-18T18:04:50","guid":{"rendered":"https:\/\/plenus.edu.mx\/?page_id=9355"},"modified":"2025-06-18T15:20:27","modified_gmt":"2025-06-18T20:20:27","slug":"9355-2","status":"publish","type":"page","link":"https:\/\/plenus.edu.mx\/blog\/9355-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Cuestionario de Admisiones – Colegio Plenus<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.8\/css\/intlTelInput.css\" \/>\n\n <style>\n \/* Estilos personalizados *\/\n body { \n font-family: 'Poppins', sans-serif; \n background-image: url('https:\/\/www.micole.net\/assets\/img\/gallery\/22PPR0213P\/dB0mwUCiPWBLhYBg.jpg?v=MjAyNS0wNi0wNiAxODowNzowNg==');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n background-color: #f4f6f9; \/* Fallback color *\/\n }\n #quiz-main-container { max-width: 800px; margin: 2rem auto; padding: 1rem; }\n .question-step { background-color: white; border-radius: 1.5rem; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transition: opacity 0.5s ease-in-out; }\n .hidden-step { display: none; }\n .option-card { border: 2px solid #D1D5DB; transition: all 0.2s ease-in-out; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; }\n .option-card.selected { border-color: #004a99; background-color: #e6f0ff; box-shadow: 0 4px 14px 0 rgba(0, 74, 153, 0.2); }\n .continue-button, .skip-button { width: 100%; font-weight: bold; padding: 1rem; border-radius: 0.75rem; text-align: center; cursor: pointer; transition: background-color 0.2s ease; }\n .continue-button { background-color: #004a99; color: white; }\n .continue-button:hover:not(:disabled) { background-color: #003366; }\n .continue-button:disabled { background-color: #9CA3AF; cursor: not-allowed; }\n .skip-button { background-color: #0d9488; color: white; } \/* Color azul para el bot\u00f3n de omitir *\/\n .skip-button:hover { background-color: #0f766e; }\n .input-error .form-control, .input-error .select, .input-error .iti__input {\n border-color: #EF4444 !important;\n box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;\n }\n .input-error .iti {\n box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);\n border-radius: 0.75rem;\n }\n\n \/* Estilos para el Header y Footer del Colegio Plenus *\/\n .plenus-header {\n background-color: #fff;\n padding: 1rem 2rem;\n border-bottom: 1px solid #e5e7eb;\n }\n .plenus-header a:not(.no-disable) { pointer-events: none; cursor: default; }\n .plenus-footer {\n background-color: #004a99;\n color: #ffffff;\n padding: 3rem 2rem;\n }\n .plenus-footer a { pointer-events: none; cursor: default; }\n #title-section {\n background: #004a99;\n color: white;\n padding: 2rem 1.5rem;\n border-radius: 1rem;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n margin-bottom: 2rem;\n text-align: center;\n }\n\n \/* Estilos para el campo de tel\u00e9fono *\/\n .iti { width: 100%; }\n .iti__flag-container { border-radius: 0.75rem 0 0 0.75rem; }\n .iti input[type=\"tel\"].form-control {\n border-radius: 0 0.75rem 0.75rem 0 !important;\n padding-left: 95px !important;\n border: 2px solid #D1D5DB;\n height: 100%;\n width: 100%;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n <header class=\"plenus-header\">\n <div class=\"max-w-7xl mx-auto flex justify-between items-center\">\n <div>\n <a href=\"javascript:void(0);\" class=\"no-disable\">\n <img decoding=\"async\" class=\"h-16 w-auto\" src=\"https:\/\/plenus.edu.mx\/wp-content\/uploads\/2024\/03\/logo_colegio200-1.webp\" alt=\"Logo Colegio Plenus\">\n <\/a>\n <\/div>\n <nav class=\"hidden lg:flex items-center space-x-8 text-sm font-semibold uppercase\">\n <a href=\"javascript:void(0);\">Qui\u00e9nes Somos<\/a>\n <a href=\"javascript:void(0);\">Modelo Educativo<\/a>\n <a href=\"javascript:void(0);\">Niveles<\/a>\n <a href=\"javascript:void(0);\">Instalaciones<\/a>\n <a href=\"javascript:void(0);\">Contacto<\/a>\n <\/nav>\n <div class=\"hidden md:flex\">\n <a href=\"javascript:void(0);\" class=\"bg-blue-800 text-white font-bold py-3 px-6 rounded-full text-sm uppercase\">\n Admisiones\n <\/a>\n <\/div>\n <\/div>\n <\/header>\n \n <main id=\"quiz-main-container\">\n <div id=\"title-section\">\n <h1 class=\"text-2xl md:text-4xl font-extrabold\">Solicita Informes<\/h1>\n <p class=\"text-sm text-blue-100 mt-2\">Completa estos sencillos pasos para recibir informaci\u00f3n detallada.<\/p>\n <\/div>\n\n <div id=\"step-container\" class=\"mt-8\">\n <div id=\"step-school-year\" class=\"question-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">Elige el ciclo escolar de tu inter\u00e9s<\/h1><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><\/div><\/div>\n <div id=\"step-level\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfPara qu\u00e9 nivel educativo te interesa recibir informes?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><\/div><\/div>\n <div id=\"step-kinder-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Preescolar deseas aplicar?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-primary-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Primaria deseas aplicar?<\/h1><div class=\"grid grid-cols-2 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-secondary-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Secundaria deseas aplicar?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-highschool-grade\" class=\"question-step hidden-step\"><h1 class=\"text-xl sm:text-2xl font-bold mb-6 text-center\">\u00bfA qu\u00e9 grado de Preparatoria deseas aplicar?<\/h1><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"><\/div><\/div>\n <div id=\"step-extracurricular\" class=\"question-step hidden-step\">\n <h1 class=\"text-xl sm:text-2xl font-bold mb-2 text-center\">Actividades Extraescolares<\/h1>\n <p class=\"text-gray-500 mb-6 text-center\">En Plenus, tu mensualidad incluye 2 actividades. \u00a1Elige las de tu agrado!<\/p>\n <div id=\"extracurricular-grid\" class=\"grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 md:gap-4\"><\/div>\n <p class=\"text-xs text-gray-400 mt-4 text-center\">*Algunas actividades tienen una cuota de recuperaci\u00f3n m\u00ednima.<\/p>\n <div class=\"mt-6 flex flex-col sm:flex-row gap-4\">\n <button id=\"extracurricular-continue\" class=\"continue-button\" disabled>Continuar<\/button>\n <button id=\"extracurricular-skip\" class=\"skip-button\">Omitir por ahora<\/button>\n <\/div>\n <\/div>\n <div id=\"step-contact\" class=\"question-step hidden-step\">\n <h1 class=\"text-xl sm:text-2xl font-bold mb-4 text-center\">\u00a1Casi terminamos!<\/h1>\n <p class=\"text-gray-500 mb-6 text-center\">Por favor, d\u00e9janos tus datos y recibir\u00e1s informes inmediatamente.<\/p>\n <div class=\"space-y-4\">\n <div class=\"form-control-wrapper\"><input type=\"text\" name=\"name\" placeholder=\"Nombre completo del padre\/tutor\" class=\"form-control w-full p-4 border-2 border-gray-300 rounded-xl text-lg focus:outline-none focus:border-blue-800 transition\"><\/div>\n <div class=\"phone-input-container\">\n <label for=\"whatsapp-input\" class=\"block text-sm font-medium text-gray-700 mb-1\">Tu n\u00famero de WhatsApp<\/label>\n <input id=\"whatsapp-input\" type=\"tel\" name=\"whatsapp\" class=\"form-control w-full p-4 rounded-xl text-lg\">\n <\/div>\n <\/div>\n <button id=\"submit-button\" class=\"continue-button mt-6\" disabled>Solicitar Informes<\/button>\n <\/div>\n <div id=\"step-final\" class=\"question-step hidden-step text-center\">\n <div class=\"text-6xl mb-4\">\u2705<\/div>\n <h1 class=\"text-3xl font-bold text-blue-800 mb-4\">\u00a1Gracias!<\/h1>\n <p class=\"text-lg text-gray-600\">Hemos recibido tu solicitud. Un asesor educativo se pondr\u00e1 en contacto contigo a la brevedad.<\/p>\n <\/div>\n <\/div>\n <\/main>\n\n <footer class=\"plenus-footer\">\n <div class=\"max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div>\n <img decoding=\"async\" class=\"h-16 bg-white p-2 rounded-md\" src=\"https:\/\/plenus.edu.mx\/wp-content\/uploads\/2024\/03\/logo_colegio200-1.webp\" alt=\"Logo Colegio Plenus\">\n <p class=\"mt-4 text-sm text-gray-300\">Formando l\u00edderes con valores y visi\u00f3n global.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-bold tracking-wider uppercase\">Contacto<\/h4>\n <ul class=\"mt-4 space-y-2 text-sm text-gray-300\">\n <li class=\"flex items-start\">\n <svg class=\"w-5 h-5 mr-2 mt-1 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><\/svg>\n <span>Sn. Fco. de As\u00eds 13. Col. Sn. Francisco, 76911 Corregidora, Qro.<\/span>\n <\/li>\n <li class=\"flex items-center mt-2\"><svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"><\/path><\/svg><a href=\"javascript:void(0);\">442 213 8717<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h4 class=\"font-bold tracking-wider uppercase\">Redes Sociales<\/h4>\n <div class=\"flex space-x-4 mt-4\">\n <a href=\"javascript:void(0);\" class=\"text-gray-300\"><svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\" \/><\/svg><\/a>\n <a href=\"javascript:void(0);\" class=\"text-gray-300\"><svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.08 2.525c.636-.247 1.363-.416 2.427-.465C9.53 2.013 9.884 2 12.315 2zM12 7a5 5 0 100 10 5 5 0 000-10zm0 8a3 3 0 110-6 3 3 0 010 6zm5.456-9.873a1.144 1.144 0 10-2.288 0 1.144 1.144 0 002.288 0z\" clip-rule=\"evenodd\" \/><\/svg><\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"max-w-7xl mx-auto mt-8 pt-8 border-t border-gray-700 text-center text-gray-500\">\n <p class=\"mt-4 text-sm\">© 2024 Colegio Plenus | Todos los derechos reservados.<\/p>\n <\/div>\n <\/footer>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.8\/js\/intlTelInput.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- CONSTANTES Y VARIABLES ---\n const stepContainer = document.getElementById('step-container');\n let formData = {};\n let iti; \/\/ Instancia del input de tel\u00e9fono\n\n const questions = {\n 'step-school-year': { options: [ { value: '2025-2026', icon: '\ud83d\udcc5' }, { value: '2026-2027', icon: '\ud83d\uddd3\ufe0f' }] },\n 'step-level': { options: [ { value: 'Kinder', icon: '\ud83e\uddf8' }, { value: 'Primaria', icon: '\ud83d\udcda' }, { value: 'Secundaria', icon: '\ud83d\udd2c' }, { value: 'Preparatoria', icon: '\ud83c\udf93' }] },\n 'step-kinder-grade': { options: [ { value: '1\u00ba Kinder' }, { value: '2\u00ba Kinder' }, { value: '3\u00ba Kinder' } ]},\n 'step-primary-grade': { options: [ { value: '1\u00ba Primaria' }, { value: '2\u00ba Primaria' }, { value: '3\u00ba Primaria' }, { value: '4\u00ba Primaria' }, { value: '5\u00ba Primaria' }, { value: '6\u00ba Primaria' } ]},\n 'step-secondary-grade': { options: [ { value: '1\u00ba Secundaria' }, { value: '2\u00ba Secundaria' }, { value: '3\u00ba Secundaria' } ]},\n 'step-highschool-grade': { options: [ { value: '1\u00ba Preparatoria' }, { value: '2\u00ba Preparatoria' }, { value: '3\u00ba Preparatoria' } ]},\n 'step-extracurricular': { options: [\n { value: 'Aloha', icon: '\ud83c\udf3a' }, { value: 'Artes Pl\u00e1sticas', icon: '\ud83c\udfa8' }, { value: 'Atletismo', icon: '\ud83c\udfc3' },\n { value: 'Bajo y Guitarra', icon: '\ud83c\udfb8' }, { value: 'Baby Dance', icon: '\ud83d\udc76' }, { value: 'Ballet', icon: '\ud83e\ude70' },\n { value: 'B\u00e1squet', icon: '\ud83c\udfc0' }, { value: 'Bater\u00eda', icon: '\ud83e\udd41' }, { value: 'Danza', icon: '\ud83d\udc83' },\n { value: 'Escalada', icon: '\ud83e\uddd7' }, { value: 'Escultura', icon: '\ud83d\uddff' }, { value: 'F\u00fatbol', icon: '\u26bd' },\n { value: 'Gimnasia', icon: '\ud83e\udd38' }, { value: 'Nataci\u00f3n', icon: '\ud83c\udfca' }, { value: 'Taekwondo', icon: '\ud83e\udd4b' },\n { value: 'Teclado', icon: '\ud83c\udfb9' }, { value: 'Teatro', icon: '\ud83c\udfad' }, { value: 'Tenis', icon: '\ud83c\udfbe' },\n { value: 'Voleibol', icon: '\ud83c\udfd0' }\n ]}\n };\n\n \/\/ --- FUNCIONES DE RENDERIZADO Y L\u00d3GICA ---\n const renderOptions = (container, questionOptions) => {\n if (!container) return;\n container.innerHTML = '';\n questionOptions.forEach(opt => {\n const value = opt.value || opt;\n const label = opt.label || value;\n const icon = opt.icon || '';\n const element = document.createElement('div');\n element.dataset.value = value;\n element.className = 'option-card p-2 rounded-xl h-24 text-center font-semibold';\n element.innerHTML = `<div class=\"text-3xl mb-1\">${icon}<\/div><span class=\"text-xs\">${label}<\/span>`;\n container.appendChild(element);\n });\n };\n \n const initializeQuiz = () => {\n Object.keys(questions).forEach(stepId => {\n const stepEl = document.getElementById(stepId);\n if (!stepEl) return;\n const container = stepEl.querySelector('div.grid');\n if(container) renderOptions(container, questions[stepId].options);\n });\n \n const phoneInput = document.querySelector(\"#whatsapp-input\");\n iti = window.intlTelInput(phoneInput, {\n initialCountry: \"mx\",\n separateDialCode: true,\n utilsScript: \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.8\/js\/utils.js\",\n placeholderNumberType: \"MOBILE\"\n });\n\n document.querySelectorAll('#step-contact input').forEach(input => {\n input.addEventListener('input', () => updateContinueButtonState());\n });\n };\n\n const showStep = (stepId) => {\n const stepEl = document.getElementById(stepId);\n if (stepEl) {\n stepEl.classList.remove('hidden-step');\n setTimeout(() => {\n stepEl.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }, 100);\n }\n };\n\n const saveData = (key, value) => {\n formData[key] = value;\n };\n \n const handleSchoolYearSelection = (year) => {\n saveData('schoolYear', year);\n showStep('step-level');\n };\n\n const handleLevelSelection = (level) => {\n saveData('level', level);\n let gradeStepId;\n switch(level) {\n case 'Kinder': gradeStepId = 'step-kinder-grade'; break;\n case 'Primaria': gradeStepId = 'step-primary-grade'; break;\n case 'Secundaria': gradeStepId = 'step-secondary-grade'; break;\n case 'Preparatoria': gradeStepId = 'step-highschool-grade'; break;\n }\n showStep(gradeStepId);\n };\n\n const handleGradeSelection = (grade) => {\n saveData('grade', grade);\n showStep('step-extracurricular');\n };\n\n const handleExtracurricularSelection = () => {\n showStep('step-contact');\n };\n\n const validateAndShowErrors = () => {\n let isStepValid = true;\n document.querySelectorAll('#step-contact .input-error').forEach(el => el.classList.remove('input-error'));\n \n const nameInput = document.querySelector('input[name=\"name\"]');\n if (nameInput.value.trim() === '') {\n nameInput.closest('.form-control-wrapper').classList.add('input-error');\n isStepValid = false;\n }\n\n if (!iti.isValidNumber()) {\n document.querySelector('.phone-input-container').classList.add('input-error');\n isStepValid = false;\n }\n return isStepValid;\n };\n \n const updateContinueButtonState = () => {\n const button = document.getElementById('submit-button');\n const name = document.querySelector('input[name=\"name\"]').value.trim();\n button.disabled = !(name !== '' && iti.isValidNumber());\n };\n\n const sendToWebhook = async () => {\n formData.name = document.querySelector('input[name=\"name\"]').value;\n formData.whatsapp = iti.getNumber().replace('+', '');\n \n const finalData = {\n ciclo_escolar: formData.schoolYear,\n nombre_tutor: formData.name,\n whatsapp: formData.whatsapp,\n interes: `${formData.level} - ${formData.grade}`,\n actividades_extra: formData.extracurriculars ? formData.extracurriculars.join(', ') : 'Omitido'\n };\n const webhookURL = 'PON TU WEBHOOK AQU\u00cd';\n try { \n await fetch(webhookURL, { \n method: 'POST', \n mode: 'no-cors', \n headers: { 'Content-Type': 'application\/json' }, \n body: JSON.stringify(finalData), \n }); \n console.log('Lead enviado al webhook.');\n } catch (error) { \n console.error('Error al enviar el lead:', error);\n }\n console.log('Formulario completado. Datos a enviar:', finalData);\n };\n\n \/\/ --- MANEJADORES DE EVENTOS ---\n stepContainer.addEventListener('click', (e) => {\n const card = e.target.closest('.option-card');\n if (!card) return;\n\n const stepId = card.closest('.question-step').id;\n const value = card.dataset.value;\n \n if (stepId !== 'step-extracurricular') {\n card.parentElement.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n card.classList.add('selected');\n }\n\n if (stepId === 'step-school-year') {\n handleSchoolYearSelection(value);\n } else if (stepId === 'step-level') {\n handleLevelSelection(value);\n } else if (stepId.includes('-grade')) {\n handleGradeSelection(value);\n }\n });\n\n document.getElementById('extracurricular-grid').addEventListener('click', (e) => {\n const card = e.target.closest('.option-card');\n if (!card) return;\n\n if (!formData.extracurriculars) {\n formData.extracurriculars = [];\n }\n\n const value = card.dataset.value;\n const isSelected = card.classList.toggle('selected'); \/\/ Alterna la selecci\u00f3n\n\n if (isSelected) {\n formData.extracurriculars.push(value);\n } else {\n formData.extracurriculars = formData.extracurriculars.filter(activity => activity !== value);\n }\n document.getElementById('extracurricular-continue').disabled = formData.extracurriculars.length === 0;\n });\n \n document.getElementById('extracurricular-continue').addEventListener('click', handleExtracurricularSelection);\n document.getElementById('extracurricular-skip').addEventListener('click', () => {\n formData.extracurriculars = []; \/\/ Limpiar selecci\u00f3n si omite\n handleExtracurricularSelection();\n });\n\n document.getElementById('submit-button').addEventListener('click', () => {\n if (validateAndShowErrors()) {\n sendToWebhook();\n document.getElementById('step-contact').classList.add('hidden-step');\n showStep('step-final');\n }\n });\n\n document.querySelectorAll('#step-contact input').forEach(input => {\n input.addEventListener('input', () => {\n input.closest('.form-control-wrapper, .phone-input-container')?.classList.remove('input-error');\n updateContinueButtonState();\n });\n });\n\n initializeQuiz();\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Cuestionario de Admisiones – Colegio Plenus Qui\u00e9nes Somos Modelo Educativo Niveles Instalaciones Contacto Admisiones Solicita Informes Completa estos sencillos pasos para recibir informaci\u00f3n detallada. Elige el ciclo escolar de tu inter\u00e9s \u00bfPara qu\u00e9 nivel educativo te interesa recibir informes? \u00bfA qu\u00e9 grado de Preescolar deseas aplicar? \u00bfA qu\u00e9 grado de Primaria deseas aplicar? \u00bfA qu\u00e9 […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"iawp_total_views":10,"footnotes":""},"class_list":["post-9355","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages\/9355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/comments?post=9355"}],"version-history":[{"count":4,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages\/9355\/revisions"}],"predecessor-version":[{"id":9360,"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/pages\/9355\/revisions\/9360"}],"wp:attachment":[{"href":"https:\/\/plenus.edu.mx\/blog\/wp-json\/wp\/v2\/media?parent=9355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}