#Interactive Quiz App
Google Developer Club Tech Department Assignment
Submitted by: Khushi Gupta
Newton School of Technology - Computer Science
A modern, interactive quiz application built with vanilla HTML, CSS, and JavaScript. This project demonstrates proficiency in frontend development, responsive design, and modern web technologies while delivering an engaging user experience.
Live Demo: https://gdg-smoky.vercel.app/
GitHub Repository: https://github.com/khushigupta-kg/gdg.git
• 10 Multiple-Choice Questions loaded from JSON file • 15-Second Timer per question with visual countdown • Score Tracking with comprehensive final results • Responsive Design optimized for all devices • Clean User Interface with modern design principles
• * High Scores System* with localStorage persistence
• * Question Shuffling* for unique quiz experience each time
• * Progress Bar* showing real-time completion status
• * Dark/Light Theme Toggle* for user preference
• * Keyboard Navigation* (1-4 keys for options, Enter for next)
• * Smooth Animations* and transitions throughout
• * Mobile-First Design* with touch-friendly interface
• * Performance Tracking* including completion time
• * Dynamic Feedback* with motivational messages
• HTML5 - Semantic markup and accessibility • CSS3 - Modern styling with CSS Variables, Grid, and Flexbox • JavaScript ES6+ - Object-oriented programming with classes • localStorage API - Client-side data persistence • JSON - Dynamic question loading • Responsive Design - Mobile-first approach
• Modern web browser (Chrome, Firefox, Safari, Edge) • No additional dependencies required!
1. Clone the repository bash git clone [your-repo-url] cd quiz-app
2. Open locally bash
open index.html
python -m http.server 8000
Visit: http://localhost:8000
3. Start quizzing!
quiz-app/
index.html # Main HTML structure
style.css # Styling and responsive design
script.js # Quiz logic and functionality
questions.json # Question database (optional)
README.md # Project documentation
screenshots/ # Demo images (optional)
1. Start Quiz - Click any option to begin 2. Navigate - Use mouse clicks or keyboard (1-4 keys) 3. Timer - Answer within 15 seconds or auto-advance 4. Progress - Watch the progress bar fill up 5. Results - View comprehensive score breakdown 6. High Scores - Check leaderboard and beat your best 7. Themes - Toggle between light and dark modes
javascript class QuizApp { constructor() { this.questions = []; this.currentQuestion = 0; this.score = 0; // Clean, maintainable code structure } }
css :root { --primary-color: #6366f1; --secondary-color: #8b5cf6; /* Theme-aware design system */ }
javascript saveHighScore(percentage, timeTaken) { // Persistent data without backend localStorage.setItem('quizHighScores', JSON.stringify(this.highScores)); }
• Zero Dependencies - Pure vanilla JavaScript • 100% Responsive - Works perfectly on all screen sizes • Accessibility Focused - Keyboard navigation and semantic HTML • Modern ES6+ - Classes, arrow functions, destructuring • Performance Optimized - Lightweight and fast loading • Error Handling - Graceful fallbacks for missing resources • Cross-Browser Compatible - Tested on all major browsers
| Browser | Version | Status |
|---|---|---|
| Chrome | 80+ Fully Supported | |
| Firefox | 75+ | Fully Supported |
| Safari | 13+ | Fully Supported |
| Edge | 80+ | Fully Supported |
This app is deployed on [Vercel/Netlify] with automatic deployments from GitHub.
bash
npm i -g vercel vercel
npm i -g netlify-cli netlify deploy
• Quiz loads without errors • Timer counts down correctly • Questions shuffle on restart • Scoring calculates accurately • High scores save and display • Theme toggle works • Mobile responsive • Keyboard navigation functional
javascript // Test in browser console window.quiz.score; // Check current score localStorage.getItem('quizHighScores'); // Check saved scores
• Multiple quiz categories • Sound effects and music • Achievement system • Multiplayer mode • Analytics dashboard • Multi-language support
This project demonstrates: • Frontend Development skills with modern JavaScript • Responsive Design principles and mobile-first approach • User Experience design with animations and feedback • Data Persistence using browser storage APIs • Code Organization with object-oriented programming • Project Management from concept to deployment
As a first-year Computer Science student with a strong interest in both frontend and backend development, this quiz app allowed me to:
1. Showcase JavaScript Skills - Building on my Python background
2. Demonstrate UI/UX Thinking - Creating engaging user experiences
3. Practice Modern Web Development - Using current best practices
4. Complete Within Timeline - Delivering a polished product on schedule
5. Add Portfolio Value - Professional-quality project for future opportunities
- Khushi Gupta First-Year Computer Science Student | Newton School of Technology
- Interests: Software Development, AI,Frontend and Backend Systems
- Skills: Python, Flask, HTML/CSS
- Learning: Full-stack development and competitive programming
• GitHub: • LinkedIn: https://www.linkedin.com/in/khushi-gupta-61a735373 • Email: khushigupta0987654321@gmail.com
This project is open source and available under the MIT License.
- If you found this project helpful, please give it a star!*
Built with ¸� for Google Developer Club Tech Department Assignment