Creating Math Game Ashokrao Mane Polytechnic

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

MICROPROJECT REPORT ON
“Creating Math Game”
Diploma in Computer Engineering

Submitted By
Name : Roll No:
Revan S Kudalkar - 3025
Tejas S Kadam - 3026
Namrata U Wadekar - 3027

Subject: Advanced Java Programming

Guided By: Mrs. Mrs. P. D. Patil

ASHOKRAO MANE POLYTECHNIC, VATHAR

Department of Computer Engineering
A. Y. 2024-25

1|Page
 Creating Math Game Ashokrao Mane Polytechnic

DECLARATION

I hereby declare that the Micro-Project Report entitled “Client Side Scripting Language ”
with Module “Creating Math Game” is an authentic record on my own work as
requirements of Micro Project during the period from / / 2024 to / / 2024 in partial fulfillment
of Third Year in Computer Engineering, Ashokrao Mane Polytechnic, Vathar under the
guidance of Mrs. P. D. Patil.

Signature of Student

Revan S Kudalkar - (3025)

Tejas S Kadam – (3026)
Namrata U Wadekar – (3027)

Date: / / 2024

Place: Vathar, Kolhapur.

2|Page
 Creating Math Game Ashokrao Mane Polytechnic

ACKNOWLEDGMENT

The successful presentation of the Client Side Scripting Language Micro Project would be
incomplete without the mention of the people who made it possible and whose constant
guidance crowned my effort with success.

I would like to extend my gratitude to HOD of Computer Department Dr. S. A. Lakade Sir,
Kolhapur, for providing all the facilities to present this Micro-Project.

I would like to thank our Project Guide, Mrs. P. D. Patil, Department of Computer
Engineering, Ashokrao Mane Polytechnic, Vathar, for their constant guidance and inputs.

Sincerely,

Revan S
Kudalkar Tejas S
Kadam Namrata
U Wadekar

Place : Vathar, Kolhapur

3|Page
 Creating Math Game Ashokrao Mane Polytechnic

INDEX

Topic Sub-Topic Content

1 Report
1.1 Abstract

1.2 Title

1.3 Introduction

1.4 Resources Used

1.5 Skill Developed

2 Actual Implementation of Program

2.1 Program Code

3 Output of micro project

3.1 Output

4 Conclusion

4|Page
 Creating Math Game Ashokrao Mane Polytechnic

ABSTRACT

JavaScript is a scripting or programming language that allows you to implement complex

features on web pages. Every time a web page does more than just sit there and display static
information for you to look at. Displaying timely content updates, interactive maps, graphics,
scrolling video jukeboxes, etc. We have made a math’s game; this can improve other brain
functions, such as attention, concentration, and focus. It helps the users in practicing Math. It is
easy to Learn and Fun Game. It can be used by any Age-Groups. Math games give space to
critical thinking and that helps children nurture their attention to detail while solving it. Math
games can improve visual recognition as well as helping investing leisure time in something
quiteuseful.

5|Page
 Creating Math Game Ashokrao Mane Polytechnic

INTRODUCTION

Educational math games developed using JavaScript offer a highly interactive and
engaging platform for students to improve their problem-solving skills and enjoy learning
math. JavaScript is a widely used programming language due to its compatibility with all
web browsers, ease of use, and ability to support interactive elements such as animations
and real- time feedback. These features make it possible to create games that provide
instant responses to user input, allowing students to learn and correct their mistakes
quickly. Developers can incorporate dynamic question generation, time-based
challenges, and score tracking, all of which are key features in creating an engaging
math game.

Balancing fun and learning is essential for the success of any educational game. If a game
focuses too much on entertainment, it may lose its educational value, while if it is too
focused on learning, it may fail to engage students. Helping students learn and correct
mistakes quickly. Key features include dynamic question generation, time-based
challenges, and score tracking, which make the experience more exciting. Effective math
games achieve this balance by presenting math problems in a fun and interactive way,
ensuring that students are learning while having fun. The role of adaptive learning also
comes into play, where the game adjusts the difficulty level based on the student’s
performance, an individualized learning experience.

6|Page
 Creating Math Game Ashokrao Mane Polytechnic

 RESOURCES REQUIRED :

Sr. Name of Specification Quantity Remark

No
Resource

1. Computer Computer (i3-i5preferable), 1 -

System Ram minimum 2 GB and
onward

2. Operating Windows 11 1 -
System

3. Software Sublime Text, Browser 1 -

4. Book Mcgraw- Hill – Javascript 1

