Scribd
Upload
27 views

Assignment Build A Quiz App Using HTML, CSS, and JavaScript

Uploaded by

Pratham Wakde
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

Assignment Build A Quiz App Using HTML, CSS, and JavaScript

Uploaded by

Pratham Wakde
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Assignment: Build a Quiz App Using HTML,

CSS, and JavaScript

Assignment: Build a Quiz App Using HTML, CSS, and JavaScript

Objective
The goal of this assignment is to create a functional quiz app that tests users
on different categories of questions. You will use HTML for the structure,
CSS for styling, and JavaScript for dynamic interactions and quiz logic.

Problem Statement
1. Page Header Design
The Quiz App's home page should have the following sections and
elements:
a. User Information Section:
Logo: A logo representing the quiz app.
Welcome Note: A short welcome message.
Name Input: A text box for the user to enter their name.
Enter Button: A button to start the quiz after entering the name.
b. Category Selection Section:
Category Buttons: Four buttons, each representing a quiz category:
Math (e.g., "Algebra", "Geometry", etc.)
General Knowledge
Science
History
c. Navigation:
Once the user enters their name and selects a category, they should be
taken to the quiz page for the chosen category.
2. Quiz
The Quiz page should display the questions and options dynamically based
on the selected category. The page should have the following features:
Timer: A timer in the top left corner that tracks the time spent on the quiz.
Score Display: A score tracker in the top right corner to show the current
score as questions are answered.
Question Section:
Display the question number and corresponding question text.
Below each question, provide four answer options as clickable
buttons.
Next Question Button: After answering each question, a Next Question
button should appear to proceed to the next question.
Final Question: When the last question is answered, the user should be
taken to the result page.

3. Result Page
Once all questions are answered, the user should be redirected to the
result page. The result page must display the following information:
Participant’s Name: The name entered by the user on the home page.
Total Time Taken: The total time spent to complete the quiz.
Number of Questions: The total number of questions (e.g., 10
questions).
Number of Attempted Questions: The number of questions attempted by
the user.
Number of Correct Questions: The total number of correct answers.
Number of Wrong Questions: The total number of incorrect answers.
Score Percentage: The score in percentage based on correct answers.
Start Again Button: A button to restart the quiz with a new session.
Go to Home Button: A button to return to the home page for category
selection.
Output: index.html (Home Page)

Output: Questions Page


Output: Result Page

Bonus Features (Optional)


Implement a progress bar to visually indicate quiz progress.
Add a randomization feature so that each quiz generates a different
set of questions.
Implement local storage to save user scores and display a
leaderboard.
Steps to Complete
1. Set Up the Project:
Open VS Code and create a new folder for your quiz app project.
Inside the folder, create the following files:
index.html: For the home page and overall app structure.
style.css: For styling the home page, quiz page, and result page.
script.js: For handling the quiz logic, including category selection,
timer, score calculation, and result display.
2. Home Page Implementation:
Create a form where the user enters their name and selects a category.
Ensure that the form submission leads to the quiz page with the selected
category.
3. Quiz Page Implementation:
Use JavaScript to dynamically load 10 questions from a selected
category.
Track the time and score using variables, and display them on the
screen.
Implement functionality for the Next Question button to load the next
question.
4. Result Page Implementation:
Calculate and display the user's performance (correct answers, incorrect
answers, percentage score, etc.).
Provide buttons to restart the quiz or return to the home page.
Evaluation Criteria

Grading Criteria Full Marks (10) Partial Marks (5)

Proper use of sections and


Minimal or incorrect use of
HTML Structure navigation from home page to other
sections/navigation.
pages.

CSS Presentation Clean and user-friendly design. Basic or inconsistent design.

Correct functionality of quiz logic, Minor logic errors or bugs in


JavaScript Logic
timer, and result page calculation. functionality.

10 questions per category with Fewer questions or incorrect


Questions and Categories
correct answer tracking. question logic.

Well-structured code, with comments Some redundancy or lack of


Code Readability & Optimization
and efficient logic. comments.

Submission Instructions
1. Zip your project folder with the name QuizApp_[YourName].zip.
2. Ensure the folder includes:
index.html
style.css
script.js

Wishing you the best of luck. Do well!

Thank you,
SkillEcted

You might also like