QUIZ<\/title>\r\n <style>\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n background-color: #8BC34A;\r\n color: #1a662b;\r\n text-align: center;\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n h1 { font-size: 2.5rem; margin-top: 20px; font-family: 'Georgia', serif; }\r\n h2 { font-size: 2rem; text-align: center; margin-bottom: 20px;font-weight: bold; color: #000000;}\r\n\r\n .form-container {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n justify-content: center;\r\n margin: 40px auto;\r\n max-width: 600px;\r\n padding: 20px;\r\n background-color: #f8f3f2;\r\n border-radius: 8px;\r\n }\r\n .form-group { display: flex; flex-direction: column; }\r\n label { font-weight: bold; margin-bottom: 5px; }\r\n input, select {\r\n padding: 10px;\r\n font-size: 1rem;\r\n border: 1px solid #2f3a22;\r\n border-radius: 5px;\r\n background-color: #194d1b;\r\n color: white;\r\n }\r\n input::placeholder { color: white; }\r\n input:focus, select:focus { border-color: #2E7D32; outline: none; }\r\n button {\r\n grid-column: span 2;\r\n background-color: #28642a;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n font-size: 1rem;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n button:hover { background-color: #2E7D32; }\r\n\r\n \/* QUIZ *\/\r\n .quiz-container {\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px;\r\n border-radius: 8px;\r\n width: 600px;\r\n max-width: 600px;\r\n min-width: 600px;\r\n height: 100%;\r\n background-color: #f8f3f2;\r\n text-align: center;\r\n }\r\n .quiz-header { text-align: center; margin-bottom: 20px; display: none; }\r\n .quiz-header h2 { font-size: 2rem; margin: 0; color: #2C3E50; }\r\n .quiz-header p { font-size: 1rem; color: #333; max-width: 800px; margin: 0 auto; }\r\n\r\n .quiz-item { background-color: #8BC34A; border-radius: 10px; padding: 20px; margin-bottom: 20px; text-align: center; }\r\n\r\n .pregunta {\r\n width: 80%;\r\n padding: 18px 20px;\r\n background-color: #d4ecd8;\r\n border-radius: 10px;\r\n font-size: clamp(0.9rem, 2vw, 1.5rem);\r\n font-weight: 700;\r\n margin-bottom: 18px;\r\n color: #000000;\r\n }\r\n\r\n .opciones {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 18px; \/* m\u00e1s interlineado entre respuestas *\/\r\n width: 90%;\r\n height: 100%;\r\n justify-content: center;\r\n margin: 0 auto 10px;\r\n }\r\n\r\n \/* Cada opci\u00f3n ahora es un contenedor con etiqueta a la izquierda y texto a la derecha *\/\r\n .opcion {\r\n display: flex;\r\n align-items: stretch;\r\n cursor: pointer;\r\n border-radius: 14px;\r\n overflow: hidden;\r\n user-select: none;\r\n transition: transform 0.12s ease, box-shadow 0.12s ease;\r\n box-shadow: 0 2px 0 rgba(0,0,0,0.06);\r\n height: 72px; \/* selector m\u00e1s grande *\/\r\n }\r\n .opcion:active { transform: translateY(1px); }\r\n\r\n .opcion-label {\r\n flex: 0 0 160px; \/* ancho fijo para el recuadro izquierdo *\/\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: #123f36; \/* verde oscuro *\/\r\n color: #ffffff;\r\n font-weight: 800;\r\n font-size: 1.05rem;\r\n padding: 0 12px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .opcion-text {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: left;\r\n padding: 0 18px;\r\n background-color: #a6dab6; \/* fondo claro *\/\r\n font-size: 1.05rem;\r\n color: #08321f;\r\n font-weight: 700;\r\n text-align: left;\r\n }\r\n\r\n \/* Estados correcta \/ incorrecta: aplican a ambas partes *\/\r\n .opcion.correcta .opcion-label,\r\n .opcion.correcta .opcion-text {\r\n background-color: #4CAF50 !important;\r\n color: #fff !important;\r\n }\r\n .opcion.incorrecta .opcion-label,\r\n .opcion.incorrecta .opcion-text {\r\n background-color: #E57373 !important;\r\n color: #fff !important;\r\n }\r\n\r\n \/* input fields verde (no tocar) *\/\r\n .campo-verde { padding: 10px; font-size: 1rem; border: 1px solid #223d3c; border-radius: 5px; background-color: #223d3c; color: white; font-weight: bold; text-align: center; }\r\n .campo-verde::placeholder { color: white; }\r\n .campo-verde:focus { border-color: #2E7D32; outline: none; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <h2 id=\"titulo-principal\"; style=\"margin-top: 20px; font-size: 2rem;\">QUIZ DE RECICLAJE DE VIDRIO ONLINE <\/h2>\r\n\r\n <div class=\"form-container\">\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"nombre\" class=\"campo-verde\" placeholder=\"NOMBRE Y APELLIDO\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"municipio\" class=\"campo-verde\" placeholder=\"BARRIO \/ PEDAN\u00cdA\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"contacto\" class=\"campo-verde\" placeholder=\"EMAIL\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"number\" id=\"edad\" class=\"campo-verde\" placeholder=\"EDAD\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <select id=\"sexo\" class=\"campo-verde\">\r\n <option value=\"\">SEXO<\/option>\r\n <option value=\"masculino\">Masculino<\/option>\r\n <option value=\"femenino\">Femenino<\/option>\r\n <option value=\"otro\">Otro<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"profesion\" class=\"campo-verde\" placeholder=\"PROFESI\u00d3N\">\r\n <\/div>\r\n\r\n <button onclick=\"iniciarQuiz()\">Iniciar Quiz<\/button>\r\n <\/div>\r\n\r\n <div class=\"quiz-container\" id=\"quiz-container\">\r\n <div class=\"pregunta\" id=\"pregunta\"><\/div>\r\n <div class=\"opciones\" id=\"opciones\"><\/div>\r\n <div class=\"resultado\" id=\"resultado\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const preguntas = [\r\n {\r\n texto: \"Pregunta 1 \u00bfCu\u00e1ntos envases de vidrio se reciclan en Espa\u00f1a?\",\r\n opciones: [\"OPCI\u00d3N A. 7 de cada 10 envases de vidrio\", \"OPCI\u00d3N B. 5 de cada 10 envases de vidrio\", \"OPCI\u00d3N C. 8 de cada 10 envases de vidrio\"],\r\n correcta: \"A\"\r\n },\r\n {\r\n texto: \"Pregunta 2 \u00bfQu\u00e9 proceso sufre el vidrio despu\u00e9s de ser reciclado?\",\r\n opciones: [\"OPCI\u00d3N A. Se destruye\", \"OPCI\u00d3N B. Se transforma\", \"OPCI\u00d3N C. Se transforma y recicla al 100% para fabricar nuevos envases\"],\r\n correcta: \"C\"\r\n },\r\n {\r\n texto: \"Pregunta 3 \u00bfQu\u00e9 usan las plantas de reciclaje para reciclar el vidrio?\",\r\n opciones: [\"OPCI\u00d3N A. Agua\", \"OPCI\u00d3N B. Agua y qu\u00edmicos\", \"OPCI\u00d3N C. Todo natural, todo verde\"],\r\n correcta: \"C\"\r\n },\r\n {\r\n texto: \"Pregunta 4 Cuanto menos vidrio recicles m\u00e1s coste para tu ayuntamiento, y cuanto m\u00e1s coste, m\u00e1s impuestos. Para que esto no pase, no pases de reciclar.\",\r\n opciones: [\"OPCI\u00d3N A. Verdadero\", \"OPCI\u00d3N B. Falso\", \"OPCI\u00d3N C. Ninguna de las anteriores\"],\r\n correcta: \"A\"\r\n },\r\n {\r\n texto: \"Pregunta 5 Si reciclas vidrio \u00bfen qu\u00e9 ahorras?\",\r\n opciones: [\"OPCI\u00d3N A. En energ\u00eda, impuestos y consumo\", \"OPCI\u00d3N B. En energ\u00eda y consumo\", \"OPCI\u00d3N C. Energ\u00eda e impuestos\"],\r\n correcta: \"C\"\r\n }\r\n ];\r\n\r\n let preguntaActual = 0;\r\n\r\n function iniciarQuiz() {\r\n const nombre = document.getElementById(\"nombre\").value;\r\n const municipio = document.getElementById(\"municipio\").value;\r\n const contacto = document.getElementById(\"contacto\").value;\r\n const edad = document.getElementById(\"edad\").value;\r\n const sexo = document.getElementById(\"sexo\").value;\r\n const profesion = document.getElementById(\"profesion\").value;\r\n if (!nombre || !municipio || !contacto || !edad || !sexo || !profesion) {\r\n alert(\"Por favor, completa todos los campos.\");\r\n return;\r\n }\r\n document.querySelector(\".form-container\").style.display = \"none\";\r\n document.getElementById(\"quiz-container\").style.display = \"flex\";\r\n mostrarPregunta();\r\n }\r\n\r\n function limpiarPrefijoPregunta(texto) {\r\n \/\/ elimina \"Pregunta X\" si existe al inicio (no elimina otras partes)\r\n return texto.replace(\/^\\s*Pregunta\\s*\\d+\\s*\\.?\\s*\/i, '').trim();\r\n }\r\n\r\n function mostrarPregunta() {\r\n\r\n \/\/ Cambiar el t\u00edtulo existente\r\n document.getElementById(\"titulo-principal\").innerText =\r\n \"QUIZ DE RECICLAJE DE VIDRIO \" + (preguntaActual + 1);\r\n\r\n const pregunta = preguntas[preguntaActual];\r\n\r\n document.getElementById(\"pregunta\").innerText =\r\n limpiarPrefijoPregunta(pregunta.texto);\r\n\r\n const opcionesDiv = document.getElementById(\"opciones\");\r\n opcionesDiv.innerHTML = \"\";\r\n\r\n pregunta.opciones.forEach((opcionTexto, index) => {\r\n const m = opcionTexto.match(\/^\\s*OPCI[o\u00d3]N\\s*([A-C])\\.?\\s*(.*)$\/i);\r\n let letra = [\"A\",\"B\",\"C\"][index];\r\n let contenido = opcionTexto;\r\n\r\n if (m) {\r\n letra = m[1].toUpperCase();\r\n contenido = m[2].trim();\r\n }\r\n\r\n const opcionDiv = document.createElement(\"div\");\r\n opcionDiv.classList.add(\"opcion\");\r\n opcionDiv.dataset.letra = letra;\r\n\r\n const etiqueta = document.createElement(\"div\");\r\n etiqueta.classList.add(\"opcion-label\");\r\n etiqueta.innerText = `OPCI\u00d3N ${letra}`;\r\n\r\n const texto = document.createElement(\"div\");\r\n texto.classList.add(\"opcion-text\");\r\n texto.innerText = contenido;\r\n\r\n opcionDiv.appendChild(etiqueta);\r\n opcionDiv.appendChild(texto);\r\n opcionDiv.onclick = () => seleccionarOpcion(letra, opcionDiv);\r\n\r\n opcionesDiv.appendChild(opcionDiv);\r\n });\r\n}\r\n\r\n function seleccionarOpcion(letra, opcionDiv) {\r\n const pregunta = preguntas[preguntaActual];\r\n \/\/ si ya fue marcada como correcta, ignorar clicks posteriores\r\n if (opcionDiv.classList.contains('correcta')) return;\r\n\r\n if (letra === pregunta.correcta) {\r\n opcionDiv.classList.add(\"correcta\");\r\n setTimeout(() => siguientePregunta(), 800);\r\n } else {\r\n opcionDiv.classList.add(\"incorrecta\");\r\n \/\/ no bloqueamos la elecci\u00f3n: el usuario puede seguir seleccionando hasta la correcta\r\n }\r\n }\r\n\r\n function siguientePregunta() {\r\n preguntaActual++;\r\n if (preguntaActual < preguntas.length) {\r\n mostrarPregunta();\r\n } else {\r\n \/\/ s\u00f3lo mostrar mensaje de finalizaci\u00f3n (sin conteo de aciertos)\r\n document.getElementById(\"quiz-container\").innerHTML = \"<h2>\u00a1Has completado el Quiz!<\/h2>\";\r\n setTimeout(() => {\r\n enviarFormularioContactForm7();\r\n window.location.href = \"https:\/\/ecomillonario.es\/?page_id=552\";\r\n }, 1000);\r\n }\r\n }\r\n\r\n function reiniciarQuiz() {\r\n preguntaActual = 0;\r\n mostrarPregunta();\r\n }\r\n\r\n function enviarFormularioContactForm7() {\r\n \/\/ copia los campos al formulario contact form 7 (si existe)\r\n const nombre = document.getElementById(\"nombre\").value;\r\n const municipio = document.getElementById(\"municipio\").value;\r\n const contacto = document.getElementById(\"contacto\").value;\r\n const edad = document.getElementById(\"edad\").value;\r\n const sexo = document.getElementById(\"sexo\").value;\r\n const profesion = document.getElementById(\"profesion\").value;\r\n if (!nombre || !municipio || !contacto || !edad || !sexo || !profesion) {\r\n alert(\"Por favor, completa todos los campos.\");\r\n return;\r\n }\r\n\r\n \/\/ NOTE: no modifiqu\u00e9 la l\u00f3gica, s\u00f3lo intento mapear por name como estaba\r\n const fNombre = document.querySelector('[name=\"nombre\"]');\r\n const fMunicipio = document.querySelector('[name=\"municipio\"]');\r\n const fContacto = document.querySelector('[name=\"contacto\"]');\r\n const fEdad = document.querySelector('[name=\"edad\"]');\r\n const fSexo = document.querySelector('[name=\"sexo\"]');\r\n const fProfesion = document.querySelector('[name=\"profesion\"]');\r\n\r\n if (fNombre) fNombre.value = nombre;\r\n if (fMunicipio) fMunicipio.value = municipio;\r\n if (fContacto) fContacto.value = contacto;\r\n if (fEdad) fEdad.value = edad;\r\n if (fSexo) fSexo.value = sexo;\r\n if (fProfesion) fProfesion.value = profesion;\r\n\r\n const contactForm = document.querySelector('#wpcf7-f981-p2086-o1');\r\n if (contactForm) {\r\n contactForm.querySelector('input[type=\"submit\"]').click();\r\n } else {\r\n console.error('Formulario no encontrado');\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<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0b6567 e-grid elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-con-full e-con e-child\" data-id=\"c0b6567\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7aa9426 elementor-widget elementor-widget-shortcode\" data-id=\"7aa9426\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div style=\"display:none;\">\n \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f981-o1\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"981\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F2086#wpcf7-f981-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"981\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.2\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f981-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><label>Nombre y Apellido<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Municipio<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"municipio\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"municipio\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Contacto<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"contacto\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"contacto\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Edad<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"edad\"><input class=\"wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"number\" name=\"edad\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Sexo<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"sexo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"Masculino\" type=\"text\" name=\"sexo\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Profesi\u00f3n<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"profesion\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"profesion\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Enviar\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n<\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>QUIERO SER ecoMILLONARIO QUIZ QUIZ DE RECICLAJE DE VIDRIO ONLINE SEXOMasculinoFemeninoOtro Iniciar Quiz<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2086","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ecomillonario.es\/index.php?rest_route=\/wp\/v2\/pages\/2086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ecomillonario.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ecomillonario.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ecomillonario.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ecomillonario.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2086"}],"version-history":[{"count":26,"href":"https:\/\/ecomillonario.es\/index.php?rest_route=\/wp\/v2\/pages\/2086\/revisions"}],"predecessor-version":[{"id":2167,"href":"https:\/\/ecomillonario.es\/index.php?rest_route=\/wp\/v2\/pages\/2086\/revisions\/2167"}],"wp:attachment":[{"href":"https:\/\/ecomillonario.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}