AI Quiz Generator
Transform PDFs into personalized quizzes with AI
The AI Quiz Generator is a study-focused web app that converts PDF content into interactive quizzes using the OpenAI API. It encourages active recall, a powerful learning technique, by allowing users to test themselves on any uploaded material. It's designed to be fast, intuitive, and effective for studying notes, textbooks, manuals, and more.
Purpose & Motivation
Active recall is one of the most effective ways to study, yet many learners passively read and re-read material. I built the AI Quiz Generator to bridge this gap — turning static content into dynamic self-assessments with zero effort required from the user.
The tool allows students and professionals alike to upload any PDF and instantly receive a quiz tailored to the contents. Whether it’s a lecture PDF, a user manual, or a policy document, the app helps test understanding quickly and effectively.
Development Notes
- Used pdf-parse to extract raw text from uploaded PDFs on the server.
- Generated questions with GPT-4o using a structured prompt and returned a JSON array of questions, choices, and explanations.
- Handled unpredictable AI output with JSON parsing safeguards and user-facing error alerts.
- Stored answers in sessionStorage for client-side quiz state and result analysis.
- Styled the UI with Tailwind CSS and used shadcn/ui for a clean, modern look.
Challenges & Learnings
- Parsing unpredictable GPT output was a major challenge. I added logic to strip Markdown formatting like ```json blocks and fail gracefully.
- Ensured minimum question count regardless of word count by enforcing a floor of 4 questions.
- Improved UX by adding a progress bar, upload feedback, and interactive result feedback to reinforce correct and incorrect answers.
Tech Stack & Architecture
| Category | Technologies |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS, Shadcn/UI |
| PDF Parsing | pdf-parse |
| API Integration | OpenAI GPT-4o |
| State Mngmt | React Hooks |
| Deployment | Vercel, GitHub |
Key Features
- - Users can upload a PDF containing study content, lecture notes, or articles. The app extracts text and sends it to the AI for question generation.
- - Displays the uploaded file name and disables upload button until a file is selected.
- - OpenAI's GPT-4o generates multiple-choice questions based on the content of the uploaded PDF.
- - Includes explanations for each correct answer to enhance understanding.
- - After completing a quiz, users see a summary of their score with percentage and color-coded feedback.
- - Correct answers are highlighted in green, while incorrect selections are marked in red alongside the correct option.
- - Clean, distraction-free interface styled with Tailwind and shadcn/ui components.
- - Built-in dark mode toggle for better accessibility and comfort.