Cómo crear una herramienta de evaluación de personalidad en Webflow Cloud con puntuación en el servidor

Cómo crear una herramienta de evaluación de personalidad en Webflow Cloud con puntuación en el servidor

Aprende a crear una evaluación de personalidad de los "Cinco Grandes" en Webflow Cloud, con puntuación en el servidor, almacenamiento D1 y KV, y una narrativa de resultados opcional mediante IA.

Cómo crear una herramienta de evaluación de personalidad en Webflow Cloud con puntuación en el servidor

Ismail Ajagbe
Redactor técnico
Ver perfil del autor
Ismail Ajagbe
Redactor técnico
Ver perfil del autor
Índice de contenidos

Un test de personalidad parece un widget de interfaz, pero la parte importante (la puntuación) debe estar en el servidor, y Webflow Cloud es el lugar ideal para alojarla.

La mayoría de los tests de personalidad que encuentras en sitios de marketing están construidos totalmente en el navegador. Las preguntas llegan al visitante en JavaScript plano, al igual que la clave de puntuación que asigna las respuestas a un resultado.

Eso funciona hasta que alguien abre las herramientas de desarrollo y encuentra tu clave de puntuación a la vista; en ese momento, la "evaluación" se convierte en una tabla de consulta que pueden descifrar en dos minutos. Webflow Cloud ejecuta una aplicación Next.js como un Cloudflare Worker en el mismo dominio que tu sitio de Webflow, por lo que la página que muestra las preguntas y el endpoint que las puntúa comparten el mismo origen sin necesidad de configurar CORS.

Obtienes una base de datos SQLite para almacenar los resultados completados y un almacén de clave-valor para el estado de la sesión en curso, además de variables de entorno para cualquier clave de API, todo integrado en la misma aplicación.

Esta guía construye una evaluación de los Cinco Grandes (OCEAN) utilizando el International Personality Item Pool de dominio público, la puntúa en el servidor y guarda cada envío, para luego convertir opcionalmente las puntuaciones brutas en un perfil legible mediante un modelo de IA.

El modelo de los Cinco Grandes es el marco ideal para trabajar porque sus ítems son de uso y modificación libre, a diferencia de otros instrumentos registrados, lo que te permite lanzar un producto real sin riesgos de licencias.

3 formas de crear una evaluación de personalidad en un sitio de Webflow

Existen tres formas comunes de añadir una evaluación de personalidad a un sitio de Webflow, y se diferencian principalmente en dónde se procesa la puntuación y quién tiene acceso a ella:

  • Un embed de terceros es lo más rápido de implementar, pero cede la experiencia y los datos a otra empresa.
  • Un script del lado del cliente te permite mantener el control del diseño, pero deja la clave de puntuación expuesta a cualquiera que sepa dónde mirar.
  • Una aplicación de Webflow Cloud mantiene la puntuación privada y los datos bajo tu control, por eso es mi opción preferida para cualquier cosa que no sea un test pasajero.

La siguiente tabla compara las tres opciones según los factores clave para decidir:

Tabla de datos
Enfoque Ubicación de la puntuación Datos de resultados Ideal para
Embed de terceros (Typeform, etc.) Servidores del proveedor Residen en el proveedor Un test rápido sin necesidades de propiedad de datos
JavaScript del lado del cliente El navegador del visitante En ninguna parte, o una herramienta de formularios Un cuestionario solo por diversión sin requisitos de integridad
Aplicación de Webflow Cloud Tus controladores de ruta (Route Handlers) Tu base de datos D1 Una evaluación real que tú controlas, puntúas de forma privada y sobre la que construyes

El resto de esta guía implementa la tercera fila.

Antes de empezar, esto es lo que necesitas tener listo.

¿Qué necesitas para crear una herramienta de evaluación de personalidad en Webflow Cloud?

