pdf to cbt

Create a fully functional, modern web-based Computer-Based Test (CBT) interface using HTML, CSS, and JavaScript. The application must allow a user to upload a PDF question paper and convert it into an interactive answer-marking interface. Core requirements: 1. PDF Handling: * Use PDF.js to render the uploaded PDF on the left side of the screen. * Display all pages clearly with smooth scrolling. * Extract text from the PDF and intelligently detect question numbers using patterns like "1.", "Q1", or "Question 1". * Automatically determine the total number of questions, with a fallback default if detection is imperfect. 2. Layout (Split Screen): * Left panel: PDF viewer (scrollable). * Right panel: CBT interface. * The UI should resemble a professional exam interface similar to NTA/JEE CBT systems. 3. Question Interface: * Dynamically generate question rows based on detected count. * Each question must support: * Single correct (radio-style selection) * Multiple correct (multi-select buttons) * Numerical answer (input field) * Allow switching between question types via a dropdown. 4. Question Palette: * Display a grid of question numbers. * Clicking a number scrolls to that question. * Color-code states: * Not visited * Answered * Not answered * Marked for review (optional advanced feature) 5. Timer: * Add a countdown timer at the top. * Format: mm:ss * Optional: auto-submit when time ends. 6. UI/UX Design (VERY IMPORTANT): * Use a modern, aesthetic design with: * Glassmorphism (blurred panels) * Subtle gradients and glow effects * Floating background animations * Typography: * Use "Lora" for headings * Use "Inter" for body text * Smooth hover effects and transitions * Card-based question layout * Clean spacing and minimal clutter * Dark theme with soft contrast (not harsh black/white) 7. Interactions: * Highlight selected options visually * Smooth scrolling between questions * Real-time visual feedback when a question is answered * Maintain answers in a JavaScript object 8. Result System: * On submission, display a summary table: * Question number * Type * Selected answer(s) 9. Code Quality: * Write clean, well-structured, modular JavaScript * Avoid unnecessary complexity * Ensure everything runs smoothly in a browser (no backend required) Goal: Build a polished, aesthetic, and realistic CBT exam interface that feels like an actual exam platform, not a basic project. The final result should feel premium, smooth, and engaging for the user.