Complete Web Designing Course for Beginners

Lesson 7.6 – Quiz Application Project

🚀 Building a Complete Interactive Quiz System Using HTML, CSS & JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Build a Quiz Application

✅ Display Questions Dynamically

✅ Check Answers

✅ Calculate Score

✅ Use Arrays & Objects

✅ Use DOM Manipulation

✅ Build Real-World Educational Applications

📖 Introduction

Quiz systems are widely used in:

✅ Online Exams

✅ School Tests

✅ College Assessments

✅ Competitive Exam Platforms

✅ Learning Management Systems (LMS)

Examples:

Question:

What does HTML stand for?

A. Hyper Text Markup Language

B. High Text Machine Language

C. Hyper Transfer Markup Language

D. Home Tool Markup Language

[ Submit ]

Today we will build:

🧠 Quiz Application Project

🌟 Project Preview

----------------------------------

JavaScript Quiz

Question 1 of 3

What does HTML stand for?

( ) Option A

( ) Option B

( ) Option C

( ) Option D

[ Next Question ]

----------------------------------

After the last question:

Quiz Completed

Your Score: 3 / 3

🎯 Concepts Used

Concept	Used
Arrays	✅
Objects	✅
Functions	✅
Events	✅
DOM Manipulation	✅
Conditional Statements	✅

🗂️ Project Files

Create:

index.html

style.css

script.js

🎯 Step 1 – Create HTML Structure

index.html

<!DOCTYPE html>

<html>

<head>

<title>Quiz Application</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>JavaScript Quiz</h1>

<h2 id="question"></h2>

<div id="options"></div>

<button onclick="nextQuestion()">

Next Question

</button>

<h2 id="result"></h2>

</div>

<script src="script.js"></script>

</body>

</html>

🎯 Step 2 – Design the Interface

style.css

body{

font-family:Arial;

background:#f4f4f4;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

background:white;

padding:30px;

width:600px;

border-radius:10px;

box-shadow:0 0 15px lightgray;

text-align:center;

}

button{

padding:10px 20px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

cursor:pointer;

margin-top:20px;

}

button:hover{

background:#084298;

}

.option{

margin:10px;

padding:10px;

background:#f1f1f1;

border-radius:5px;

text-align:left;

}

🎯 Step 3 – Create Quiz Questions

script.js

let quiz =

[
{
question:
"What does HTML stand for?",

options:
[
"Hyper Text Markup Language",
"High Text Machine Language",
"Hyper Transfer Markup Language",
"Home Tool Markup Language"
],

answer:
"Hyper Text Markup Language"
},

{
question:
"Which language is used for styling websites?",

options:
[
"HTML",
"CSS",
"Python",
"Java"
],

answer:
"CSS"
},

{
question:
"Which keyword creates a function?",

options:
[
"method",
"function",
"define",
"create"
],

answer:
"function"
}
];

🌟 Understanding Objects

Each question is stored as an object.

Example:

{
question:"What is HTML?",

options:[...],

answer:"Hyper Text Markup Language"
}

🎯 Create Variables

let currentQuestion = 0;

let score = 0;

🌟 What Do They Store?

currentQuestion

Stores question number.

score

Stores correct answers.

🎯 Display Question Function

function loadQuestion()
{

}

Get Current Question:

let q =

quiz[currentQuestion];

Display Question:

document.getElementById("question").innerHTML =

q.question;

🎯 Display Options

let optionsHTML = "";

Loop Through Options

for(let i=0;i<q.options.length;i++)
{
}

Create Radio Button

optionsHTML +=

'<div class="option">' +

'<input type="radio"

name="answer"

value="' + q.options[i] + '">' +

q.options[i] +

'</div>';

Display Options

document.getElementById("options").innerHTML =

optionsHTML;

🌟 Complete loadQuestion()

function loadQuestion()
{

let q = quiz[currentQuestion];

document.getElementById("question").innerHTML =

q.question;

let optionsHTML = "";

for(let i=0;i<q.options.length;i++)
{

optionsHTML +=

'<div class="option">' +

'<input type="radio"

name="answer"

value="' + q.options[i] + '">' +

q.options[i] +

'</div>';

}

document.getElementById("options").innerHTML =

optionsHTML;

}

🎯 Check Answer

Create Function:

function nextQuestion()
{

}

Get Selected Answer

let selected =

document.querySelector(
'input[name="answer"]:checked'
);

Check Selection

if(!selected)
{

alert("Please Select An Answer");

return;

}

🌟 Compare Answer

if(

selected.value ==

quiz[currentQuestion].answer

)

{

score++;

}

Correct answer increases score.

🎯 Move To Next Question

currentQuestion++;

🌟 Check Quiz Completion

if(currentQuestion < quiz.length)
{

loadQuestion();

}
else
{

showResult();

}

🎯 Display Final Result