Necesitas un proyecto de Webflow Cloud ejecutando una aplicación Next.js, un conjunto de preguntas con puntuación, dos enlaces de almacenamiento (una base de datos SQLite y un almacén de clave-valor) y, si quieres resultados redactados por IA, una clave API para un modelo de lenguaje. Todo esto se ejecuta en el entorno de ejecución de Webflow Cloud Workers, sin necesidad de un backend independiente.

Confirma que tienes esto listo antes de continuar:

  • Un proyecto de Webflow Cloud ejecutando una aplicación Next.js, ya sea desplegada o en desarrollo local
  • Un conjunto de preguntas de los "Cinco Grandes" con una clave de puntuación (esta guía utiliza ítems IPIP de dominio público)
  • Un enlace a SQLite (D1) para los resultados completados y un enlace de clave-valor para el estado de la sesión
  • Una clave API de LLM (opcional, para el paso de narrativa con IA), configurada como variable de entorno en Webflow Cloud
  • Node.js 22.13.0 o superior de forma local, el mínimo para Webflow CLI 2.0, además de la propia Webflow CLI

Cada uno de estos elementos tiene su razón de ser. Los pasos siguientes explican qué hace cada uno y por qué lo he configurado de esta manera.

7 pasos para crear una herramienta de evaluación de personalidad en Webflow Cloud

A grandes rasgos, defines las preguntas y la clave de puntuación, declaras tu almacenamiento, creas el esquema de la base de datos, sirves las preguntas y mantienes el estado de la sesión, puntúas y guardas el envío, generas opcionalmente una narrativa con IA y conectas todo a tu página de Webflow.

Cada paso a continuación es independiente, y los pasos de puntuación y almacenamiento funcionan tanto si añades el paso de IA al final como si no.

1. Define el conjunto de preguntas y la clave de puntuación

Empieza por los datos, ya que todos los pasos posteriores los utilizan. Crea un módulo que contenga tus preguntas, cada una etiquetada con el rasgo que mide y su dirección clave. El ejemplo siguiente utiliza dos ítems por rasgo para facilitar la lectura; una evaluación de producción suele utilizar el conjunto completo de diez ítems por rasgo del IPIP, que puedes copiar de los IPIP Big-Five Factor Markers.

El campo keyed es la parte importante: 1 para los ítems con clave positiva y -1 para los de clave negativa. El sistema de puntuación del paso 5 lo utiliza para decidir si debe invertir una respuesta.

Crea :lib/questions.ts

// lib/questions.ts

export type Trait = 'O' | 'C' | 'E' | 'A' | 'N'

export type Question = {
  id: number
  text: string
  trait: Trait
  keyed: 1 | -1 // 1 = positively keyed, -1 = reverse-keyed
}

// Public-domain IPIP items. Two per trait shown; expand to 10 per trait for production.
export const QUESTIONS: Question[] = [
  { id: 1, text: 'I am the life of the party.', trait: 'E', keyed: 1 },
  { id: 2, text: "I don't talk a lot.", trait: 'E', keyed: -1 },
  { id: 3, text: "I sympathize with others' feelings.", trait: 'A', keyed: 1 },
  { id: 4, text: "I am not interested in other people's problems.", trait: 'A', keyed: -1 },
  { id: 5, text: 'I get chores done right away.', trait: 'C', keyed: 1 },
  { id: 6, text: 'I often forget to put things back in their proper place.', trait: 'C', keyed: -1 },
  { id: 7, text: 'I get stressed out easily.', trait: 'N', keyed: 1 },
  { id: 8, text: 'I am relaxed most of the time.', trait: 'N', keyed: -1 },
  { id: 9, text: 'I have a vivid imagination.', trait: 'O', keyed: 1 },
  { id: 10, text: 'I am not interested in abstract ideas.', trait: 'O', keyed: -1 },
]

export const TRAIT_NAMES: Record<Trait, string> = {
  O: 'Openness',
  C: 'Conscientiousness',
  E: 'Extraversion',
  A: 'Agreeableness',
  N: 'Neuroticism',
}

