nuxt-x-affiliate
Quiz
Multi-step product recommendation quiz — answers tally into a recommended product.
Quiz
The XAFQuiz component renders a linear multi-step quiz — each question has 2+ options that map to a productId. When the reader completes the quiz, the option whose productId appears most often wins, and the component renders a recommended product card with a CTA back to the review.
Components
<XAFQuiz />
<XAFQuiz
title="Find your perfect keyboard"
subtitle="4 quick questions."
endpoint="/api/quiz"
:questions="[
{ id: 'q1', text: 'What will you use it for?', options: [
{ id: 'work', label: 'Work / writing', productId: 'k-work' },
{ id: 'game', label: 'Gaming', productId: 'k-game' },
{ id: 'both', label: 'A bit of both', productId: 'k-both' },
]},
{ id: 'q2', text: 'Wired or wireless?', options: [
{ id: 'wireless', label: 'Wireless', productId: 'k-wireless' },
{ id: 'wired', label: 'Wired', productId: 'k-wired' },
]},
]"
:products="[
{ id: 'k-work', name: 'Logitech MX Keys S', description: 'Best low-profile wireless for typists.', href: '/reviews/mx-keys-s' },
{ id: 'k-game', name: 'Razer Huntsman', description: 'Top gaming mech.', href: '/reviews/razer-huntsman' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Quiz heading. |
subtitle | string | — | Optional subtitle. |
questions | QuizQuestion[] | required | Each question: { id, text, options: QuizOption[] }. |
products | QuizProduct[] | required | Each product: { id, name, image?, href, description }. |
endpoint | string | — | POST { answers, recommendedId } here for analytics. |
Distinct from <XAFDecisionFlow>: the quiz is linear (one question after another), not branching. Use Decision Flow when each answer routes to a different next question.
AI Context
component: XAFQuiz
package: "@xenterprises/nuxt-x-affiliate"
use-when: Multi-step linear product recommendation quiz with progress bar and result landing page.