NueForm

Atividades de Enquete do Fuse

Documentação das atividades Enquete Clássica, Enquete de Votos Múltiplos, Enquete de Imagens, Isto ou Aquilo, Enquete Ranqueada, Enquete de Eliminação, Escala Deslizante e O Que Você Prefere.

Enquete Clássica

Escolha uma opção e veja as porcentagens ao vivo serem atualizadas em tempo real conforme os outros votam.

Tipo de atividade: classic_poll

Configuração

PropriedadeTipoDescriçãoPadrão
optionsarrayArray de opções da enquete. Cada uma tem id, label e color opcional.2 opções padrão

Objeto de Opção

CampoTipoDescrição
idstringIdentificador exclusivo da opção.
labelstringTexto de exibição da opção.
colorstringCor de destaque da barra/realce da opção. Atribuída automaticamente pela paleta de cores se não for definida.

Comportamento

  • Cada participante pode votar em exatamente uma opção.
  • Após votar, o participante vê os resultados ao vivo (porcentagens e contagens de votos).
  • Esta é uma atividade de ação única: depois de votar, o participante entra em modo somente leitura.

Modos de Exibição

ModoDescrição
inline_barsResultados mostrados como barras horizontais dentro de cada opção.
bar_chartResultados mostrados como um gráfico de barras vertical separado.

Estado Agregado

CampoTipoDescrição
optionsPollOption[]Opções com contagens de votos, porcentagens e listas de votantes.
totalVotesnumberNúmero total de votos registrados.
myVotesstring[]IDs das opções em que o participante atual votou.

Seletores 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


Enquete de Votos Múltiplos

Vote em várias opções de uma vez. Perfeita para cenários de "selecione todas as opções aplicáveis".

Tipo de atividade: multi_vote_poll

Configuração

PropriedadeTipoDescriçãoPadrão
optionsarrayArray de opções da enquete com id, label e color opcional.2 opções padrão

Comportamento

  • Os participantes podem votar em várias opções.
  • Os votos podem ser ativados e desativados -- clicar em uma opção votada remove o voto.
  • Esta é uma atividade de múltiplas ações: os participantes podem alterar seus votos a qualquer momento.
  • Os resultados são atualizados em tempo real conforme os votos são alternados.

Estado Agregado

Igual ao da Enquete Clássica.

Seletores CSS

.fuse-multi-vote-poll, além de todos os seletores compartilhados de enquete.


Enquete de Imagens

Vote em imagens em vez de texto. Ótima para escolhas de design, looks ou produtos.

Tipo de atividade: image_poll

Configuração

PropriedadeTipoDescriçãoPadrão
optionsarrayArray de opções da enquete. Cada uma tem id, label e imageUrl.2 opções padrão

Objeto de Opção

CampoTipoDescrição
idstringIdentificador exclusivo.
labelstringRótulo de texto exibido abaixo da imagem.
imageUrlstringURL da imagem a ser exibida para esta opção.
colorstringCor de destaque opcional.

Comportamento

  • As opções são exibidas como cartões de imagem com rótulos.
  • Cada participante pode votar em uma imagem.
  • Esta é uma atividade de ação única.
  • Os resultados mostram as porcentagens de votos sobrepostas às imagens ou abaixo delas.

Estado Agregado

Igual ao da Enquete Clássica, com imageUrl disponível em cada opção.

Seletores CSS

.fuse-image-poll, além de todos os seletores compartilhados de enquete.


Isto ou Aquilo

Escolha binária estilo swipe entre duas opções, com divisões percentuais ao vivo.

Tipo de atividade: this_or_that

Configuração

PropriedadeTipoDescriçãoPadrão
optionsarrayExatamente 2 opções com id, label e color opcional.[{ label: "This" }, { label: "That" }]

Comportamento

  • Duas opções são apresentadas lado a lado em um layout de tela dividida.
  • Cada participante seleciona uma das duas opções.
  • Esta é uma atividade de múltiplas ações: os participantes podem trocar seu voto.
  • A divisão percentual ao vivo é exibida como um divisor visual entre os dois painéis.

Estado Agregado

Igual ao da Enquete Clássica (com exatamente 2 opções).

Seletores CSS

.fuse-this-or-that, .fuse-panel--left, .fuse-panel--right, .fuse-panel-label, .fuse-panel-percentage


Enquete Ranqueada

Arraste para classificar as opções na sua ordem de preferência. Veja o ranking de consenso da comunidade emergir.

Tipo de atividade: ranked_poll

Configuração

PropriedadeTipoDescriçãoPadrão
optionsarrayArray de opções a classificar. Cada uma tem id, label e color opcional.3 opções padrão

Comportamento

  • Todas as opções são exibidas em uma lista.
  • Os participantes arrastam os itens para reordená-los da mais preferida para a menos preferida.
  • Após o envio, a classificação do participante é registrada.
  • Esta é uma atividade de ação única: a classificação é enviada uma vez.
  • O ranking de consenso é calculado pela média das classificações de todos os participantes.

Estado Agregado

