Generador de postas

Generador de Postas
Agregar Nueva Posta

ID de la Posta:
URL de la Posta:
Generador de Código para Página de Posta
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posta: [POSTA_ID]</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            position: relative;
            height: 100vh;
            margin: 0;
        }
        .container {
            width: 90%;
            max-width: 400px;
            margin: 0 auto;
        }
        input[type="text"], button {
            width: 100%;
            border-radius: 10px;
            padding: 10px 20px;
            margin: 10px 0;
            box-sizing: border-box;
        }
        input[type="text"] {
            border: 1px solid #ccc;
        }
        button {
            background-color: #FF5100;
            color: white;
            border: none;
            cursor: pointer;
        }
        .mensaje {
            color: red;
            visibility: hidden;
        }
        .animacion-correcta, .animacion-incorrecta {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            visibility: hidden;
        }
    </style>
</head>
<body>

<h1>Posta: [POSTA_ID]</h1>
<p>Responde la siguiente pregunta:</p>

<div class="container">
    <input type="text" id="respuesta" placeholder="Escriba aquí su respuesta">
    <button onclick="verificarRespuesta()">Responder</button>
</div>

<p id="mensaje" class="mensaje">¿Necesitas ayuda? Puedes pedir pistas por el chat.</p>

<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">
<img decoding="async" id="animacionIncorrecta" class="animacion-incorrecta" src="https://prueba.exploragame.com.ar/wp-content/uploads/2024/06/Titulo.gif" alt="Respuesta incorrecta">

<audio id="correctoAudio" src="https://prueba.exploragame.com.ar/wp-content/uploads/2024/06/Correct-Answer-Sound-Effect-DeeChannel-mp3cut.net_.mp3"></audio>
<audio id="incorrectoAudio" src="https://prueba.exploragame.com.ar/wp-content/uploads/2024/06/INCORRECT-mp3cut.net_.mp3"></audio>

<script>
function verificarRespuesta() {
    var respuestaUsuario = document.getElementById("respuesta").value.trim().toLowerCase();
    var respuestaCorrecta = "[RESPUESTA_CORRECTA]"; // Esta línea se reemplazará dinámicamente con JavaScript

    if (respuestaUsuario === respuestaCorrecta) {
        reproducirSonido("correctoAudio");
        mostrarAnimacionCorrecta();

        // Enviar mensaje al mapa para cambiar el icono
        window.opener.postMessage({ postaId: '[POSTA_ID]' }, '*');
        
        // Establecer una cookie para recordar el estado del icono
        setStoredIcon('[POSTA_ID]', 'iconoVerde');

        // Redirigir de vuelta al mapa después de 3 segundos
        setTimeout(function() {
            window.location.href = "https://prueba.exploragame.com.ar/index.php/prueba-mapa-posta-con-ubicacion-real-backup/";
        }, 3000);
    } else {
        reproducirSonido("incorrectoAudio");
        mostrarAnimacionIncorrecta();
        mostrarMensajeAyuda();
    }

    // Limpiar el campo de respuesta
    document.getElementById("respuesta").value = "";
}

function reproducirSonido(idAudio) {
    var audio = document.getElementById(idAudio);
    audio.play();
}

function mostrarAnimacionCorrecta() {
    var animacion = document.getElementById("animacionCorrecta");
    animacion.style.visibility = "visible";
    setTimeout(function() {
        animacion.style.visibility = "hidden";
    }, 3000); // Mostrar la animación durante 3 segundos
}

function mostrarAnimacionIncorrecta() {
    var animacion = document.getElementById("animacionIncorrecta");
    animacion.style.visibility = "visible";
    setTimeout(function() {
        animacion.style.visibility = "hidden";
    }, 2000); // Mostrar la animación durante 2 segundos
}

function mostrarMensajeAyuda() {
    var mensaje = document.getElementById("mensaje");
    mensaje.style.visibility = "visible";
}

// Función para establecer el icono almacenado en cookies
function setStoredIcon(postaId, iconUrl) {
    var expiryDate = new Date();
    expiryDate.setTime(expiryDate.getTime() + (24 * 60 * 60 * 1000)); // Caducidad en 24 horas
    document.cookie = `${postaId}=${iconUrl};expires=${expiryDate.toUTCString()};path=/`;
}
</script>

</body>
</html>