MultiTopicBrainstorm

The MultiTopicBrainstorm node implements the LeafHopper method for multi-topic brainstorming. It allows a host to define multiple questions/topics, each with its own color, and participants can freely choose which topic to contribute to.

Features

• Multiple topics/questions — Define up to 7+ questions in the workshop JSON (colors loop if more than 7).
• Topic selection — Participants pick a topic from a dropdown (ShadCN Select component).
• Answer submission — Participants type and submit answers to their chosen topic.
• Previous answers — A vertical carousel shows existing answers from other participants for the selected topic.
• Truncated display — Long answers are automatically truncated to 2 lines with expandable "mehr"/"weniger" buttons. The Host can increase this to 4 or 6 lines.
• Clustered presentation — The host sees all answers organized by topic on a ReactFlow whiteboard canvas.
• Manual export — Host can export answers to Nakama storage via a dedicated button, creating timestamped archive entries.
• Toast feedback — Success notification appears when export completes.
• Optional info dialog — Each topic can have a description field shown via a help icon.

Workshop JSON (full example)

{
  "settings": {
    "name": "Multi-Topic Brainstorm",
    "hostAsPresenter": true,
    "skipAvatarSelection": true
  },
  "nodes": [
    {
      "type": "MultiTopicBrainstorm",
      "data": {
        "topics": [
          {
            "topic": "Interaktion",
            "question": "Welche Interaktionen bestehen zwischen den Rollen?",
            "description": "Betrachte formelle und informelle Interaktionen zwischen den verschiedenen Rollen."
          },
          {
            "topic": "Zeit",
            "question": "Wie verändern sich Rollen und Systemverhalten über Zeit?",
            "description": "Denke an Entwicklungsphasen, Lernkurven und sich wandelnde Anforderungen."
          },
          {
            "topic": "Organisation",
            "question": "Wie sind Rollen organisational verankert?"
          }
        ]
      }
    }
  ]
}

Topic fields

Field	Required	Description
topic	Yes	Short topic label (shown in category notes on whiteboard and dropdown)
question	No	Full question text shown to participants below the topic selector
description	No	Extended description shown via info dialog (circle-help icon)

If question is omitted, the "Frage" section is hidden in the participant view. The topic field is used as fallback label in exports.

Colors are automatically assigned from the palette: Blue, Orange, Green, Purple, Pink, Yellow, Gray — cycling if more than 7 topics.

Architecture

Backend (Nakama)

• Node class: MultiTopicBrainstormNode extends DefaultNode
• OpCodes:
  • ADD_ANSWER (0) — payload: { topicIndex: number, text: string }
  • EXPORT (1) — payload: {} (triggers manual export to storage)
  • SET_MAX_LINES (2) — payload: {maxLines: number}
• Storage:
  • Collection: workshopStats (for exports)
  • Key format: brainstorm_{workshopKey}_node{nodeIndex}_{timestamp}
  • Data format: { "Question text": ["answer1", "answer2", ...] }
  • Permissions: Read owner only (1), Write owner only (1)
  • User ID: Workshop owner/host user ID (from state.leafState.host.userId)

Frontend (Next.js)

• Component: MultiTopicBrainstormNode.tsx
• Host view:
  • ReactFlow whiteboard with category notes
  • Export button (centered bottom) with Save icon
  • Button with dropdown menu to change maximum lines
  • Toast notification on export success
• User view:
  • ShadCN Select for topic selection
  • Vertical Carousel for previous answers
  • Textarea for answer input
  • TruncatedText component for long answers (expandable with "mehr"/"weniger")
• Colors: Reuses NoteColors for consistent color palette

Data Flow

Answer Submission Flow

1. Participant selects a topic from the dropdown
2. Participant types an answer and clicks "Antwort beitragen"
3. Client sends CLIENT_UPDATE with ADD_ANSWER opCode and payload { topicIndex, text }
4. Server adds answer to data.topics[topicIndex].answers
5. Server rebuilds whiteboard layout from topics
6. Server broadcasts updated NodePayload to all clients
7. Host ReactFlow canvas updates with new answer chip
8. Participant carousel updates with the new answer

Export Flow

1. Host clicks the "Im Storage speichern" button (centered bottom of ReactFlow canvas)
2. Client sends CLIENT_UPDATE with EXPORT opCode and empty payload {}
3. Server calls exportBrainstormAnswers() function
4. Server creates export object: { "Question text": ["answer1", "answer2", ...] }
5. Server writes to workshopStats collection with timestamped key
6. Client displays toast notification: "Export erfolgreich"
7. Multiple exports create separate archive entries (no overwrites)

Storage & Exports

Export Functionality

The MultiTopicBrainstorm node supports manual data export. The host can click the "Im Storage speichern" button at any time to save a snapshot of all answers to Nakama storage.

Key features:

• Manual trigger — Export only happens when the host explicitly clicks the button
• Archival storage — Each export creates a new entry with a unique timestamp
• No overwrites — Multiple exports result in separate storage entries
• Secure storage — Exports are stored under the workshop owner's user ID with restricted read permissions
• Privacy — Only question text and answers are included (no individual user attribution)

Storage Format

Each export creates a storage entry in the workshopStats collection:

Storage key format:

brainstorm_{workshopKey}_node{nodeIndex}_{unixTimestamp}

Example key:

brainstorm_workshop_abc123_node2_1709073600000

Data structure:

{
  "Bildung & Geschichte": [
    "Erste Antwort zum Thema Bildung",
    "Zweite Antwort zum Thema Bildung"
  ],
  "Kunst & Kreativität": [
    "Kreative Antwort 1",
    "Kreative Antwort 2",
    "Kreative Antwort 3"
  ]
}

Storage properties:

• Collection: workshopStats
• User ID: Workshop owner/host user ID (one user per workshop/session)
• Read permission: Owner only (1)
• Write permission: Owner only (1)

Accessing Exported Data

Exported data can be accessed via:

1. Nakama Console (Storage tab → workshopStats collection)
2. Nakama storage API calls
3. Custom admin tools for data analysis

The timestamped key format allows you to track multiple snapshots of the same brainstorm session over time.

UI Components

Host View

The host sees a ReactFlow canvas similar to the GuessIt presentation:

• Category notes — One colored note per topic showing the question and answer count
• Answer chips — Individual answers clustered around their topic's category note
• Color coding — Each topic has a distinct color from the palette
• Export button — Centered at the bottom with a Save icon
• Maximum lines dropdown — Next to the export button

Participant View

Participants see a simple form interface:

• Topic selector — Dropdown (ShadCN Select) showing all available topics with color coding
• Previous answers — Vertical carousel showing answers from other participants for the selected topic
• Answer truncation — Long answers are clamped to a configurable number of lines (2, 4, or 6, adjustable by the host) with 'mehr' (more) button to expand
• Input field — Textarea for typing new answers
• Submit button — "Antwort beitragen" to send the answer
• Info dialog — If a topic has a description, a help icon (CircleHelp) shows additional context