CampoTipoDescrição
optionsarrayOpções com id, label, avgRank e contagem de rankings.
totalParticipantsnumberNúmero total de participantes que enviaram classificações.

Seletores CSS

.fuse-ranked-poll, .fuse-rank-number, além dos seletores compartilhados.


Enquete de Eliminação

Votação em várias rodadas em que a opção menos votada é eliminada a cada rodada até restar um vencedor.

Tipo de atividade: elimination_poll

Configuração

PropriedadeTipoDescriçãoPadrão
optionsarrayArray de opções com id, label e color opcional.2 opções padrão

Comportamento

  • Os participantes votam na opção favorita da rodada atual.
  • Quando uma rodada termina, a opção com menos votos é eliminada.
  • Uma nova rodada começa com as opções restantes.
  • O processo se repete até restar apenas uma opção -- a vencedora.
  • Esta é uma atividade de múltiplas rodadas: os participantes precisam continuar votando nas rodadas seguintes.
  • Os participantes que já votaram em uma rodada podem voltar para votar na próxima.

Estado Agregado

CampoTipoDescrição
currentRoundnumberO número da rodada atual.
activeOptionsPollOption[]Opções ainda na disputa, com dados de votos.
eliminatedOptionsarrayOpções eliminadas até o momento, com a rodada em que foram eliminadas.
totalVotesThisRoundnumberTotal de votos na rodada atual.
isCompletebooleanSe a eliminação foi concluída (resta um vencedor).
winnerobjectA opção vencedora (definida quando isComplete é true).

Seletores CSS

.fuse-elimination-poll, .fuse-round-label, .fuse-champion, além dos seletores compartilhados de enquete.

As Enquetes de Eliminação funcionam melhor com 4 ou mais opções. Com apenas 2 opções, ela se torna, na prática, uma Enquete Clássica de rodada única.


Escala Deslizante

Posicione-se em um espectro e veja a curva de distribuição ao vivo de todas as respostas.

Tipo de atividade: sliding_scale

Configuração

PropriedadeTipoDescriçãoPadrão
minnumberValor mínimo da escala.0
maxnumberValor máximo da escala.100
stepnumberIncremento de passo do controle deslizante.1
minLabelstringRótulo da extremidade mínima da escala.""
maxLabelstringRótulo da extremidade máxima da escala.""
scaleStylestringEstilo visual da trilha do controle deslizante."thin"
barColorstringCor personalizada das barras de distribuição."" (usa o destaque do tema)

Comportamento

  • Os participantes arrastam um controle deslizante para selecionar um valor no espectro.
  • Após enviarem, veem um histograma mostrando a distribuição de todas as respostas.
  • Estatísticas (média, mediana, total de respostas) são exibidas.
  • Esta é uma atividade de ação única.

Estado Agregado

CampoTipoDescrição
distributionnumber[]Contagens dos intervalos do histograma (por exemplo, 10 intervalos do mín ao máx).
averagenumberValor médio de todas as respostas.
mediannumberValor mediano de todas as respostas.
totalResponsesnumberNúmero total de respostas.
minnumberValor mínimo da escala.
maxnumberValor máximo da escala.

Seletores 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


O Que Você Prefere

Escolha entre dois dilemas e veja a divisão ao vivo. Infinitamente debatível.

Tipo de atividade: would_you_rather

Configuração

PropriedadeTipoDescriçãoPadrão
optionsarrayExatamente 2 opções com id, label e color opcional.[{ label: "This" }, { label: "That" }]

Comportamento

  • Duas opções são apresentadas lado a lado.
  • Os participantes escolhem uma opção.
  • Esta é uma atividade de múltiplas ações: os participantes podem trocar sua escolha.
  • A divisão percentual ao vivo é mostrada como um divisor visual.

Diferença em Relação ao Isto ou Aquilo

O Que Você Prefere e Isto ou Aquilo são funcionalmente idênticos. A distinção é temática:

  • Isto ou Aquilo: Comparações gerais de preferência (por exemplo, "Café ou chá?").
  • O Que Você Prefere: Perguntas baseadas em dilemas (por exemplo, "Você preferiria voar ou ser invisível?").

Estado Agregado

Igual ao da Enquete Clássica (com exatamente 2 opções).

Seletores CSS

.fuse-would-you-rather, .fuse-panel--left, .fuse-panel--right, .fuse-panel-label, .fuse-panel-percentage

Paleta de Cores

Quando as opções não têm uma cor personalizada atribuída, o NueForm atribui automaticamente cores de uma paleta vibrante:

  1. Índigo (#6366f1)
  2. Âmbar (#f59e0b)
  3. Esmeralda (#10b981)
  4. Vermelho (#ef4444)
  5. Violeta (#8b5cf6)
  6. Ciano (#06b6d4)
  7. Laranja (#f97316)
  8. Rosa (#ec4899)
  9. Verde-azulado (#14b8a6)
  10. Roxo (#a855f7)
  11. Lima (#84cc16)
  12. Rosa-escuro (#e11d48)

As cores são atribuídas em sequência com base na posição da opção. Quando há mais opções do que cores, a paleta recomeça do início.

Última atualização: 20 de julho de 2026