LousyQuiz - AI Enhanced Quiz App 🧠✨

Made by LousyBook01. Made bcuz i forgot everything and i need to study for my exams. 📚😅

This is an interactive quiz application built with Bun 🥟, Express 🚂, TypeScript 📜, and vanilla HTML/CSS/JS 🍦. It allows users to take quizzes loaded from JSON files or (planned feature) generated by various AI models. 🤖

This is currently in like alpha stage and very buggy, i'm not good at coding 😅
Any help would be appreciated 🙏

Made with my UI design 💖

Preview 👀

Features 🌟

• Multiple Quiz Modes: 🔀
  • JSON File: Load and take quizzes defined in local JSON files. 📁
  • AI Generated (Planned): Generate quizzes on the fly using AI. 🤖
  • AI Mixed JSON (Planned): Enhance existing JSON quizzes with AI-generated questions. 🧠+📁
• Dynamic Quiz Loading: Fetches available JSON quizzes from the server. 🔄
• Interactive Quiz Interface: 🖥️
  • Displays questions one by one. 1️⃣2️⃣3️⃣
  • Shuffles questions and options. 🔀
  • Provides immediate visual feedback for correct/incorrect answers. ✅❌
  • Shows progress via a bottom progress bar. 📊
  • Confetti animation for correct answers! 🎉
  • Option to restart the current quiz or exit to selection. 🔁🚪
• Settings Panel(Not Fully Ready, Buggy): ⚙️
  • Configure API keys for various AI providers (OpenAI, Gemini, Groq, Mistral, Anthropic, OpenRouter, Custom). 🔑
  • Saves API keys to a local .env file. 💾
• Basic Backend(Not Fully Ready, Buggy): 🖥️
  • Serves the frontend application. 🌐
  • Provides API endpoints to list quizzes, get quiz questions, validate provider API keys, and manage settings. 🛠️
  • Uses dotenv for environment variable management (API keys). 🔐
  • Includes automatic port finding if the default port (3000) is busy. 🔍

Usage 🚀

• Download this latest release in the release page, the file is named 'latest.zip' 📦
• Extract the zip to any folder 📂
• Run the louzyquiz.exe file to start the server 🖥️
• Open the link seen in the terminal 🌐
• Select a quiz mode and enjoy! 😎

Adding quizes 📚

• Use 'Gemini 2.5 Pro' through the Google AI Studio or any model of your choice. (Gemini is recommended as for multimodality) 🤖
• Attach the jsonscheme.md and any data/book/docs/pdf of your choice 📄
• Copy the text from prompt.txt and into the model input and send. ✉️
• Copy the generated code and paste it into a file named {your name of choice}.json. 💾
• Load up the quiz, yay! 😎

Setup 🛠️

1. Prerequisites: 📋
   • Bun installed. 🥟
   • Git (for cloning). 🐙
2. Clone the repository: 📥

   git clone https://github.com/LousyBook94/LousyQuiz.git
   cd LousyQuiz # Or your repository directory name

3. Install dependencies: 📦

   bun install

4. (Optional) Configure API Keys: 🔑
   • Create a .env file in the root directory. 📁
   • Add your API keys in the following format: 🔐

     OPENAI_API_KEY=sk-...
     GEMINI_API_KEY=AIzaSy...
     GROQ_API_KEY=gsk_...
     MISTRAL_API_KEY=...
     ANTHROPIC_API_KEY=sk-ant-...
     OPENROUTER_API_KEY=sk-or-v1-...
     # CUSTOM_API_KEY=...
     # CUSTOM_API_BASE_URL=...
     # CUSTOM_API_MODEL_ENDPOINT=...
     # CUSTOM_API_AUTH_TYPE=...
     # CUSTOM_API_AUTH_HEADER_NAME=...

   • Alternatively, you can add keys via the Settings panel in the UI after starting the app. ⚙️

Running the Application 🏃‍♂️

1. Start the server: 🖥️

   bun run index.ts

   The server will attempt to start on port 3000 and find the next available port if 3000 is in use. 🔍
2. Open your browser: 🌐 Navigate to http://localhost:<port> (where <port> is the port number shown in the console, usually 3000).

Building the Application 🏗️

1. Build the application: 🏗️

   bun run build

   This will compile the TypeScript code, copy necessary files, and create a build directory with the compiled executable and assets. 📂

   NOTE : This copies over all the current quizes in the '.\quiz_data' folder

2. Run the built application: 🏃‍♂️

   build\lousyquiz.exe

Project Structure 🏗️

• .env: Stores API keys (create this file). 🔑
• index.ts: Backend server code (Express, API endpoints). 🖥️
• package.json, bun.lockb: Project dependencies and lock file. 📦
• tsconfig.json: TypeScript configuration. ⚙️
• quiz_data/: Directory containing JSON quiz files. 📁
• public/: Frontend assets. 🌐
  • index.html: Main HTML structure. 📄
  • style.css: CSS styles. 🎨
  • script.js: Frontend JavaScript logic. 🧠
  • vendor/: Third-party libraries (e.g., confetti). 🎉
• assets/: Contains screenshots for the README (if used). 📸

Improvements Are Welcome! 🙌

• I would be grateful if someone can fix my buggy code and improve on this 😊

Planned Features / TODO 📝

• Implement actual AI quiz generation logic. 🤖
• Implement AI Mixed JSON quiz logic. 🧠+📁
• Implement backend logic for securely writing settings to .env. 🔒
• Add UI elements for selecting AI models and generation parameters. 🎛️
• Implement caching for API responses. 💾
• Implement "Misc" settings actions (delete cache, .env, quizzes). 🧹
• Add requested animations and hover effects. ✨
• Implement theme toggling. 🌓
• Add error handling and user feedback for API interactions. ⚠️
• Refactor backend API key handling for better security (e.g., encryption at rest). 🔐