Zum Inhalt springen
UI Kit
Accent

Quiz und Produktberater

Ein paar Fragen, die zu einer Empfehlung führen. Karten nacheinander, eine Rangliste, die sich live umsortiert, ein Chat mit Antwortknöpfen, alle Fragen auf einer Karte und dies oder das.

5 Variants
Kategorie wechseln

Quiz-Funnel

Antwortkarten

Eine Frage pro Bildschirm, Antwortkarten mit Icons. Ein Tipp geht weiter, Segmente füllen sich, das Ergebnis nennt seine Gründe und eine zweite gute Wahl.

Im Studio öffnen

Live-Rangliste

Links die Fragen nacheinander, rechts jedes Ergebnis als Balken. Mit jeder Antwort wachsen die Balken und die Reihenfolge ändert sich, der Spitzenreiter leuchtet.

Im Studio öffnen

Chat

Die Fragen kommen als Nachrichten, Antworten sind Antwortknöpfe. Zwischen den Schritten tippt es kurz, die Empfehlung landet im Verlauf.

Im Studio öffnen

Alles auf einer Karte

Jede Frage als Reihe von Chips, in beliebiger Reihenfolge. Ein Ring zählt die Antworten, das Ergebnis erscheint in derselben Karte, sobald die letzte da ist.

Im Studio öffnen

Dies oder das

Zwei große Kacheln pro Schritt, dazwischen „oder“. Die gewählte hebt sich, die andere tritt zurück, das nächste Paar steigt auf. Schnell und verspielt.

Im Studio öffnen

Details

Was Quiz-Funnel mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/quiz-funnel.tsx
Bringt mit
utilskitbuttoniconmotionrevealsection
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 11 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle QuizFunnelProps aus components/ui/quiz-funnel.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    QuizFunnelVariant

    cardslive-matchchatone-pagethis-or-that

  • eyebrowoptional
    React.ReactNode
  • titlePflicht
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • questionsPflicht
    QuizQuestion[]
  • resultsPflicht
    QuizResult[]
  • hostoptional
    string

    chat: name of the one asking

  • greetingoptional
    string

    chat: the first message

  • noteoptional
    string

    Text under the result, e.g. a free test ride

Eingebaute Texte

Diese Texte schreibt Quiz-Funnel selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 11 Texte anzeigen
stepEnglisch Question {n} of {t}Deutsch Frage {n} von {t}
backEnglisch BackDeutsch Zurück
restartEnglisch Start overDeutsch Neu starten
resultEnglisch Our recommendationDeutsch Unsere Empfehlung
alsoEnglisch Also a good fitDeutsch Passt auch gut
yourMatchEnglisch Your matchDeutsch Deine Übereinstimmung
answerMoreEnglisch Answer {n} more to see your matchDeutsch Noch {n} beantworten, dann steht dein Ergebnis
orEnglisch orDeutsch oder
youEnglisch YouDeutsch Du
typingEnglisch {n} is typingDeutsch {n} schreibt
progressEnglisch ProgressDeutsch Fortschritt

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Quiz-Funnel reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-label, aria-live, aria-pressed, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, progressbar, radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Quiz-Funnel?

Mit aiw add @ai-website/quiz-funnel. Der Befehl legt die Datei components/ui/quiz-funnel.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, motion, reveal und section. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Quiz-Funnel?

5 Varianten, Antwortkarten, Live-Rangliste, Chat, Alles auf einer Karte und Dies oder das. Du wählst sie mit der Prop variant, zum Beispiel variant="live-match".

Kann ich die Texte von Quiz-Funnel übersetzen?

Ja. Quiz-Funnel bringt 11 eigene Texte auf Deutsch und Englisch mit, etwa „Zurück“, „Neu starten“ und „Unsere Empfehlung“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Quiz-Funnel einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Quiz-Funnel mit aiw_components und installieren sie mit aiw_add @ai-website/quiz-funnel. Nenn im Prompt die Variante, etwa variant="cards", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Quiz-Funnel ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden QuizFunnel-Code zum Kopieren.

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Quiz und Produktberater stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert