Actividades Interactivas Fuse

Word Cloud

Envía palabras o frases y observa cómo se forma una nube de palabras animada en tiempo real.

Activity type: word_cloud

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`maxWordsPerUser`	number	Número máximo de palabras/frases que cada participante puede enviar.	`3`
`prompt`	string	Indicación opcional para guiar los envíos (por ejemplo, "Describe tus vacaciones ideales en una palabra").	`""`

Comportamiento

Los participantes escriben palabras o frases cortas y las envían.
Cada envío aparece en la nube de palabras.
Las palabras enviadas por múltiples participantes aparecen más grandes en la nube.
La nube se anima y reorganiza a medida que se agregan nuevas palabras.
Cada participante puede enviar hasta maxWordsPerUser palabras.
Esta es una actividad de múltiples acciones.

Estado Agregado

Campo	Tipo	Descripción
`words`	array	Palabras con `text` y `count` (número de veces enviada).
`totalSubmissions`	number	Número total de envíos de palabras.

Selectores CSS

.fuse-word-cloud, .fuse-cloud, .fuse-word, .fuse-input, .fuse-submit-btn, .fuse-hint, .fuse-status

Las Nubes de Palabras son particularmente efectivas para romper el hielo, lluvias de ideas y recopilar impresiones rápidas de un grupo. La naturaleza visual de la nube la hace atractiva para presentaciones.

Hot Takes

De acuerdo o en desacuerdo con una declaración audaz. Un visual de tira y afloja en vivo muestra la división.

Activity type: hot_takes

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`statement`	string	La declaración con la que estar de acuerdo o en desacuerdo.	`""`
`agreeColor`	string	Color para el lado "De acuerdo".	`"#27ae60"` (verde)
`disagreeColor`	string	Color para el lado "En desacuerdo".	`"#e74c3c"` (rojo)
`agreeLabel`	string	Etiqueta personalizada para el botón de acuerdo (por ejemplo, "Me encanta").	`""` (por defecto "Agree")
`disagreeLabel`	string	Etiqueta personalizada para el botón de desacuerdo (por ejemplo, "Lo odio").	`""` (por defecto "Disagree")

Comportamiento

La declaración audaz se muestra de forma prominente.
Se muestran dos botones: De acuerdo y En desacuerdo.
Los participantes hacen clic en un botón para emitir su voto.
Una visualización de barra de tira y afloja muestra el porcentaje en vivo de la división entre acuerdo y desacuerdo.
Esta es una actividad de acción única.

Estado Agregado

Campo	Tipo	Descripción
`statement`	string	El texto de la declaración.
`agreeCount`	number	Número de votos a favor.
`disagreeCount`	number	Número de votos en contra.
`agreePercentage`	number	Porcentaje de votos a favor (0-100).
`disagreePercentage`	number	Porcentaje de votos en contra (0-100).
`totalVotes`	number	Total de votos emitidos.

Selectores CSS

.fuse-hot-takes, .fuse-statement, .fuse-tug-bar, .fuse-percentage--agree, .fuse-percentage--disagree, .fuse-vote-btn--agree, .fuse-vote-btn--disagree, .fuse-total-count

Q&A Board

Envía y vota preguntas. Perfecto para AMAs, eventos y aulas.

Activity type: qa_board

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`maxReplyDepth`	number	Profundidad máxima de respuestas/hilos en las preguntas.	`2`

Comportamiento

Los participantes envían preguntas como texto.
Todos los participantes pueden votar a favor o votar en contra de cualquier pregunta.
Las preguntas se ordenan por puntuación neta (las más votadas primero).
Esto hace que las preguntas más populares suban al inicio.
Esta es una actividad de múltiples acciones.

Estado Agregado

Campo	Tipo	Descripción
`questions`	ListItem[]	Todas las preguntas enviadas, ordenadas por puntuación.

Selectores CSS

.fuse-qa-board, .fuse-list-item, .fuse-item-text, .fuse-item-author, .fuse-score, .fuse-upvote, .fuse-downvote, .fuse-input, .fuse-submit-btn, .fuse-hint

Los Tableros de Preguntas son ideales para eventos en vivo, webinars y reuniones generales. El mecanismo de votación asegura que las preguntas más importantes suban al inicio, facilitando al presentador la priorización.

Predictions

Haz predicciones y ve el consenso del grupo. Opcionalmente revela los resultados después.

