A

PROJECT REPORT
ON

“Math Multiplication Game”

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD

OF
DIPLOMA IN

( COMPUTER ENGINEERING )

SUBMITTED TO

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

SUBMITTED BY

Name of Student Enrollment No

1] Borude Shivani Shivraj 2209920257

Guided By:Prof.Miss Gaykar R.H.

SAMARTH POLYTECHNIC, BELHE

1
 SAMARTH POLYTECHNIC, BELHE

CERTIFICATE

This is to certify that the project report entitled “Math Multiplication Game”
Was successfully completed by Student of fifth semester Diploma in Computer
engineering.

Groups Member:

1] Borude Shivani Shivraj

In partial fulfillment of the requirements for the award of the

Diploma in Computer engineering and submitted to the Department of
Computer of Samarth Polytechnic, Belhe work carried out during a period for
the academic year 2024-25 as per curriculum .

Prof.Miss Gaykar R.H. Prof.Nawale S.K. Prof.Kapile A.S

(Subject Teacher) (H.O.D) (Principal)

2
 Acknowledgement

This project is done as a semester project, as a part course titled

"“Math Multiplication Game”
I am really thankful to our course the Principal Prof. Kapile A.S. and the
HOD Prof. Nawale sir. Samarth Polytechnic, Belhe for his invaluable
guidance and assistance, without which the accomplishment of the task
would have never been possible.

I also thanks Prof. Nawale S.K. for giving this opportunity to explore
into the real world and realize the interrelation without which a Project can
never progress. In this present project I have chosen the topic“Math
Multiplication Game.

I am also thankful to parents, friend and all staff of Computer

engineering department, for providing us relevant information and
necessary clarifications, and great support.

Group Member:-

1] Borude Shivani Shivraj

3
 ANNEXURE II

Evaluation Sheet for Micro Project

Academic Year :- 2024-25 Course:- Computer engineering Semester :-5

Title of Project :- “Math Multiplication Game”

COs addressed by the Micro Project :-

……………………………………………………………………………………….…………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
A] Practical Outcomes:
………………………………………………………………………………………………..
………………………………………………………………………………………………
B] Unit Outcomes in Cognitive domain:
……………………………………………………………………………………………...…
……………………………..…………………………………………………………………
C] Outcomes in Affective Domains:
………………….…………………………………………………………………………………
………….………………………………………………………………………………………..
D] Comments /suggestions about team work/leadership/inter-personal communication
(if any)
……………………………………………………………………………………………………
……………………………………………………………………………………………………

Roll. Name of Student Marks out Marks out Total out

No of of
6 for of 4 for 10
oral
performan /
ce
in group presentatio
activity n

37 Borude Shivani
Shivraj

4
 Index

Sr.No Name Page No

1 Rational 6
2 Aims/Benefits of Micro Project 6
3 Course Outcomes 6
4 Literature Review 7
5 Actual Procedure Followed 9
6 Actual Resources Used 9
7 Output of Micro Project 15
8 Skill Developed Learning Outcomes 16
9 Application of Micro Project 16
10 Reference 17
11 Thank you 18

5
 Micro Project Report
1. Rational –

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 Took at. Displaying timely
content updates, interactive maps. animated 2D/3D graphics. scrolling video
jukeboxes, ete We have made a maths game, this can improve other brain
functions, such as attention, concentration, and focus. It helps the users in
practicing Math. It is a Leam 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 help in investing leisure time in something quite useful.

2. Aims/Benefits of Micro Project –

• To Generate Random Numbers and Avoid repitition of Numbers.

• To Calculate Correct and Incorrect answers while solving.
• To show negative marking if answer selected is incorrect.

3. Course Outcomes –
Co. Course Outcome Statement
No.

CI505. 1 Use3 different program flow control structure for design interactive web
pages.

CI505. 2 Execute3 programs on Arrays and functions in Java script.

CI505. 3 Implement3 event based web forms and handling cookies using Java
script.

CI505. 4 Apply3 regular expressions for validations to design interactive

webpages.

CI505. 5 Implement3 Menus and navigations in web Pages.

6
4 Literature Review –

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 seript to interact with the user and make dynamic pages. It is an
interpreted programming language with object-oriented capabilites. Most of the
functions and applications that make the Internet indispensable to modern life are
coded in some form of JavaScript. It is used to create a dynamic and interactive
experience for the user.

1) Variable :
Variables are “containers” for storing information. It is an Identifire that
indicates a storage location in computer memory and it is used to refer the data
stored at a memory location.

We can declare it in following ways

Var x=24 and let x=24
Syntax :

var variable_name = variable_value; (vart =24)