Demystified (2006)






 SKILL DEVELOPED :


Developing a math game project in JavaScript cultivates a diverse set of skills that extend
beyond basic programming. Key skills include advanced proficiency in JavaScript,
encompassing its syntax, functions, and asynchronous programming techniques for smooth
game performance. Developers gain expertise in manipulating the Document Object Model
(DOM) to create interactive game elements and handle user inputs. The project also hones
problem-solving abilities through algorithm design and debugging, ensuring robust and
efficient game logic. Additionally, developers learn to design intuitive user interfaces, manage
game states, and implement features that enhance user experience. Skills in data management
are developed through techniques like local storage for saving progress and data visualization
for displaying game metrics. The project also involves integrating third- party libraries and
multimedia, further enriching the game. Working on such a project often involves
collaboration and version control, fostering teamwork and project management skills. Finally,
applying educational technology principles ensures the game effectively supports learning
objectives.

7|Page
 Creating Math Game Ashokrao Mane Polytechnic

 PROGRAM CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Game</title>
<style>
body {
font-family: 'Arial', sans-
serif;margin:0;
padding: 0;
background-color:
#282c34;display: flex;
justify-content:
center;align- items:
center; height: 100vh;
color: #ffffff; text-
align: center;
}
#container {
background: rgba(50, 50, 50,
0.9);padding:40px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0,
0.5);width:400px;
}
h2 {
margin-bottom: 20px;
}
input {
font-size:
20px;padding:
10px;margin: 10px 0;
width: 90%; border:
none;border-radius:
5px; background:
#ffffff;color: #000;
}
button {
font-size: 20px;
padding:12px
20px;margin: 10px;
border-radius: 5px;

8|Page
 Creating Math Game Ashokrao Mane Polytechnic

pointer;
border: none; cursor:
background-color:
#4CAF50;color:white;
transition: background-color 0.3s;
}

button:hover {
background-color:
#45a049;
}
#question {
font-size: 36px;
margin:
20px 0; font-weight:
bold;
}
#options { margin:
20px 0;
}
.option-button {
display: block;
font-size: 20px;
padding: 12px;
margin:
10px auto;border-
radius: 5px;border:
none; cursor:
pointer;
background-color:
#007BFF;color: white;
width: 70%;
transition: background-color 0.3s;
}
.option-button:hover {
background-color:
#0056b3;
}
</style>
</head>
<body>
<div id="container">
<!-- Login Section -->
<div id="login-container">
<h2>Math Game</h2>
<input type="text" id="username" placeholder="Enter your username">
<button onclick="login()">Login</button>
</div>

9|Page
 Creating Math Game Ashokrao Mane Polytechnic

<!-- Start Section -->

<div id="start-container" style="display: none;">

<h2>Welcome, <span id="welcome-user"></span>!</h2>

<button onclick="startGame()">Start Game</button>
</div>

<!-- Game Section -->

<div id="game-container" style="display: none;">
<div id="user-info">
<span id="user-name">User: <span id="username-display"></span></span>
<span id="score">Score: 0</span>
<span id="questions-remaining">Questions Remaining: 10</span>
</div>
<div id="question">Question will appear here</div>
<div id="options"></div>

<button onclick="generateQuestion()">New Question</button>

<button onclick="exitGame()">Exit</button>
</div>

<!-- Final Score Section -->

<div id="final-score-container" style="display: none;">
<h2>Game Over!</h2>
<p>Your final score is: <span id="final-score-value"></span></p>
<button onclick="playAgain()">Play Again</button>
<button onclick="backToGame()">Back</button>
</div>
</div>

<script>
let currentAnswer = 0;
let score = 0;
let questionsRemaining = 10;
let username = '';