Activity type: predictions

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`question`	string	La pregunta de predicción (por ejemplo, "¿Quién ganará el campeonato?").	`""`
`predefinedOptions`	array	Opciones predefinidas opcionales con `id` y `label`. Si se proporcionan, los participantes eligen de estas.	`[]`
`allowCustom`	boolean	Si los participantes pueden ingresar predicciones personalizadas además de o en lugar de las opciones predefinidas.	`true`

Comportamiento

Se muestra la pregunta de predicción.
Si se proporcionan opciones predefinidas, los participantes seleccionan de ellas.
Si allowCustom es true, los participantes pueden escribir su propia predicción.
Después de enviar, los participantes ven los resultados agregados.
Las predicciones se agrupan por valor, con la más popular mostrada primero.
Esta es una actividad de acción única.

Estado Agregado

Campo	Tipo	Descripción
`predictions`	array	Predicciones únicas con `value`, `count` y `percentage`.
`totalPredictions`	number	Número total de predicciones enviadas.

Selectores CSS

.fuse-predictions, .fuse-option, .fuse-option-label, .fuse-option-percentage, .fuse-input, .fuse-submit-btn, .fuse-hint, .fuse-consensus

Tier List

Arrastra elementos a niveles S, A, B, C, D, F y ve las clasificaciones promedio de la comunidad.

Activity type: tier_list

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`items`	array	Elementos a clasificar en niveles.	`[]`
`tiers`	string[]	Las etiquetas de los niveles (de mejor a peor).	`["S", "A", "B", "C", "D", "F"]`

Objeto de Elemento

Campo	Tipo	Descripción
`id`	string	Identificador único.
`label`	string	Texto de visualización para el elemento.
`imageUrl`	string	URL de imagen opcional para el elemento.
`mediaUrl`	string	URL de medios opcional.
`mediaType`	string	Tipo de medio: `image`, `video`, `icon`, o `qrcode`.
`iconName`	string	Nombre de ícono de React-icons (cuando mediaType es `icon`).
`iconColor`	string	Color del ícono (cuando mediaType es `icon`).
`qrCodeUrl`	string	URL del código QR (cuando mediaType es `qrcode`).

Comportamiento

Los elementos se muestran en un grupo "sin clasificar".
Los participantes arrastran elementos a su nivel elegido.
Una vez que todos los elementos están colocados, se envía la clasificación.
Después del envío, los participantes ven el nivel promedio de la comunidad para cada elemento.
Esta es una actividad de acción única.

Estado Agregado

Campo	Tipo	Descripción
`items`	array	Elementos con `id`, `label`, `imageUrl`, `avgTier` (promedio comunitario) y `tierCounts` (cuántos lo colocaron en cada nivel).
`tiers`	string[]	Las etiquetas de los niveles.
`totalParticipants`	number	Total de participantes que enviaron clasificaciones de niveles.

Selectores CSS

.fuse-tier-list, .fuse-tier-row, .fuse-tier-label, .fuse-tier-item, .fuse-tier-badge, .fuse-consensus

Las Listas de Niveles soportan elementos multimedia enriquecidos. Puedes usar imágenes, íconos o incluso códigos QR para los elementos que se clasifican, haciéndolas visualmente atractivas para comparaciones de productos, clasificaciones de personajes o cualquier ejercicio de categorización.

Caption This

Envía títulos graciosos para una imagen y vota por los mejores. Comedia de oro.

Activity type: caption_this

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`mediaUrl`	string	URL del medio al que ponerle título.	`""`
`mediaType`	string	Tipo de medio: `image`, `video`, `icon`, o `qrcode`.	`"image"`
`imageUrl`	string	Campo heredado para compatibilidad hacia atrás (usar `mediaUrl` en su lugar).	None
`iconName`	string	Nombre de ícono de React-icons (cuando mediaType es `icon`).	`""`
`iconColor`	string	Color del ícono.	`""`
`qrCodeUrl`	string	URL del código QR (cuando mediaType es `qrcode`).	`""`

Comportamiento

La imagen (u otro medio) se muestra de forma prominente.
Los participantes escriben y envían títulos.
Todos los participantes pueden votar a favor o votar en contra de los títulos.
Los títulos se ordenan por puntuación neta, haciendo subir los mejores.
Esta es una actividad de múltiples acciones.

Estado Agregado

Usa el ListAggregatedState estándar:

