{"id":2506,"date":"2025-10-14T03:08:23","date_gmt":"2025-10-14T03:08:23","guid":{"rendered":"https:\/\/afu.ceadeliagambarte.com\/?page_id=2506"},"modified":"2025-10-14T03:09:26","modified_gmt":"2025-10-14T03:09:26","slug":"test-voc","status":"publish","type":"page","link":"https:\/\/afu.ceadeliagambarte.com\/?page_id=2506","title":{"rendered":"TEST VOC"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2506\" class=\"elementor elementor-2506\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ad31fe e-flex e-con-boxed e-con e-parent\" data-id=\"8ad31fe\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db4ae76 elementor-widget elementor-widget-html\" data-id=\"db4ae76\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Bocare Universidades \u2014 Men\u00fa Aislado<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Aclonica&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    \/* ========= RESET LOCAL Y AISLAMIENTO ========= *\/\r\n    .menu-bocare, .menu-bocare * {\r\n      all: unset;\r\n      display: revert;\r\n      box-sizing: border-box;                                                                                                                                                  \r\n    }\r\n\r\n    \/* ========= ESTILOS DEL MEN\u00da ========= *\/\r\n    .menu-bocare {\r\n      font-family: 'Aclonica', sans-serif;\r\n      position: relative;\r\n      width: 100vw;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    .menu-bocare nav {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100vw;\r\n      background-color: #537E72;\r\n      color: beige;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      padding: 10px 20px;\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n      z-index: 9999;\r\n    }\r\n\r\n    \/* Logo *\/\r\n    .menu-bocare .logo img {\r\n      height: 50px;\r\n      cursor: pointer;\r\n      transition: transform 0.3s ease;\r\n    }\r\n    .menu-bocare .logo img:hover {\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    \/* Men\u00fa principal *\/\r\n    .menu-bocare .menu {\r\n      display: flex;\r\n      gap: 20px;\r\n      align-items: center;\r\n      transition: transform 0.4s ease, opacity 0.3s ease;\r\n    }\r\n\r\n    .menu-bocare .menu a {\r\n      color: beige;\r\n      text-decoration: none;\r\n      font-size: 16px;\r\n      transition: color 0.3s, transform 0.3s;\r\n    }\r\n    .menu-bocare .menu a:hover {\r\n      color: #3b5c52;\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    \/* Submen\u00fa *\/\r\n    .menu-bocare .dropdown {\r\n      position: relative;\r\n    }\r\n    .menu-bocare .dropdown-content {\r\n      display: none;\r\n      position: absolute;\r\n      top: 35px;\r\n      left: 0;\r\n      background-color: #537E72;\r\n      box-shadow: 0px 4px 10px rgba(0,0,0,0.4);\r\n      border-radius: 8px;\r\n      z-index: 10000;\r\n    }\r\n    .menu-bocare .dropdown-content a {\r\n      display: block;\r\n      padding: 10px 15px;\r\n      color: beige;\r\n      text-decoration: none;\r\n      transition: background 0.3s;\r\n    }\r\n    .menu-bocare .dropdown-content a:hover {\r\n      background-color: #46685e;\r\n    }\r\n    .menu-bocare .dropdown:hover .dropdown-content {\r\n      display: block;\r\n    }\r\n\r\n    \/* Hamburguesa *\/\r\n    .menu-bocare .hamburger {\r\n      display: none;\r\n      flex-direction: column;\r\n      cursor: pointer;\r\n      gap: 5px;\r\n      z-index: 11000;\r\n    }\r\n    .menu-bocare .hamburger div {\r\n      width: 25px;\r\n      height: 3px;\r\n      background-color: beige;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 768px) {\r\n      .menu-bocare .menu {\r\n        flex-direction: column;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100vh;\r\n        width: 70%;\r\n        background-color: #537E72;\r\n        padding: 80px 20px;\r\n        transform: translateX(-100%);\r\n        opacity: 0;\r\n      }\r\n      .menu-bocare .menu.show {\r\n        transform: translateX(0);\r\n        opacity: 1;\r\n      }\r\n      .menu-bocare .dropdown-content {\r\n        position: static;\r\n        box-shadow: none;\r\n      }\r\n      .menu-bocare .dropdown:hover .dropdown-content {\r\n        display: none;\r\n      }\r\n      .menu-bocare .dropdown.active .dropdown-content {\r\n        display: flex;\r\n        flex-direction: column;\r\n      }\r\n      .menu-bocare .hamburger {\r\n        display: flex;\r\n      }\r\n    }\r\n\r\n    \/* Fondo oscuro *\/\r\n    .menu-bocare .overlay {\r\n      display: none;\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100vw;\r\n      height: 100vh;\r\n      background: rgba(0,0,0,0.4);\r\n      z-index: 9000;\r\n    }\r\n    .menu-bocare .overlay.show {\r\n      display: block;\r\n    }\r\n\r\n    \/* Separaci\u00f3n del contenido principal *\/\r\n    body {\r\n      margin: 0;\r\n      padding-top: 80px; \/* Para no tapar el contenido por el nav fijo *\/\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"menu-bocare\">\r\n    <nav>\r\n      <div class=\"logo\">\r\n        <a href=\"https:\/\/afu.ceadeliagambarte.com\">\r\n          <img decoding=\"async\" src=\"https:\/\/afu.ceadeliagambarte.com\/wp-content\/uploads\/2025\/09\/logobocare-removebg-preview.png\" alt=\"Bocare Logo\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"hamburger\" onclick=\"toggleMenu()\">\r\n        <div><\/div>\r\n        <div><\/div>\r\n        <div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"menu\" id=\"menu-bocare\">\r\n        <div class=\"dropdown\" onclick=\"toggleDropdown(this)\">\r\n          <a href=\"#\">Departamentos \u25bc<\/a>\r\n          <div class=\"dropdown-content\">\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=150\">La Paz<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=172\">Cochabamba<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=218\">Santa Cruz<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=198\">Oruro<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=368\">Potos\u00ed<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=212\">Tarija<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=265\">Pando<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=254\">Beni<\/a>\r\n            <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=407\">Chuquisaca<\/a>\r\n          <\/div>\r\n        <\/div>\r\n        <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=1020\">Institutos<\/a>\r\n        <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=1483\">CEAs<\/a>\r\n        <a href=\"https:\/\/afu.ceadeliagambarte.com\/?page_id=2068\">Acerca de...<\/a>\r\n        <a href=\"https:\/\/afu.ceadeliagambarte.com\/?p=2011\">Noticias<\/a>\r\n      <\/div>\r\n    <\/nav>\r\n\r\n    <div class=\"overlay\" id=\"overlay-bocare\" onclick=\"toggleMenu()\"><\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const menuContainer = document.querySelector('.menu-bocare');\r\n    const menu = menuContainer.querySelector('.menu');\r\n    const overlay = menuContainer.querySelector('.overlay');\r\n\r\n    function toggleMenu() {\r\n      menu.classList.toggle('show');\r\n      overlay.classList.toggle('show');\r\n    }\r\n\r\n    function toggleDropdown(el) {\r\n      if (window.innerWidth <= 768) {\r\n        el.classList.toggle('active');\r\n      }\r\n    }\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-37130ab e-flex e-con-boxed e-con e-parent\" data-id=\"37130ab\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18c777e elementor-widget elementor-widget-html\" data-id=\"18c777e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Test Vocacional - \u00bfQu\u00e9 estudiar?<\/title>\r\n    <style>\r\n        :root {\r\n            --primary-color: #537E72;\r\n            --light-color: #E8F4F0;\r\n            --dark-color: #3A5A50;\r\n            --text-color: #333;\r\n            --white: #FFFFFF;\r\n        }\r\n        \r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n        }\r\n        \r\n        body {\r\n            background-color: #f9f9f9;\r\n            color: var(--text-color);\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        .container {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n        }\r\n        \r\n        header {\r\n            text-align: center;\r\n            padding: 30px 0;\r\n            background-color: var(--primary-color);\r\n            color: var(--white);\r\n            border-radius: 10px;\r\n            margin-bottom: 30px;\r\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        h1 {\r\n            font-size: 2.2rem;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .subtitle {\r\n            font-size: 1.1rem;\r\n            opacity: 0.9;\r\n        }\r\n        \r\n        .test-container {\r\n            background-color: var(--white);\r\n            border-radius: 10px;\r\n            padding: 30px;\r\n            box-shadow: 0 4px 6px rgba(0,0,0,0.05);\r\n        }\r\n        \r\n        .question {\r\n            margin-bottom: 30px;\r\n            padding-bottom: 20px;\r\n            border-bottom: 1px solid #eee;\r\n        }\r\n        \r\n        .question:last-child {\r\n            border-bottom: none;\r\n        }\r\n        \r\n        .question-text {\r\n            font-size: 1.2rem;\r\n            margin-bottom: 15px;\r\n            color: var(--dark-color);\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .options {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 10px;\r\n        }\r\n        \r\n        .option {\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 12px 15px;\r\n            background-color: var(--light-color);\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .option:hover {\r\n            background-color: #d9ebe5;\r\n        }\r\n        \r\n        .option.selected {\r\n            background-color: var(--primary-color);\r\n            color: var(--white);\r\n        }\r\n        \r\n        .option input {\r\n            margin-right: 10px;\r\n        }\r\n        \r\n        .buttons {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            margin-top: 30px;\r\n        }\r\n        \r\n        button {\r\n            padding: 12px 25px;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        #prev-btn {\r\n            background-color: #e0e0e0;\r\n            color: #555;\r\n        }\r\n        \r\n        #prev-btn:hover {\r\n            background-color: #d0d0d0;\r\n        }\r\n        \r\n        #next-btn, #submit-btn {\r\n            background-color: var(--primary-color);\r\n            color: var(--white);\r\n        }\r\n        \r\n        #next-btn:hover, #submit-btn:hover {\r\n            background-color: var(--dark-color);\r\n        }\r\n        \r\n        .progress-bar {\r\n            height: 8px;\r\n            background-color: #e0e0e0;\r\n            border-radius: 4px;\r\n            margin-bottom: 30px;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .progress {\r\n            height: 100%;\r\n            background-color: var(--primary-color);\r\n            width: 0%;\r\n            transition: width 0.5s ease;\r\n        }\r\n        \r\n        .result {\r\n            display: none;\r\n            text-align: center;\r\n            padding: 30px;\r\n            background-color: var(--light-color);\r\n            border-radius: 10px;\r\n            margin-top: 20px;\r\n        }\r\n        \r\n        .result h2 {\r\n            color: var(--primary-color);\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .result p {\r\n            margin-bottom: 20px;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .restart-btn {\r\n            background-color: var(--primary-color);\r\n            color: var(--white);\r\n            padding: 12px 25px;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .restart-btn:hover {\r\n            background-color: var(--dark-color);\r\n        }\r\n        \r\n        @media (max-width: 600px) {\r\n            .container {\r\n                padding: 10px;\r\n            }\r\n            \r\n            h1 {\r\n                font-size: 1.8rem;\r\n            }\r\n            \r\n            .test-container {\r\n                padding: 20px;\r\n            }\r\n            \r\n            .buttons {\r\n                flex-direction: column;\r\n                gap: 10px;\r\n            }\r\n            \r\n            button {\r\n                width: 100%;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <header>\r\n            <h1>Test Vocacional<\/h1>\r\n            <p class=\"subtitle\">Descubre qu\u00e9 carrera se adapta mejor a tus intereses<\/p>\r\n        <\/header>\r\n        \r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress\" id=\"progress\"><\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"test-container\">\r\n            <div id=\"test-content\">\r\n                <!-- Las preguntas se cargar\u00e1n aqu\u00ed din\u00e1micamente -->\r\n            <\/div>\r\n            \r\n            <div class=\"buttons\">\r\n                <button id=\"prev-btn\" disabled>Anterior<\/button>\r\n                <button id=\"next-btn\">Siguiente<\/button>\r\n                <button id=\"submit-btn\" style=\"display: none;\">Ver Resultados<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"result\" id=\"result\">\r\n            <!-- Los resultados se mostrar\u00e1n aqu\u00ed -->\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Preguntas del test\r\n        const questions = [\r\n            {\r\n                text: \"\u00bfQu\u00e9 tipo de actividades disfrutas m\u00e1s?\",\r\n                options: [\r\n                    \"Ayudar a otras personas\",\r\n                    \"Resolver problemas y puzzles\",\r\n                    \"Crear cosas con las manos\",\r\n                    \"Organizar y planificar\",\r\n                    \"Expresarme art\u00edsticamente\"\r\n                ]\r\n            },\r\n            {\r\n                text: \"En tu tiempo libre, \u00bfqu\u00e9 prefieres hacer?\",\r\n                options: [\r\n                    \"Leer libros o ver documentales\",\r\n                    \"Practicar deportes o actividades al aire libre\",\r\n                    \"Socializar con amigos y familia\",\r\n                    \"Trabajar en proyectos personales\",\r\n                    \"Aprender cosas nuevas por internet\"\r\n                ]\r\n            },\r\n            {\r\n                text: \"\u00bfQu\u00e9 materias te gustaban m\u00e1s en la escuela?\",\r\n                options: [\r\n                    \"Matem\u00e1ticas y ciencias\",\r\n                    \"Lenguaje y literatura\",\r\n                    \"Arte y m\u00fasica\",\r\n                    \"Historia y geograf\u00eda\",\r\n                    \"Educaci\u00f3n f\u00edsica\"\r\n                ]\r\n            },\r\n            {\r\n                text: \"\u00bfC\u00f3mo te describir\u00edan tus amigos?\",\r\n                options: [\r\n                    \"Creativo e imaginativo\",\r\n                    \"Organizado y responsable\",\r\n                    \"Sociable y comunicativo\",\r\n                    \"Anal\u00edtico y l\u00f3gico\",\r\n                    \"Emp\u00e1tico y comprensivo\"\r\n                ]\r\n            },\r\n            {\r\n                text: \"\u00bfQu\u00e9 tipo de trabajo te imaginas haciendo?\",\r\n                options: [\r\n                    \"Trabajar en una oficina\",\r\n                    \"Trabajar al aire libre\",\r\n                    \"Trabajar con personas\",\r\n                    \"Trabajar de forma independiente\",\r\n                    \"Trabajar en equipo\"\r\n                ]\r\n            },\r\n            {\r\n                text: \"\u00bfQu\u00e9 te motiva m\u00e1s en un trabajo?\",\r\n                options: [\r\n                    \"Un buen salario\",\r\n                    \"Ayudar a los dem\u00e1s\",\r\n                    \"Tener desaf\u00edos constantes\",\r\n                    \"Tener horarios flexibles\",\r\n                    \"Poder ser creativo\"\r\n                ]\r\n            }\r\n        ];\r\n\r\n        \/\/ \u00c1reas profesionales y sus descripciones\r\n        const careerAreas = {\r\n            \"Ciencias de la Salud\": {\r\n                description: \"Te gusta ayudar a los dem\u00e1s y tienes inter\u00e9s por el bienestar de las personas. Carreras como medicina, enfermer\u00eda, psicolog\u00eda o fisioterapia podr\u00edan ser ideales para ti.\",\r\n                color: \"#537E72\"\r\n            },\r\n            \"Ciencias Exactas\": {\r\n                description: \"Eres anal\u00edtico, te gustan los n\u00fameros y resolver problemas. Carreras como ingenier\u00eda, matem\u00e1ticas, f\u00edsica o inform\u00e1tica podr\u00edan ser tu vocaci\u00f3n.\",\r\n                color: \"#4A7C6F\"\r\n            },\r\n            \"Artes y Humanidades\": {\r\n                description: \"Eres creativo, te expresas bien y tienes sensibilidad art\u00edstica. Carreras como dise\u00f1o, bellas artes, literatura o m\u00fasica podr\u00edan ser perfectas para ti.\",\r\n                color: \"#417A6C\"\r\n            },\r\n            \"Ciencias Sociales\": {\r\n                description: \"Te interesa comprender la sociedad y las relaciones humanas. Carreras como derecho, sociolog\u00eda, comunicaci\u00f3n o educaci\u00f3n podr\u00edan adaptarse a tus intereses.\",\r\n                color: \"#387769\"\r\n            },\r\n            \"Administraci\u00f3n y Negocios\": {\r\n                description: \"Eres organizado, tienes habilidades de liderazgo y te interesa el mundo empresarial. Carreras como administraci\u00f3n, econom\u00eda, marketing o finanzas podr\u00edan ser tu camino.\",\r\n                color: \"#2F7566\"\r\n            }\r\n        };\r\n\r\n        \/\/ Variables de estado\r\n        let currentQuestion = 0;\r\n        let answers = [];\r\n        let selectedOption = null;\r\n\r\n        \/\/ Elementos del DOM\r\n        const testContent = document.getElementById('test-content');\r\n        const prevBtn = document.getElementById('prev-btn');\r\n        const nextBtn = document.getElementById('next-btn');\r\n        const submitBtn = document.getElementById('submit-btn');\r\n        const progressBar = document.getElementById('progress');\r\n        const resultDiv = document.getElementById('result');\r\n\r\n        \/\/ Inicializar el test\r\n        function initTest() {\r\n            showQuestion();\r\n            updateProgress();\r\n            updateButtons();\r\n        }\r\n\r\n        \/\/ Mostrar la pregunta actual\r\n        function showQuestion() {\r\n            const question = questions[currentQuestion];\r\n            \r\n            let optionsHTML = '';\r\n            question.options.forEach((option, index) => {\r\n                const isSelected = answers[currentQuestion] === index;\r\n                optionsHTML += `\r\n                    <div class=\"option ${isSelected ? 'selected' : ''}\" data-index=\"${index}\">\r\n                        <input type=\"radio\" name=\"option\" ${isSelected ? 'checked' : ''}>\r\n                        <span>${option}<\/span>\r\n                    <\/div>\r\n                `;\r\n            });\r\n            \r\n            testContent.innerHTML = `\r\n                <div class=\"question\">\r\n                    <div class=\"question-text\">${question.text}<\/div>\r\n                    <div class=\"options\">${optionsHTML}<\/div>\r\n                <\/div>\r\n            `;\r\n            \r\n            \/\/ Agregar event listeners a las opciones\r\n            document.querySelectorAll('.option').forEach(option => {\r\n                option.addEventListener('click', function() {\r\n                    selectOption(parseInt(this.getAttribute('data-index')));\r\n                });\r\n            });\r\n        }\r\n\r\n        \/\/ Seleccionar una opci\u00f3n\r\n        function selectOption(index) {\r\n            answers[currentQuestion] = index;\r\n            showQuestion();\r\n        }\r\n\r\n        \/\/ Actualizar la barra de progreso\r\n        function updateProgress() {\r\n            const progress = ((currentQuestion + 1) \/ questions.length) * 100;\r\n            progressBar.style.width = `${progress}%`;\r\n        }\r\n\r\n        \/\/ Actualizar el estado de los botones\r\n        function updateButtons() {\r\n            prevBtn.disabled = currentQuestion === 0;\r\n            \r\n            if (currentQuestion === questions.length - 1) {\r\n                nextBtn.style.display = 'none';\r\n                submitBtn.style.display = 'block';\r\n            } else {\r\n                nextBtn.style.display = 'block';\r\n                submitBtn.style.display = 'none';\r\n            }\r\n        }\r\n\r\n        \/\/ Navegar a la pregunta anterior\r\n        function prevQuestion() {\r\n            if (currentQuestion > 0) {\r\n                currentQuestion--;\r\n                showQuestion();\r\n                updateProgress();\r\n                updateButtons();\r\n            }\r\n        }\r\n\r\n        \/\/ Navegar a la siguiente pregunta\r\n        function nextQuestion() {\r\n            if (currentQuestion < questions.length - 1) {\r\n                currentQuestion++;\r\n                showQuestion();\r\n                updateProgress();\r\n                updateButtons();\r\n            }\r\n        }\r\n\r\n        \/\/ Calcular resultados\r\n        function calculateResults() {\r\n            \/\/ En un test real, aqu\u00ed se implementar\u00eda una l\u00f3gica m\u00e1s compleja\r\n            \/\/ Por simplicidad, asignaremos un \u00e1rea basada en la mayor\u00eda de respuestas\r\n            const areaIndex = Math.floor(Math.random() * Object.keys(careerAreas).length);\r\n            const areaName = Object.keys(careerAreas)[areaIndex];\r\n            return areaName;\r\n        }\r\n\r\n        \/\/ Mostrar resultados\r\n        function showResults() {\r\n            const areaName = calculateResults();\r\n            const area = careerAreas[areaName];\r\n            \r\n            resultDiv.innerHTML = `\r\n                <h2>\u00a1Tu \u00e1rea vocacional es: ${areaName}!<\/h2>\r\n                <p>${area.description}<\/p>\r\n                <button class=\"restart-btn\" onclick=\"restartTest()\">Hacer el test nuevamente<\/button>\r\n            `;\r\n            \r\n            resultDiv.style.display = 'block';\r\n            testContent.style.display = 'none';\r\n            document.querySelector('.buttons').style.display = 'none';\r\n            document.querySelector('.progress-bar').style.display = 'none';\r\n        }\r\n\r\n        \/\/ Reiniciar el test\r\n        function restartTest() {\r\n            currentQuestion = 0;\r\n            answers = [];\r\n            selectedOption = null;\r\n            \r\n            resultDiv.style.display = 'none';\r\n            testContent.style.display = 'block';\r\n            document.querySelector('.buttons').style.display = 'flex';\r\n            document.querySelector('.progress-bar').style.display = 'block';\r\n            \r\n            initTest();\r\n        }\r\n\r\n        \/\/ Event listeners\r\n        prevBtn.addEventListener('click', prevQuestion);\r\n        nextBtn.addEventListener('click', nextQuestion);\r\n        submitBtn.addEventListener('click', showResults);\r\n\r\n        \/\/ Inicializar el test cuando se carga la p\u00e1gina\r\n        document.addEventListener('DOMContentLoaded', initTest);\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bocare Universidades \u2014 Men\u00fa Aislado Departamentos \u25bc La Paz Cochabamba Santa Cruz Oruro Potos\u00ed Tarija Pando Beni Chuquisaca Institutos CEAs [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2506","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=\/wp\/v2\/pages\/2506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2506"}],"version-history":[{"count":3,"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=\/wp\/v2\/pages\/2506\/revisions"}],"predecessor-version":[{"id":2509,"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=\/wp\/v2\/pages\/2506\/revisions\/2509"}],"wp:attachment":[{"href":"https:\/\/afu.ceadeliagambarte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}