Encuesta Clásica
Elige una opción y ve los porcentajes en vivo actualizarse en tiempo real mientras otros votan.
Activity type: classic_poll
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
options | array | Array de opciones de encuesta. Cada una tiene id, label y color opcional. | 2 opciones predeterminadas |
Objeto de Opción
| Campo | Tipo | Descripción |
|---|---|---|
id | string | Identificador único para la opción. |
label | string | Texto de visualización para la opción. |
color | string | Color de acento para la barra/resaltado de la opción. Se asigna automáticamente de la paleta de colores si no se establece. |
Comportamiento
- Cada participante puede votar por exactamente una opción.
- Después de votar, el participante ve los resultados en vivo (porcentajes y conteos de votos).
- Esta es una actividad de acción única: una vez que se vota, el participante entra en modo de solo lectura.
Modos de Visualización
| Modo | Descripción |
|---|---|
inline_bars | Los resultados se muestran como barras horizontales dentro de cada opción. |
bar_chart | Los resultados se muestran como un gráfico de barras vertical separado. |
Estado Agregado
| Campo | Tipo | Descripción |
|---|---|---|
options | PollOption[] | Opciones con conteos de votos, porcentajes y listas de votantes. |
totalVotes | number | Número total de votos emitidos. |
myVotes | string[] | IDs de opciones por las que votó el participante actual. |
Selectores CSS
.fuse-classic-poll, .fuse-poll, .fuse-poll--bar-chart, .fuse-bar, .fuse-bar-label, .fuse-option, .fuse-option-label, .fuse-option-percentage, .fuse-option-votes
Encuesta Multi-Voto
Vota por múltiples opciones a la vez. Perfecto para escenarios de "selecciona todos los que apliquen".
Activity type: multi_vote_poll
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
options | array | Array de opciones de encuesta con id, label y color opcional. | 2 opciones predeterminadas |
Comportamiento
- Los participantes pueden votar por múltiples opciones.
- Los votos se pueden alternar -- hacer clic en una opción votada elimina el voto.
- Esta es una actividad de múltiples acciones: los participantes pueden cambiar sus votos en cualquier momento.
- Los resultados se actualizan en tiempo real a medida que se alternan los votos.
Estado Agregado
Igual que la Encuesta Clásica.
Selectores CSS
.fuse-multi-vote-poll, más todos los selectores de encuesta compartidos.
Encuesta con Imágenes
Vota sobre imágenes en lugar de texto. Ideal para selecciones de diseño, atuendos o elecciones de productos.
Activity type: image_poll
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
options | array | Array de opciones de encuesta. Cada una tiene id, label e imageUrl. | 2 opciones predeterminadas |
Objeto de Opción
| Campo | Tipo | Descripción |
|---|---|---|
id | string | Identificador único. |
label | string | Etiqueta de texto mostrada debajo de la imagen. |
imageUrl | string | URL de la imagen a mostrar para esta opción. |
color | string | Color de acento opcional. |
Comportamiento
- Las opciones se muestran como tarjetas de imagen con etiquetas.
- Cada participante puede votar por una imagen.
- Esta es una actividad de acción única.
- Los resultados muestran porcentajes de votos superpuestos o debajo de las imágenes.
Estado Agregado
Igual que la Encuesta Clásica, con imageUrl disponible en cada opción.
Selectores CSS
.fuse-image-poll, más todos los selectores de encuesta compartidos.
Esto o Aquello
Elección binaria estilo deslizamiento entre dos opciones con divisiones de porcentaje en vivo.
Activity type: this_or_that
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
options | array | Exactamente 2 opciones con id, label y color opcional. | [{ label: "This" }, { label: "That" }] |
Comportamiento
- Dos opciones se presentan lado a lado en un diseño de pantalla dividida.
- Cada participante selecciona una de las dos opciones.
- Esta es una actividad de múltiples acciones: los participantes pueden cambiar su voto.
- La división de porcentaje en vivo se muestra como un divisor visual entre los dos paneles.
Estado Agregado
Igual que la Encuesta Clásica (con exactamente 2 opciones).
Selectores CSS
.fuse-this-or-that, .fuse-panel--left, .fuse-panel--right, .fuse-panel-label, .fuse-panel-percentage
Encuesta de Clasificación
Arrastra para clasificar opciones en tu orden preferido. Ve cómo emerge la clasificación por consenso de la comunidad.
Activity type: ranked_poll
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
options | array | Array de opciones a clasificar. Cada una tiene id, label y color opcional. | 3 opciones predeterminadas |
Comportamiento
- Todas las opciones se muestran en una lista.
- Los participantes arrastran elementos para reordenarlos de más preferido a menos preferido.
- Una vez enviada, la clasificación del participante se registra.
- Esta es una actividad de acción única: la clasificación se envía una vez.
- La clasificación por consenso se calcula promediando las clasificaciones de todos los participantes.
Estado Agregado
| Campo | Tipo | Descripción |
|---|---|---|
options | array | Opciones con id, label, avgRank y conteo de rankings. |
totalParticipants | number | Número total de participantes que enviaron clasificaciones. |
Selectores CSS
.fuse-ranked-poll, .fuse-rank-number, más selectores compartidos.
Encuesta de Eliminación
Votación en múltiples rondas donde la opción con menos votos se elimina cada ronda hasta que queda un ganador.
Activity type: elimination_poll
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
options | array | Array de opciones con id, label y color opcional. | 2 opciones predeterminadas |
Comportamiento
- Los participantes votan por su opción favorita en la ronda actual.
- Después de que se completa una ronda, la opción con menos votos se elimina.
- Una nueva ronda comienza con las opciones restantes.
- El proceso se repite hasta que solo queda una opción -- el ganador.
- Esta es una actividad de múltiples rondas: los participantes necesitan continuar votando en las rondas subsiguientes.
- Los participantes que ya votaron en una ronda pueden volver a unirse para votar en la siguiente ronda.
Estado Agregado
| Campo | Tipo | Descripción |
|---|---|---|
currentRound | number | El número de ronda actual. |
activeOptions | PollOption[] | Opciones que aún están en la competencia con datos de votos. |
eliminatedOptions | array | Opciones eliminadas hasta ahora, con la ronda en que fueron eliminadas. |
totalVotesThisRound | number | Total de votos en la ronda actual. |
isComplete | boolean | Si la eliminación ha concluido (queda un ganador). |
winner | object | La opción ganadora (se establece cuando isComplete es true). |
Selectores CSS
.fuse-elimination-poll, .fuse-round-label, .fuse-champion, más selectores de encuesta compartidos.
Las Encuestas de Eliminación funcionan mejor con 4+ opciones. Con solo 2 opciones, efectivamente se convierte en una Encuesta Clásica de una sola ronda.
Escala Deslizante
Ubícate en un espectro y ve la curva de distribución en vivo de todas las respuestas.
Activity type: sliding_scale
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
min | number | Valor mínimo en la escala. | 0 |
max | number | Valor máximo en la escala. | 100 |
step | number | Incremento del paso del deslizador. | 1 |
minLabel | string | Etiqueta para el extremo mínimo de la escala. | "" |
maxLabel | string | Etiqueta para el extremo máximo de la escala. | "" |
scaleStyle | string | Estilo visual de la pista del deslizador. | "thin" |
barColor | string | Color personalizado para las barras de distribución. | "" (usa el acento del tema) |
Comportamiento
- Los participantes arrastran un deslizador para seleccionar un valor en el espectro.
- Después de enviar, ven un histograma mostrando la distribución de todas las respuestas.
- Se muestran estadísticas (promedio, mediana, total de respuestas).
- Esta es una actividad de acción única.
Estado Agregado
| Campo | Tipo | Descripción |
|---|---|---|
distribution | number[] | Conteos de intervalos del histograma (por ejemplo, 10 intervalos de min a max). |
average | number | Valor medio de todas las respuestas. |
median | number | Valor mediano de todas las respuestas. |
totalResponses | number | Número total de respuestas. |
min | number | Valor mínimo de la escala. |
max | number | Valor máximo de la escala. |
Selectores CSS
.fuse-sliding-scale, .fuse-slider, .fuse-slider-value, .fuse-slider-label, .fuse-stats, .fuse-histogram, .fuse-histogram-bar, .fuse-stat-value, .fuse-stat-label
Qué Preferirías
Elige entre dos dilemas y ve la división en vivo. Infinitamente debatible.
Activity type: would_you_rather
Configuración
| Propiedad | Tipo | Descripción | Predeterminado |
|---|---|---|---|
options | array | Exactamente 2 opciones con id, label y color opcional. | [{ label: "This" }, { label: "That" }] |
Comportamiento
- Dos opciones se presentan lado a lado.
- Los participantes eligen una opción.
- Esta es una actividad de múltiples acciones: los participantes pueden cambiar su elección.
- La división de porcentaje en vivo se muestra como un divisor visual.
Diferencia con Esto o Aquello
Qué Preferirías y Esto o Aquello son funcionalmente idénticos. La distinción es temática:
- Esto o Aquello: Comparaciones de preferencia general (por ejemplo, "¿Café o Té?").
- Qué Preferirías: Preguntas basadas en dilemas (por ejemplo, "¿Preferirías volar o ser invisible?").
Estado Agregado
Igual que la Encuesta Clásica (con exactamente 2 opciones).
Selectores CSS
.fuse-would-you-rather, .fuse-panel--left, .fuse-panel--right, .fuse-panel-label, .fuse-panel-percentage
Paleta de Colores
Cuando las opciones no tienen un color personalizado asignado, NueForm asigna automáticamente colores de una paleta vibrante:
- Indigo (
#6366f1) - Amber (
#f59e0b) - Emerald (
#10b981) - Red (
#ef4444) - Violet (
#8b5cf6) - Cyan (
#06b6d4) - Orange (
#f97316) - Pink (
#ec4899) - Teal (
#14b8a6) - Purple (
#a855f7) - Lime (
#84cc16) - Rose (
#e11d48)
Los colores se asignan en secuencia según la posición de la opción. Cuando hay más opciones que colores, la paleta se reinicia desde el principio.