Como este archivo reside en tu aplicación de Webflow Cloud y nunca se envía al cliente, la clave de puntuación permanece privada. La página del paso 7 solo obtiene el texto y los ID de las preguntas, no el rasgo ni la dirección clave.

Resultado esperado: un banco de preguntas tipado que puedes importar en cualquier parte de la aplicación.

2. Declara tus enlaces de almacenamiento D1 y Key Value

Una vez definidas las preguntas, dale a la aplicación un lugar donde leer y escribir. Webflow Cloud conecta el almacenamiento a través de enlaces declarados en wrangler.json en la raíz de tu proyecto. Añade una entrada d1_databases para los resultados completados y una entrada kv_namespaces para el estado de la sesión.

El fragmento siguiente declara ambos. Deja el marcador de posición database_id tal cual; Webflow Cloud genera un ID real para cada recurso en su primer despliegue.

Añade ambos enlaces a wrangler.json:

{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "assessment_db",
      "database_id": "REPLACE_AFTER_DEPLOY",
      "migrations_dir": "./migrations"
    }
  ],
  "kv_namespaces": [
    {
      "binding": "SESSION_KV",
      "id": "REPLACE_AFTER_DEPLOY"
    }
  ]
}

Tras guardar esto, genera los tipos de TypeScript para que tu editor sepa que los enlaces existen:

npx wrangler types

Ese comando crea o actualiza worker-configuration.d.ts. En Next.js, también actualizas cloudflare-env.d.ts para que los enlaces DB y SESSION_KV se verifiquen mediante tipos en tus Route Handlers.

Resultado esperado: dos enlaces declarados, tipados y listos, que Webflow Cloud aprovisiona en tu próximo despliegue.

3. Crea el esquema de la base de datos con una migración

Antes de que la aplicación pueda almacenar un resultado, la tabla  debe existir. Webflow Cloud gestiona el esquema con migraciones: archivos  versionados en la results.sqlmigrations_dir que configuraste en el paso 2, aplicados automáticamente en cada despliegue. Las migraciones son solo aditivas, por lo que nunca editas un archivo antiguo; añades uno nuevo para cada cambio.

Crea tu primera migración con una tabla que contenga una fila por cada evaluación completada. Las puntuaciones de los cinco rasgos se almacenan como números enteros, y las respuestas sin procesar y cualquier narrativa de IA se almacenan como texto.

Crea :migrations/001_init.sql

-- migrations/001_init.sql
CREATE TABLE IF NOT EXISTS results (
  id TEXT PRIMARY KEY,
  created_at INTEGER NOT NULL,
  openness INTEGER NOT NULL,
  conscientiousness INTEGER NOT NULL,
  extraversion INTEGER NOT NULL,
  agreeableness INTEGER NOT NULL,
  neuroticism INTEGER NOT NULL,
  answers TEXT NOT NULL,
  narrative TEXT
);

Puedes probar esto en una base de datos local antes de desplegarlo, algo que siempre hago para detectar errores tipográficos en el SQL antes de que lleguen a producción:

wrangler d1 migrations apply DB --local

Al desplegar, Webflow Cloud aplica cualquier archivo de migración nuevo a la base de datos gestionada.

Resultado esperado: una tabla results que existe tanto en tu base de datos local como en la desplegada, lista para recibir envíos.

4. Sirve las preguntas y mantén el estado de la sesión en el almacén Key Value

Ahora muestra las preguntas en la página y ofrece al visitante un lugar donde guardar sus respuestas a medida que avanza. Dos pequeños Route Handlers se encargan de esto. El primero devuelve las preguntas eliminando los campos de rasgos y claves, para que el navegador nunca vea la clave de puntuación.

El segundo guarda el progreso parcial en el almacén de clave-valor (KV) bajo una clave por sesión. Para permitir que alguien se vaya y regrese, guarda ese ID de sesión en una cookie o localStorage y añade un controlador GET correspondiente que lea el borrador; el lado de escritura es lo que cubre el controlador a continuación.

