A
MINOR PROJECT
REPORT
ON
QUIZ WEBSITE
USING
HTML,CSS,JAVASCRIPT
Session 2024-2026
Submitted To:- Submitted BY:-
Govt. Millennium Polytechnic Chamba Abhay Choudhary
Board Roll no:-
240820804001
1
DECLARATION
I, Abhay Choudhary , student of DIPLOMA in Computer Engineering, Roll No.
:240820804001, from Government Millennium Polytechnic Chamba, hereby
declare that the Major Project entitled:
“Quiz Website– A Web-Based Application for Online Quiz session” is an original
piece of work carried out by me under the guidance of SH.JITENDER MOHAN
SHARMA in the Department of Computer Engineering.
This project has been undertaken as part of the curriculum prescribed by
Government Millennium Polytechnic Chamba for the partial fulfillment of the
requirements for the award of the DIPLOMA in Computer Engineering.
I affirm that the work presented in this project is genuine and has not been
copied from any unauthorized sources or previously submitted for any other
diploma, or certificate course in any institute.
All data and information used in this project have been collected from legitimate
sources, and due acknowledgments have been given wherever applicable. Any
assistance received during the course of this project has been duly
acknowledged.
Place: CHAMBA
Date:
Signature of Student
Name: Abhay Choudhary
Roll No: 240820804001
2
A PROJECT REPORT
ON MINOR PROJECT USING HTML ,
CSS & JAVASCRIPT
Group Members:-
Abhay Choudhary (ROLL NO. 240820804001)
Anil (ROLL NO. 240820804004)
Dilpreet Singh (ROLL NO. 240820804008)
Rohan Kumar (ROLL NO. 240820804011)
Shivansh Chouhan (ROLL NO. 240820804013)
Guided By:-
1. JITENDER MOHAN SHARMA
Submitted to:-
GOVT. MILLENNIUM POLYTECHNIC
COLLEGE CHAMBA (176310)
(SEMESTER:- 4TH COMPUTER ENGG)
3
ACKNOWLEDGEMENT
I would like to express my sincere gratitude to my
project guide, SH.JITENDER MOHAN SHARMA for
their invaluable guidance, support, and
encouragement throughout the course of this project.
I also thank the Head of Department, faculty
members, and lab assistants of the Department of
Computer Engineering for their cooperation.
I am also grateful to my friends and family for their
support during this project.
Abhay Choudhary DIPLOMA(Computer
Engineering)
Roll No: 240820804001
4
CERTIFICATE
This is to certify that the project entitled “QUIZ WEBSITE ”
submitted by Abhay Choudhary Roll No: 240820804001 in
partial fulfillment of the requirements for the award of the
DIPLOMA of Computer Engineering, is a bonafide record of
work carried out under my supervision.
This project work is original and has not been submitted
elsewhere for any academic qualification.
Guide’s Name
SH.JITENDER MOHAN SHARMA
Department of Computer Engineering College
Name : GMP CHAMBA
Date:
Head of Department : ILA PARMAR
Department of Computer Engineering
5
TABLE OF CONTENTS
S.N. CONTENT PAGE NO.
1 INRODUCTION TO 7-8
HTML
2 INTRODUCTION TO 9-11
JAVASCRIPT
3 INTRODUCTION TO 12-14
CSS
4 CODING FOR LOGIN 15
PAGE
5 CODING FOR 16
REGISTER PAGE
6 CODING FOR 17-18
CATEGORY PAGE
7 CODING FOR QUIZ 19
PAGE
8 CODING FOR SCORE 20
PAGE
9 CODING FOR STYLE 21-28
PAGE
10 CODING FOR SCRIPT 29-37
PAGE
11 OUTPUT 38-40
6
Introduction to HTML
▪ Hypertext Markup Language(HTML) is the main markup language for
web pages. HTML elements are the basic building-blocks of Web Pages.
▪ HTML is written in the form of HTML elements consisting of tags
enclosed in angle brackets(like<html>), within the web page content.
HTML tags most commonly come in pairs like<h1>and</h1>, although
some tags, known assembly elements, are unpaired, for example <img>
, <br>.The first tag in a pair is the start tag, the second tag is the end
tag (they are also called opening tags and closing tags). In between
these tags web designers can add text, tags, comments and other types
of text-based content.
▪ The purpose of a web browser is to read HTML documents and
compose them into visible audible web pages. The browser does not
display the HTML tags, but uses the tags to enter content of the
page.HTML elements form the building blocks of all websites. HTML
allows images and objects to be embedded and can be used to create
interactive forms. It provides a means to create structured documents
by denoting structural semantics for text such as headings, paragraphs,
lists, links , quotes and other items. It can embed scripts in languages
such as JavaScript which affect the behavior of HTML webpages.
Elements:
▪ HTML documents are composed entirely of HTML elements that, in
their most general form have three components: a pair of tags, a "start
tag" and "end tag";
7
some attributes within the starting; and finally, any textual and
graphical content between the start and end tags, perhaps
including other nested elements. The HTML element is everything
between and including the start and end tags. Each tag enclosed
in angle brackets .
▪ Attributes:
Most of the attributes of an element are name-value pairs,
separated by "=" and written within the start tag of an element
after the element's name. The value may be enclosed in single or
double quotes, although values consisting of certain characters
can be left unquoted in HTML(but not XHTML). Leaving attribute
values unquoted is considered unsafe. In contrast with name-
value pair attributes, there are some attributes that affect the
element simply by their presence in the start tag of the element.
8
Introduction to JAVASCRIPT:-
What is JavaScript ?
JavaScript is a dynamic computer programming language. It is
lightweight and most commonly used as a part of web pages, whose
implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language with
object-oriented capabilities .
JavaScript was first known as Live Script , but Netscape changed its
name to JavaScript, possibly because of the excitement being
generated by Java. JavaScript made its first appearance in Netscape 2.0
in 1995 with the name Live Script. The general-purpose core of the
language has been embedded in Netscape, Internet Explorer, and other
web browsers .
▪ JavaScript is a lightweight, interpreted programming language .
▪ Designed for creating network-centric applications .
▪ Complementary to and integrated with Java .
▪ Complementary to and integrated with HTML .
▪ Open and cross-platform
9
Client-Side JavaScript:
Client-side JavaScript is the most common form of the language. The
script should be included in or referenced by an HTML document for
the code to be interpreted by the browser .
It means that a web page need not be a static HTML, but can include
programs that interact with the user, control the browser, and
dynamically create HTML content .
The JavaScript client-side mechanism provides many advantages over
traditional CGI server-side scripts. For example, you might use
JavaScript to check if the user has entered a valid e-mail address in a
form field .
The JavaScript code is executed when the user submits the form, and
only if all the entries are valid, they would be submitted to the Web
Server .
JavaScript can be used to trap user-initiated events such as button
clicks, link navigation, and other actions that the user initiates explicitly
or implicitly
10
Advantages of JavaScript:
The merits of using JavaScript are –
Less server interaction - You can validate user input before sending the
page off to the server. This saves server traffic, which means less load on
your server .
Immediate feedback to the visitors - They don't have to wait for a page
reload to see if they have forgotten to enter something .
Increased interactivity - You can create interfaces that react when the
user hovers over them with a mouse or activates them via the keyboard .
Richer interfaces - You can use JavaScript to include such items as drag-
and-drop components and sliders to give a Rich Interface to your site
visitors.
11
INTRODUCTION TO CSS
▪ Cascading Style Sheets (CSS) is a style sheet language used to
describe the presentation semantics (the look and formatting) of a
document written in a markup language. Its
most common application is to style web pages written in HTML and
XHTML, but the language can also be applied to any kind of XML
document, including plain XML, SVG and XUL.
Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
▪ CSS handles the look and feel part of a web page. Using CSS, you can
control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background
images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides a powerful control
over the presentation of an HTML document. Most commonly, CSS is
combined with the markup languages HTML or XHTML.
▪ CSS has a simple syntax and uses a number of English keywords to
specify the names of various style properties. A style sheet consists
of a list of rules. Each rule or rule-set consists of one or more selectors,
and declaration block.
12
1. Advantages of CSS :
• CSS saves time : You can write CSS once and then reuse the same
sheet in multiple HTML pages. You can define a style for each HTML
element and apply it to as many web pages as you want.
• Easy Maintenance : To make a global change, simply change
the style, and all the elements in all the web pages will be updated
automatically.
• Pages Load Faster : If you are using CSS, you do not need to
write HTML tag attributes every time. Just write one CSS rule of a
tag and apply it to all the occurrences of that tag. So, less code
means faster download times. • Superior Styles to HTML : CSS has
a much wider array of attributes than HTML, so you can give a far
better look to your HTML page in comparison to HTML attributes.
Types of CSS :
• External CSS - The <link> Element
The <link> element can be used to include an external stylesheet
file in your HTML document
An external style sheet is a separate text file with .css extension.
You define all the Style rules within this text file and then you can
include this file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file.
<head>
13
<link type="text/css" href="..." media="..." />
</head>
• Inline CSS – The style Attribute
You can use style attribute of any HTML
element to define style rules. These rules will be applied to that
element only. Here is the generic syntax of including
Inline CSS file.
<h1 style ="color:blue;"> This is inline CSS
</h1>
• Internal CSS - The <style> Element
You can put your CSS rules into an HTML
document using the <style> element. This tag is placed inside the
<head>...</head> tags. Rules defined using this syntax will be applied
to all the elements available in the document.
Here is the generic syntax of including Internal CSS file.
<head>
<style type="text/css" media="all"> h1{ color: black; }
</style>
</head>
14
CODE FOR LOGIN PAGE
SAVED AS login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Login</h2>
<input type="text" id="login-username" placeholder="Username">
<input type="password" id="login-password"
placeholder="Password">
<button id="login-btn">Login</button>
<p>Don't have an account? <a
href="register.html">Register</a></p>
<p id="error-message" class="error-message"></p> <!-- Error
message placeholder -->
</div>
<script src="script.js"></script> <!-- External JS File -->
</body>
</html>
15
CODE FOR REGESTER PAGE
SAVED AS register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Register</h2>
<input type="text" id="new-username"
placeholder="Username">
<input type="password" id="new-password"
placeholder="Password">
<input type="password" id="confirm-password"
placeholder="Confirm Password">
<button id="register-btn">Register</button>
<p>Already have an account? <a
href="login.html">login</a></p>
</div>
<script src="script.js"></script> <!-- External
JS File -->
</body>
</html>
16
CODE FOR CATEGORY PAGE
SAVED AS catagory.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Quiz Categories</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="category-container">
<h2>Select Quiz Category</h2>
<!-- Category Selection -->
<select id="category">
<option value="" disabled selected>Select
Category</option>
<option value="9">General
Knowledge</option>
<option value="18">Computer
Science</option>
<option value="19">Mathematics</option>
<option value="30">Science</option>
</select>
17
<h3>Select Difficulty</h3>
<select id="difficulty">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<h3>Select Number of Questions</h3>
<select id="num-questions">
<option value="5">5 Questions</option>
<option value="10">10 Questions</option>
<option value="15">15 Questions</option>
<option value="20">20 Questions</option>
<option value="30">30 Questions</option>
<option value="50">50 Questions</option>
<option value="75">75 Questions</option>
<option value="100">100
Questions</option>
</select>
<!-- Start Quiz Button -->
<button id="start-quiz-btn">Start
Quiz</button>
</div>
<script src="script.js"></script> <!--
External JS File -->
</body>
</html>
18
CODE FOR QUIZ PAGE
SAVED AS quiz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container">
<h2>Quiz - <span id="category-
name"></span></h2>
<div id="question-container">
<p>Loading questions...</p>
</div>
<button id="next-btn" style="display:
none;">Next Question</button>
</div>
<script src="script.js"></script> <!-- External
JS File -->
</body>
</html>
19
CODE FOR SCORE PAGE
SAVED AS score.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Quiz - Your Score</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="score-container">
<h2>Your Score: <span id="score"></span> out
of <span id="total-questions"></span></h2>
<button id="play-again-btn">Play
Again</button>
<button id="exit-btn">Exit</button>
</div>
<script src="script.js"></script>
</body>
</html>
20
CODE FOR STYLE PAGE
SAVED AS style.css
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-45deg, #ff9a9e,
#fad0c4, #ffdde1, #b5e7a0, #85c1e9, #f7cac9);
background-size: 400% 400%;
animation: gradientBG 8s infinite linear;
text-align: center;
color: #333; /* Darker text color */
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
21
/* Containers */
.container, .register-container, .quiz-container,
.score-container {
background: rgba(255, 255, 255, 0.2);
padding: 30px;
border-radius: 12px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
text-align: center;
backdrop-filter: blur(10px);
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* Increased text size and changed color */
h2, h3, p {
color: #222; /* Darker text */
font-size: 22px; /* Increased size */
font-weight: bold;
}
/* Form Inputs */
input {
width: 100%;
padding: 12px;
margin: 12px 0;
border: 2px solid transparent;
border-radius: 6px;
font-size: 18px;
transition: 0.3s; 22
}
input:focus {
border-color: #23a6d5;
box-shadow: 0 0 10px rgba(35, 166, 213, 0.5);
outline: none;
}
/* Buttons */
button {
padding: 14px 24px;
margin: 12px;
border: none;
border-radius: 6px;
background: #23a6d5;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #1b8cbf;
transform: scale(1.1);
}
/* Dropdown */
select {
padding: 12px;
border-radius: 6px;
border: none;
outline: none;
font-size: 18px;
23
background: white;
cursor: pointer;
transition: 0.3s;
}
select:hover {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* Links */
a {
color: #ff9900;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
a:hover {
text-decoration: underline;
}
/* Quiz Container Styles */
.quiz-container {
width: 80%;
max-width: 600px;
}
#question-container {
background: rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
margin-bottom: 20px;
animation: fadeIn 0.5s ease-in-out;
} 24
label {
display: block;
margin: 8px 0;
padding: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 6px;
cursor: pointer;
font-size: 20px; /* Increased size */
color: #222; /* Darker text */
transition: 0.3s;
}
label:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.05);
}
/* Wrong Password Animation */
.wrong-password {
border-color: red !important;
box-shadow: 0 0 10px red !important;
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
}
25
/* Answer Highlighting */
.correct-answer {
background-color: green !important;
color: white !important;
animation: glow 0.5s ease-in-out;
}
.wrong-answer {
background-color: red !important;
color: white !important;
animation: shake 0.3s ease-in-out;
}
@keyframes glow {
0% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.8); }
100% { box-shadow: 0 0 20px rgba(0, 255, 0, 1); }
}
/* Error Message */
.error-message {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #ff4d4d;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
animation: fadeInOut 2s ease-in-out;
}
26
@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(-10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px);
}
}
/* Error Message */
.error {
color: red;
font-size: 14px;
margin-bottom: 10px;
animation: shake 0.3s ease-in-out;
}
/* Wrong & Correct Answer Effects */
.correct {
background-color: lightgreen;
font-weight: bold;
animation: fadeEffect 1s ease-in-out;
}
.wrong {
background-color: tomato;
font-weight: bold;
animation: fadeEffect 1s ease-in-out;
}
@keyframes fadeEffect {
from { opacity: 0.5; }
to { opacity: 1; }
}
27
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.error {
color: red;
font-size: 14px;
margin-top: 5px;
font-weight: bold;
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
28
CODE FOR SCRIPT PAGE
SAVED AS script.js
document.addEventListener("DOMContentLoaded",
function () {
const loginBtn = document.getElementById("login-
btn");
if (loginBtn) {
loginBtn.addEventListener("click", function
() {
const username =
document.getElementById("login-
username").value.trim();
const password =
document.getElementById("login-password").value;
const errorMessage =
document.getElementById("error-message");
const users =
JSON.parse(localStorage.getItem("users")) || [];
const validUser = users.find(user =>
user.username === username && user.password ===
password);
if (validUser) {
localStorage.setItem("loggedInUser",
username);
alert(" Login successful!");
window.location.href =
"category.html";
29
} else {
errorMessage.textContent = "
Invalid username or password!";
}
});
}
});
document.addEventListener("DOMContentLoaded",
function () {
const registerBtn =
document.getElementById("register-btn");
if (registerBtn) {
registerBtn.addEventListener("click",
function () {
const username =
document.getElementById("new-
username").value.trim();
const password =
document.getElementById("new-password").value;
const confirmPassword =
document.getElementById("confirm-password").value;
if (!username || !password ||
!confirmPassword) {
alert(" All fields are
required!");
return;
}
if (password !== confirmPassword) {
alert(" Passwords do not 30
match!");
return;
}
let users =
JSON.parse(localStorage.getItem("users")) || [];
if (users.some(user => user.username ===
username)) {
alert(" Username already taken!");
return;
}
users.push({ username, password });
localStorage.setItem("users",
JSON.stringify(users));
alert(" Registration successful!
Redirecting to login...");
window.location.href = "login.html";
});
}
});
document.addEventListener("DOMContentLoaded",
function () {
const protectedPages = ["category.html",
"quiz.html", "score.html"];
const currentPage =
window.location.pathname.split("/").pop();
const loggedInUser =
localStorage.getItem("loggedInUser");
31
if (protectedPages.includes(currentPage) &&
!loggedInUser) {
alert("You must be logged in to access this
page!");
window.location.href = "login.html";
}
const startQuizBtn =
document.getElementById("start-quiz-btn");
if (startQuizBtn) {
startQuizBtn.addEventListener("click", function
() {
const category =
document.getElementById("category").value;
const difficulty =
document.getElementById("difficulty").value;
const numQuestions =
document.getElementById("num-questions").value;
if (!category) {
alert("Please select a category!");
return;
}
window.location.href =
`quiz.html?category=${category}&difficulty=${difficulty
}&numQuestions=${numQuestions}`;
});
}
const logoutBtn = document.getElementById("logout-
btn");
32
if (logoutBtn) {
logoutBtn.addEventListener("click",
function () {
localStorage.removeItem("loggedInUser"
);
alert("You have been logged out!");
window.location.href = "login.html";
});
}
});
document.addEventListener("DOMContentLoaded",
function () {
if
(!window.location.pathname.includes("quiz.html"))
return;
const urlParams = new
URLSearchParams(window.location.search);
const category = urlParams.get("category");
const numQuestions =
urlParams.get("numQuestions");
const difficulty =
urlParams.get("difficulty");
const apiUrl =
`https://opentdb.com/api.php?amount=${numQuestions
}&category=${category}&difficulty=${difficulty}&ty
pe=multiple`;
let questions = [];
let currentQuestionIndex = 0;
let score = 0; 33
async function fetchQuestions() {
try {
const response = await fetch(apiUrl);
const data = await response.json();
questions = data.results;
if (questions.length > 0) {
displayQuestion(currentQuestionIndex);
} else {
document.getElementById("question-
container").innerHTML = "<p>No questions found.</p>";
}
} catch (error) {
console.error("Error fetching questions:",
error);
document.getElementById("question-
container").innerHTML = "<p>Failed to load
questions.</p>";
}
}
function displayQuestion(index) {
const question = questions[index];
const questionElement =
document.getElementById("question-container");
const answers = [...question.incorrect_answers,
question.correct_answer].sort(() => Math.random() -
0.5);
questionElement.innerHTML = `
<p>${question.question}</p>
${answers.map(answer => `
34
<label>
<input type="radio" name="q"
value="${answer}">
<span class="answer-
text">${answer}</span>
</label><br>
`).join("")}
`;
const options =
document.querySelectorAll('input[name="q"]');
options.forEach(option => {
option.addEventListener("change", function
() {
const selected = this.value;
const correct =
question.correct_answer;
options.forEach(opt => {
const label =
opt.closest("label");
const span =
label.querySelector(".answer-text");
if (opt.value === correct) {
span.style.color = "green";
span.style.fontWeight =
"bold";
}
if (opt.value === selected &&
selected !== correct) {
span.style.color = "red";
span.style.fontWeight = 35
"bold";
}
opt.disabled = true;
});
if (selected === correct) {
score++;
}
setTimeout(() => {
currentQuestionIndex++;
if (currentQuestionIndex <
questions.length) {
displayQuestion(currentQuest
ionIndex);
} else {
window.location.href =
`score.html?score=${score}&totalQuestions=${question
s.length}`;
}
}, 1500);
});
});
}
fetchQuestions();
});
document.addEventListener("DOMContentLoaded",
function () {
if
36
(!window.location.pathname.includes("score.html"))
return;
const urlParams = new
URLSearchParams(window.location.search);
document.getElementById("score").textContent =
urlParams.get("score");
document.getElementById("total-
questions").textContent =
urlParams.get("totalQuestions");
document.getElementById("play-again-
btn").addEventListener("click", () => {
window.location.href = "category.html";
});
document.getElementById("exit-
btn").addEventListener("click", () => {
window.location.href = "login.html";
});
});
37
OUTPUT FOR LOGIN PAGE :-
OUTPUT FOR REGISTER PAGE:-
38
OUT PUT FOR CATEGORY PAGE:-
OUT PUT FOR QUIZ PAGE:-
39
OUT PUT FOR SCORE PAGE:-
40
REFERENCES
1. W3Schools HTML/CSS Guide -https://www.w3schools.com
2. JAVASCRIPT:THE GOOD PSRT – book from library
3. Web design with html & css – book from library
4. Javascript.info –web guide on internet
5. Great stack:-
https://youtube.com/@greatstackdev?si=y1y6FDnO3-ZwGRIT
41
