An interactive and secure quiz platform built with HTML, CSS and JavaScript.
This app helps students prepare for exams and viva by practicing 300+ MCQs.
Key features include:
- Login with student name (to personalize experience).
- Secure quiz interface (copy-protection, anti-cheating features).
- Timer-based questions with automatic next-question handling.
- Beautiful animations and responsive design.
- Final score display with congratulatory message.
- 🔑 Login System –
- Users can enter their name, and the quiz starts personalized with their input.
- Users can enter their name, and the quiz starts personalized with their input.
- ⏳ Timer-Based Quiz
- Each question has a limited time (15 seconds).
- Each question has a limited time (15 seconds).
- 📊 Scoring System
- Tracks correct answers and displays the final score at the end.
- Tracks correct answers and displays the final score at the end.
- 🛡 Copy Protection
- Right-click disabled, text selection disabled and keyboard shortcuts blocked (Ctrl + C, Ctrl + U, F12).
- Right-click disabled, text selection disabled and keyboard shortcuts blocked (Ctrl + C, Ctrl + U, F12).
- 🎨 Animations & UI
- Smooth transitions, modern design and responsive quiz interface.
- Smooth transitions, modern design and responsive quiz interface.
- 🖨 Print Protection
– Only the quiz container is visible when printing, everything else is hidden.
Users enter their name to start the quiz.
Login Screenshot
Questions are displayed in a multiple-choice format with a timer and answer options.
Quiz Interface Screenshot
When the user selects the correct answer, the button turns green and a success message appears.
Correct Output 
When the user selects the wrong answer, the button turns red and a warning message appears.
Incorrect Output:
Follow the steps below to set up and run the project locally:
- Clone the Repository
git clone https://github.com/YasirAwan4831/webdev-quiz-app.git
- Navigate to the Project Folder:
cd webdev-quiz-app - Open in VS Code (or any code editor)
code.
- Run the Application
Simply open index.html or quiz.html in your browser.
Make sure JavaScript is enabled. <br>
```bash
webdev-quiz-app/
│
├── index.html # Login page (enter name to start quiz)
├── quiz.html # Main quiz page
│
├── css/
│ └── style.css # Styles for UI & animations
│
├── js/
│ ├── auth.js # Handles login (name entry)
│ └── quiz.js # Core quiz logic (timer, scoring, protection)
│
├── questions/
│ └── mcqs.js # Question bank (300+ questions)
│
├── docu/
│ ├── quiz_documentation.pdf # Project documentation
│ └── images/ # Screenshots
│
├── LICENSE.txt # MIT License
└── .gitignore # Ignore unnecessary files
Contributions, issues, and feature requests are welcome!
Feel free to fork this repo and submit a Pull Request.
Steps to contribute:
- Fork the repository
- Create a new branch (
git checkout -b feature-branch) - Make your changes
- Commit your changes (
git commit -m "Add new feature") - Push to the branch (
git push origin feature-branch) - Create a Pull Request
---
This project is licensed under the MIT License – see the LICENSE file for details.
---
You can view the live version of this project here:
Web Development Quiz App - Live
To make the quiz system more scalable, user-friendly, and widely applicable in educational contexts, the following enhancements can be implemented in the future:
1 Mobile Application (Android/iOS)
Develop the system as a dedicated mobile app, ensuring that students can access
quizzes conveniently from their smartphones and tablets anytime, anywhere.
-
SaaS-Based Platform Deploy the solution as a Software-as-a-Service (SaaS) application, enabling schools, colleges, and training institutes to create accounts, upload their own question banks, and conduct secure online assessments.
-
Database Integration Replace the static, hardcoded question bank with a backend database system (e.g., MySQL, MongoDB) that allows dynamic storage, retrieval, and management of quiz content. This would make the system scalable and easier to maintain.
-
Enhanced Analytics and Reporting Introduce detailed performance analytics including accuracy rates, progress charts, and personalized feedback to help students identify weak areas and improve over time.
-
Gamification Features Add leaderboards, badges, rewards, and progress milestones to make learning more engaging, competitive, and motivating for students.
-
Multi-language Support Extend the system to support multiple languages, making it inclusive and accessible to learners from diverse backgrounds.
-
Offline Accessibility Provide an option for offline quiz attempts by allowing users to download quizzes and synchronize results when they reconnect to the internet.
Muhammad Yasir
Passionate Web Developer & IT Student