Quiz

Complete quiz experience with timer, progress tracking, and result states.

Question 1 of 3Score: 0

15

What is the capital of France?

Features

• Timer per question — Configurable countdown with visual feedback
• Progress tracking — Question counter and score display
• Answer feedback — Immediate correct/incorrect indication
• Shuffle support — Randomize questions and options
• Skip option — Allow skipping questions
• Timeout handling — Auto-advance on timer expiry

Usage

<script setup>
import { FkQuiz } from '@fortune-kit/components'

const questions = [
  {
    id: '1',
    text: 'What is the capital of France?',
    options: [
      { id: 'a', text: 'London' },
      { id: 'b', text: 'Paris', isCorrect: true },
      { id: 'c', text: 'Berlin' }
    ]
  }
]

function handleComplete(result) {
  console.log(`Score: ${result.score}/${result.total}`)
}
</script>

<template>
  <FkQuiz
    :questions="questions"
    :time-per-question="30"
    shuffle-options
    @complete="handleComplete"
  />
</template>

Props

Prop	Type	Default	Description
questions	QuizQuestion[]	Required	Array of questions
timePerQuestion	number	30	Seconds per question
showProgress	boolean	true	Show progress bar
showTimer	boolean	true	Show countdown timer
shuffleQuestions	boolean	false	Randomize question order
shuffleOptions	boolean	true	Randomize option order
allowSkip	boolean	false	Allow skipping questions

Question Type

interface QuizQuestion {
  id: string
  text: string
  options: QuizOption[]
}

interface QuizOption {
  id: string
  text: string
  isCorrect?: boolean
}

Events

Event	Payload	Description
answer	{ questionId, optionId, correct, timeSpent }	After each answer
complete	{ score, total, answers }	When quiz ends
timeout	questionId	When timer expires

Headless Engine

For custom UI, use the headless useQuiz composable:

import { useQuiz } from '@fortune-kit/headless'

const { currentQuestion, answer, score, progress } = useQuiz({
  questions,
  onComplete: (answers, score) => console.log(score)
})