function login() {
username =
document.getElementById('username').value.trim();if
(username) {
document.getElementById('welcome-user').innerText = username;
document.getElementById('username-display').innerText = username; // Display
username in game
document.getElementById('login-container').style.display = 'none';
document.getElementById('start-container').style.display = 'block';

10 | P a g e
 Creating Math Game Ashokrao Mane Polytechnic

} else {
alert('Please enter a username.');

}
function startGame() {
document.getElementById('start-container').style.display =
'none'; document.getElementById('game-
container').style.display = 'block';resetGame();
generateQuestion();
}

function generateQuestion() {
if (questionsRemaining === 0) {
displayFinalScore();
return;
}
const num1 = Math.floor(Math.random() * 10) + 1; const
num2 = Math.floor(Math.random() * 10) + 1;const operators
= ['+', '-', '*', '/'];
const operator = operators[Math.floor(Math.random() * operators.length)];
currentAnswer =calculateAnswer(num1, num2, operator);
document.getElementById('question').innerText =
`${num1} ${operator} ${num2}`;displayOptions(currentAnswer);
}
function calculateAnswer(num1, num2, operator)
{switch(operator) {
case '+':
return num1 + num2;case '-':
return num1 - num2;case '*':
return num1 * num2;case '/':
return (num2 !== 0) ? (num1 / num2).toFixed(2) : 0;default:
return 0;
}
}
function displayOptions(correctAnswer) {
const optionsContainer = document.getElementById('options');
optionsContainer.innerHTML = '';
const incorrectAnswers = [];
while (incorrectAnswers.length < 3) {
const wrongAnswer = (Math.random() * 20).toFixed(2);
if (wrongAnswer != correctAnswer && !incorrectAnswers.includes(wrongAnswer))
{
incorrectAnswers.push(wrongAnswer);
}
}

11 | P a g e
 Creating Math Game Ashokrao Mane Polytechnic

const allAnswers = [correctAnswer, ...incorrectAnswers];

allAnswers.sort(() => Math.random() - 0.5);
allAnswers.forEach(answer
=> {

const button = document.createElement('button');button.innerText =

answer;
button.className = 'option-button'; button.onclick = () => checkAnswer(answer);
optionsContainer.appendChild(button);
});
}
function checkAnswer(selectedAnswer) {
const messageContainer = document.createElement('div');
messageContainer.style.position = 'absolute';
messageContainer.style.top = '20px';
messageContainer.style.left
= '50%'; messageContainer.style.transform = 'translateX(-
50%)';messageContainer.style.backgroundColor = '#333';
messageContainer.style.color = '#fff';
messageContainer.style.padding = '10px';
messageContainer.style.borderRadius = '5px';
messageContainer.style.zIndex = '10';
document.body.appendChild(messageContainer);

if (parseFloat(selectedAnswer) === parseFloat(currentAnswer)) {

score++;
messageContainer.innerText = "Correct!";

} else {
messageContainer.innerText = "Incorrect!";
}

questionsRemaining--; document.getElementById('score').innerText =
`Score: ${score}`;
document.getElementById('questions-remaining').innerText = `Questions Remaining:
${questionsRemaining}`;

// Remove the message after 2

secondssetTimeout(() => {
document.body.removeChild(messageContainer);
generateQuestion();
}, 2000);
}
function displayFinalScore() { document.getElementById('game-
container').style.display = 'none';

12 | P a g e
 Creating Math Game Ashokrao Mane Polytechnic

document.getElementById('final-score-container').style.display = 'block';

document.getElementById('final-score-value').innerText = score;
}

function
playAgain() {
resetGame();
document.getElementById('final-score-container').style.display = 'none';
document.getElementById('login-container').style.display = 'block'; // Redirect to
login
}

function
backToGame() {
resetGame();
document.getElementById('final-score-container').style.display = 'none';
document.getElementById('game-container').style.display = 'block'; //
Show newquestions
document.getElementById('username-display').innerText = username; // Display the
same username
generateQuestion();
}

function
exitGame() {
resetGame();
document.getElementById('game-container').style.display =
'none';document.getElementById('login-
container').style.display = 'block';
}

function resetGame()
{score =0;
questionsRemaining = 10; document.getElementById('score').innerText =
`Score: ${score}`;
document.getElementById('questions-remaining').innerText = `Questions Remaining:
$ {questionsRemaining}`; document.getElementById('username').value = '';
}
</script>
</body>
</html>

13 | P a g e
 Creating Math Game Ashokrao Mane Polytechnic

 OUTPUT:

14 | P a g e
 Creating Math Game Ashokrao Mane Polytechnic

 CODE :

15 | P a g e
 Creating Math Game Ashokrao Mane Polytechnic

 CONCLUSION:

In conclusion, this math game micro project demonstrates the power of JavaScript in
creating an interactive learning experience. By integrating various difficulty levels and a
responsive scoring system, we’ve designed a fun way to reinforce mathematical concepts
for users of all ages. The game not only fosters engagement but also encourages users to
enhance their problem-solving skills in a playful environment. Moving forward, potential
improvements could include adding new mathematical topics, implementing multiplayer
functionality, and creating a leaderboard to boost competitiveness. Overall, this project
successfully combines education and entertainment, showcasing the effectiveness of
gamified learning in improving mathematical literacy.

16 | P a g e