D.Y.

PATIL TECHNICAL CAMPUS, TALSANDE

FACULTY OF ENGINEERING & FACULTY OF
MANAGEMENT
(Polytechnic)

A Micro project Report On

“Quize Game”

Submitted By

Enrollment No. Name

2212200075
Atharv Dagadu Miraje

Guided By
Ms.S.R.Patil

D.Y.PATIL TECHNICAL CAMPUS, TALSANDE FACULTY OF

ENGINEERING & FACULTY OF MANAGEMENT
(Polytechnic)

DEPARTMENT OF COMPUTER ENGINEERING

SEMESTER v
 CERTIFICATE

This is to Certify that student of Computer Engineering has

successfully completed the project term work “Quize Game” in
partial fulfillment of the Diploma of Engineering in Computer as laid
down during academic year 2023- 24.

Roll No. Name of Student Exam Seat No.

3236 Atharv Dagadu Miraje

Ms.S.R.Patil Ms.J.N.Gurav
Project Guide Hod

Dr. S.R. Pawaskar

Principal

Date – / /2024

Place – Talsande
 INDEX

Sr No. Title Page no.

1 Introduction 1

2 Project Specification 2-3

4 Genral Description 4

5 Literature Review 5

3 Source Code 6-15

4 Output 16

5 Conculusion 17

6 Refrences 18

1
Quize Game

➢ Introduction:

A JavaScript, HTML and CSS used to build interactive web

pages and features that are found on many professional websites. As a result we want a web
page displaying radio buttons and buttons in the statement. To achieve desired output we need
to use function, if statement, anchor tag, class ,etc. Appropriate use of functions and controls
results in user friendly, interactive and attractive web page. In this Quiz Game project, basically
challenge t to code the functionality of a quiz. At the end of the quiz, users should get a total
score.
The rationale for a micro project on a quiz app using JavaScript stems
from the growing demand for interactive learning tools that enhance user engagement and
knowledge retention. By leveraging JavaScript, the project aims to create a dynamic and
responsive interface that allows users to take quizzes, receive instant feedback, and track their
progress. This project not only reinforces programming skills but also emphasizes critical
concepts such as DOM manipulation, event handling, and asynchronous programming.
Additionally, it provides an opportunity to explore user experience design and implement
features like timers, scoring systems, and question randomization, making learning fun and
effective.

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
1
Quize Game

➢ Project Specification:

1. Project Overview:
The Quiz Game is an interactive web-based game designed to test users' knowledge on various
topics. The project utilizes CSS for styling and front-end design, alongside HTML and
JavaScript for functionality. Users will answer multiple-choice questions and receive
immediate feedback, including scores at the end of the quiz. The game aims to be visually
engaging while providing an educational experience.

2. Project Goals:
- Create an interactive and engaging quiz game: The game should offer a smooth and enjoyable
user experience, providing real-time feedback on answers.
- Focus on clean, responsive design: Use CSS to ensure the game is visually appealing across
different devices and screen sizes.
- Implement a dynamic user interface (UI): Display questions, options, and results dynamically
using HTML and CSS, with interactive elements powered by JavaScript.
- Educational Purpose: Provide users with an opportunity to learn while playing.
- Track scores and performance: Keep track of the user’s answers and provide them with a final
score at the end of the quiz.

3. Core Features:
- Multiple Question Types: Multiple-choice, true/false, and fill-in-the-blank questions.
- Timer: Include a countdown timer for each question, adding an element of urgency.
- Feedback System: Show immediate feedback after each question, highlighting whether the
answer was correct or incorrect.
- Responsive Design: The layout should adjust to different screen sizes (desktop, tablet,
mobile).
- Score Tracking: Display the user’s score after the quiz is completed.

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
2
Quize Game

- Animations and Transitions: Use CSS animations to enhance transitions between questions
and results.

4. Education:
• School/University Name
• Degree/Qualification
• Graduation Year
• Work Experience:
• Company Name
• Job Role/Title
• Job Description

5. Skills Required:
- HTML5: For creating the structure of the quiz, including the form elements and content.
- CSS3: To style the game, ensuring a visually appealing design, including animations and
transitions.
- Flexbox and Grid Layouts for responsive design.
- Keyframes for animations (e.g., fading in questions or options).
- Media queries for mobile responsiveness.
- JavaScript: For functionality, such as navigating between questions, keeping track of scores,
and handling user input.
- DOM manipulation to dynamically update the UI.
- Event listeners to capture user selections and trigger actions.

7. Technologies Used:
• HTML:Structure the form and layout of the resume preview
. • CSS:Style the form and resume display to make it visually appealing and responsive.
• JavaScript: Handle form input, real-time DOM manipulation, and PDF generation.
• Responsive Design: Use CSS media queries to ensure the application works well on both
desktop and mobile devices

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
3
Quize Game

