Quiz Game

Timed trivia quiz with scoring, progress tracking, and results.

❓

Trivia Challenge

Answer 5 questions in 75 seconds or less!

Features Demonstrated

• Timed questions - Countdown timer with visual feedback
• Progress tracking - Question counter and score
• Answer feedback - Correct/incorrect indicators
• Results screen - Final score and stats
• Keyboard support - Number keys for quick answers

Code

<script setup lang="ts">
import { ref } from 'vue'
import { FkQuiz, FkResultModal } from '@fortune-kit/components'

const questions = [
  {
    id: 'q1',
    text: 'What is the largest planet in our solar system?',
    options: [
      { id: 'a', text: 'Mars', isCorrect: false },
      { id: 'b', text: 'Jupiter', isCorrect: true },
      { id: 'c', text: 'Saturn', isCorrect: false },
      { id: 'd', text: 'Neptune', isCorrect: false }
    ]
  },
  // ... more questions
]

const showResults = ref(false)
const finalScore = ref(0)

function handleComplete(result) {
  finalScore.value = result.score
  showResults.value = true
}
</script>

<template>
  <FkQuiz
    :questions="questions"
    :time-per-question="15"
    show-progress
    show-timer
    @complete="handleComplete"
  />

  <FkResultModal
    v-model:open="showResults"
    :type="finalScore >= 3 ? 'win' : 'lose'"
    :title="finalScore >= 3 ? 'Great Job!' : 'Better Luck Next Time'"
    :subtitle="`You scored ${finalScore} out of ${questions.length}`"
  />
</template>