Atividades Interativas do Fuse

Nuvem de Palavras

Envie palavras ou frases e veja uma nuvem de palavras animada se formar em tempo real.

Tipo de atividade: word_cloud

Configuração

Propriedade	Tipo	Descrição	Padrão
`maxWordsPerUser`	number	Número máximo de palavras/frases que cada participante pode enviar.	`3`
`prompt`	string	Instrução opcional para orientar os envios (por exemplo, "Descreva suas férias ideais em uma palavra").	`""`

Comportamento

Os participantes digitam palavras ou frases curtas e as enviam.
Cada envio aparece na nuvem de palavras.
Palavras enviadas por vários participantes aparecem maiores na nuvem.
A nuvem se anima e se reorganiza conforme novas palavras são adicionadas.
Cada participante pode enviar até maxWordsPerUser palavras.
Esta é uma atividade de múltiplas ações.

Estado Agregado

Campo	Tipo	Descrição
`words`	array	Palavras com `text` e `count` (número de vezes enviada).
`totalSubmissions`	number	Número total de envios de palavras.

Seletores CSS

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

As Nuvens de Palavras são particularmente eficazes para quebra-gelos, brainstorming e para colher impressões rápidas de um grupo. A natureza visual da nuvem a torna envolvente para apresentações.

Hot Takes

Concorde ou discorde de uma afirmação ousada. Um visual de cabo de guerra ao vivo mostra a divisão.

Tipo de atividade: hot_takes

Configuração

Propriedade	Tipo	Descrição	Padrão
`statement`	string	A afirmação com a qual concordar ou discordar.	`""`
`agreeColor`	string	Cor do lado "Concordo".	`"#27ae60"` (verde)
`disagreeColor`	string	Cor do lado "Discordo".	`"#e74c3c"` (vermelho)
`agreeLabel`	string	Rótulo personalizado para o botão de concordar (por exemplo, "Amei").	`""` (padrão: "Concordo")
`disagreeLabel`	string	Rótulo personalizado para o botão de discordar (por exemplo, "Odiei").	`""` (padrão: "Discordo")

Comportamento

A afirmação ousada é exibida em destaque.
Dois botões são mostrados: Concordo e Discordo.
Os participantes clicam em um botão para registrar seu voto.
Uma visualização em barra de cabo de guerra mostra a divisão percentual ao vivo entre concordar e discordar.
Esta é uma atividade de ação única.

Estado Agregado

Campo	Tipo	Descrição
`statement`	string	O texto da afirmação.
`agreeCount`	number	Número de votos de concordância.
`disagreeCount`	number	Número de votos de discordância.
`agreePercentage`	number	Porcentagem de votos de concordância (0-100).
`disagreePercentage`	number	Porcentagem de votos de discordância (0-100).
`totalVotes`	number	Total de votos registrados.

Seletores 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

Mural de Perguntas e Respostas

Envie e vote em perguntas. Perfeito para AMAs, eventos e salas de aula.

Tipo de atividade: qa_board

Configuração

Propriedade	Tipo	Descrição	Padrão
`maxReplyDepth`	number	Profundidade máxima de respostas/threads nas perguntas.	`2`

Comportamento

Os participantes enviam perguntas em texto.
Todos os participantes podem dar voto positivo ou voto negativo em qualquer pergunta.
As perguntas são ordenadas pela pontuação líquida (mais votadas primeiro).
Isso faz as perguntas mais populares subirem para o topo.
Esta é uma atividade de múltiplas ações.

Estado Agregado

Campo	Tipo	Descrição
`questions`	ListItem[]	Todas as perguntas enviadas, ordenadas por pontuação.

Seletores 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

Os Murais de Perguntas e Respostas são ideais para eventos ao vivo, webinars e reuniões gerais. O mecanismo de votação garante que as perguntas mais importantes subam ao topo, facilitando a priorização por parte do apresentador.

Previsões

Faça previsões e veja o consenso da multidão. Opcionalmente, revele os resultados depois.

Tipo de atividade: predictions