➢ General Description

A quiz game in CSS typically refers to the visual design and layout of an
interactive quiz application that is styled using CSS (Cascading Style Sheets). While CSS
handles the visual presentation, the functionality of the quiz (like scoring, question navigation,
and user input) would generally be handled with HTML (for structure) and JavaScript (for
interactivity). However, CSS can play a significant role in enhancing the user experience
through attractive designs, transitions, animations, and overall layout.

Key Features:

-Question Display.
-Progress Indicator (Progress Bar).
-Smooth Transitions and Animations.
-Interactive Buttons and Answer Options.
-Attractive and Clear Typography.
-Responsive Layout.

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
4
Quize Game

➢ Literature Review:

The history of micro projects in quiz apps using JavaScript traces

back to the early days of web development when basic HTML forms were employed to create
simple quizzes. As JavaScript gained popularity in the late 1990s and early 2000s, developers
began to leverage its capabilities for more interactive and responsive applications. The advent
of frameworks like jQuery simplified DOM manipulation and enhanced user experience. By
the mid-2010s, the emergence of modern frameworks such as React and Angular revolutionized
quiz app development, allowing for complex features like real-time scoring and multimedia
integration. Over the years, these applications have evolved from static question-and-answer
formats to dynamic, gaming fied experiences that emphasize user engagement and educational
effectiveness, reflecting broader trends in digital learning and technology integration.

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
5
Quize Game

➢ Code:

• Html:-

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Quiz App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Quiz App</h1>
<div id="quiz"></div>
<div id="result" class="result"></div>
<button id="submit" class="button">Submit</button>
<button id="retry" class="button hide">Retry</button>
<button id="showAnswer" class="button hide">Show Answer</button>
</div>
<script src="script.js"></script>
</body>
</html>

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
6
Quize Game

• Css:-

body {
font-family: 'Poppins', sans-serif;
background: #b9b3a9;
display: flex;
justify-content: center;
}

.container {
width: 450px;
padding: 20px;
margin-top: 80px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}

h1 {
text-align: center;
}

.question {
font-weight: bold;
margin-bottom: 10px;
}

.option {

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
7
Quize Game

display: block;
margin-bottom: 10px;
}

.button {
display: inline-block;
padding: 10px 20px;
background-color: #428bca;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.3s;
margin-right: 10px;
}

.button:hover
{
background-color: #3071a9;
}

.result {
text-align: center;
margin-top: 20px;
font-weight: bold;
}

.hide{

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
8
Quize Game

display: none;
}

• Js:-

const quizData = [

{
question: 'What is the capital of France?',
options: ['Paris', 'London', 'Berlin', 'Madrid'],
answer: 'Paris',
},
{
question: 'What is the largest planet in our solar system?',
options: ['Mars', 'Saturn', 'Jupiter', 'Neptune'],
answer: 'Jupiter',
},
{
question: 'Which country won the FIFA World Cup in 2018?',
options: ['Brazil', 'Germany', 'France', 'Argentina'],
answer: 'France',
},
{
question: 'What is the tallest mountain in the world?',
options: ['Mount Everest', 'K2', 'Kangchenjunga', 'Makalu'],
answer: 'Mount Everest',
},
{
question: 'Which is the largest ocean on Earth?',

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
9
Quize Game

options: [
'Pacific Ocean',
'Indian Ocean',
'Atlantic Ocean',
'Arctic Ocean',
],
answer: 'Pacific Ocean',
},
{
question: 'What is the chemical symbol for gold?',
options: ['Au', 'Ag', 'Cu', 'Fe'],
answer: 'Au',
},
{
question: 'Who painted the Mona Lisa?',
options: [
'Pablo Picasso',
'Vincent van Gogh',
'Leonardo da Vinci',
'Michelangelo',
],
answer: 'Leonardo da Vinci',
},
{
question: 'Which planet is known as the Red Planet?',
options: ['Mars', 'Venus', 'Mercury', 'Uranus'],
answer: 'Mars',
},
{

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
10
Quize Game

question: 'What is the largest species of shark?',

options: [
'Great White Shark',
'Whale Shark',
'Tiger Shark',
'Hammerhead shark',
],
answer: 'Whale Shark',
},
{
question: 'Which animal is known as the King of the Jungle?',
options: ['Lion', 'Tiger', 'Elephant', 'Giraffe'],
answer: 'Lion',
},
];

const quizContainer = document.getElementById('quiz');

