GOVERNMENT POLYTECHNIC, SOLAPUR

MAHARASHTRA STATE OF TECHNICAL EDUCATION,

MUMBAI
Winter – 2021

Math Game
PROJECT REPORT
Submitted by:

ROLL NO NAME
24 SNEHA GULED

80 GAURI SHINDE

IN PARTIAL FULFILLMENT OF THE FOURTH SEMESTER

In
COMPUTER TECHNOLOGY

Under the Guidance of Prof Bhalerav Sir

1
 CERTIFICATE

MAHRASHTRA STATE BOARD OF TECHNICAL

EDUCATION MUMBAI

GOVERNMENT POLYTECHNIC, SOLAPUR

This is to certify that the following students:

ROLL NO NAME

24 SNEHA GULED

80 GAURI SHINDE

of Fifth Semester of Diploma In Computer Technology of

Institute Government Polytechnic, Solapur( Code : 0015 )
have complete the Client Side Scripting (CSS) work
satisfactorily under my supervision and guidance in
subject Microprocessor for the academic year 2021– 2022
as prescribed in the curriculum.

Project guide H.O.D. Principle

Prof Bhalerav Sir

2
 INDEX

Sr.No Content Page No.

1 Project Proposal 4

2 Action plan 5

3 Resource required 6

4 Project Report 7-9

5 Flowchart 10

6 Coding 11-22

6 Output 23-28

7 Skill developed &Application 29

8 Conclusion 30

9 Refernce 31

3
 Micro-Project Proposal

Math Game
1.0 Aim/Benefits of the Micro-Project
The aim of this micro-project included:
1. To Generate Random Numbers and avoid repetition of Numbers.
2. To Calculate Correct and Incorrect answers while solving.
3. To show negative marking if answer selected is incorrect.

2.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control structure.
2. Implement Arrays and functions in JavaScript.
3. Create event based web forms using JavaScript.

3.0 Proposed Methodology

1. Discussion about topic with guide and among group members
2. Information collection
3. Analysis of Data
4. Discussing about concepts to be used and taken into consideration
5. Writing algorithm
6. Preparing flowchart
7. Coding
8. Compilation of the code
9. Representation
10. Editing and revising the content
11. Report Preparation

4
4.0 Action Plan
SR Details of activity Planned Planned Name of
. Start date Finish Responsible
No. date Team
Members
1 Finalization of project Title 17/9/2021 28/9/2021 All
and Scope
2 Project Definition 28/9/2021 5/10/2021 All

3 Design Procedure 5/10/2021 12/10/2021 All

(Algorithm)
4 Design Structure (Flowchart) 12/10/2021 22/10/2021 All

5 Coding and Testing 22/10/2021 17/11/2021 All

6 Output 17/11/2021 26/11/2021 All

7 Report writing 26/11/2021 01/12/2021 All

8 Demonstration of project & 01/12/2021 10/12/2021 All

final submission

5
5.0 Resources Required

Sr.No. Equipment Name with Broad Specification Remark (if any)

1 Hardware Computer System: Computer (i3-i5

Nil
preferable), RAM minimum 2 GB and onwards
2 Operating System: Windows 7 or Later
Nil
Version/LINUX version 5.0 or Later Version
3 Software: VS Code, Chrome. Nil

6
 Micro-Project Report

Math Game
1.0 Rationale
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, animated 2D/3D graphics, scrolling
video jukeboxes, etc.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 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 help in investing leisure time in something quite
useful.

2.0 Aim/Benefits of the Micro-Project

The aim of this micro-project included:

1. To Generate Random Numbers and Avoid repitition of Numbers.

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

3.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control structure.
2. Implement Arrays and functions in JavaScript.
3. Create event based web forms using JavaScript.

7
4.0 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 script to interact with the user and make dynamic pages. It is
an interpreted programming language with object-oriented capabilities. 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.

Variable : Variables are “containers” for storing information. It is an

identifier 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; (var t = 24)

Function : A function in JavaScript 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.

If…else Statement : The if…else statement allows JavaScript to execute

statements in more controlled way. We can use the if…else 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.

8
do…while Statement : This statement executes atleast once, even if the
condition is false. In this, the loop will execute the code block once, before
checking if the condition is true, then it will repeat the loop as long as the
condition is true.

getElementById Method: It returns a reference to the element by its ID.

Syntax : element = document.getElementById(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 JavaScript that waits for

an event to occur.

9
5.0 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
4.1 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 If Option Selected is Correct :
Increment to Next Question
Display : Score
Display : Time Remaining
6.2 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. If user wants to play again or if user clicks reset button in between, Go
to step 4.
Step 9. Stop.

10
Flowchart:

11
Coding:
HTML

<!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="box1" 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>

12
 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", checkAnswer);
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!";

13
 var x = (1 + Math.round(Math.random() * 9));
var y = (1 + Math.round(Math.random() * 9));
correctAns = x * y;
let quesString = `${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);
}
}
}
function check()
{
document.getElementById('information').innerHTML=correctAns;
}
function checkAnswer() {
if(playing == true) {
if(this.innerHTML == correctAns) {
score++;
setText("scoreValue", score);
show("correct");
setTimeout(function() {
hide("correct");
}, 500);
generateQA();
} else {
14
 show("wrong");
setTimeout(function() {
hide("wrong");
}, 500);
}
}
}
function startCountdown(){
countdown=setInterval(function(){
timeremaining -=1; //timeremaining = timeremaining -1
setText("timeremainingValue",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';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}

15
 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;

}
16
#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;
17
}

#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;

18
}

#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;

19
#box4 {

margin-right: 0;

#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;
20
 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;

21
6.0 Actual Resources Used
Sr.N Equipment Name with Broad Specification Remark (if
o. any)
1 Hardware Computer System: Computer (i3-i5
preferable), Nil
RAM minimum 2 GB and onwards
2 Operating System: Windows 7 or Later
Version/LINUX version 5.0 Nil
or Later Version
3 Software: VS Code, Chrome. Nil

22
7.0 Outputs of the Micro-Projects
INITIALLY:

23
WHEN A QUESTION IS GENERATED:

WHEN AN INCORRECT ANSWER IS SELECTED:

24
WHEN CORRECT ANSWER IS SELECTED:

WHEN TIMER STOPS AND FINAL SCORE IS DISPLAYED:

25
8.0 Skill Developed / learning out of this Micro-Project.
1. We learnt how to manage the time properly.
2. We developed our logical and designing skills.
3. We improved our teamwork skills.
4. We learnt how to solve problems faced during designing of the project.

9.0 Application of this Micro-Project.

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

26
 Conclusion

In this microproject we learn various concepts like

math function. The project entitled was Math Game
using JavaScript completed successfully. It is very
efficient to use. This project helped us in gaining
valuable information and practical knowledge, Also the
project helped us to understand the mathematics
concepts.

27
 Reference
 Book
JavaScript Demystified-
(McGraw- hill-JavaScript Demystified (2006))
Beginning JavaScript
 www.youtube.com
 www.google.com

28