2) ‘Function :
A function in JavaSeript is similar to a procedure which is a set of statements that
performs a task or calculates a value, but for a procedure to qualify as a function, it
should take some input and return an output where there is some obvious
relationship between the input and the output.

7
3) If...clse Statement :
The if...else statement allows JavaScript to execute
statements in more controlled way. We can use the if...clse statement to
execute some code if a condition is true and another code if the condition is
not true i.e, false.
The keyword if executes a statement only if the condition is true. It does not
do anything if the condition is false.
do...while Statement :
This statement executes atleast once, condition is false. In this, the loop will
execute the code block ance, before checking if the condition is true. then it
will repeat the loop as long as the condition is true.
‘getElementByld Method: It returns a reference to the element by its ID.

Syntax :
element = document. getElementByld(id):

 innerHTML : The innerHTML property sets or returns the HTML content

(inner HTML) of an element.
 Math.round() : The Math round() method rounds a number to the
nearest integer.
 Math.random() : can be used to return random integers
 EventListener : An event listener is a procedure in JavaSeript that waits for
an event to occur.

8
 5. Actual Procedure Followed –
Algorithm;
Step 1. Start
Step 2. Create HTML structure by adding the 4 boxes, scoreboard and reset button.
Step 3. Declare and initialize the DOM objects in Js.
Step 4. Call function play A question along with 4 options will be displayed.
Step 5. Select the option you feel is correct.
5.1 If Selected Option Is Correct, Display : Correct
5.2 If Selected Option Is Incorrect, Display : Try
Again! Step 6. Check if option selected is correct or incorrect
6.1 1f Option Selected is Correct :
Increment to Next Question
Display : Score
Display : Time Remaining
If Option Selected is Incorrect
Execute the same question again
Display : Score
Display : Time Remaining
Step 7. Final Function
7.1 Function Success: Check if user's time remaning is equal to 0, if YES
then display user's performance stats with total time taken.
Step 8. IT user wants to play again or if user clicks reset button in between, Go to step
4 Step 9. Stop.

6. Actual Resources Used -

Sr Name of Specifications Quantity Remarks

No Resource/material

1. Laptop Win 11 i5 11th Gen

1
2. Software VS Code
3. Browser Google

9
 Information About Project:
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue"></span></div>
<div id="correct">Correct</div>
<div id="wrong">Wrong<br>Try Again!</div>
<div id="question" class="text-center"></div>
<div id="information" class="text-center" onclick="check()">Click on the correct
answer!</div>
<div id="choices">
<div id="box 1" class="box text-center"></div>
<div id="box2" class="box text-center"></div>
<div id="box3" class="box text-center"></div>
<div id="box4" class="box text-center"></div>
</div>
<div id="startreset" class="text-center">Start Game</div>
<div id="timeremaining" class="text-center">Time Remaining: <span
id="timeremainingValue"></span></div>
<div id="gameover" class="text-center"></div>
</div>
<script src="main.js"></script>
</body>
</html>

10
 JAVASCRIPT

// Global Variables var playing = false; var score; var timeremaining; var
countdown; var correctAns=0; // Register Events
document.getElementById("startreset").addEventListener("click", play);
document.getElementById("box1").addEventListener("click", checkAnswer);
document.getElementById("box2").addEventListener("click", checkAnswer);
document.getElementById("box3").addEventListener("click", check
Answer); document.getElementById("box4").addEventListener("click",
checkAnswer); function play(e){ if(playing===true) {
//You want to reset
window.location.reload();
} else {
//You want to start the play playing = true;
this.innerHTML = "Reset Game": score =
0; setText("scoreValue", score);
hide("gameover");
timeremaining = 60;
setText("timeremainingValue", timeremaining);
show("timeremaining");
startCountdown();
generateQA();
}
}
function generateQA()
{ document.getElementById('information').innerHTML="Click on
the correct answer!"; var x = (1 + Math.round(Math.random() *
9)): var y = (1 + Math.round(Math.random() * 9)):
correctAns = x * y; let quesString = 'S{x} x ${y}';
setText("question", quesString); var correctPos =
(1
+ Math.round(Math.random() * 3)); setText('box$
{correctPos}', correctAns); var
answers =[correctAns]; for(i=1; i<5; i++) {
var wrongAns; if(i!= correctPos) {
do {
wrongAns= (1 +Math.round(Math.random()*9)) * (1
+Math.round(Math.random() * 9));
} while(answers.indexOf(wrongAns) != -1);
setText('box${i}', wrongAns);
answers.push(wrongAns);
}
11
 }
}
function check()
{
document.getElementById('information').innerHTML=correct Ans;
}
function checkAnswer() { if(playing true) { if(this.innerHTML = correctAns)
{
score++;
setText("scoreValue", score);
show("correct");
setTimeout(function(){hide("correct");}, 500); generateQA();
}
else
{ show("wrong");
setTimeout(function() { hide("wrong"); },500);

}
}
}
function startCountdown(){ countdown setInterval(function()
{ timeremaining -=1; //timeremaining = timeremaining -1
setText("timeremaining Value",timeremaining);
if(timeremaining<=0){
clearInterval(countdown);
playing-false;
show("gameover");
hide("timeremaining");
setText("scoreValue","");
setText("startreset", "Start Game");
let msg=<p>Game over!</p><p>Your score:${score}</p>';
setText("gameover",msg);
}
},1000)
}
/*HELPER FUNCTIONS */
function setText(id, text)
{ document.getElementById(id).innerHTML = text;
}
function show(id)
{ document.getElementById(id).style.display =
'block';
}
12
 function hide(id)
{ document.getElementById(id).style.display =
'none';
}

