https://github.com/srijan-arya/capx

An Interactive Survey Web Page built with HTML, CSS, and JavaScript that presents users with a series of questions upon their first visit and transitions to a title screen. Build for a WebD Challenge
https://github.com/srijan-arya/capx

figma html-css-javascript survery-form web-development

Last synced: 3 months ago
JSON representation

An Interactive Survey Web Page built with HTML, CSS, and JavaScript that presents users with a series of questions upon their first visit and transitions to a title screen. Build for a WebD Challenge

• Host: GitHub
• URL: https://github.com/srijan-arya/capx
• Owner: Srijan-Arya
• Created: 2024-08-08T11:41:23.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-08T11:50:11.000Z (5 months ago)
• Last Synced: 2024-09-26T17:42:10.080Z (3 months ago)
• Topics: figma, html-css-javascript, survery-form, web-development
• Language: JavaScript
• Homepage: https://srijancapx.netlify.app/
• Size: 194 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](#features)

- [Getting Started](#getting-started)

- [Design](#design)

- [Tech Stack](#tech-stack)

- [Workflow](#workflow)

- [Local Storage](#local-storage)

- [Responsive Design](#responsive-design)

- [Deployment](#deployment)

## 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.