SIMPLE JAVASCRIPT QUIZ GAME

A PROJECT REPORT
SUBMITTED BY

SUMIT SHARMA (23SCSE1420056)

Web Technology Comprehensive Course
in partial fulfillment for the award of the degree of
BATCHELOR OF TECHNOLOGY
IN
Computer Science and Engineering

SCHOOL OF COMPUTING SCIENCE AND

ENGINEERING DEPARTMENT OF COMPUTER
SCIENCE AND ENGINEERING GALGOTIAS
UNIVERSITY, GREATER NOIDA
May 2025
 BONAFIDE CERTIFICATE

This is to certify that Project Report entitled “Simple javascript quiz game” which is
submitted by Sumit Sharma(23SCSE1420056) in partial fulfillment of the requirements
for the award of the B. Tech. (Computer Science and Engineering) submitted in the
School of Computing Science and Engineering of Galgotias University, Greater Noida,
India is a record of the candidate own work carried out by me.

Signature of Student

Date: May, 2025

Place: Greater Noida
 ABSTRACT

Abstract:
The "Simple javascript quiz game" is a web-based, interactive quiz
application built using HTML, CSS, and JavaScript, designed to test users’
knowledge across five distinct subjects: JavaScript, Mathematics, General
Science, History, and Geography. The game features a clean, responsive
user interface with a gradient background, animated transitions, and a
modern design. Users start the quiz with a "Start Quiz" button, answer five
multiple-choice questions (one per subject) by selecting options, and
navigate through questions using a "Next" button. Upon completing the
quiz, a "Submit Quiz" button displays a results page listing each question,
its correct answer (in green), and the user’s selected answer (green if
correct, red if incorrect), along with a score out of five. A prominent
"Restart Quiz" button at the bottom allows users to reset the quiz, clearing
all selections and scores to start anew. The application ensures a seamless
experience with error handling (e.g., requiring an answer before
proceeding) and maintains consistent styling with hover effects, shadows,
and animations for enhanced user engagement.
 TABLE OF CONTENTS

Sr. Chapter Content

No.
1 CHAPTER 1 INTRODUCTION
2 CHAPTER 2 SOFTWARE TOOLS AND HARDWARE
3 CHAPTER 3 SYSTEM ARCHITECTURE /FEATURES
/PROCESS
4 CHAPTER 4 SAMPLE CODE AND OUTPUT
5 CHAPTER 5 CONCLUSION
 CHAPTER 1: INTRODUCTION
The " Simple javascript quiz game " is an interactive, web-based quiz application designed to
engage users in testing their knowledge across diverse subjects: JavaScript, Mathematics, General
Science, History, and Geography. Developed using core web technologies (HTML, CSS, and
JavaScript), the application provides a user-friendly interface for answering multiple-choice
questions, viewing results, and restarting the quiz. The primary objective is to offer an educational
and entertaining experience with a modern, responsive design that ensures accessibility across
devices. Key features include a clean layout, visual feedback for correct and incorrect answers, and a
dedicated results page, making it suitable for learners and casual users alike.

