Cómo Diseñar Preguntas y Opciones de Quiz
Esta guía cubre cómo construir pasos de preguntas en AtomicQuiz — texto de opciones, medios, selección única vs múltiple y layout visual — usando Builder para contenido y Design para apariencia.
Úsala después de crear los pasos y antes de finalizar la ramificación en Flow.
Antes de Empezar
Asegúrate de tener:
- Un quiz abierto en AtomicQuiz con al menos un paso de pregunta agregado.
- Decidido si cada pregunta permite una respuesta o múltiples respuestas.
- Imágenes o íconos listos si las opciones usan medios.
- Un plan de cómo las respuestas afectan resultados o siguientes pasos (configurado después en Flow).
Consulta Constructor de Quiz y Design de Quiz.
Paso 1: Seleccionar el Paso de Pregunta
- Abre el quiz en el Quiz Builder.
- En la barra de pasos, haz clic en el paso que debe contener la pregunta.
- Confirma que el canvas muestra el layout de ese paso.
Mantén una pregunta principal por paso cuando sea posible — las tasas de finalización bajan en pantallas saturadas.
Paso 2: Agregar Bloques de Pregunta
Desde la biblioteca de bloques, agrega el tipo de bloque que coincida con tu pregunta:
| Tipo de bloque | Usar cuando |
|---|---|
| Opción de quiz (estilo selección única) | El visitante elige una respuesta de una lista. |
| Selección múltiple (estilo checkbox) | El visitante selecciona una o más opciones. |
| Texto / medios | Titular, explicación o imagen sobre las opciones. |
| Botón | Continuar cuando las opciones solas no avanzan automáticamente. |
Arrastra bloques al canvas del paso dentro de un contenedor que mantenga las opciones alineadas en mobile.
Consulta Opción de Quiz y Opción Múltiple.
Paso 3: Configurar Opciones de Selección Única
- Haz clic en el bloque de opción de quiz en el canvas.
- En el panel de edición, define el texto de pregunta o prompt.
- Agrega opciones — cada fila típicamente incluye:
- Texto de opción (etiqueta corta que el visitante toca)
- Referencia / ID (para lógica, resultados o copy dinámico)
- Medios opcionales (imagen o ícono por opción)
- Define comportamiento obligatorio si el visitante debe responder antes de continuar.
- Elige comportamiento de navegación (continuar al seleccionar vs botón separado) según los controles del producto.
Consejos:
- Mantén las etiquetas cortas — opciones largas se rompen mal en mobile.
- Usa medios solo cuando ayuden al reconocimiento (productos, síntomas, estilos).
Paso 4: Configurar Opciones de Selección Múltiple (Checkbox)
- Agrega un bloque de Selección Múltiple o define el tipo de opción como Checkbox donde esté disponible.
- Habilita Multi selección cuando se permita más de una respuesta.
- Edita cada fila de opción (texto, referencia, medios).
- Define obligatorio si al menos una selección es mandatoria.
Usa el modo checkbox para preguntas de "selecciona todas las que apliquen". Usa selección única cuando exactamente una ruta debe ganar para la ramificación.
Paso 5: Usar Referencias de Campos Obligatorios (Cuando Esté Disponible)
Algunos campos de quiz exponen referencias de copy como [abc1234] después de marcar campos como obligatorios.
Usa las referencias para:
- Personalizar copy de resultado con una respuesta anterior
- Alimentar lógica o mensajes en pasos posteriores
Copia las referencias después de configurar campos obligatorios y prueba en Vista previa.
Paso 6: Pulir el Layout en Modo Design
Cuando la estructura funcione, abre Design en el encabezado del quiz:
| Tarea de Design | Por qué |
|---|---|
| Espaciado y padding | Evita opciones apretadas en mobile. |
| Tipografía | Coincide con fuentes de marca y tamaños legibles. |
| Colores y bordes | Destaca estados seleccionado vs predeterminado de opciones. |
| Controles responsive | Compara layouts desktop vs mobile. |
Los cambios de Design afectan solo la presentación — las respuestas y la lógica permanecen en Builder y Flow.
Consulta Design de Quiz.
Paso 7: Previsualizar y Guardar
- Haz clic en Guardar.
- Abre Vista previa y prueba:
- Envío sin selección (validación obligatoria)
- Cada ruta de selección única
- Selecciones múltiples cuando estén habilitadas
- Objetivos táctiles en mobile
- Confirma que los valores de respuesta aparecen como esperas para leads o copy de resultados.
Luego abre Flow para conectar cada opción o botón al siguiente paso correcto.
Mejores Prácticas
- Limita las opciones a 4–6 por pantalla cuando sea posible.
- Coloca la pregunta más difícil después de pasos de calentamiento fáciles.
- Usa estilo de tarjeta de opción consistente en todos los pasos.
- Evita eliminar campos usados en lógica sin revisar Flow después.
Solución de Problemas
| Problema | Qué intentar |
|---|---|
| No puedo agregar segunda opción de quiz en el mismo lugar | Usa contenedores o pasos separados; sigue las reglas de colocación en pantalla. |
| El checkbox permite solo una selección | Habilita Multi selección en la configuración de opciones. |
| La validación obligatoria nunca se limpia | Confirma referencias de opción y acción de continuar en el bloque. |
| Pestaña Design ausente | Usa controles de layout del Builder; algunas cuentas muestran pestañas limitadas. |
| La lógica se rompió después de reordenar | Vuelve a abrir Flow; reconecta rutas desde opciones afectadas. |
Resultado
Tus pasos de quiz contienen preguntas y opciones claras con layout legible en desktop y mobile — listos para ramificación en Flow, webhooks y publicación.
Documentación Relacionada
- Constructor de Quiz
- Design de Quiz
- Flow de Quiz
- Elemento Opción Múltiple
- Cómo configurar el flujo y la lógica de ramificación del quiz
FAQ
¿Builder vs Design para preguntas?
Builder edita contenido y opciones de preguntas. Design edita el layout visual. Usa ambos: estructura primero, pulido después.
¿Selección única vs selección múltiple?
Usa selección única cuando una respuesta determina el siguiente paso. Usa selección múltiple cuando los visitantes pueden elegir varios ítems en un paso.
¿Los cambios de design afectan el scoring?
No. Los cambios de design afectan solo la presentación. La lógica y las respuestas se configuran en Builder y Flow.
¿Puedo reutilizar una pregunta en otro paso?
Duplica el paso o bloque de opción en Builder, luego ajusta texto y enlaces de Flow.
¿Dónde está la lógica avanzada del quiz?
Navegación por elemento más el mapa de Flow. Consulta Cómo configurar el flujo y la lógica de ramificación del quiz.