Campo	Tipo	Descripción
`items`	ListItem[]	Títulos enviados ordenados por puntuación.
`totalItems`	number	Total de títulos enviados.

Selectores CSS

.fuse-caption-this, .fuse-list-item, .fuse-item-text, .fuse-item-author, .fuse-score, .fuse-upvote, .fuse-downvote, .fuse-input, .fuse-submit-btn

Bracket

Bracket estilo torneo donde el público vota en cada enfrentamiento para coronar a un campeón.

Activity type: bracket

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`participants`	array	Array de participantes del bracket. Cada uno tiene `id` y `label`.	`[]`

Comportamiento

Los participantes se emparejan en enfrentamientos en formato de torneo bracket.
Para cada enfrentamiento, todos los participantes votan por su opción preferida.
Una vez que la votación de una ronda se completa, los ganadores avanzan a la siguiente ronda.
El bracket progresa a través de múltiples rondas hasta que se corona a un campeón.
Esta es una actividad de múltiples rondas: los participantes continúan votando en cada ronda.
El bracket determina automáticamente el número de rondas basándose en la cantidad de participantes.

Estado Agregado

Campo	Tipo	Descripción
`matchups`	BracketMatchup[]	Todos los enfrentamientos de todas las rondas.
`currentRound`	number	La ronda activa actual.
`totalRounds`	number	Total de rondas en el torneo.

Objeto de Enfrentamiento

Campo	Tipo	Descripción
`id`	string	Identificador único del enfrentamiento.
`optionA`	object	Primera opción con `id`, `label` y `votes`.
`optionB`	object	Segunda opción con `id`, `label` y `votes`.
`round`	number	A qué ronda pertenece este enfrentamiento.
`winner`	string	ID de la opción ganadora (se establece después de que la ronda se completa).

Selectores CSS

.fuse-bracket, .fuse-matchup, .fuse-matchup-entry, .fuse-matchup-label, .fuse-matchup-votes, .fuse-round-label, .fuse-champion

Para un bracket de torneo apropiado, el número de participantes idealmente debería ser una potencia de 2 (4, 8, 16, 32). Si el número no es una potencia de 2, algunos participantes pueden recibir un "bye" en la primera ronda.

Map Pins

Marca tu ubicación en un mapa y ve dónde están todos los demás en tiempo real.

Activity type: map_pins

Configuración

Propiedad	Tipo	Descripción	Predeterminado
`mapCenter`	object	El centro inicial del mapa con `lat` y `lng`.	`{ lat: 40, lng: -95 }` (centro de EE.UU.)
`mapZoom`	number	El nivel de zoom inicial del mapa.	`3`
`prompt`	string	Indicación opcional (por ejemplo, "¡Marca de dónde eres!" o "Marca tu lugar de vacaciones favorito").	`""`

Comportamiento

Se muestra un mapa interactivo.
Los participantes hacen clic en el mapa para colocar un marcador en su ubicación deseada.
Todos los marcadores aparecen en tiempo real para todos los participantes.
Cada marcador muestra el nombre de visualización del participante al pasar el cursor.
Esta es una actividad de acción única.

Estado Agregado

Campo	Tipo	Descripción
`pins`	array	Todos los marcadores con `participantId`, `displayName`, `lat` y `lng`.
`totalPins`	number	Número total de marcadores colocados.

Selectores CSS

.fuse-map-pins, .fuse-hint, .fuse-status

Los Marcadores en Mapa son excelentes para equipos distribuidos, audiencias de conferencias o cualquier escenario donde quieras visualizar la distribución geográfica de tu grupo. El centro inicial y el zoom se pueden ajustar para enfocarse en cualquier región.

Estilos de Indicadores de Actividad

Todas las actividades interactivas soportan indicadores de actividad -- notificaciones flotantes que aparecen cuando los participantes interactúan. Puedes configurar el estilo en los ajustes de Fuse:

Estilo	Descripción
`pill`	Una notificación en forma de píldora que se desliza desde el lado.
`float_up`	Una notificación que flota hacia arriba y se desvanece.
`spark`	Un efecto de chispa/destello en el punto de interacción.
`none`	Deshabilitar los indicadores de actividad por completo.

Los indicadores de actividad se pueden personalizar mediante el selector CSS .fuse-activity-indicator y las variables CSS --fc-indicator-bg, --fc-indicator-text y --fc-font-indicator.