The application targets users interested in general knowledge and programming, with questions
tailored to cover fundamental concepts in each subject. It includes intuitive navigation (Start, Next,
Submit, and Restart buttons) and visual cues (green for correct answers, red for incorrect) to enhance
user engagement. The project emphasizes simplicity, interactivity, and aesthetic appeal, leveraging
animations and hover effects to create a dynamic experience.
CHAPTER 2: SOFTWARE TOOLS AND HARDWARE
Software Tools
• HTML5: Used to structure the quiz application, defining elements like buttons, questions,
options, and the results page.
• CSS3: Employed for styling, including a gradient background, responsive layout, animations
(fade-in, scale on hover), and color-coded feedback (green for correct, red for incorrect).
• JavaScript (ES6): Handles the application’s logic, including event listeners for user
interactions, dynamic content generation for the results page, and state management (score,
current question, user answers).
• Development Environment:
o Any text editor (e.g., Visual Studio Code, Sublime Text) for writing and editing code.
o Web browsers (e.g., Chrome, Firefox, Edge) for testing and debugging.
• No External Libraries: The application uses vanilla HTML, CSS, and JavaScript, ensuring
lightweight performance without dependencies.
Hardware Requirements
• Minimum Hardware:
o Processor: Any modern CPU (e.g., Intel Core i3 or equivalent).
o RAM: 4 GB or higher.
o Storage: Minimal (a few MB for the HTML file and assets).
o Display: Any resolution supporting web browsers (minimum 1024x768
recommended).
• Operating System: Any OS with a modern web browser (Windows, macOS, Linux, or mobile
OS like Android/iOS).
• Input Devices: Mouse, keyboard, or touch input for interaction.
• Internet: Not required for local execution, but a browser is needed to render the application.
1. CHAPTER 3: SYSTEM ARCHITECTURE / FEATURES / PROCESS
2. System Architecture
3. The Simple javascript Quiz Game is a client-side, single-page web application built
using HTML, CSS, and JavaScript, executed entirely within the user’s browser. Its
architecture is lightweight and modular, designed for simplicity and responsiveness:
4. Frontend Components:
5. Quiz Container: A central <div> element (class="quiz-container") encapsulates the
entire user interface, including the title, buttons, question blocks, results, and restart
button.
6. Question Blocks: Each of the five questions is contained in a <div> (class="question-
block") with a question text and four clickable options. Visibility is toggled using the
CSS hidden class (display: none) for sequential navigation.
7. Results Page: A dedicated <div> (id="results-page") dynamically populated with
JavaScript to display each question, its correct answer, and the user’s selected answer
after quiz submission.
8. Navigation Buttons: Start, Next, Submit, and Restart buttons control the quiz flow,
styled with distinct colors and hover effects for user clarity.
9. Data Management: JavaScript manages state using:
10.An array (userAnswers) to store user selections for each question.
11.A variable (currentQuestion) to track the active question index.
12.A variable (score) to calculate correct answers.
13.DOM Manipulation: JavaScript dynamically updates the results page and toggles
visibility of elements without requiring page reloads.
14.No Backend: The application operates without server-side processing or databases,
relying solely on client-side logic for performance and portability.
15.Features
16.Multi-Subject Questions: Five multiple-choice questions, each from a different subject
(JavaScript, Mathematics, General Science, History, Geography), ensuring a diverse
knowledge test.
17.Interactive Interface: Users select answers by clicking options, which are visually
highlighted (class="selected") to confirm selection.
18.Navigation Controls:
19.Start Button: Initiates the quiz, hiding itself and displaying the first question.
20.Next Button: Advances to the next question, replacing itself with the Submit button on
the final question.
21.Submit Button: Validates the final answer and displays the results page with the score
and answer details.
22.Restart Button: Resets the quiz state, clearing answers, score, and results, and returns to
the first question.
23.Results Page: After submission, displays:
24.The total score (e.g., "You scored 4 out of 5!").
25.Each question with its correct answer in green and the user’s answer (green if correct,
red if incorrect or unanswered).
26.Responsive Design: Utilizes flexible CSS layouts and media queries to ensure usability
across desktops, tablets, and mobile devices.
27.Visual Feedback: Correct answers are displayed in green, incorrect answers in red, with
CSS animations (fade-in for page load, scale on button hover) enhancing user
engagement.
28.Error Handling: Prevents progression or submission without an answer via alert
prompts, ensuring complete user input.
29.Process
30.Initialization: The application loads with the "Sumit Quiz Game" title and a green "Start
Quiz" button visible, while other elements (quiz, results, restart button) are hidden.
31.Quiz Start: Clicking "Start Quiz" hides the start button and reveals the first question
block with four options.
32.Question Navigation:
33.Users click an option to select an answer, which is highlighted in gray.
34.Clicking "Next" saves the selected answer in the userAnswers array, hides the current
question, and shows the next one. If no answer is selected, an alert prompts the user to
choose an option.
35.On the fifth question, the "Next" button is replaced by the "Submit Quiz" button.
36.Submission:
37.Clicking "Submit Quiz" validates the final answer (alerting if none selected).
38.Hides the quiz section and displays the results page, dynamically generating content for
each question, its correct answer (green), and the user’s answer (green if correct, red if
incorrect).
39.Shows the total score and the restart button at the bottom.
40.Restart:
41.Clicking "Restart Quiz" resets the currentQuestion, score, and userAnswers variables.
42.Clears the results page, hides it and the restart button, and redisplays the first question
with the "Next" button, restoring the initial quiz state.
43.
 CHAPTER 4

SAMPLE CODE AND OUTPUT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sumit Quiz Game</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: #333;
}
.quiz-container {
background-color: #ffffff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
max-width: 700px;
width: 90%;
text-align: center;
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.quiz-container h1 {
color: #2c3e50;
margin-bottom: 25px;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1px;
}
.question {
margin: 25px 0;
font-size: 1.3em;
 font-weight: 600;
color: #34495e;
line-height: 1.4;
}
.options {
display: flex;
flex-direction: column;
gap: 12px;
}
.option {
padding: 15px;
border: 2px solid #dfe6e9;
border-radius: 8px;
cursor: pointer;
background-color: #f8f9fa;
transition: all 0.3s ease;
font-size: 1.1em;
}
.option:hover {
background-color: #e9ecef;
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.option.selected {
background-color: #b2bec3;
border-color: #636e72;
}
.option.correct {
background-color: #2ecc71;
color: white;
border-color: #27ae60;
}
.option.wrong {
background-color: #e74c3c;
color: white;
border-color: #c0392b;
}
.result-item {
margin: 20px 0;
padding: 15px;
border: 1px solid #dfe6e9;
border-radius: 8px;
text-align: left;
}
.result-item p {
margin: 5px 0;
}
.correct-answer {
color: #2ecc71;
font-weight: 600;
}
.selected-answer.correct {
color: #2ecc71;
font-weight: 600;
}
.selected-answer.wrong {
color: #e74c3c;
font-weight: 600;
}
button {
padding: 12px 25px;
margin: 10px;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
}
button:hover {
transform: scale(1.05);
}
#start-btn {
background-color: #27ae60;
}
#start-btn:hover {
background-color: #219653;
}
#next-btn {
background-color: #3498db;
}
#next-btn:hover {
background-color: #2980b9;
}
#submit-btn {
background-color: #f1c40f;
}
#submit-btn:hover {
background-color: #d4ac0d;
}
#restart-btn {
background-color: #e67e22;
font-size: 1.2em;
 padding: 15px 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