Configuração

Propriedade	Tipo	Descrição	Padrão
`question`	string	A pergunta de previsão (por exemplo, "Quem vai ganhar o campeonato?").	`""`
`predefinedOptions`	array	Opções predefinidas opcionais com `id` e `label`. Se fornecidas, os participantes escolhem entre elas.	`[]`
`allowCustom`	boolean	Se os participantes podem inserir previsões personalizadas além das opções predefinidas ou no lugar delas.	`true`

Comportamento

A pergunta de previsão é exibida.
Se opções predefinidas forem fornecidas, os participantes selecionam entre elas.
Se allowCustom for true, os participantes podem digitar sua própria previsão.
Após enviar, os participantes veem os resultados agregados.
As previsões são agrupadas por valor, com as mais populares mostradas primeiro.
Esta é uma atividade de ação única.

Estado Agregado

Campo	Tipo	Descrição
`predictions`	array	Previsões únicas com `value`, `count` e `percentage`.
`totalPredictions`	number	Número total de previsões enviadas.

Seletores CSS

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

Tier List

Arraste itens para os tiers S, A, B, C, D, F e veja os rankings médios da comunidade.

Tipo de atividade: tier_list

Configuração

Propriedade	Tipo	Descrição	Padrão
`items`	array	Itens a serem classificados nos tiers.	`[]`
`tiers`	string[]	Os rótulos dos tiers (do melhor para o pior).	`["S", "A", "B", "C", "D", "F"]`

Objeto de Item

Campo	Tipo	Descrição
`id`	string	Identificador exclusivo.
`label`	string	Texto de exibição do item.
`imageUrl`	string	URL de imagem opcional para o item.
`mediaUrl`	string	URL de mídia opcional.
`mediaType`	string	Tipo de mídia: `image`, `video`, `icon` ou `qrcode`.
`iconName`	string	Nome do ícone react-icons (quando mediaType é `icon`).
`iconColor`	string	Cor do ícone (quando mediaType é `icon`).
`qrCodeUrl`	string	URL do QR code (quando mediaType é `qrcode`).

Comportamento

Os itens são exibidos em um grupo "sem classificação".
Os participantes arrastam os itens para o tier escolhido.
Quando todos os itens são posicionados, a classificação é enviada.
Após o envio, os participantes veem o tier médio da comunidade para cada item.
Esta é uma atividade de ação única.

Estado Agregado

Campo	Tipo	Descrição
`items`	array	Itens com `id`, `label`, `imageUrl`, `avgTier` (média da comunidade) e `tierCounts` (quantos o colocaram em cada tier).
`tiers`	string[]	Os rótulos dos tiers.
`totalParticipants`	number	Total de participantes que enviaram classificações de tier.

Seletores CSS

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

As Tier Lists suportam itens com mídia rica. Você pode usar imagens, ícones ou até QR codes para os itens classificados, tornando-as visualmente envolventes para comparações de produtos, rankings de personagens ou qualquer exercício de categorização.

Legende Isto

Envie legendas engraçadas para uma imagem e vote nas melhores. Ouro da comédia.

Tipo de atividade: caption_this

Configuração

Propriedade	Tipo	Descrição	Padrão
`mediaUrl`	string	URL da mídia a ser legendada.	`""`
`mediaType`	string	Tipo de mídia: `image`, `video`, `icon` ou `qrcode`.	`"image"`
`imageUrl`	string	Campo legado para compatibilidade retroativa (use `mediaUrl` em vez dele).	Nenhum
`iconName`	string	Nome do ícone react-icons (quando mediaType é `icon`).	`""`
`iconColor`	string	Cor do ícone.	`""`
`qrCodeUrl`	string	URL do QR code (quando mediaType é `qrcode`).	`""`

Comportamento

A imagem (ou outra mídia) é exibida em destaque.
Os participantes digitam e enviam legendas.
Todos os participantes podem dar voto positivo ou voto negativo nas legendas.
As legendas são ordenadas pela pontuação líquida, destacando as melhores.
Esta é uma atividade de múltiplas ações.

