Skip to content

Latest commit

 

History

History
65 lines (41 loc) · 2.61 KB

README.md

File metadata and controls

65 lines (41 loc) · 2.61 KB

Interactive Quiz Web Page

Welcome to the Interactive Quiz Web Page, a web application built with HTML, CSS, and JavaScript that presents users with a series of questions upon their first visit and transitions to a title screen.

Table of Contents

Features

  • Displays individual question cards with questions and input fields for answers.
  • Provides a "Next" button to proceed to the next question.
  • Displays a title screen with a welcoming message after all questions are answered.
  • Bypasses the questions and directly displays the title screen upon refreshing or revisiting the page.
  • Offers a progress bar to track the user's progress through the questions.
  • Provides a "Review Answers" button to review the user's answers before submitting.
  • Implements client-side validation to ensure that all questions are answered before proceeding.

Getting Started

  1. Clone the repository: git clone https://github.com/username/interactive-quiz-web-page.git

  2. Open the project folder in your preferred code editor.

  3. Open the index.html file in a web browser to view the web page.

Design

The web page was designed using HTML, CSS, and JavaScript. The design is responsive and follows modern web development best practices. You can find the Figma design link provided in the task description.

Tech Stack

  • HTML: For structuring the content of the web page.
  • CSS: For styling the web page and creating responsive design.
  • JavaScript: For implementing the interactive features and managing the application state.

Workflow

Example Workflow:

  1. Upon visiting the web page for the first time, the user sees the first question card.
  2. The user answers the question and clicks "Next" to proceed to the next card.
  3. After answering all questions, the user is presented with the title screen.
  4. On refreshing or revisiting the page, the user directly sees the title screen, bypassing the questions.

Local Storage

The application uses the Web Storage API to store the user's answers locally. This allows the user to continue answering questions even after refreshing or closing the browser.

Responsive Design

The web page is designed to be responsive and adapt to different screen sizes and devices. It uses CSS media queries and flexbox to ensure a smooth user experience.

Deployment

The web page can be deployed to any web hosting platform or served locally using a simple web server.