// Función para capturar respuestas y calcular el rol principal y ascendente document.getElementById('adnForm').addEventListener('submit', function(e) { e.preventDefault(); // Capturar los valores de las respuestas const nombre = document.getElementById('nombre').value; const pais = document.getElementById('pais').value; const email = document.getElementById('email').value; const respuesta1 = document.getElementById('pregunta1').value; const respuesta2 = document.getElementById('pregunta2').value; const respuesta3 = document.getElementById('pregunta3').value; const respuesta4 = document.getElementById('pregunta4').value; const respuesta5 = document.getElementById('pregunta5').value; const respuesta6 = document.getElementById('pregunta6').value; // Definir una tabla con los valores de cada respuesta para el cálculo const valores = { spiderman: { principal: 'Creativo', ascendente: 'Empático' }, elasticgirl: { principal: 'Adaptable', ascendente: 'Pragmático' }, aquaman: { principal: 'Emocional', ascendente: 'Liderazgo' }, ironman: { principal: 'Visionario', ascendente: 'Innovador' }, acogedor: { principal: 'Funcional', ascendente: 'Creativo' }, musical: { principal: 'Conector', ascendente: 'Analítico' }, // Añadir más valores según las preguntas y opciones }; // Función para obtener el rol a partir de las respuestas function obtenerRol(respuesta) { return valores[respuesta] || { principal: 'Indefinido', ascendente: 'Indefinido' }; } // Calcular rol principal y ascendente basado en las respuestas const rolPrincipal = obtenerRol(respuesta1).principal; // Puedes mejorar la lógica aquí const rolAscendente = obtenerRol(respuesta1).ascendente; // Ejemplo básico con respuesta1 // Crear el payload para enviar a Google Sheets const data = { nombre: nombre, pais: pais, email: email, rolPrincipal: rolPrincipal, rolAscendente: rolAscendente }; // Enviar datos a Google Sheets enviarDatosAGoogleSheets(data); }); // Función para enviar los datos a Google Sheets usando un webhook de Google Apps Script function enviarDatosAGoogleSheets(data) { const url = "URL_DEL_WEBHOOK_DE_GOOGLE_APPS_SCRIPT"; // Aquí va la URL del webhook de tu Google Sheet fetch(url, { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.json()) .then(result => { console.log("Datos enviados correctamente:", result); alert("¡Tus resultados han sido enviados! Revisa tu correo pronto."); }) .catch(error => { console.error("Error al enviar los datos:", error); alert("Hubo un problema al enviar los datos."); }); } 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test ADN Digital</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            background-color: var(--background-cards-difuminado);
            font-family: Fredoka, sans-serif;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        form {
            background-color: #040f28;
            padding: 20px;
            border-radius: var(--corner-cards);
            width: 50rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(auto-fit, minmax(50px, auto));
            grid-column-gap: 20px;
            grid-row-gap: 17px;
            align-items: center;
        }
        label {
            grid-column: 1 / span 2;
            font-size: 1.1rem;
        }
        input, select {
            padding: 10px;
            border-radius: var(--radius-buttoms);
            border: none;
            width: 100%;
            font-size: 1rem;
        }
        input[type="submit"] {
            grid-column: 1 / span 2;
            background-color: #5337e6;
            color: white;
            cursor: pointer;
            margin-top: 20px;
        }
        input[type="submit"]:hover {
            background-color: #1a0074;
        }
    </style>
</head>
<body>
    <form id="adnForm">
        <label>Nombre y Apellido:</label>
        <input type="text" id="nombre" required>

        <label>País de Residencia:</label>
        <input type="text" id="pais" required>

        <label>Email:</label>
        <input type="email" id="email" required>

        <label>Si pudieras ser un superhéroe, ¿Cuál elegirías?</label>
        <select id="pregunta1" required>
            <option value="spiderman">Spiderman (Agilidad y empatía)</option>
            <option value="elasticgirl">Elastic Girl (Adaptabilidad)</option>
            <option value="aquaman">Aquaman (Conexión emocional)</option>
            <option value="ironman">Iron Man (Creatividad y visión)</option>
        </select>

        <label>¿Cuál es el aspecto más importante para ti al organizar una fiesta?</label>
        <select id="pregunta2" required>
            <option value="acogedor">Crear un espacio acogedor y funcional</option>
            <option value="musical">Conocer los gustos musicales de los invitados</option>
            <option value="invitacion">Hacer una invitación original y divertida</option>
            <option value="decoracion">Decorar el lugar de forma creativa</option>
            <option value="diversion">Asegurarte que todos se diviertan</option>
            <option value="planificar">Planificar un cronograma de actividades</option>
        </select>

        <label>¿Cómo prefieres resolver un problema?</label>
        <select id="pregunta3" required>
            <option value="prototipo">Construir un prototipo y probarlo</option>
            <option value="lluviaideas">Hacer una lluvia de ideas con otras personas</option>
            <option value="documentar">Documentar el problema</option>
            <option value="diagrama">Crear un diagrama visual</option>
            <option value="hablar">Hablar con las personas afectadas</option>
            <option value="analizar">Analizar datos y estadísticas</option>
        </select>

        <label>Si pudieras construir la casa de tus sueños, ¿qué aspectos serían fundamentales?</label>
        <select id="pregunta4" required>
            <option value="funcional">Diseñar un espacio simple, cómodo y funcional</option>
            <option value="sostenible">Elegir materiales sostenibles y saludables</option>
            <option value="documentacion">Prestar atención a la documentación legal</option>
            <option value="estetico">Crear un diseño estético y atractivo</option>
            <option value="personalidad">Hacer que el hogar refleje tu personalidad</option>
            <option value="presupuesto">Planificar un presupuesto realista</option>
        </select>

        <label>¿Qué buscas experimentar cuando viajas a un nuevo lugar?</label>
        <select id="pregunta5" required>
            <option value="perderse">Perderte y descubrir lugares inesperados</option>
            <option value="historia">Conocer la historia y cultura del lugar</option>
            <option value="experiencias">Vivir experiencias para contarlas después</option>
            <option value="fotos">Tomar fotos de lugares emblemáticos</option>
            <option value="comida">Probar la comida local y conocer gente nueva</option>
            <option value="itinerario">Planificar un itinerario detallado</option>
        </select>

        <label>¿Cuál es tu primer paso al armar un rompecabezas?</label>
        <select id="pregunta6" required>
            <option value="seccion">Trabajar con una pequeña sección</option>
            <option value="imagencompleta">Entender la imagen completa antes</option>
            <option value="historia">Crear una historia sobre la imagen</option>
            <option value="colores">Agrupar piezas por color y forma</option>
            <option value="colaborar">Buscar a alguien para hacerlo juntos</option>
            <option value="plan">Diseñar un plan para completarlo rápido</option>
        </select>

        <!-- Puedes seguir añadiendo más preguntas con el mismo formato -->

        <input type="submit" value="Enviar">
    </form>

    <script src="app.js"></script>
</body>
</html>