Estado Agregado

Usa o ListAggregatedState padrão:

Campo	Tipo	Descrição
`items`	ListItem[]	Legendas enviadas, ordenadas por pontuação.
`totalItems`	number	Total de legendas enviadas.

Seletores CSS

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

Chaveamento

Chaveamento estilo torneio em que a multidão vota em cada confronto para coroar um campeão.

Tipo de atividade: bracket

Configuração

Propriedade	Tipo	Descrição	Padrão
`participants`	array	Array de participantes do chaveamento. Cada um tem `id` e `label`.	`[]`

Comportamento

Os participantes são pareados em confrontos no formato de chaveamento de torneio.
Em cada confronto, todos os participantes votam na opção preferida.
Quando a votação de uma rodada termina, os vencedores avançam para a próxima rodada.
O chaveamento avança por várias rodadas até que um campeão seja coroado.
Esta é uma atividade de múltiplas rodadas: os participantes continuam votando em cada rodada.
O chaveamento determina automaticamente o número de rodadas com base na contagem de participantes.

Estado Agregado

Campo	Tipo	Descrição
`matchups`	BracketMatchup[]	Todos os confrontos de todas as rodadas.
`currentRound`	number	A rodada ativa atual.
`totalRounds`	number	Total de rodadas no torneio.

Objeto de Confronto

Campo	Tipo	Descrição
`id`	string	Identificador exclusivo do confronto.
`optionA`	object	Primeira opção com `id`, `label` e `votes`.
`optionB`	object	Segunda opção com `id`, `label` e `votes`.
`round`	number	A qual rodada este confronto pertence.
`winner`	string	ID da opção vencedora (definido após o término da rodada).

Seletores CSS

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

Para um chaveamento de torneio adequado, o número de participantes idealmente deve ser uma potência de 2 (4, 8, 16, 32). Se o número não for uma potência de 2, alguns participantes podem receber um "bye" (folga) na primeira rodada.

Pins no Mapa

Marque sua localização em um mapa e veja de onde todo mundo é, em tempo real.

Tipo de atividade: map_pins

Configuração

Propriedade	Tipo	Descrição	Padrão
`mapCenter`	object	O centro inicial do mapa com `lat` e `lng`.	`{ lat: 40, lng: -95 }` (centro dos EUA)
`mapZoom`	number	O nível de zoom inicial do mapa.	`3`
`prompt`	string	Instrução opcional (por exemplo, "Marque de onde você é!" ou "Marque seu destino de férias favorito").	`""`

Comportamento

Um mapa interativo é exibido.
Os participantes clicam no mapa para colocar um pin no local desejado.
Todos os pins aparecem em tempo real para todos os participantes.
Cada pin mostra o nome de exibição do participante ao passar o mouse.
Esta é uma atividade de ação única.

Estado Agregado

Campo	Tipo	Descrição
`pins`	array	Todos os pins com `participantId`, `displayName`, `lat` e `lng`.
`totalPins`	number	Número total de pins colocados.

Seletores CSS

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

O Pins no Mapa é excelente para equipes distribuídas, públicos de conferências ou qualquer cenário em que você queira visualizar a distribuição geográfica do seu grupo. O centro e o zoom iniciais podem ser ajustados para focar qualquer região.

Estilos de Indicador de Atividade

Todas as atividades interativas suportam indicadores de atividade -- notificações flutuantes que aparecem quando os participantes interagem. Você pode configurar o estilo nas configurações do Fuse:

Estilo	Descrição
`pill`	Uma notificação em formato de pílula que desliza a partir da lateral.
`float_up`	Uma notificação que flutua para cima e desaparece.
`spark`	Um efeito de faísca/flash no ponto de interação.
`none`	Desativa completamente os indicadores de atividade.

Os indicadores de atividade podem ser estilizados pelo seletor CSS .fuse-activity-indicator e pelas variáveis CSS --fc-indicator-bg, --fc-indicator-text e --fc-font-indicator.