https://github.com/mariamshrieff/quiz-app
Quiz App leverages APIs to deliver exams, displaying questions and scores in real time for an engaging testing experience.
https://github.com/mariamshrieff/quiz-app
api bootstrap5 css-animations css3 functions html5 javascript oop oop-in-javascript
Last synced: 5 months ago
JSON representation
Quiz App leverages APIs to deliver exams, displaying questions and scores in real time for an engaging testing experience.
- Host: GitHub
- URL: https://github.com/mariamshrieff/quiz-app
- Owner: MariamShrieff
- Created: 2024-10-30T16:01:22.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-01T18:32:54.000Z (about 1 year ago)
- Last Synced: 2025-03-13T09:15:22.510Z (8 months ago)
- Topics: api, bootstrap5, css-animations, css3, functions, html5, javascript, oop, oop-in-javascript
- Language: CSS
- Homepage: https://mariamshrief5.github.io/Quiz-App/
- Size: 651 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quiz App
Quiz App is a customizable online testing platform allowing users to test their knowledge across different subjects, difficulty levels, and question numbers. Designed for students, professionals, and anyone eager to learn, Quiz App offers a tailored experience for a variety of knowledge fields. Built with HTML, CSS, and JavaScript, the app is structured for easy navigation, engaging design, and immediate feedback on performance.
# Project Description:
Quiz App is a user-focused application where participants can select their desired subject, difficulty level, and number of questions for a quiz. Using JavaScript for logic and an API to fetch questions, the app evaluates the user’s responses and provides a final score. The responsive HTML and CSS layout ensures compatibility across devices, making it ideal for both casual and serious test-takers.
# Project Details:
#### 1. **User Interface**
- **Design**: A clean, intuitive layout where users can easily select topics, levels, and customize question count.
- **Styling**: CSS is used for a responsive, visually appealing design.
#### 2. **Functionality**
- **Question Fetching**: The app fetches questions from an API based on selected criteria.
- **Answer Submission**: Users can submit answers, which are evaluated to calculate the score.
- **Score Display**: Upon completion, the app displays the user's score and feedback.
- **API Integration**: Uses a quiz-based API to retrieve questions dynamically, enhancing the variety and relevance of the quiz content.
#### 3. **Object-Oriented Design (OOP)**
- **Classes**:
- `Quiz`: Manages question fetching, storing, and the quiz flow.
- `Question`: Represents individual questions, stores options and correct answers.
- `User`: Manages user selections and tracks scores.
- **Encapsulation**: Core functionalities (like answer validation) are wrapped within classes for better structure and future scalability.
- **Inheritance**: Could be extended to support different types of quizzes (e.g., timed quizzes) by inheriting from base classes.
# Example Usage:
1. User selects **Science** as the quiz topic.
2. Chooses **Intermediate** level.
3. Sets **10 questions** for the quiz.
4. Completes the quiz and views the score along with correct answers.
# Tools and Technologies:
- **HTML**: Layout structure.
- **CSS**: Styling and responsive design.
- **JavaScript**: Logic handling, API requests, and interactivity.
- **API**: Fetches question data dynamically.
# Demo:
https://github.com/user-attachments/assets/3c262545-8745-4e33-ae0e-3def341d829d
# Screenshots:
# Choose From Drop Down List, Good Luck!
- **Category**
- **Difficulty Level**
- **Number of Questions**
# Take Your Exam in Computer Field
# Style of Exam , Show Type of Questions, How many Question remaining, Show The Truthy Value or Falsy Value With Different Style and Color
# Finally, Your Score
