Wortwolke
Reiche Wörter oder Phrasen ein und sieh zu, wie sich in Echtzeit eine animierte Wortwolke bildet.
Aktivitätstyp: word_cloud
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
maxWordsPerUser | number | Maximale Anzahl an Wörtern/Phrasen, die jeder Teilnehmer einreichen kann. | 3 |
prompt | string | Optionale Aufforderung als Orientierung für Einreichungen (z. B. „Beschreibe deinen Traumurlaub in einem Wort"). | "" |
Verhalten
- Teilnehmer tippen Wörter oder kurze Phrasen ein und reichen sie ein.
- Jede Einreichung erscheint in der Wortwolke.
- Wörter, die von mehreren Teilnehmern eingereicht werden, erscheinen größer in der Wolke.
- Die Wolke animiert und ordnet sich neu an, wenn neue Wörter hinzukommen.
- Jeder Teilnehmer kann bis zu
maxWordsPerUserWörter einreichen. - Dies ist eine Mehrfachaktions-Aktivität.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
words | array | Wörter mit text und count (Anzahl der Einreichungen). |
totalSubmissions | number | Gesamtzahl der Worteinreichungen. |
CSS-Selektoren
.fuse-word-cloud, .fuse-cloud, .fuse-word, .fuse-input, .fuse-submit-btn, .fuse-hint, .fuse-status
Wortwolken sind besonders effektiv für Eisbrecher, Brainstorming und das Sammeln schneller Eindrücke aus einer Gruppe. Die visuelle Natur der Wolke macht sie für Präsentationen sehr ansprechend.
Hot Takes
Stimme einer gewagten Aussage zu oder widersprich ihr. Eine Live-Tauziehen-Grafik zeigt die Verteilung.
Aktivitätstyp: hot_takes
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
statement | string | Die Aussage, der zugestimmt oder widersprochen werden soll. | "" |
agreeColor | string | Farbe für die „Zustimmen"-Seite. | "#27ae60" (grün) |
disagreeColor | string | Farbe für die „Ablehnen"-Seite. | "#e74c3c" (rot) |
agreeLabel | string | Eigene Beschriftung für die Zustimmen-Schaltfläche (z. B. „Liebe es"). | "" (Standard: „Zustimmen") |
disagreeLabel | string | Eigene Beschriftung für die Ablehnen-Schaltfläche (z. B. „Hasse es"). | "" (Standard: „Ablehnen") |
Verhalten
- Die gewagte Aussage wird prominent angezeigt.
- Zwei Schaltflächen werden angezeigt: Zustimmen und Ablehnen.
- Teilnehmer klicken auf eine Schaltfläche, um ihre Stimme abzugeben.
- Eine Tauziehen-Balkengrafik zeigt die Live-Prozentverteilung zwischen Zustimmung und Ablehnung.
- Dies ist eine Einzelaktions-Aktivität.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
statement | string | Der Text der Aussage. |
agreeCount | number | Anzahl der Zustimmungen. |
disagreeCount | number | Anzahl der Ablehnungen. |
agreePercentage | number | Prozentsatz der Zustimmungen (0–100). |
disagreePercentage | number | Prozentsatz der Ablehnungen (0–100). |
totalVotes | number | Insgesamt abgegebene Stimmen. |
CSS-Selektoren
.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
Reiche Fragen ein und stimme sie hoch. Perfekt für AMAs, Veranstaltungen und Klassenzimmer.
Aktivitätstyp: qa_board
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
maxReplyDepth | number | Maximale Tiefe von Antworten/Threads auf Fragen. | 2 |
Verhalten
- Teilnehmer reichen Fragen als Text ein.
- Alle Teilnehmer können jede Frage hochstimmen oder herunterstimmen.
- Fragen werden nach Netto-Punktzahl sortiert (die meistgewählten zuerst).
- So steigen die beliebtesten Fragen nach oben.
- Dies ist eine Mehrfachaktions-Aktivität.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
questions | ListItem[] | Alle eingereichten Fragen, sortiert nach Punktzahl. |
CSS-Selektoren
.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
Q&A-Boards sind ideal für Live-Events, Webinare und All-Hands-Meetings. Der Upvote-Mechanismus sorgt dafür, dass die wichtigsten Fragen nach oben steigen, sodass der Vortragende leicht priorisieren kann.
Vorhersagen
Triff Vorhersagen und sieh den Konsens der Menge. Ergebnisse können optional später aufgedeckt werden.
Aktivitätstyp: predictions
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
question | string | Die Vorhersagefrage (z. B. „Wer gewinnt die Meisterschaft?"). | "" |
predefinedOptions | array | Optionale vordefinierte Optionen mit id und label. Falls vorhanden, wählen Teilnehmer daraus. | [] |
allowCustom | boolean | Ob Teilnehmer zusätzlich oder statt der vordefinierten Optionen eigene Vorhersagen eingeben können. | true |
Verhalten
- Die Vorhersagefrage wird angezeigt.
- Wenn vordefinierte Optionen vorhanden sind, wählen Teilnehmer daraus.
- Wenn
allowCustomtrue ist, können Teilnehmer ihre eigene Vorhersage eintippen. - Nach dem Einreichen sehen die Teilnehmer die aggregierten Ergebnisse.
- Vorhersagen werden nach Wert gruppiert, die beliebtesten zuerst.
- Dies ist eine Einzelaktions-Aktivität.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
predictions | array | Eindeutige Vorhersagen mit value, count und percentage. |
totalPredictions | number | Gesamtzahl der eingereichten Vorhersagen. |
CSS-Selektoren
.fuse-predictions, .fuse-option, .fuse-option-label, .fuse-option-percentage, .fuse-input, .fuse-submit-btn, .fuse-hint, .fuse-consensus
Tier List
Ziehe Elemente in die Stufen S, A, B, C, D, F und sieh die durchschnittlichen Community-Rankings.
Aktivitätstyp: tier_list
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
items | array | Elemente, die in Stufen eingeordnet werden sollen. | [] |
tiers | string[] | Die Stufenbeschriftungen (von am besten bis am schlechtesten). | ["S", "A", "B", "C", "D", "F"] |
Element-Objekt
| Feld | Typ | Beschreibung |
|---|---|---|
id | string | Eindeutige Kennung. |
label | string | Anzeigetext des Elements. |
imageUrl | string | Optionale Bild-URL des Elements. |
mediaUrl | string | Optionale Medien-URL. |
mediaType | string | Medientyp: image, video, icon oder qrcode. |
iconName | string | React-icons-Iconname (wenn mediaType icon ist). |
iconColor | string | Iconfarbe (wenn mediaType icon ist). |
qrCodeUrl | string | QR-Code-URL (wenn mediaType qrcode ist). |
Verhalten
- Elemente werden in einem „unsortierten" Pool angezeigt.
- Teilnehmer ziehen Elemente in die Stufe ihrer Wahl.
- Sobald alle Elemente platziert sind, wird das Ranking eingereicht.
- Nach dem Einreichen sehen die Teilnehmer die durchschnittliche Community-Stufe für jedes Element.
- Dies ist eine Einzelaktions-Aktivität.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
items | array | Elemente mit id, label, imageUrl, avgTier (Community-Durchschnitt) und tierCounts (wie viele es in welche Stufe eingeordnet haben). |
tiers | string[] | Die Stufenbeschriftungen. |
totalParticipants | number | Gesamtzahl der Teilnehmer, die Stufen-Rankings eingereicht haben. |
CSS-Selektoren
.fuse-tier-list, .fuse-tier-row, .fuse-tier-label, .fuse-tier-item, .fuse-tier-badge, .fuse-consensus
Tier Lists unterstützen Rich-Media-Elemente. Du kannst Bilder, Icons oder sogar QR-Codes für die einzuordnenden Elemente verwenden — visuell ansprechend für Produktvergleiche, Charakter-Rankings oder jede Kategorisierungsübung.
Caption This
Reiche lustige Bildunterschriften für ein Bild ein und stimme für die besten. Comedy-Gold.
Aktivitätstyp: caption_this
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
mediaUrl | string | URL des Mediums, das betitelt werden soll. | "" |
mediaType | string | Medientyp: image, video, icon oder qrcode. | "image" |
imageUrl | string | Altes Feld für Abwärtskompatibilität (nutze stattdessen mediaUrl). | Keiner |
iconName | string | React-icons-Iconname (wenn mediaType icon ist). | "" |
iconColor | string | Iconfarbe. | "" |
qrCodeUrl | string | QR-Code-URL (wenn mediaType qrcode ist). | "" |
Verhalten
- Das Bild (oder andere Medium) wird prominent angezeigt.
- Teilnehmer tippen Bildunterschriften ein und reichen sie ein.
- Alle Teilnehmer können Bildunterschriften hochstimmen oder herunterstimmen.
- Bildunterschriften werden nach Netto-Punktzahl sortiert, sodass die besten oben landen.
- Dies ist eine Mehrfachaktions-Aktivität.
Aggregierter Zustand
Verwendet den Standard-ListAggregatedState:
| Feld | Typ | Beschreibung |
|---|---|---|
items | ListItem[] | Eingereichte Bildunterschriften, sortiert nach Punktzahl. |
totalItems | number | Gesamtzahl der eingereichten Bildunterschriften. |
CSS-Selektoren
.fuse-caption-this, .fuse-list-item, .fuse-item-text, .fuse-item-author, .fuse-score, .fuse-upvote, .fuse-downvote, .fuse-input, .fuse-submit-btn
Bracket
Turnierbaum, bei dem die Menge über jedes Duell abstimmt, um einen Champion zu krönen.
Aktivitätstyp: bracket
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
participants | array | Array der Bracket-Teilnehmer. Jeder hat id und label. | [] |
Verhalten
- Teilnehmer werden im Turnierbaum-Format zu Duellen gepaart.
- Bei jedem Duell stimmen alle Teilnehmer für ihre bevorzugte Option.
- Sobald die Abstimmung einer Runde abgeschlossen ist, rücken die Gewinner in die nächste Runde vor.
- Der Bracket durchläuft mehrere Runden, bis ein Champion gekrönt wird.
- Dies ist eine Mehrrunden-Aktivität: Teilnehmer stimmen in jeder Runde weiter ab.
- Der Bracket bestimmt die Anzahl der Runden automatisch anhand der Teilnehmerzahl.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
matchups | BracketMatchup[] | Alle Duelle über alle Runden hinweg. |
currentRound | number | Die aktuell aktive Runde. |
totalRounds | number | Gesamtzahl der Runden im Turnier. |
Matchup-Objekt
| Feld | Typ | Beschreibung |
|---|---|---|
id | string | Eindeutige Duell-Kennung. |
optionA | object | Erste Option mit id, label und votes. |
optionB | object | Zweite Option mit id, label und votes. |
round | number | Zu welcher Runde dieses Duell gehört. |
winner | string | ID der siegreichen Option (gesetzt nach Abschluss der Runde). |
CSS-Selektoren
.fuse-bracket, .fuse-matchup, .fuse-matchup-entry, .fuse-matchup-label, .fuse-matchup-votes, .fuse-round-label, .fuse-champion
Für einen sauberen Turnierbaum sollte die Teilnehmerzahl idealerweise eine Zweierpotenz sein (4, 8, 16, 32). Ist die Anzahl keine Zweierpotenz, erhalten manche Teilnehmer in der ersten Runde möglicherweise ein Freilos.
Karten-Pins
Setze einen Pin für deinen Standort auf einer Karte und sieh in Echtzeit, woher alle anderen kommen.
Aktivitätstyp: map_pins
Konfiguration
| Eigenschaft | Typ | Beschreibung | Standard |
|---|---|---|---|
mapCenter | object | Das anfängliche Kartenzentrum mit lat und lng. | { lat: 40, lng: -95 } (Mitte der USA) |
mapZoom | number | Die anfängliche Zoomstufe der Karte. | 3 |
prompt | string | Optionale Aufforderung (z. B. „Pinne, woher du kommst!" oder „Pinne deinen Lieblings-Urlaubsort"). | "" |
Verhalten
- Eine interaktive Karte wird angezeigt.
- Teilnehmer klicken auf die Karte, um einen Pin an der gewünschten Stelle zu setzen.
- Alle Pins erscheinen in Echtzeit für alle Teilnehmer.
- Jeder Pin zeigt beim Überfahren mit der Maus den Anzeigenamen des Teilnehmers.
- Dies ist eine Einzelaktions-Aktivität.
Aggregierter Zustand
| Feld | Typ | Beschreibung |
|---|---|---|
pins | array | Alle Pins mit participantId, displayName, lat und lng. |
totalPins | number | Gesamtzahl der gesetzten Pins. |
CSS-Selektoren
.fuse-map-pins, .fuse-hint, .fuse-status
Karten-Pins eignen sich hervorragend für verteilte Teams, Konferenzpublikum oder jedes Szenario, in dem du die geografische Verteilung deiner Gruppe visualisieren möchtest. Zentrum und Zoom lassen sich anpassen, um jede Region zu fokussieren.
Stile der Aktivitätsindikatoren
Alle interaktiven Aktivitäten unterstützen Aktivitätsindikatoren — schwebende Benachrichtigungen, die erscheinen, wenn Teilnehmer interagieren. Den Stil konfigurierst du in den Fuse-Einstellungen:
| Stil | Beschreibung |
|---|---|
pill | Eine pillenförmige Benachrichtigung, die von der Seite hereingleitet. |
float_up | Eine Benachrichtigung, die nach oben schwebt und ausblendet. |
spark | Ein Funken-/Blitzeffekt am Interaktionspunkt. |
none | Aktivitätsindikatoren komplett deaktivieren. |
Aktivitätsindikatoren lassen sich über den CSS-Selektor .fuse-activity-indicator sowie die CSS-Variablen --fc-indicator-bg, --fc-indicator-text und --fc-font-indicator gestalten.