Ambos controladores leen sus enlaces a través de getCloudflareContext() del adaptador OpenNext, que es como una aplicación de Next.js accede al entorno de ejecución de Webflow Cloud. Webflow Cloud ejecuta estos controladores en el entorno de ejecución de Node.js a través de ese adaptador, por lo que no se necesita ninguna declaración de tiempo de ejecución.

Empieza con app/api/questions/route.ts:

// app/api/questions/route.ts

import { NextResponse } from 'next/server'
import { QUESTIONS } from '@/lib/questions'

export async function GET() {
  // Send only what the browser needs. The trait and keyed direction stay server-side.
  const safe = QUESTIONS.map(({ id, text }) => ({ id, text }))
  return NextResponse.json({ questions: safe })
}

El controlador de sesión escribe las respuestas en curso en KV con una caducidad de una hora, para que las sesiones abandonadas se limpien solas:

// app/api/session/route.ts

import { getCloudflareContext } from '@opennextjs/cloudflare'
import { NextResponse, type NextRequest } from 'next/server'

export async function POST(request: NextRequest) {
  const { sessionId, answers } = await request.json() as {
    sessionId: string
    answers: Record<string, number>
  }

  const { env } = getCloudflareContext()
  // expirationTtl is in seconds; 3600 = 1 hour.
  await env.SESSION_KV.put(`session:${sessionId}`, JSON.stringify(answers), {
    expirationTtl: 3600,
  })

  return NextResponse.json({ saved: true })
}

El expirationTtl es lo que evita que el almacén de clave-valor se llene de sesiones a medio terminar. Guardo el progreso de cada respuesta en el paso 7, por lo que el borrador ya está en KV antes de que el visitante llegue al final. Resultado esperado: un feed de preguntas sin clave de puntuación y respuestas en curso almacenadas bajo una clave de sesión.

5. Puntúa el envío y almacena el resultado en D1

Este es el paso para el que existe toda la herramienta. El controlador de envío recibe el conjunto completo de respuestas, aplica la clave de puntuación del paso 1 (invirtiendo los elementos con clave inversa), suma cada rasgo, normaliza los totales a una escala de 0 a 100 y escribe una fila en la base de datos.

Debido a que la clave reside en el servidor, la puntuación no puede ser manipulada desde el navegador.

Primero, una pequeña función pura realiza el cálculo, por lo que es fácil de entender y probar de forma aislada:

// lib/score.ts
import { QUESTIONS, type Trait } from './questions'

export type Scores = Record<Trait, number>

export function scoreAnswers(answers: Record<string, number>): Scores {
  const sums: Record<Trait, number> = { O: 0, C: 0, E: 0, A: 0, N: 0 }
  const counts: Record<Trait, number> = { O: 0, C: 0, E: 0, A: 0, N: 0 }

  for (const q of QUESTIONS) {
    const raw = answers[String(q.id)]
    if (typeof raw !== 'number' || raw < 1 || raw > 5) continue
    // Reverse-keyed items are flipped on a 1-5 scale: 5 becomes 1, 1 becomes 5.
    const adjusted = q.keyed === 1 ? raw : 6 - raw
    sums[q.trait] += adjusted
    counts[q.trait] += 1
  }

  // Normalize each trait sum to a 0-100 percentage of its possible range.
  const scores = {} as Scores
  for (const trait of Object.keys(sums) as Trait[]) {
    const n = counts[trait]
    const min = n * 1
    const max = n * 5
    scores[trait] = n === 0 ? 0 : Math.round(((sums[trait] - min) / (max - min)) * 100)
  }
  return scores
}

El controlador luego valida la entrada, la puntúa e inserta el resultado.

Uso crypto.randomUUID() para el ID de fila porque está integrado en el entorno de ejecución de Workers y no necesita dependencias adicionales:

// app/api/submit/route.ts