function showResult()
{

document.getElementById("question").innerHTML =

"Quiz Completed";

document.getElementById("options").innerHTML = "";

document.getElementById("result").innerHTML =

"Your Score: " +

score +

" / " +

quiz.length;

}

🌟 Complete nextQuestion()

function nextQuestion()
{

let selected =

document.querySelector(
'input[name="answer"]:checked'
);

if(!selected)
{

alert("Please Select An Answer");

return;

}

if(

selected.value ==

quiz[currentQuestion].answer

)

{

score++;

}

currentQuestion++;

if(currentQuestion < quiz.length)
{

loadQuestion();

}
else
{

showResult();

}

}

🎯 Start Quiz Automatically

At end of script:

loadQuestion();

💻 Complete JavaScript Code

script.js

let quiz =
[
{
question:"What does HTML stand for?",
options:[
"Hyper Text Markup Language",
"High Text Machine Language",
"Hyper Transfer Markup Language",
"Home Tool Markup Language"
],
answer:"Hyper Text Markup Language"
},

{
question:"Which language is used for styling websites?",
options:[
"HTML",
"CSS",
"Python",
"Java"
],
answer:"CSS"
},

{
question:"Which keyword creates a function?",
options:[
"method",
"function",
"define",
"create"
],
answer:"function"
}
];

let currentQuestion = 0;

let score = 0;

function loadQuestion()
{

let q = quiz[currentQuestion];

document.getElementById("question").innerHTML =
q.question;

let optionsHTML = "";

for(let i=0;i<q.options.length;i++)
{

optionsHTML +=

'<div class="option">' +

'<input type="radio" name="answer" value="' +

q.options[i] +

'">' +

q.options[i] +

'</div>';

}

document.getElementById("options").innerHTML =
optionsHTML;

}

function nextQuestion()
{

let selected =

document.querySelector(
'input[name="answer"]:checked'
);

if(!selected)
{

alert("Please Select An Answer");

return;

}

if(
selected.value ==
quiz[currentQuestion].answer
)
{

score++;

}

currentQuestion++;

if(currentQuestion < quiz.length)
{

loadQuestion();

}
else
{

showResult();

}

}

function showResult()
{

document.getElementById("question").innerHTML =
"Quiz Completed";

document.getElementById("options").innerHTML = "";

document.getElementById("result").innerHTML =

"Your Score: " +

score +

" / " +

quiz.length;

}

loadQuestion();

🎯 Expected Output

Question 1:

What does HTML stand for?

User Selects Correct Answer

Question 2:

Which language is used for styling websites?

Question 3:

Which keyword creates a function?

Final Result:

Quiz Completed

Your Score: 3 / 3

🌟 Project Improvements

Add:

✅ Timer

✅ Multiple Categories

✅ Random Questions

✅ Negative Marking

✅ Restart Quiz Button

✅ Quiz Certificate

🏫 Real World Applications

Quiz Applications are used in:

✅ Online Exams

✅ LMS Platforms

✅ School Assessments

✅ Coding Tests

✅ Employee Training

✅ Certification Platforms

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting to call:

loadQuestion();

Quiz will not start.

Mistake 2

Wrong answer comparison.

Always compare:

selected.value

with

quiz[currentQuestion].answer

Mistake 3

Not validating radio selection.

Users may click Next without selecting an answer.

🌟 Best Practices

✅ Keep questions inside arrays.

✅ Use objects for question storage.

✅ Validate user input.

✅ Keep UI simple.

✅ Display final score clearly.

🏆 Project Challenge

Modify the project and add:

✅ 10 Questions

✅ Timer

✅ Restart Quiz Button

✅ Percentage Calculation

✅ Pass/Fail Status

📝 Practical Activity

Create:

Computer Fundamentals Quiz

Questions:

Input Device
Output Device
CPU
RAM
Operating System

Display score at the end.

📋 Assignment

Assignment 7.6

What is a Quiz Application?
Why are Arrays used?
What is an Object?
How is score calculated?
Create a Quiz Application.
Add 5 new questions.
Add a Restart Quiz button.

🧠 Quiz

Q1. Which structure stores multiple questions?

A. Variable

B. Array

C. Loop

D. Event

✅ Answer: B

Q2. Each question is stored as?

A. Function

B. Variable

C. Object

D. Loop

✅ Answer: C

Q3. Which method selects checked radio button?

A. getElementById()

B. querySelector()

C. createElement()

D. innerHTML

✅ Answer: B

Q4. Which variable stores correct answers count?

A. currentQuestion

B. answer

C. score

D. result

✅ Answer: C

Q5. Quiz Application uses?

A. Arrays

B. Objects

C. DOM Manipulation

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ Built a complete Quiz Application.

✅ Learned Arrays and Objects.

✅ Used DOM Manipulation.

✅ Calculated score dynamically.

✅ Created a real-world educational project.