#restart-btn:hover {
background-color: #d35400;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
#result {
margin-top: 25px;
font-size: 1.3em;
font-weight: 600;
color: #2c3e50;
animation: fadeIn 0.5s;
}
#results-page {
margin-top: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>Sumit Quiz Game</h1>
<button id="start-btn">Start Quiz</button>
<div id="quiz" class="hidden">
<div id="question-1" class="question-block">
<div class="question">1. [JavaScript] Which keyword is used to define a function in
JavaScript?</div>
<div class="options">
<div class="option">method</div>
<div class="option">func</div>
<div class="option" data-correct="true">function</div>
<div class="option">def</div>
</div>
</div>
<div id="question-2" class="question-block hidden">
<div class="question">2. [Mathematics] What is the value of π (pi) rounded to two
decimal places?</div>
<div class="options">
<div class="option">3.12</div>
<div class="option" data-correct="true">3.14</div>
<div class="option">3.16</div>
<div class="option">3.18</div>
</div>
 </div>
<div id="question-3" class="question-block hidden">
<div class="question">3. [General Science] What gas do plants primarily use for
photosynthesis?</div>
<div class="options">
<div class="option">Oxygen</div>
<div class="option">Nitrogen</div>
<div class="option" data-correct="true">Carbon Dioxide</div>
<div class="option">Hydrogen</div>
</div>
</div>
<div id="question-4" class="question-block hidden">
<div class="question">4. [History] In which year did Christopher Columbus first
reach the Americas?</div>
<div class="options">
<div class="option">1453</div>
<div class="option" data-correct="true">1492</div>
<div class="option">1519</div>
<div class="option">1607</div>
</div>
</div>
<div id="question-5" class="question-block hidden">
<div class="question">5. [Geography] What is the longest river in the world?</div>
<div class="options">
<div class="option">Amazon River</div>
<div class="option" data-correct="true">Nile River</div>
<div class="option">Yangtze River</div>
<div class="option">Mississippi River</div>
</div>
</div>
<button id="next-btn">Next</button>
<button id="submit-btn" class="hidden">Submit Quiz</button>
</div>
<div id="result" class="hidden"></div>
<div id="results-page" class="hidden"></div>
<button id="restart-btn" class="hidden">Restart Quiz</button>
</div>