import { getCloudflareContext } from '@opennextjs/cloudflare'
import { NextResponse, type NextRequest } from 'next/server'
import { QUESTIONS } from '@/lib/questions'
import { scoreAnswers } from '@/lib/score'

export async function POST(request: NextRequest) {
  const { answers } = await request.json() as { answers: Record<string, number> }

  // Reject incomplete submissions before scoring.
  const answered = QUESTIONS.filter((q) => typeof answers[String(q.id)] === 'number')
  if (answered.length < QUESTIONS.length) {
    return NextResponse.json({ error: 'Please answer every question.' }, { status: 400 })
  }

  const scores = scoreAnswers(answers)
  const id = crypto.randomUUID()

  const { env } = getCloudflareContext()
  await env.DB.prepare(
    `INSERT INTO results
      (id, created_at, openness, conscientiousness, extraversion, agreeableness, neuroticism, answers)
     VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
  )
    .bind(
      id,
      Date.now(),
      scores.O,
      scores.C,
      scores.E,
      scores.A,
      scores.N,
      JSON.stringify(answers)
    )
    .run()

  return NextResponse.json({ id, scores })
}

La comprobación de validación es más importante de lo que parece. Un endpoint de envío sin validar es el tipo de ruta de escritura pública que se presta a abusos, y la misma precaución se aplica a cualquier endpoint abierto, por lo que combino herramientas como esta con protección contra spam reCAPTCHA en formularios de Webflow cuando la evaluación es pública.

Resultado esperado: un conjunto de respuestas enviadas devuelve cinco puntuaciones normalizadas y escribe una fila duradera en D1.

6. Genera una narrativa de personalidad con IA en el lado del servidor

Los números por sí solos rara vez parecen un "resultado", así que este paso opcional convierte las cinco puntuaciones en un breve perfil escrito. La llamada al modelo reside en su propia utilidad y se ejecuta en el lado del servidor, por lo que la clave de API nunca llega al navegador. Leo la clave del entorno de ejecución, que es donde Webflow Cloud inyecta las variables de entorno que configuras en el panel de control.

La utilidad envía las puntuaciones a un modelo de lenguaje y solicita un resumen fundamentado y no clínico.

El prompt del sistema es donde limito el tono y la longitud para que el resultado sea útil:

// lib/narrative.ts
import { getCloudflareContext } from '@opennextjs/cloudflare'
import type { Scores } from './score'

export async function generateNarrative(scores: Scores): Promise<string> {
  const { env } = getCloudflareContext()

  const res = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'x-api-key': env.ANTHROPIC_API_KEY as string,
      'anthropic-version': '2023-06-01',
    },
    body: JSON.stringify({
      model: 'claude-sonnet-4-6',
      max_tokens: 600,
      system:
        'You summarize Big Five personality scores for a general audience. ' +
        'Be warm, specific, and non-clinical. Never diagnose. Keep it under 200 words.',
      messages: [
        {
          role: 'user',
          content: `Scores out of 100 - Openness ${scores.O}, Conscientiousness ${scores.C}, ` +
            `Extraversion ${scores.E}, Agreeableness ${scores.A}, Neuroticism ${scores.N}. ` +
            `Write a short profile.`,
        },
      ],
    }),
  })

  if (!res.ok) throw new Error(`Model request failed: ${res.status}`)
  const data = await res.json() as { content: { text: string }[] }
  return data.content[0]?.text ?? ''
}

Para usarlo, llama a generateNarrative(scores) dentro del controlador de envío después de la inserción, envuelto en un try/catch para que una caída del modelo nunca interrumpa la puntuación, y actualiza la columna narrative de la fila con el resultado.

Este es el mismo patrón de lado del servidor utilizado detrás de una interfaz de chat con IA en un sitio de Webflow con Claude, aplicado a una generación única en lugar de a una conversación.

Resultado esperado: cada resultado incluye un perfil legible y, si falla la llamada al modelo, se reduce a solo puntuaciones en lugar de dar error.

7. Renderiza la evaluación en tu página de Webflow

El paso final conecta la página diseñada en Webflow con los controladores que creaste. Añade un elemento de inserción (embed) donde deba aparecer el cuestionario para cargar las preguntas, recopilar las respuestas, guardar el progreso y enviar el formulario.

El detalle que suele despistar a la gente es la ruta: las llamadas fetch deben incluir la ruta de montaje de tu aplicación, así que una aplicación montada en /quiz llama a /quiz/api/questions, no a /api/questions.

El script de cliente condensado a continuación obtiene las preguntas y luego guarda cada respuesta en el endpoint de sesión antes de enviarlas para su puntuación:

<div id="assessment"></div>
<script>
  const BASE = '/quiz' // your Webflow Cloud mount path
  const sessionId = crypto.randomUUID()
  const answers = {}

  async function load() {
    const res = await fetch(`${BASE}/api/questions`)
    const { questions } = await res.json()
    // ... render each question as a 1-5 (Strongly disagree to Strongly agree) scale
  }

  async function onAnswer(questionId, value) {
    answers[questionId] = value
    // Persist progress so the draft survives on the server side.
    await fetch(`${BASE}/api/session`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ sessionId, answers }),
    })
  }

  async function submit() {
    const res = await fetch(`${BASE}/api/submit`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ answers }),
    })
    const { scores } = await res.json()
    // ... render the five trait bars and the narrative
  }

  load()
</script>

Como la aplicación se sirve en el mismo dominio que tu sitio de Webflow, ninguna de estas llamadas cruza el origen, por lo que no hay configuración CORS que gestionar.

Resultado esperado: una evaluación en vivo en tu página de Webflow que puntúa en el servidor y muestra un resultado.

¿Qué hace que una herramienta de evaluación de personalidad falle en Webflow Cloud?

La mayoría de los problemas con una herramienta como esta se deben a unas pocas causas:

  • Una clave de puntuación que no se está aplicando
  • Un enlace (binding) que no está conectado tras el despliegue
  • Una llamada al modelo sin protección
  • La consistencia eventual del almacén de clave-valor
  • Un endpoint que acepta cualquier cosa que se le envíe

Cada uno suele fallar silenciosamente, por lo que el síntoma rara vez revela la causa.

Las puntuaciones aparecen sesgadas o invertidas

Si los evaluadores relajados y organizados obtienen puntuaciones altas en Neuroticismo o bajas en Responsabilidad, es que los ítems con clave invertida no se están procesando bien. Confirma que cada pregunta en lib/questions.ts tiene un valor keyed correcto y que scoreAnswers aplica 6 - raw para los ítems donde keyed es -1.

Una comprobación rápida consiste en puntuar una hoja con respuestas todas de 5: los ítems con clave positiva y negativa deberían cancelarse parcialmente, situándose a mitad de escala en lugar de en los extremos. Si cada rasgo llega a 100, es que falta la inversión.

Mantengo un pequeño conjunto de datos de prueba con entradas conocidas y sus puntuaciones esperadas, y lo ejecuto antes de cada despliegue, porque un solo ítem mal configurado es invisible en pruebas casuales, pero sesga todo un rasgo en producción.

Los resultados se guardan en el entorno local pero desaparecen tras el despliegue

Cuando las escrituras funcionan con wrangler dev pero la aplicación desplegada no guarda nada, el problema suele ser el enlace. Confirma que el d1_databases nombre del enlace en wrangler.json coincide exactamente con lo que lee tu código (env.DB), y que volviste a desplegar después de declararlo, ya que Webflow Cloud aprovisiona y conecta el recurso al desplegar.

Si el enlace sigue sin aparecer, abre la pestaña de Almacenamiento del entorno en el panel de control de Webflow Cloud, confirma que la base de datos aparece en la lista para ese entorno y vuelve a desplegar. Los enlaces tienen un ámbito por entorno, por lo que la base de datos conectada a un entorno de pruebas no es la misma en la que escribe tu entorno de producción.

Cuando los datos parecen desaparecer, comprueba que el entorno que estás inspeccionando sea el mismo en el que realmente hiciste el despliegue.

El paso de narrativa de IA agota el tiempo de espera o devuelve un error 500

Una llamada al modelo es la parte más lenta de la solicitud y la que tiene más probabilidades de fallar. Si los envíos empezaron a dar error después de añadir el Paso 6, es casi seguro que la llamada a la narrativa no está protegida. Envuelve generateNarrative en un bloque try/catch y escribe la fila antes de llamarlo, para que la puntuación y el almacenamiento tengan éxito incluso cuando el modelo no lo tenga.

Además, confirma que ANTHROPIC_API_KEY está configurado en las variables de entorno del panel de control de Webflow Cloud, no solo en tu .env local, y que volviste a desplegar después de añadirlo. Como la narrativa es la parte más lenta de la solicitud, limito max_tokens y mantengo el prompt corto, lo que reduce tanto la latencia como la probabilidad de alcanzar el límite de solicitudes cuando hay picos de tráfico.

Las respuestas de la sesión desaparecen o se leen desactualizadas

El almacén de clave-valor tiene consistencia eventual, por lo que una escritura es visible inmediatamente en la región que la realizó, pero puede tardar hasta 60 segundos o más en propagarse globalmente.

Si el progreso guardado de un visitante a veces se lee desactualizado, no trates el KV como la fuente de verdad para nada que deba ser exacto. Úsalo por comodidad (para reanudar una sesión) y confía en la llamada final submit , que envía el conjunto completo de respuestas en una sola solicitud, para obtener el resultado definitivo que llega a D1.

Para cualquier cosa que requiera una consistencia fuerte, utiliza la base de datos, no el almacén. Si permites que los visitantes reanuden en un dispositivo diferente poco después de empezar, la lectura entre regiones es exactamente donde aparece el retraso, así que diseña el flujo de reanudación para tolerar un borrador faltante en lugar de asumir que las respuestas guardadas siempre están ahí.

El endpoint de envío acepta datos incompletos o basura

Si tu tabla results se llena con filas parciales o imposibles, es porque el endpoint confía en su entrada. La validación del Paso 5 rechaza los envíos que no responden a todas las preguntas, pero puedes endurecerla aún más: confirma que cada valor sea un número entero del 1 al 5 y rechaza las claves inesperadas.

Para una evaluación pública, añade una capa antes de la escritura, ya sea una verificación de token o un desafío, para que el endpoint no sea una puerta abierta. Tratar cualquier ruta de escritura pública como no confiable por defecto es el hábito que mantiene los datos limpios.

Mientras pruebo, registro la forma de los envíos rechazados para poder ver cómo se ven realmente las cargas útiles mal formadas en la práctica, y luego elimino ese registro antes de publicar para no escribir las respuestas de los visitantes en los registros.

Crea tu propia evaluación de personalidad en Webflow Cloud

Si eres un profesional del marketing o una agencia que crea un cuestionario de generación de leads, o un equipo de producto que añade una evaluación de incorporación, la parte difícil nunca fue el front-end. Fue gestionar la lógica y los datos sin tener que montar un backend independiente, y eso es exactamente lo que Webflow Cloud resuelve.

La puntuación se mantiene privada y los resultados viven en una base de datos que puedes consultar, todo en el mismo dominio que el sitio que ya mantienes.

A medida que tu herramienta crece, la misma base se extiende de forma natural:

Crea la evaluación una vez y se convertirá en una parte permanente de tu sitio, en lugar de un widget que alquilas.

Preguntas frecuentes

¿Es el Big Five (IPIP) de uso comercial gratuito?

Sí. El International Personality Item Pool es de dominio público, por lo que puedes editar y publicar sus ítems en un producto comercial sin licencias ni tarifas. Esa es la razón principal para basarse en él en lugar de en un instrumento registrado, que requeriría permiso y pago.

¿Necesito una base de datos o puedo usar solo el almacenamiento de clave-valor?

Puedes ejecutar la evaluación solo con el almacenamiento de clave-valor (KV), pero no guardaría los resultados finales allí. KV tiene consistencia eventual y está diseñado para datos no estructurados de corta duración. Usa SQLite para los resultados terminados que quieras consultar o exportar, y KV para el progreso de la sesión.

¿La puntuación se calcula en el navegador o en el servidor?

En el servidor. El banco de preguntas y las claves de dirección residen en tus Route Handlers de Webflow Cloud, que también ejecutan los cálculos de puntuación; el navegador solo ve el texto de las preguntas. Ese es el objetivo: que un visitante no pueda leer ni alterar la clave de puntuación desde las herramientas de desarrollo.

¿Puedo construir esto sin el paso de narrativa con IA?

Sí. Los pasos del 1 al 5 y el paso 7 generan una evaluación completa y precisa con cinco puntuaciones de rasgos normalizadas. La narrativa de IA del paso 6 es un toque opcional. Si lo omites, no necesitarás ninguna clave de API de modelo.

¿Cuántas preguntas debería incluir la evaluación?

El ejemplo usa dos ítems por rasgo para facilitar la lectura, pero un resultado creíble necesita más. El conjunto estándar de marcadores IPIP usa diez ítems por rasgo, cincuenta en total, equilibrando la fiabilidad con el abandono de la encuesta. Amplía el banco de preguntas y el sistema de puntuación manejará cualquier cantidad.

¿Funcionará la evaluación en el mismo dominio que mi sitio de Webflow?

Sí. Webflow Cloud sirve tu aplicación desde una ruta de montaje en tu dominio activo de Webflow, por lo que la página y sus rutas de API comparten el mismo origen. No hay CORS que configurar, siempre que tus llamadas fetch incluyan la ruta de montaje, por ejemplo,/quiz/api/submit.


Última actualización
July 25, 2026
Categoría

Artículos relacionados

Cómo transmitir cambios de Postgres en vivo a un panel de Webflow Cloud con Supabase
Cómo transmitir cambios de Postgres en vivo a un panel de Webflow Cloud con Supabase

Cómo transmitir cambios de Postgres en vivo a un panel de Webflow Cloud con Supabase

Cómo transmitir cambios de Postgres en vivo a un panel de Webflow Cloud con Supabase

Desarrollo
Por
Colin Lateano
,
,
Leer artículo
Cómo añadir Gemini AI a un sitio de Webflow de forma segura usando Webflow Cloud
Cómo añadir Gemini AI a un sitio de Webflow de forma segura usando Webflow Cloud

Cómo añadir Gemini AI a un sitio de Webflow de forma segura usando Webflow Cloud

Cómo añadir Gemini AI a un sitio de Webflow de forma segura usando Webflow Cloud

Desarrollo
Por
Colin Lateano
,
,
Leer artículo
Cómo enviar formularios de Webflow a HubSpot mediante Zapier sin perder datos
Cómo enviar formularios de Webflow a HubSpot mediante Zapier sin perder datos

Cómo enviar formularios de Webflow a HubSpot mediante Zapier sin perder datos

Cómo enviar formularios de Webflow a HubSpot mediante Zapier sin perder datos

Desarrollo
Por
Colin Lateano
,
,
Leer artículo
Cómo vincular formularios de Webflow a HubSpot sin perder el diseño de tu formulario
Cómo vincular formularios de Webflow a HubSpot sin perder el diseño de tu formulario

Cómo vincular formularios de Webflow a HubSpot sin perder el diseño de tu formulario

Cómo vincular formularios de Webflow a HubSpot sin perder el diseño de tu formulario

Desarrollo
Por
Colin Lateano
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.