GOVERNMENT POLYTECNIC

JALGAON

DEPARTMENT OF INFORMATION TECHNOLOGY

Course:- Client Side Scripting (CSS)
Course Code:- 22519

Project Name :- Quiz Application

Submitted by
Roll No. Name
09 More Shital Nandu
35 More Ujwal Namdeo
40 Patil Dinesh Shivaji
53 Kirti Chetan Wani

Guided By
Mrs. S. A. Sarwade
(Lecturer in IT)
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

GOVERNMENT POLYTECHNIC, JALGAON

(0018)
Program Name and Code: Information Technology (IF5I)
Course Name and Code : Client Side Scripting (22519)
Academic Year : 2024-25
Semester : Fifth

A MICRO PROJECT on
Quiz Application
Sr.No Roll No. Name of student Enrollment No. Seat No.

1 09 More Shital Nandu 2200180338 365779

2 35 More Ujwal Namdeo 2200180371 365805

3 40 Patil Dinesh Shivaji 2200180379 365810

4 53 Kirti Chetan Wani 2200180397 365823

Project Guide
Mrs. S. A. Sarwade
(Lecturer in IT)
 MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION
Certificate
This is to certify that More Shital Nandu, More Ujwal Namdeo, Patil Dinesh Shivaji,
Kirti Chetan Wani. Roll No. 09, 35, 40, 53 of IF5I of Diploma In Information
Technology, Government Polytechnic, Jalgaon (Code:0018) completed the Micro
Project satisfactorily in the course Client Side Scripting (22519) the Academic Year
2024-25 as prescribed in the curriculum.

Place: Jalgaon Enrollment No: 2200180338, 2200180371,

2200180379, 2200180397

Date: Exam. Seat No: 365779, 365805, 365810,

365823

Mrs. S. A. Sarwade Mr. H. K. Nemade Dr. P. M. Patil

Course Teacher Head of the Department Principal

Seal of
Institution
 GOVERNMENT POLYTECHNIC
JALGAON

-SUBMISSION-

We More Shital Nandu, More Ujwal Namdeo, Patil Dinesh Shivaji, Kirti
Chetan Wani. Roll No. 09, 35, 40, 53 as a student of IF5I of the Program Information
Technology humbly submit that we have completed the Micro-Project work time to time
as described in this report by our own skills and study in the academic year 2024 – 25 as
per instructions and guidance of Mrs. S. A. Sarwade. We have not copied the report or its
any appreciable part from any other literature in contravention of the academic ethics

Date: Signature of Students

 INDEX

Sr. No Content Page. No

1 Abstract 1
2 Introduction 2
3 Design 3
4 Implementation 4
5 Output 7
6 Conclusion 10
 Abstract
This microproject focuses on the development of an interactive quiz application
designed to enhance user engagement through a fun and educational experience. The
application utilizes HTML, CSS, and JavaScript to provide a seamless user interface with
real-time feedback. It begins with a visually appealing welcome screen and a registration form
that includes validation using regular expressions for accurate data entry. After successful
registration, the user is directed to the quiz section, which comprises multiple-choice
questions. Upon completion, the user receives instant feedback, either awarding a gift voucher
for passing or encouraging further improvement with a "better luck next time" message for
failing.

1
 Introduction
The Quiz Application is an educational tool that allows users to test their knowledge on a
range of topics. This application features a simple user interface, where questions are displayed
one at a time, and users select answers by choosing from multiple options. Each question has a
fixed time limit, and the application automatically moves to the next question when time runs out
or the user submits an answer. The results are displayed indicating success or failure. This project
uses JavaScript to handle logic and functionality, while HTML and CSS are used for the structure
and styling of the application. This quiz system is ideal for both educational purposes and as a fun
game to challenge friends.

First, you’ll see a welcome page where you’ll enter your name, email, and phone number
to start the quiz. Once you're ready, the quiz begins! The quiz has 15 questions, each with a 10-
second timer. After you answer a question and press "Submit," the next one appears. At the end,
your score decides the final message. If you score more than 10, you’ll see a success page with a
congratulatory message. If your score is 10 or less, a motivational message will appear with “Better
luck next time!”

