Generador de Postas<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n <style>\r\n #map { height: 400px; margin-top: 20px; }\r\n .form-container { margin: 20px; }\r\n .input-container {\r\n margin-bottom: 15px;\r\n border-bottom: 1px solid #ccc;\r\n padding-bottom: 5px;\r\n }\r\n .input-container label {\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n .input-container input {\r\n width: 100%;\r\n padding: 8px;\r\n border: none;\r\n border-radius: 5px;\r\n font-size: 16px;\r\n }\r\n #addPosta {\r\n background-color: #ff5100;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n }\r\n #addPosta:hover {\r\n background-color: #e64e00;\r\n }\r\n #copyCode {\r\n background-color: #4CAF50;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n margin-top: 10px;\r\n }\r\n #copyCode:hover {\r\n background-color: #45a049;\r\n }\r\n #clearCode {\r\n background-color: #f44336;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n margin-top: 10px;\r\n }\r\n #clearCode:hover {\r\n background-color: #e53935;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"form-container\">\r\n <h2>Agregar Nueva Posta<\/h2>\r\n <div class=\"input-container\">\r\n <label for=\"postaId\">ID de la Posta:<\/label>\r\n <input type=\"text\" id=\"postaId\" name=\"postaId\">\r\n <\/div>\r\n <div class=\"input-container\">\r\n <label for=\"postaUrl\">URL de la Posta:<\/label>\r\n <input type=\"text\" id=\"postaUrl\" name=\"postaUrl\">\r\n <\/div>\r\n <div id=\"map\"><\/div><br>\r\n <button id=\"addPosta\">Agregar Posta<\/button>\r\n <button id=\"copyCode\">Copiar C\u00f3digo<\/button>\r\n <button id=\"clearCode\">Limpiar<\/button>\r\n<\/div>\r\n\r\n<pre id=\"generatedCode\" class=\"form-container\"><\/pre>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n<script>\r\n var map = L.map('map').setView([-34.6083, -58.3706], 13);\r\n\r\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n maxZoom: 19,\r\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\r\n}).addTo(map);\r\n\r\n var currentMarker = null;\r\n\r\n map.on('click', function(e) {\r\n var latLng = e.latlng;\r\n\r\n if (currentMarker) {\r\n map.removeLayer(currentMarker);\r\n }\r\n currentMarker = L.marker(latLng).addTo(map);\r\n document.getElementById('postaLatLng').value = latLng.lat + \", \" + latLng.lng;\r\n });\r\n\r\n document.getElementById('addPosta').addEventListener('click', function() {\r\n var postaId = document.getElementById('postaId').value.trim();\r\n var postaUrl = document.getElementById('postaUrl').value.trim();\r\n var latLng = currentMarker ? currentMarker.getLatLng() : null;\r\n\r\n if (!postaId || !postaUrl || !latLng) {\r\n alert('Por favor complete todos los campos y seleccione una ubicaci\u00f3n en el mapa.');\r\n return;\r\n }\r\n\r\n var code = `{ id: '${postaId}', latlng: [${latLng.lat}, ${latLng.lng}], icon: iconoAzul, url: '${postaUrl}' },\\n`;\r\n document.getElementById('generatedCode').textContent += code;\r\n\r\n \/\/ Limpiar los campos despu\u00e9s de agregar\r\n document.getElementById('postaId').value = '';\r\n document.getElementById('postaUrl').value = '';\r\n if (currentMarker) {\r\n map.removeLayer(currentMarker);\r\n currentMarker = null;\r\n }\r\n });\r\n\r\n document.getElementById('copyCode').addEventListener('click', function() {\r\n var code = document.getElementById('generatedCode').textContent;\r\n navigator.clipboard.writeText(code).then(function() {\r\n \/\/ Mostrar mensaje de copiado\r\n var alertBox = document.createElement('div');\r\n alertBox.className = 'alert alert-success alert-dismissible fade show';\r\n alertBox.role = 'alert';\r\n alertBox.innerHTML = `\r\n <strong>C\u00f3digo copiado!<\/strong> Pega el c\u00f3digo generado donde desees en tu aplicaci\u00f3n.\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"><\/button>\r\n `;\r\n document.body.appendChild(alertBox);\r\n\r\n \/\/ Remover el mensaje despu\u00e9s de 3 segundos\r\n setTimeout(function() {\r\n document.body.removeChild(alertBox);\r\n }, 3000);\r\n }).catch(function(err) {\r\n console.error('Error al copiar el c\u00f3digo: ', err);\r\n });\r\n });\r\n\r\n document.getElementById('clearCode').addEventListener('click', function() {\r\n document.getElementById('generatedCode').textContent = '';\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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<div class=\"elementor-element elementor-element-9bd58a3 e-flex e-con-boxed e-con e-parent\" data-id=\"9bd58a3\" 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-4fe5eb4 elementor-widget elementor-widget-html\" data-id=\"4fe5eb4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\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>Generador de C\u00f3digo para P\u00e1gina de Posta<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n text-align: center;\r\n padding: 20px;\r\n }\r\n .container {\r\n max-width: 600px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n border: 1px solid #ccc;\r\n border-radius: 10px;\r\n background-color: #f9f9f9;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n }\r\n textarea {\r\n width: 100%;\r\n height: 300px;\r\n margin-top: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 5px;\r\n padding: 10px;\r\n box-sizing: border-box;\r\n font-family: 'Courier New', Courier, monospace;\r\n }\r\n button {\r\n background-color: #4CAF50;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n text-align: center;\r\n text-decoration: none;\r\n display: inline-block;\r\n font-size: 16px;\r\n margin-top: 10px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n }\r\n button:hover {\r\n background-color: #45a049;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <h2>Generador de C\u00f3digo para P\u00e1gina de Posta<\/h2>\r\n <form id=\"generatorForm\">\r\n <label for=\"postaId\">ID de la Posta:<\/label><br>\r\n <input type=\"text\" id=\"postaId\" name=\"postaId\" required><br><br>\r\n <label for=\"respuestaCorrecta\">Respuesta Correcta:<\/label><br>\r\n <input type=\"text\" id=\"respuestaCorrecta\" name=\"respuestaCorrecta\" required><br><br>\r\n <button type=\"button\" onclick=\"generarCodigo()\">Generar C\u00f3digo<\/button>\r\n <\/form>\r\n\r\n <textarea id=\"codigoGenerado\" readonly>\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\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>Posta: [POSTA_ID]<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n text-align: center;\r\n position: relative;\r\n height: 100vh;\r\n margin: 0;\r\n }\r\n .container {\r\n width: 90%;\r\n max-width: 400px;\r\n margin: 0 auto;\r\n }\r\n input[type=\"text\"], button {\r\n width: 100%;\r\n border-radius: 10px;\r\n padding: 10px 20px;\r\n margin: 10px 0;\r\n box-sizing: border-box;\r\n }\r\n input[type=\"text\"] {\r\n border: 1px solid #ccc;\r\n }\r\n button {\r\n background-color: #FF5100;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n .mensaje {\r\n color: red;\r\n visibility: hidden;\r\n }\r\n .animacion-correcta, .animacion-incorrecta {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n visibility: hidden;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Posta: [POSTA_ID]<\/h1>\r\n<p>Responde la siguiente pregunta:<\/p>\r\n\r\n<div class=\"container\">\r\n <input type=\"text\" id=\"respuesta\" placeholder=\"Escriba aqu\u00ed su respuesta\">\r\n <button onclick=\"verificarRespuesta()\">Responder<\/button>\r\n<\/div>\r\n\r\n<p id=\"mensaje\" class=\"mensaje\">\u00bfNecesitas ayuda? Puedes pedir pistas por el chat.<\/p>\r\n\r\n<img decoding=\"async\" id=\"animacionCorrecta\" class=\"animacion-correcta\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Titulo-4.gif\" alt=\"Respuesta correcta\">\r\n<img decoding=\"async\" id=\"animacionIncorrecta\" class=\"animacion-incorrecta\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Titulo.gif\" alt=\"Respuesta incorrecta\">\r\n\r\n<audio id=\"correctoAudio\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Correct-Answer-Sound-Effect-DeeChannel-mp3cut.net_.mp3\"><\/audio>\r\n<audio id=\"incorrectoAudio\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/INCORRECT-mp3cut.net_.mp3\"><\/audio>\r\n\r\n<script>\r\nfunction verificarRespuesta() {\r\n var respuestaUsuario = document.getElementById(\"respuesta\").value.trim().toLowerCase();\r\n var respuestaCorrecta = \"[RESPUESTA_CORRECTA]\"; \/\/ Esta l\u00ednea se reemplazar\u00e1 din\u00e1micamente con JavaScript\r\n\r\n if (respuestaUsuario === respuestaCorrecta) {\r\n reproducirSonido(\"correctoAudio\");\r\n mostrarAnimacionCorrecta();\r\n\r\n \/\/ Enviar mensaje al mapa para cambiar el icono\r\n window.opener.postMessage({ postaId: '[POSTA_ID]' }, '*');\r\n \r\n \/\/ Establecer una cookie para recordar el estado del icono\r\n setStoredIcon('[POSTA_ID]', 'iconoVerde');\r\n\r\n \/\/ Redirigir de vuelta al mapa despu\u00e9s de 3 segundos\r\n setTimeout(function() {\r\n window.location.href = \"https:\/\/prueba.exploragame.com.ar\/index.php\/prueba-mapa-posta-con-ubicacion-real-backup\/\";\r\n }, 3000);\r\n } else {\r\n reproducirSonido(\"incorrectoAudio\");\r\n mostrarAnimacionIncorrecta();\r\n mostrarMensajeAyuda();\r\n }\r\n\r\n \/\/ Limpiar el campo de respuesta\r\n document.getElementById(\"respuesta\").value = \"\";\r\n}\r\n\r\nfunction reproducirSonido(idAudio) {\r\n var audio = document.getElementById(idAudio);\r\n audio.play();\r\n}\r\n\r\nfunction mostrarAnimacionCorrecta() {\r\n var animacion = document.getElementById(\"animacionCorrecta\");\r\n animacion.style.visibility = \"visible\";\r\n setTimeout(function() {\r\n animacion.style.visibility = \"hidden\";\r\n }, 3000); \/\/ Mostrar la animaci\u00f3n durante 3 segundos\r\n}\r\n\r\nfunction mostrarAnimacionIncorrecta() {\r\n var animacion = document.getElementById(\"animacionIncorrecta\");\r\n animacion.style.visibility = \"visible\";\r\n setTimeout(function() {\r\n animacion.style.visibility = \"hidden\";\r\n }, 2000); \/\/ Mostrar la animaci\u00f3n durante 2 segundos\r\n}\r\n\r\nfunction mostrarMensajeAyuda() {\r\n var mensaje = document.getElementById(\"mensaje\");\r\n mensaje.style.visibility = \"visible\";\r\n}\r\n\r\n\/\/ Funci\u00f3n para establecer el icono almacenado en cookies\r\nfunction setStoredIcon(postaId, iconUrl) {\r\n var expiryDate = new Date();\r\n expiryDate.setTime(expiryDate.getTime() + (24 * 60 * 60 * 1000)); \/\/ Caducidad en 24 horas\r\n document.cookie = `${postaId}=${iconUrl};expires=${expiryDate.toUTCString()};path=\/`;\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n <\/textarea>\r\n<\/div>\r\n\r\n<script>\r\nfunction generarCodigo() {\r\n var postaId = document.getElementById('postaId').value.trim();\r\n var respuestaCorrecta = document.getElementById('respuestaCorrecta').value.trim();\r\n \r\n \/\/ Obtener el c\u00f3digo HTML de la plantilla en el textarea\r\n var codigoHTML = document.getElementById('codigoGenerado').value;\r\n \r\n \/\/ Reemplazar las partes din\u00e1micas en el c\u00f3digo HTML\r\n codigoHTML = codigoHTML.replace(\/\\[POSTA_ID\\]\/g, postaId);\r\n codigoHTML = codigoHTML.replace(\/\\[RESPUESTA_CORRECTA\\]\/g, respuestaCorrecta);\r\n\r\n \/\/ Mostrar el c\u00f3digo generado en el textarea\r\n document.getElementById('codigoGenerado').value = codigoHTML;\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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>Generador de Postas Agregar Nueva Posta ID de la Posta: URL de la Posta: Agregar Posta Copiar C\u00f3digo Limpiar Generador de C\u00f3digo para P\u00e1gina de Posta Generador de C\u00f3digo para P\u00e1gina de Posta ID de la Posta: Respuesta Correcta: Generar C\u00f3digo Posta: [POSTA_ID] Posta: [POSTA_ID] Responde la siguiente pregunta: Responder \u00bfNecesitas ayuda? Puedes pedir pistas … <a title=\"Generador de postas\" class=\"read-more\" href=\"https:\/\/play.exploragame.com.ar\/index.php\/generador-de-postas\/\" aria-label=\"Leer m\u00e1s sobre Generador de postas\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"wf_page_folders":[12],"class_list":["post-6279","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=6279"}],"version-history":[{"count":7,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6279\/revisions"}],"predecessor-version":[{"id":6346,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6279\/revisions\/6346"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6279"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=6279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Generador de Postas<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n <style>\r\n #map { height: 400px; margin-top: 20px; }\r\n .form-container { margin: 20px; }\r\n .input-container {\r\n margin-bottom: 15px;\r\n border-bottom: 1px solid #ccc;\r\n padding-bottom: 5px;\r\n }\r\n .input-container label {\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n .input-container input {\r\n width: 100%;\r\n padding: 8px;\r\n border: none;\r\n border-radius: 5px;\r\n font-size: 16px;\r\n }\r\n #addPosta {\r\n background-color: #ff5100;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n }\r\n #addPosta:hover {\r\n background-color: #e64e00;\r\n }\r\n #copyCode {\r\n background-color: #4CAF50;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n margin-top: 10px;\r\n }\r\n #copyCode:hover {\r\n background-color: #45a049;\r\n }\r\n #clearCode {\r\n background-color: #f44336;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n margin-top: 10px;\r\n }\r\n #clearCode:hover {\r\n background-color: #e53935;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"form-container\">\r\n <h2>Agregar Nueva Posta<\/h2>\r\n <div class=\"input-container\">\r\n <label for=\"postaId\">ID de la Posta:<\/label>\r\n <input type=\"text\" id=\"postaId\" name=\"postaId\">\r\n <\/div>\r\n <div class=\"input-container\">\r\n <label for=\"postaUrl\">URL de la Posta:<\/label>\r\n <input type=\"text\" id=\"postaUrl\" name=\"postaUrl\">\r\n <\/div>\r\n <div id=\"map\"><\/div><br>\r\n <button id=\"addPosta\">Agregar Posta<\/button>\r\n <button id=\"copyCode\">Copiar C\u00f3digo<\/button>\r\n <button id=\"clearCode\">Limpiar<\/button>\r\n<\/div>\r\n\r\n<pre id=\"generatedCode\" class=\"form-container\"><\/pre>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n<script>\r\n var map = L.map('map').setView([-34.6083, -58.3706], 13);\r\n\r\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n maxZoom: 19,\r\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\r\n}).addTo(map);\r\n\r\n var currentMarker = null;\r\n\r\n map.on('click', function(e) {\r\n var latLng = e.latlng;\r\n\r\n if (currentMarker) {\r\n map.removeLayer(currentMarker);\r\n }\r\n currentMarker = L.marker(latLng).addTo(map);\r\n document.getElementById('postaLatLng').value = latLng.lat + \", \" + latLng.lng;\r\n });\r\n\r\n document.getElementById('addPosta').addEventListener('click', function() {\r\n var postaId = document.getElementById('postaId').value.trim();\r\n var postaUrl = document.getElementById('postaUrl').value.trim();\r\n var latLng = currentMarker ? currentMarker.getLatLng() : null;\r\n\r\n if (!postaId || !postaUrl || !latLng) {\r\n alert('Por favor complete todos los campos y seleccione una ubicaci\u00f3n en el mapa.');\r\n return;\r\n }\r\n\r\n var code = `{ id: '${postaId}', latlng: [${latLng.lat}, ${latLng.lng}], icon: iconoAzul, url: '${postaUrl}' },\\n`;\r\n document.getElementById('generatedCode').textContent += code;\r\n\r\n \/\/ Limpiar los campos despu\u00e9s de agregar\r\n document.getElementById('postaId').value = '';\r\n document.getElementById('postaUrl').value = '';\r\n if (currentMarker) {\r\n map.removeLayer(currentMarker);\r\n currentMarker = null;\r\n }\r\n });\r\n\r\n document.getElementById('copyCode').addEventListener('click', function() {\r\n var code = document.getElementById('generatedCode').textContent;\r\n navigator.clipboard.writeText(code).then(function() {\r\n \/\/ Mostrar mensaje de copiado\r\n var alertBox = document.createElement('div');\r\n alertBox.className = 'alert alert-success alert-dismissible fade show';\r\n alertBox.role = 'alert';\r\n alertBox.innerHTML = `\r\n <strong>C\u00f3digo copiado!<\/strong> Pega el c\u00f3digo generado donde desees en tu aplicaci\u00f3n.\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"><\/button>\r\n `;\r\n document.body.appendChild(alertBox);\r\n\r\n \/\/ Remover el mensaje despu\u00e9s de 3 segundos\r\n setTimeout(function() {\r\n document.body.removeChild(alertBox);\r\n }, 3000);\r\n }).catch(function(err) {\r\n console.error('Error al copiar el c\u00f3digo: ', err);\r\n });\r\n });\r\n\r\n document.getElementById('clearCode').addEventListener('click', function() {\r\n document.getElementById('generatedCode').textContent = '';\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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<div class=\"elementor-element elementor-element-9bd58a3 e-flex e-con-boxed e-con e-parent\" data-id=\"9bd58a3\" 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-4fe5eb4 elementor-widget elementor-widget-html\" data-id=\"4fe5eb4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\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>Generador de C\u00f3digo para P\u00e1gina de Posta<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n text-align: center;\r\n padding: 20px;\r\n }\r\n .container {\r\n max-width: 600px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n border: 1px solid #ccc;\r\n border-radius: 10px;\r\n background-color: #f9f9f9;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n }\r\n textarea {\r\n width: 100%;\r\n height: 300px;\r\n margin-top: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 5px;\r\n padding: 10px;\r\n box-sizing: border-box;\r\n font-family: 'Courier New', Courier, monospace;\r\n }\r\n button {\r\n background-color: #4CAF50;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n text-align: center;\r\n text-decoration: none;\r\n display: inline-block;\r\n font-size: 16px;\r\n margin-top: 10px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n }\r\n button:hover {\r\n background-color: #45a049;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <h2>Generador de C\u00f3digo para P\u00e1gina de Posta<\/h2>\r\n <form id=\"generatorForm\">\r\n <label for=\"postaId\">ID de la Posta:<\/label><br>\r\n <input type=\"text\" id=\"postaId\" name=\"postaId\" required><br><br>\r\n <label for=\"respuestaCorrecta\">Respuesta Correcta:<\/label><br>\r\n <input type=\"text\" id=\"respuestaCorrecta\" name=\"respuestaCorrecta\" required><br><br>\r\n <button type=\"button\" onclick=\"generarCodigo()\">Generar C\u00f3digo<\/button>\r\n <\/form>\r\n\r\n <textarea id=\"codigoGenerado\" readonly>\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\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>Posta: [POSTA_ID]<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n text-align: center;\r\n position: relative;\r\n height: 100vh;\r\n margin: 0;\r\n }\r\n .container {\r\n width: 90%;\r\n max-width: 400px;\r\n margin: 0 auto;\r\n }\r\n input[type=\"text\"], button {\r\n width: 100%;\r\n border-radius: 10px;\r\n padding: 10px 20px;\r\n margin: 10px 0;\r\n box-sizing: border-box;\r\n }\r\n input[type=\"text\"] {\r\n border: 1px solid #ccc;\r\n }\r\n button {\r\n background-color: #FF5100;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n .mensaje {\r\n color: red;\r\n visibility: hidden;\r\n }\r\n .animacion-correcta, .animacion-incorrecta {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n visibility: hidden;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Posta: [POSTA_ID]<\/h1>\r\n<p>Responde la siguiente pregunta:<\/p>\r\n\r\n<div class=\"container\">\r\n <input type=\"text\" id=\"respuesta\" placeholder=\"Escriba aqu\u00ed su respuesta\">\r\n <button onclick=\"verificarRespuesta()\">Responder<\/button>\r\n<\/div>\r\n\r\n<p id=\"mensaje\" class=\"mensaje\">\u00bfNecesitas ayuda? Puedes pedir pistas por el chat.<\/p>\r\n\r\n<img decoding=\"async\" id=\"animacionCorrecta\" class=\"animacion-correcta\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Titulo-4.gif\" alt=\"Respuesta correcta\">\r\n<img decoding=\"async\" id=\"animacionIncorrecta\" class=\"animacion-incorrecta\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Titulo.gif\" alt=\"Respuesta incorrecta\">\r\n\r\n<audio id=\"correctoAudio\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Correct-Answer-Sound-Effect-DeeChannel-mp3cut.net_.mp3\"><\/audio>\r\n<audio id=\"incorrectoAudio\" src=\"https:\/\/prueba.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/INCORRECT-mp3cut.net_.mp3\"><\/audio>\r\n\r\n<script>\r\nfunction verificarRespuesta() {\r\n var respuestaUsuario = document.getElementById(\"respuesta\").value.trim().toLowerCase();\r\n var respuestaCorrecta = \"[RESPUESTA_CORRECTA]\"; \/\/ Esta l\u00ednea se reemplazar\u00e1 din\u00e1micamente con JavaScript\r\n\r\n if (respuestaUsuario === respuestaCorrecta) {\r\n reproducirSonido(\"correctoAudio\");\r\n mostrarAnimacionCorrecta();\r\n\r\n \/\/ Enviar mensaje al mapa para cambiar el icono\r\n window.opener.postMessage({ postaId: '[POSTA_ID]' }, '*');\r\n \r\n \/\/ Establecer una cookie para recordar el estado del icono\r\n setStoredIcon('[POSTA_ID]', 'iconoVerde');\r\n\r\n \/\/ Redirigir de vuelta al mapa despu\u00e9s de 3 segundos\r\n setTimeout(function() {\r\n window.location.href = \"https:\/\/prueba.exploragame.com.ar\/index.php\/prueba-mapa-posta-con-ubicacion-real-backup\/\";\r\n }, 3000);\r\n } else {\r\n reproducirSonido(\"incorrectoAudio\");\r\n mostrarAnimacionIncorrecta();\r\n mostrarMensajeAyuda();\r\n }\r\n\r\n \/\/ Limpiar el campo de respuesta\r\n document.getElementById(\"respuesta\").value = \"\";\r\n}\r\n\r\nfunction reproducirSonido(idAudio) {\r\n var audio = document.getElementById(idAudio);\r\n audio.play();\r\n}\r\n\r\nfunction mostrarAnimacionCorrecta() {\r\n var animacion = document.getElementById(\"animacionCorrecta\");\r\n animacion.style.visibility = \"visible\";\r\n setTimeout(function() {\r\n animacion.style.visibility = \"hidden\";\r\n }, 3000); \/\/ Mostrar la animaci\u00f3n durante 3 segundos\r\n}\r\n\r\nfunction mostrarAnimacionIncorrecta() {\r\n var animacion = document.getElementById(\"animacionIncorrecta\");\r\n animacion.style.visibility = \"visible\";\r\n setTimeout(function() {\r\n animacion.style.visibility = \"hidden\";\r\n }, 2000); \/\/ Mostrar la animaci\u00f3n durante 2 segundos\r\n}\r\n\r\nfunction mostrarMensajeAyuda() {\r\n var mensaje = document.getElementById(\"mensaje\");\r\n mensaje.style.visibility = \"visible\";\r\n}\r\n\r\n\/\/ Funci\u00f3n para establecer el icono almacenado en cookies\r\nfunction setStoredIcon(postaId, iconUrl) {\r\n var expiryDate = new Date();\r\n expiryDate.setTime(expiryDate.getTime() + (24 * 60 * 60 * 1000)); \/\/ Caducidad en 24 horas\r\n document.cookie = `${postaId}=${iconUrl};expires=${expiryDate.toUTCString()};path=\/`;\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n <\/textarea>\r\n<\/div>\r\n\r\n<script>\r\nfunction generarCodigo() {\r\n var postaId = document.getElementById('postaId').value.trim();\r\n var respuestaCorrecta = document.getElementById('respuestaCorrecta').value.trim();\r\n \r\n \/\/ Obtener el c\u00f3digo HTML de la plantilla en el textarea\r\n var codigoHTML = document.getElementById('codigoGenerado').value;\r\n \r\n \/\/ Reemplazar las partes din\u00e1micas en el c\u00f3digo HTML\r\n codigoHTML = codigoHTML.replace(\/\\[POSTA_ID\\]\/g, postaId);\r\n codigoHTML = codigoHTML.replace(\/\\[RESPUESTA_CORRECTA\\]\/g, respuestaCorrecta);\r\n\r\n \/\/ Mostrar el c\u00f3digo generado en el textarea\r\n document.getElementById('codigoGenerado').value = codigoHTML;\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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>Generador de Postas Agregar Nueva Posta ID de la Posta: URL de la Posta: Agregar Posta Copiar C\u00f3digo Limpiar Generador de C\u00f3digo para P\u00e1gina de Posta Generador de C\u00f3digo para P\u00e1gina de Posta ID de la Posta: Respuesta Correcta: Generar C\u00f3digo Posta: [POSTA_ID] Posta: [POSTA_ID] Responde la siguiente pregunta: Responder \u00bfNecesitas ayuda? Puedes pedir pistas … <a title=\"Generador de postas\" class=\"read-more\" href=\"https:\/\/play.exploragame.com.ar\/index.php\/generador-de-postas\/\" aria-label=\"Leer m\u00e1s sobre Generador de postas\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"wf_page_folders":[12],"class_list":["post-6279","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=6279"}],"version-history":[{"count":7,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6279\/revisions"}],"predecessor-version":[{"id":6346,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/6279\/revisions\/6346"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6279"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=6279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}