<script>
const startBtn = document.getElementById('start-btn');
const quizContainer = document.getElementById('quiz');
const nextBtn = document.getElementById('next-btn');
const submitBtn = document.getElementById('submit-btn');
const restartBtn = document.getElementById('restart-btn');
const resultDiv = document.getElementById('result');
const resultsPage = document.getElementById('results-page');
const questionBlocks = document.querySelectorAll('.question -block');
let currentQuestion = 0;
let score = 0;
let userAnswers = [];

startBtn.addEventListener('click', startQuiz);

function startQuiz() {
startBtn.classList.add('hidden');
quizContainer.classList.remove('hidden');
questionBlocks[currentQuestion].classList.remove('hidden');
}

questionBlocks.forEach((block, index) => {

const options = block.querySelectorAll('.option');
options.forEach(option => {
option.addEventListener('click', () => {
options.forEach(opt => opt.classList.remove('selected'));
option.classList.add('selected');
userAnswers[index] = option.textContent;
});
});
});

nextBtn.addEventListener('click', () => {
if (!userAnswers[currentQuestion]) {
alert('Please select an answer before proceeding.');
return;
}
questionBlocks[currentQuestion].classList.add('hidden');
currentQuestion++;
if (currentQuestion < questionBlocks.length) {
questionBlocks[currentQuestion].classList.remove('hidden');
}
if (currentQuestion === questionBlocks.length - 1) {
nextBtn.classList.add('hidden');
submitBtn.classList.remove('hidden');
}
});

submitBtn.addEventListener('click', () => {
if (!userAnswers[currentQuestion]) {
alert('Please select an answer before submitting.');
return;
}
quizContainer.classList.add('hidden');
resultDiv.classList.remove('hidden');
resultsPage.classList.remove('hidden');
 restartBtn.classList.remove('hidden');
score = 0;
let resultsHTML = '';
questionBlocks.forEach((block, index) => {
const questionText = block.querySelector('.question').textContent;
const options = block.querySelectorAll('.option');
let correctAnswer = '';
options.forEach(option => {
if (option.getAttribute('data-correct') === 'true') {
correctAnswer = option.textContent;
}
});
const userAnswer = userAnswers[index] || 'No answer selected';
const isCorrect = userAnswer === correctAnswer;
if (isCorrect && userAnswer !== 'No answer selected') {
score++;
}
resultsHTML += `
<div class="result-item">
<p><strong>Question ${index + 1}:</strong> ${questionText}</p>
<p><strong>Correct Answer:</strong> <span class="correct-
answer">${correctAnswer}</span></p>
<p><strong>Your Answer:</strong> <span class="selected-answer ${isCorrect ?
'correct' : 'wrong'}">${userAnswer}</span></p>
</div>
`;
});
resultsPage.innerHTML = resultsHTML;
resultDiv.textContent = `You scored ${score} out of ${questionBlocks.length}!`;
submitBtn.classList.add('hidden');
});

restartBtn.addEventListener('click', () => {
currentQuestion = 0;
score = 0;
userAnswers = [];
resultDiv.classList.add('hidden');
resultsPage.classList.add('hidden');
restartBtn.classList.add('hidden');
quizContainer.classList.remove('hidden');
questionBlocks.forEach(block => {
block.classList.add('hidden');
const options = block.querySelectorAll('.option');
options.forEach(option => {
option.classList.remove('selected', 'correct', 'wrong');
});
});
 questionBlocks[0].classList.remove('hidden');
nextBtn.classList.remove('hidden');
submitBtn.classList.add('hidden');
});
</script>
</body>
</html>
 CHAPTER 5
CHAPTER 5: CONCLUSION
The Simple javascript Quiz Game effectively combines educational content
with an engaging user experience, delivering a robust platform for testing
knowledge across JavaScript, Mathematics, General Science, History, and
Geography. Its client-side architecture, built with vanilla HTML, CSS, and
JavaScript, ensures lightweight performance, portability, and independence
from external libraries or servers. The application’s intuitive navigation,
responsive design, and clear visual feedback (green for correct answers, red
for incorrect) cater to a wide audience, from students to casual learners.
The dedicated results page provides comprehensive feedback, enhancing
the learning process, while the restart feature promotes replayability. The
project showcases the versatility of web technologies in creating interactive
applications and serves as a scalable foundation for future enhancements,
such as additional questions, timers, or adaptive difficulty levels. Overall,
the Sumit Quiz Game achieves its goal of providing an accessible, visually
appealing, and functional quiz experience.