经典投票
选择一个选项,实时看到百分比随其他人投票而更新。
活动类型:classic_poll
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
options | array | 投票选项数组。每个包含 id、label 和可选 color。 | 2 个默认选项 |
选项对象
| 字段 | 类型 | 描述 |
|---|---|---|
id | string | 选项的唯一标识符。 |
label | string | 选项的显示文本。 |
color | string | 选项条/高亮的强调色。如未设置,从调色板自动分配。 |
行为
- 每位参与者只能投一个选项。
- 投票后,参与者看到实时结果(百分比和票数)。
- 这是一个单操作活动:投票后,参与者进入只读模式。
显示模式
| 模式 | 描述 |
|---|---|
inline_bars | 结果以每个选项内的水平条显示。 |
bar_chart | 结果以独立的垂直柱状图显示。 |
聚合状态
| 字段 | 类型 | 描述 |
|---|---|---|
options | PollOption[] | 包含票数、百分比和投票者列表的选项。 |
totalVotes | number | 总投票数。 |
myVotes | string[] | 当前参与者投票的选项 ID。 |
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
多选投票
同时投多个选项。非常适合"选择所有适用的"场景。
活动类型:multi_vote_poll
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
options | array | 包含 id、label 和可选 color 的投票选项数组。 | 2 个默认选项 |
行为
- 参与者可以投多个选项。
- 投票可以切换——点击已投的选项取消投票。
- 这是一个多操作活动:参与者可以随时更改投票。
- 结果随投票切换实时更新。
聚合状态
与经典投票相同。
CSS 选择器
.fuse-multi-vote-poll,加上所有共享投票选择器。
图片投票
对图片而非文本进行投票。非常适合设计选择、服装搭配或产品选择。
活动类型:image_poll
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
options | array | 投票选项数组。每个包含 id、label 和 imageUrl。 | 2 个默认选项 |
选项对象
| 字段 | 类型 | 描述 |
|---|---|---|
id | string | 唯一标识符。 |
label | string | 图片下方显示的文本标签。 |
imageUrl | string | 此选项要显示的图片 URL。 |
color | string | 可选强调色。 |
行为
- 选项以带标签的图片卡片形式显示。
- 每位参与者只能投一张图片。
- 这是一个单操作活动。
- 结果显示投票百分比覆盖在图片上方或下方。
聚合状态
与经典投票相同,每个选项附带 imageUrl。
CSS 选择器
.fuse-image-poll,加上所有共享投票选择器。
二选一
两个选项之间的二元滑动式选择,实时百分比分布。
活动类型:this_or_that
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
options | array | 恰好 2 个选项,包含 id、label 和可选 color。 | [{ label: "This" }, { label: "That" }] |
行为
- 两个选项以分屏布局并排展示。
- 每位参与者选择两个选项之一。
- 这是一个多操作活动:参与者可以切换投票。
- 实时百分比分布以两个面板之间的视觉分隔线显示。
聚合状态
与经典投票相同(恰好 2 个选项)。
CSS 选择器
.fuse-this-or-that、.fuse-panel--left、.fuse-panel--right、.fuse-panel-label、.fuse-panel-percentage
排名投票
拖拽将选项排列为您偏好的顺序。观看社区共识排名形成。
活动类型:ranked_poll
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
options | array | 需要排名的选项数组。每个包含 id、label 和可选 color。 | 3 个默认选项 |
行为
- 所有选项显示在列表中。
- 参与者拖拽项目,从最偏好到最不偏好重新排序。
- 提交后,参与者的排名被记录。
- 这是一个单操作活动:排名只提交一次。
- 共识排名通过平均所有参与者的排名计算。
聚合状态
| 字段 | 类型 | 描述 |
|---|---|---|
options | array | 包含 id、label、avgRank 和 rankings 计数的选项。 |
totalParticipants | number | 提交排名的参与者总数。 |
CSS 选择器
.fuse-ranked-poll、.fuse-rank-number,加上共享选择器。
淘汰投票
多轮投票,每轮票数最低的选项被淘汰,直到剩下一个获胜者。
活动类型:elimination_poll
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
options | array | 包含 id、label 和可选 color 的选项数组。 | 2 个默认选项 |
行为
- 参与者在当前轮次投票给他们最喜欢的选项。
- 一轮完成后,票数最少的选项被淘汰。
- 剩余选项开始新一轮。
- 过程重复直到只剩一个选项——获胜者。
- 这是一个多轮活动:参与者需要在后续轮次继续投票。
- 已在某轮投票的参与者可以重新加入下一轮投票。
聚合状态
| 字段 | 类型 | 描述 |
|---|---|---|
currentRound | number | 当前轮次编号。 |
activeOptions | PollOption[] | 仍在竞争中的选项及其投票数据。 |
eliminatedOptions | array | 已被淘汰的选项及其被淘汰的轮次。 |
totalVotesThisRound | number | 当前轮次的总投票数。 |
isComplete | boolean | 淘汰是否已结束(只剩一个获胜者)。 |
winner | object | 获胜选项(isComplete 为 true 时设置)。 |
CSS 选择器
.fuse-elimination-poll、.fuse-round-label、.fuse-champion,加上共享投票选择器。
淘汰投票最好有 4 个以上选项。只有 2 个选项时,实际上变成了单轮经典投票。
滑动量表
在光谱上定位自己,查看所有响应的实时分布曲线。
活动类型:sliding_scale
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
min | number | 量表的最小值。 | 0 |
max | number | 量表的最大值。 | 100 |
step | number | 滑块的步进增量。 | 1 |
minLabel | string | 量表最小端的标签。 | "" |
maxLabel | string | 量表最大端的标签。 | "" |
scaleStyle | string | 滑块轨道的视觉样式。 | "thin" |
barColor | string | 分布柱的自定义颜色。 | ""(使用主题强调色) |
行为
- 参与者拖动滑块在光谱上选择一个值。
- 提交后,他们看到显示所有响应分布的直方图。
- 显示统计信息(平均值、中位数、总响应数)。
- 这是一个单操作活动。
聚合状态
| 字段 | 类型 | 描述 |
|---|---|---|
distribution | number[] | 直方图桶计数(例如从 min 到 max 的 10 个桶)。 |
average | number | 所有响应的平均值。 |
median | number | 所有响应的中位数。 |
totalResponses | number | 响应总数。 |
min | number | 量表最小值。 |
max | number | 量表最大值。 |
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
你更愿意
在两个困境之间选择,查看实时分布。无尽的辩论。
活动类型:would_you_rather
配置
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
options | array | 恰好 2 个选项,包含 id、label 和可选 color。 | [{ label: "This" }, { label: "That" }] |
行为
- 两个选项并排展示。
- 参与者选择一个选项。
- 这是一个多操作活动:参与者可以切换选择。
- 实时百分比分布以视觉分隔线显示。
与二选一的区别
"你更愿意"和"二选一"在功能上完全相同。区别在于主题:
- 二选一:一般偏好比较(例如"咖啡还是茶?")。
- 你更愿意:基于困境的问题(例如"你更愿意会飞还是隐身?")。
聚合状态
与经典投票相同(恰好 2 个选项)。
CSS 选择器
.fuse-would-you-rather、.fuse-panel--left、.fuse-panel--right、.fuse-panel-label、.fuse-panel-percentage
调色板
当选项未分配自定义颜色时,NueForm 会自动从鲜艳的调色板中分配颜色:
- 靛蓝色(
#6366f1) - 琥珀色(
#f59e0b) - 翡翠色(
#10b981) - 红色(
#ef4444) - 紫罗兰色(
#8b5cf6) - 青色(
#06b6d4) - 橙色(
#f97316) - 粉色(
#ec4899) - 蓝绿色(
#14b8a6) - 紫色(
#a855f7) - 酸橙色(
#84cc16) - 玫瑰色(
#e11d48)
颜色根据选项位置按顺序分配。当选项数超过颜色数时,调色板循环使用。