CSS

html {

height: 100%; background: radial-gradient(circle, #848,#CCC);

}
.text-center { text-align:center;
}
#container { box-sizing: border-box; height: 440px; width: 590px; background:
#9DD2EA; padding: 20px; border-radius: 10px; margin: 100px auto; box-shadow: 0
4px 0 0 # 009de4; position: relative;
}
#score { background: #f1ff92; color: #888e5f; box-shadow: 0 4px
#9da853; padding: 11px; position: absolute; left: 500px; border-radius:
5px;
}
#correct, #wrong { background: #42e252; color: #fff; padding: 11px;
position: absolute; left: 245px; display: none;
}
#wrong { background: #de401a;
}
#question { width: 450px; height: 150px; margin: 50px auto 10px; box-shadow:0
4px #535aa8: border-radius: 7px; line-height: 150px; font-family: cursive, sans-
serif; font-size: 100px;
background: #9da0ea;
} #information { width: 450px; height: 50px; margin: 10px
auto; background: #b481d9; border-radius: 7px; line-height: 50px;
box-shadow: 0 4px #8153a8;
}
#choices { width: 450px; height: 100px; margin: 5px auto;
}
.box { width: 85px; height: 85px; background: #fff float: left; margin-right: 36px;
border-radius: 5px; line-height: 85px; cursor: pointer; box-shadow: 0 4px rgba(0,
0, 0, 0.2);
transition: all .2s; position: relative;
}
#box4 { margin-right: 0;
}
13
#startreset { width: 100px; height: 38px; background: rgba(255,
255, 255, 0.5); margin: 0px auto; line-height: 38px; box-shadow: 0 4px
rgba(0, 0, 0, 0.2); cursor: pointer; position: relative; transition: all
.2s;
}
#timeremaining { width: 170px; height: 38px; line-height: 38px; position:
absolute; bottom: 5px; right: 20px; background: #afe64b; border-radius:5px; box-
shadow: 0 4px rgba(0, 0, 0, 0.2); display: none;
}
#gameover { width: 500px; height: 200px; background:
linear- gradient(#f3c76b, #f3746c);
color: #FFF; font-size: 2.5rem;
text-transform: uppercase;
position: absolute;
top: 100px; left: 45px; z-index: 9999; display: none;

14
7. Output of Micro Project –

15
8. Skill Developed Learning Outcomes –

• We learnt how to manage the time properly.

• We developed our logical and designing skills.
• We improved our teamwork skills.
• We learnt how to solve problems faced during designing of the project.

9. Application of Micro Project -

• Math games can improve visual recognition and can be used as Math Test/ Quiz.
• With many Math games based on calculating easy to tough levels of
math problems, children improve their visual discrimination.
• It improves other brain functions, such as attention, concentration, and focus.
It is very user-friendly, Interactive UI and UX and A Fun & Learn Game.
• These games improve visual memory, sustained attention, and
visual recognition skills.

16
10. Reference:

 https://www.cloudflare.com/learning/serverless/glossary/client-side-vs-server-
side/#:~:text=Client%2Dside%20scripting%20simply%20means,because%20JavaScr
ipt%20is%20universally%20supported.
 https://stackoverflow.com/questions/61051414/can-someone-explain-this-piece-of-
javascript-code
 https://www.w3schools.com/js/js_examples.asp
 https://www.javatpoint.com/javascript-example
 https://www.programiz.com/javascript/examples
 https://playcode.io
 https://skillcrush.com/blog/projects-you-can-do-with-javascript/
 Book javascript
 https://codingtorque.com/math-game-using-javascript/
 https://codepen.io/bobbidigi34/pen/rWzZgQ
 https://codingartistweb.com/2022/08/math-game-with-javascript/
 https://www.mathplayground.com/math-games.htmlhttps://www.mathgames.com/

17
THANK YOU

18