Skip to content

saikatsardar01/Quiz-App-Frontend

 
 

Repository files navigation

Quiz App Frontend

Welcome to the Quiz App frontend repository! This project is a simple, interactive quiz application built using HTML, CSS, and JavaScript. The app allows users to take quizzes on various topics, providing immediate feedback and scoring to enhance the learning experience.

Features

  • Responsive Design: The app is fully responsive, ensuring a seamless experience across all devices.
  • Interactive UI: Engaging user interface with smooth transitions and intuitive navigation.
  • Instant Feedback: Users receive immediate feedback on their answers, that helps them learn from their mistakes.
  • Score Tracking: Keeps track of users' scores, displaying results at the end of the quiz.
  • Multiple Categories: Quizzes are categorized by different topics, making it easy to select a preferred quiz.

Technologies Used

  • HTML5: For structuring the content and providing semantic elements.
  • CSS3: For styling the application and creating a visually appealing interface.
  • JavaScript: For adding interactivity and handling quiz logic.

Installation

To run this project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/tikuzaa/Quiz-app-frontend.git
  2. Navigate to the project directory:

    cd quiz-app-frontend
  3. Open index.html in your preferred web browser.

Usage

  1. Open the quiz app in your browser.
  2. Select a quiz category.
  3. Answer the questions presented.
  4. Receive instant feedback and view your score at the end.

Contributing

Landing Page Design Template

image User Interface:

  1. Contains Rules for the Quiz App
  2. A Continue button which redirects to Login Page

Login Page Design Template

image User Interface:

  1. Contains a text Box to Enter User Name (It should be a required field)
  2. A Button to Start The Quiz

Quiz Questions Page

image User Interface:

  1. Contains questions and options to select from
  2. Has a timer for each question (set it to 15sec)
  3. Has a button to move on to the Next Question

Required Features:

  1. If the user selects the correct option then it glows green and the timer stops
  2. If the user selects the wrong option then it glows red and the correct option is revealed (it glows green)
  3. If the time runs out then the correct option is revealed
  4. For each correct option selected the score is counted

Quiz End Page

image User Interface:

  1. Contains a Thank You Message
  2. A Retry Button which redirects to Landing Page

Required Features:

  1. Display the score of the user (it should be in the format: number of correct options selected / total number of questions)

Contributions are welcome! If you have any suggestions or improvements, feel free to create a pull request or open an issue.

Forkers

Forkers repo roster for @Hackerspace2023/Quiz-App-Frontend

License

This project is licensed under the MIT License. See the LICENSE file for more details.

About

No description, website, or topics provided.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 41.5%
  • HTML 33.1%
  • JavaScript 25.4%