There’s also a menu bar at the top where you can go to the Home, About Us, or Contact Us
pages. The About Us page has more information about the app, and Contact Us lets you connect

2
 Design
Use Case Diagram

3
 Implementation

❖ Overview of Modules

The Quiz Application consists of several interconnected modules that work together to create
a smooth user experience from user registration to taking the quiz and receiving results. The
primary modules include:

1. Home Module

2. Register Module

3. Quiz Module

4. Results Module

1. Home Module

This module is the first point of interaction for users. It sets the stage with an attractive welcome
page and leads users to registration.

➢ Welcome Message & Background Image

o The home page features a welcoming message to users.

o A spiritual background image sets a positive tone and is loaded dynamically

through CSS.

➢ Navigation to Registration

o A button or link directs users to the registration page, inviting them to join and
participate in the quiz.

o window.location.href: For navigation between pages, such as redirecting users

from the home page to the registration page.

2. Register Module

This module handles user registration, ensuring all necessary fields are filled out correctly
before users can proceed to the quiz.

➢ Form Submission Event Listener

o Listens for the form submission event on a form with id="register-form".

4
 ➢ Form Validation (Regular Expressions)

o Validates user input using regular expressions to ensure proper format:

▪ Username: Checks that the username is not empty and is alphanumeric.

▪ Email: Verifies the format of the email to ensure it's a valid address.

▪ Password: Ensures the password contains at least:

• One uppercase letter, one number, a minimum of 8 characters.

o event.preventDefault(): Prevents form submission if validation fails.

o localStorage.setItem() / getItem(): Stores and retrieves user data locally (such
as saving the user registration details).

o If validation fails, users receive specific error messages and the form is not
submitted.

➢ Storing User Data

o Once the form is valid, user data (e.g., fullname, email, username, password) is
stored either in localStorage.

o The registered users' data is saved for future login and quiz results purposes.

➢ Redirecting to Quiz Page

o Upon successful registration, users are automatically redirected to the quiz page
to start the quiz.

3. Quiz Module

This is the core of the application, where users participate in the quiz. It is designed to display
questions, handle user input, and track scores.

➢ Dynamic Quiz Questions

o Quiz questions are fetched from a predefined set of questions.

o Each question is displayed one at a time, with options (e.g., multiple choice) for
users to select an answer.

➢ Timer Implementation

5
 o A timer can be added to limit the time users have to complete the quiz,
increasing the challenge.

➢ Tracking User Answers

o As users select answers, their responses are stored.

o The system tracks the number of correct answers to calculate the final score.

➢ Submit Button

o Once users have answered all questions, they submit their answers by clicking
the "Submit" button.

o An event listener on the button processes the answers and calculates the result.

4. Results Module

After users complete the quiz, this module displays their results and provides feedback based
on their performance.

1. Score Calculation

o The quiz system compares user answers with the correct ones and calculates the
score.

2. Result Feedback

o If users pass the quiz (based on a predefined threshold):

▪ They are congratulated and provided with a gift voucher.

o If users fail:

▪ They are shown a "Better Luck Next Time" message with an

encouragement to try again.

3. Storing Quiz Results

o The user’s results (score, time taken, etc.) are stored in the system, which could
be saved in localStorage or sent to a backend for permanent storage.

4. Play Again or Exit Options

o Users are given the option to retake the quiz or exit after seeing their results.

6
Output

7
8
9
 Conclusion
In conclusion, the Quiz Application project not only demonstrates the effective use of
HTML, CSS, and JavaScript in developing an interactive web application but also emphasizes
the importance of creating a structured, scalable, and engaging user experience. This
microproject has laid a strong foundation for further exploration into web development and
serves as a stepping stone towards more complex projects in the field of software
engineering and technology.

10
 References

• https://javascript.info/default-browser-action
• https://www.geeksforgeeks.org/form-validation-using-javascript/
• https://developer.mozilla.org/enUS/docs/Web/API/Window/localStorage

11