Klassische Umfrage
Wähle eine Option und sieh, wie sich Live-Prozentwerte in Echtzeit aktualisieren, während andere abstimmen.
Aktivitätstyp: classic_poll
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
options | array | Array der Umfrageoptionen. Jede hat id, label und optional color. | 2 Standardoptionen |
Options-Objekt
| Feld | Typ | Beschreibung |
|---|---|---|
id | string | Eindeutige Kennung der Option. |
label | string | Anzeigetext der Option. |
color | string | Akzentfarbe für den Balken/die Hervorhebung der Option. Wird automatisch aus der Farbpalette zugewiesen, wenn nicht gesetzt. |
Verhalten
- Jeder Teilnehmer kann für genau eine Option stimmen.
- Nach der Abstimmung sieht der Teilnehmer die Live-Ergebnisse (Prozentwerte und Stimmenzahlen).
- Dies ist eine Einzelaktions-Aktivität: Nach der Stimmabgabe wechselt der Teilnehmer in den Lesemodus.
Anzeigemodi
| Modus | Beschreibung |
|---|---|
inline_bars | Ergebnisse als horizontale Balken innerhalb jeder Option. |
bar_chart | Ergebnisse als separates vertikales Balkendiagramm. |
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
options | PollOption[] | Optionen mit Stimmenzahlen, Prozentwerten und Wählerlisten. |
totalVotes | number | Gesamtzahl der abgegebenen Stimmen. |
myVotes | string[] | Options-IDs, für die der aktuelle Teilnehmer gestimmt hat. |
CSS-Selektoren
.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
Mehrfachstimmen-Umfrage
Stimme für mehrere Optionen auf einmal. Perfekt für „Wähle alles Zutreffende"-Szenarien.
Aktivitätstyp: multi_vote_poll
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
options | array | Array der Umfrageoptionen mit id, label und optional color. | 2 Standardoptionen |
Verhalten
- Teilnehmer können für mehrere Optionen stimmen.
- Stimmen können ein- und ausgeschaltet werden — ein Klick auf eine gewählte Option entfernt die Stimme.
- Dies ist eine Mehrfachaktions-Aktivität: Teilnehmer können ihre Stimmen jederzeit ändern.
- Ergebnisse aktualisieren sich in Echtzeit, während Stimmen umgeschaltet werden.
Aggregierter Zustand
Wie bei der klassischen Umfrage.
CSS-Selektoren
.fuse-multi-vote-poll, plus alle gemeinsamen Umfrage-Selektoren.
Bild-Umfrage
Stimme über Bilder statt Text ab. Ideal für Design-Entscheidungen, Outfits oder Produktauswahlen.
Aktivitätstyp: image_poll
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
options | array | Array der Umfrageoptionen. Jede hat id, label und imageUrl. | 2 Standardoptionen |
Options-Objekt
| Feld | Typ | Beschreibung |
|---|---|---|
id | string | Eindeutige Kennung. |
label | string | Textbeschriftung, die unter dem Bild angezeigt wird. |
imageUrl | string | URL des Bildes für diese Option. |
color | string | Optionale Akzentfarbe. |
Verhalten
- Optionen werden als Bildkarten mit Beschriftungen angezeigt.
- Jeder Teilnehmer kann für ein Bild stimmen.
- Dies ist eine Einzelaktions-Aktivität.
- Ergebnisse zeigen Stimmprozente über oder unter den Bildern.
Aggregierter Zustand
Wie bei der klassischen Umfrage, mit imageUrl an jeder Option.
CSS-Selektoren
.fuse-image-poll, plus alle gemeinsamen Umfrage-Selektoren.
This or That
Binäre Wahl im Swipe-Stil zwischen zwei Optionen mit Live-Prozentverteilung.
Aktivitätstyp: this_or_that
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
options | array | Genau 2 Optionen mit id, label und optional color. | [{ label: "This" }, { label: "That" }] |
Verhalten
- Zwei Optionen werden nebeneinander in einem Splitscreen-Layout präsentiert.
- Jeder Teilnehmer wählt eine der beiden Optionen.
- Dies ist eine Mehrfachaktions-Aktivität: Teilnehmer können ihre Stimme wechseln.
- Die Live-Prozentverteilung wird als visuelle Trennlinie zwischen den beiden Panels angezeigt.
Aggregierter Zustand
Wie bei der klassischen Umfrage (mit genau 2 Optionen).
CSS-Selektoren
.fuse-this-or-that, .fuse-panel--left, .fuse-panel--right, .fuse-panel-label, .fuse-panel-percentage
Ranglisten-Umfrage
Ziehe Optionen in deine bevorzugte Reihenfolge. Sieh zu, wie sich das Konsens-Ranking der Community herausbildet.
Aktivitätstyp: ranked_poll
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
options | array | Array der zu rankenden Optionen. Jede hat id, label und optional color. | 3 Standardoptionen |
Verhalten
- Alle Optionen werden in einer Liste angezeigt.
- Teilnehmer ziehen Elemente, um sie von am meisten bevorzugt bis am wenigsten bevorzugt zu sortieren.
- Nach dem Einreichen wird das Ranking des Teilnehmers aufgezeichnet.
- Dies ist eine Einzelaktions-Aktivität: Das Ranking wird einmal eingereicht.
- Das Konsens-Ranking wird durch Mittelung der Rankings aller Teilnehmer berechnet.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
options | array | Optionen mit id, label, avgRank und rankings-Anzahl. |
totalParticipants | number | Gesamtzahl der Teilnehmer, die Rankings eingereicht haben. |
CSS-Selektoren
.fuse-ranked-poll, .fuse-rank-number, plus gemeinsame Selektoren.
Ausscheidungs-Umfrage
Abstimmung über mehrere Runden, bei der die Option mit den wenigsten Stimmen jede Runde ausscheidet, bis ein Gewinner übrig bleibt.
Aktivitätstyp: elimination_poll
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
options | array | Array der Optionen mit id, label und optional color. | 2 Standardoptionen |
Verhalten
- Teilnehmer stimmen in der aktuellen Runde für ihre Lieblingsoption.
- Nach Abschluss einer Runde scheidet die Option mit den wenigsten Stimmen aus.
- Eine neue Runde beginnt mit den verbleibenden Optionen.
- Der Vorgang wiederholt sich, bis nur noch eine Option übrig ist — der Gewinner.
- Dies ist eine Mehrrunden-Aktivität: Teilnehmer müssen in den Folgerunden weiter abstimmen.
- Teilnehmer, die in einer Runde bereits abgestimmt haben, können in der nächsten Runde erneut abstimmen.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
currentRound | number | Die aktuelle Rundennummer. |
activeOptions | PollOption[] | Noch im Wettbewerb befindliche Optionen mit Stimmdaten. |
eliminatedOptions | array | Bisher ausgeschiedene Optionen, mit der Runde, in der sie ausgeschieden sind. |
totalVotesThisRound | number | Gesamtstimmen der aktuellen Runde. |
isComplete | boolean | Ob die Ausscheidung abgeschlossen ist (ein Gewinner bleibt). |
winner | object | Die siegreiche Option (gesetzt, wenn isComplete true ist). |
CSS-Selektoren
.fuse-elimination-poll, .fuse-round-label, .fuse-champion, plus gemeinsame Umfrage-Selektoren.
Ausscheidungs-Umfragen funktionieren am besten mit 4+ Optionen. Mit nur 2 Optionen wird sie faktisch zu einer klassischen Umfrage mit einer Runde.
Schieberegler-Skala
Positioniere dich auf einem Spektrum und sieh die Live-Verteilungskurve aller Antworten.
Aktivitätstyp: sliding_scale
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
min | number | Minimalwert der Skala. | 0 |
max | number | Maximalwert der Skala. | 100 |
step | number | Schrittweite des Schiebereglers. | 1 |
minLabel | string | Beschriftung des unteren Skalenendes. | "" |
maxLabel | string | Beschriftung des oberen Skalenendes. | "" |
scaleStyle | string | Visueller Stil der Schiebereglerspur. | "thin" |
barColor | string | Eigene Farbe für die Verteilungsbalken. | "" (nutzt die Theme-Akzentfarbe) |
Verhalten
- Teilnehmer ziehen einen Schieberegler, um einen Wert auf dem Spektrum zu wählen.
- Nach dem Einreichen sehen sie ein Histogramm mit der Verteilung aller Antworten.
- Statistiken (Durchschnitt, Median, Gesamtantworten) werden angezeigt.
- Dies ist eine Einzelaktions-Aktivität.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
distribution | number[] | Histogramm-Bucket-Zählungen (z. B. 10 Buckets von min bis max). |
average | number | Mittelwert aller Antworten. |
median | number | Medianwert aller Antworten. |
totalResponses | number | Gesamtzahl der Antworten. |
min | number | Minimalwert der Skala. |
max | number | Maximalwert der Skala. |
CSS-Selektoren
.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
Wähle zwischen zwei Dilemmata und sieh die Live-Verteilung. Endlos diskutierbar.
Aktivitätstyp: would_you_rather
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
options | array | Genau 2 Optionen mit id, label und optional color. | [{ label: "This" }, { label: "That" }] |
Verhalten
- Zwei Optionen werden nebeneinander präsentiert.
- Teilnehmer wählen eine Option.
- Dies ist eine Mehrfachaktions-Aktivität: Teilnehmer können ihre Wahl wechseln.
- Die Live-Prozentverteilung wird als visuelle Trennlinie angezeigt.
Unterschied zu This or That
Would You Rather und This or That sind funktional identisch. Der Unterschied ist thematisch:
- This or That: Allgemeine Präferenzvergleiche (z. B. „Kaffee oder Tee?").
- Would You Rather: Dilemma-Fragen (z. B. „Würdest du lieber fliegen können oder unsichtbar sein?").
Aggregierter Zustand
Wie bei der klassischen Umfrage (mit genau 2 Optionen).
CSS-Selektoren
.fuse-would-you-rather, .fuse-panel--left, .fuse-panel--right, .fuse-panel-label, .fuse-panel-percentage
Farbpalette
Wenn Optionen keine eigene Farbe zugewiesen haben, weist NueForm automatisch Farben aus einer lebendigen Palette zu:
- Indigo (
#6366f1) - Bernstein (
#f59e0b) - Smaragd (
#10b981) - Rot (
#ef4444) - Violett (
#8b5cf6) - Cyan (
#06b6d4) - Orange (
#f97316) - Pink (
#ec4899) - Petrol (
#14b8a6) - Lila (
#a855f7) - Limette (
#84cc16) - Rosé (
#e11d48)
Farben werden der Reihe nach basierend auf der Position der Option zugewiesen. Gibt es mehr Optionen als Farben, beginnt die Palette von vorn.