const resultContainer = document.getElementById('result');
const submitButton = document.getElementById('submit');
const retryButton = document.getElementById('retry');
const showAnswerButton = document.getElementById('showAnswer');

let currentQuestion = 0;
let score = 0;
let incorrectAnswers = [];

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
11
Quize Game

[array[i], array[j]] = [array[j], array[i]];

}
}

function displayQuestion() {
const questionData = quizData[currentQuestion];
const questionElement = document.createElement('div');
questionElement.className = 'question';
questionElement.innerHTML = questionData.question;

const optionsElement = document.createElement('div');

optionsElement.className = 'options';

const shuffledOptions = [...questionData.options];

shuffleArray(shuffledOptions);

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

const option = document.createElement('label');
option.className = 'option';

const radio = document.createElement('input');

radio.type = 'radio';
radio.name = 'quiz';
radio.value = shuffledOptions[i];

const optionText = document.createTextNode(shuffledOptions[i]);

option.appendChild(radio);
option.appendChild(optionText);

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
12
Quize Game

optionsElement.appendChild(option);
}

quizContainer.innerHTML = '';
quizContainer.appendChild(questionElement);
quizContainer.appendChild(optionsElement);
}

function checkAnswer() {
const selectedOption = document.querySelector('input[name="quiz"]:checked');
if (selectedOption) {
const answer = selectedOption.value;
if (answer === quizData[currentQuestion].answer) {
score++;
} else {
incorrectAnswers.push({
question: quizData[currentQuestion].question,
incorrectAnswer: answer,
correctAnswer: quizData[currentQuestion].answer,
});
}
currentQuestion++;
selectedOption.checked = false;
if (currentQuestion < quizData.length) {
displayQuestion();
} else {
displayResult();
}
}

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
13
Quize Game

}
function displayResult() {
quizContainer.style.display = 'none';
submitButton.style.display = 'none';
retryButton.style.display = 'inline-block';
showAnswerButton.style.display = 'inline-block';

function retryQuiz() {
currentQuestion = 0;
score = 0;
incorrectAnswers = [];
quizContainer.style.display = 'block';
submitButton.style.display = 'inline-block';
retryButton.style.display = 'none';
showAnswerButton.style.display = 'none';
resultContainer.innerHTML = '';
displayQuestion();
}

function showAnswer() {
quizContainer.style.display = 'none';
submitButton.style.display = 'none';
retryButton.style.display = 'inline-block';
showAnswerButton.style.display = 'none';
let incorrectAnswersHtml = '';
for (let i = 0; i < incorrectAnswers.length; i++) {
incorrectAnswersHtml += `

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
14
Quize Game

<p>
<strong>Question:</strong> ${incorrectAnswers[i].question}<br>
<strong>Your Answer:</strong> ${incorrectAnswers[i].incorrectAnswer}<br>
<strong>Correct Answer:</strong> ${incorrectAnswers[i].correctAnswer}
</p>
`;
}

resultContainer.innerHTML = `
<p>You scored ${score} out of ${quizData.length}!</p>
<p>Incorrect Answers:</p>
${incorrectAnswersHtml}
`;
}

submitButton.addEventListener('click', checkAnswer);
retryButton.addEventListener('click', retryQuiz);
showAnswerButton.addEventListener('click', showAnswer);

displayQuestion();

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
15
Quize Game

➢ Output:

This Picure Describes Question In This Game.

This Picture Describes The Result In This Game And Question, Your Answer And Correct
Answer.

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
16
Quize Game

➢ Conculusion:

the quiz game project developed using CSS, HTML, and JavaScript successfully demonstrates
the power of front-end web development in creating interactive and engaging user experiences.
By implementing various styling techniques with CSS, the quiz interface was made visually
appealing and easy to navigate. The project not only highlighted the importance of clean,
responsive design but also showcased how CSS can enhance the user interface while ensuring
accessibility across different devices and screen sizes. Additionally, the integration of
JavaScript for game logic and interactivity added a dynamic layer to the project, improving
both functionality and user engagement.
Overall, this project provided valuable insights into the process of creating a seamless,
interactive web-based quiz game, combining the strengths of CSS for design and JavaScript
for functionality. It also emphasized the significance of testing and refining user interactions to
create an enjoyable experience.

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
17
Quize Game

➢ Refrences:

https://www.codewithfaraz.com/content/161/build-a-quiz-
application-with-html-css-and-javascript-step-by-step-guide

https://www.studocu.com/in/document/government-holkar-
science-college/bachelors-in-natural-science/project-report-quiz-
application/26362754

https://www.slideshare.net/harshverma164/minor-project-report-
for-quiz-application

D.Y.Patil Technical Campus Talsande Faculty Of Engineering & Faculty Of Management (Polytechnic)
18