sveltekit-math-quiz Svelte Themes

Sveltekit Math Quiz

Interactive math quiz platform built with SvelteKit 5, TypeScript, and MySQL

Download

Math Quiz App

A comprehensive SvelteKit 5 application that provides an interactive math quiz platform for students. The app allows students to take various math quizzes with different difficulty levels and tracks their progress and scores.

Features

  • šŸ§® Multiple Quiz Types: Basic Arithmetic, Multiplication Tables, Advanced Math
  • šŸ“Š Three Difficulty Levels: Easy, Medium, Hard
  • šŸ‘¤ User Authentication: Student, Teacher, and Admin roles
  • šŸ“ˆ Progress Tracking: Score calculation and completion history
  • šŸ”’ Secure Sessions: Database-backed session management
  • šŸ“± Responsive Design: Works on desktop and mobile devices
  • šŸŽÆ Real-time Quiz Interface: Progress indicators and question navigation

Tech Stack

  • Framework: SvelteKit 5 with TypeScript
  • Runtime: Bun (package manager and runtime)
  • Database: MySQL with mysql2 driver
  • UI Framework: Bootstrap 5 with FontAwesome icons
  • Styling: Custom CSS with Bootstrap components
  • Authentication: Database-backed sessions with secure tokens

Database Schema

The application uses four main tables:

  1. users: User accounts with roles (student/teacher/admin)
  2. quizzes: Quiz metadata (title, description, difficulty)
  3. questions: Individual questions with correct answers and order
  4. quiz_attempts: Student attempt tracking with scores and completion times
  5. sessions: Secure session management with expiration

Getting Started

Prerequisites

  • Bun runtime
  • MySQL database
  • Node.js (for compatibility)

Installation

  1. Clone the repository:
git clone https://github.com/markritterman/sveltekit-math-quiz-app.git
cd sveltekit-math-quiz-app
  1. Install dependencies:
bun install
  1. Set up environment variables:
cp .env.example .env
# Edit .env with your database credentials
  1. Initialize the database:
bun run scripts/seed.ts
  1. Start the development server:
bun run dev
  1. Visit http://localhost:5173 to access the application

Default Login Credentials

The seeded database includes test accounts:

Development

Available Scripts

  • bun run dev - Start development server
  • bun run build - Build for production
  • bun run preview - Preview production build
  • bun run scripts/seed.ts - Initialize/reset database

Project Structure

src/
ā”œā”€ā”€ lib/
ā”‚   ā”œā”€ā”€ components/     # Reusable Svelte components
ā”‚   ā”œā”€ā”€ server/         # Server-side utilities
ā”‚   ā”‚   ā”œā”€ā”€ auth.ts     # Authentication logic
ā”‚   ā”‚   ā”œā”€ā”€ db.ts       # Database connection
ā”‚   ā”‚   ā””ā”€ā”€ session.ts  # Session management
ā”‚   ā””ā”€ā”€ stores/         # Svelte stores
ā”œā”€ā”€ routes/
ā”‚   ā”œā”€ā”€ api/           # API endpoints
ā”‚   ā”œā”€ā”€ dashboard/     # Dashboard pages
ā”‚   ā”œā”€ā”€ quiz/          # Quiz taking interface
ā”‚   ā”œā”€ā”€ login/         # Authentication pages
ā”‚   ā””ā”€ā”€ register/      # User registration
ā””ā”€ā”€ hooks.server.ts    # SvelteKit hooks

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

License

MIT License - feel free to use this project for educational purposes.

Educational Focus

This application is designed specifically for educational use, focusing on:

  • Student Experience: Intuitive interface for taking math quizzes
  • Progress Tracking: Teachers can monitor student performance
  • Scalable Architecture: Easy to add new quiz types and questions
  • Modern Web Development: Demonstrates SvelteKit 5 best practices

Built with ā¤ļø using SvelteKit 5, TypeScript, and MySQL.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes