Teacher Evaluation Sheet

Name Of Student:Waghchaure Pranjal Sambhaji

Enrollment No: 23651020423
Name of Program: Computer Technology Semester:V
Course Title: Client Side Scripting Language (CSS) Code: -22519

Title of the Micro Project: Math Multiplication Game

Course Outcomes Achieved:-

a. Create interactive web pages using program flow control structure.
b. Implement arrays and functions in JavaScript
c. Create event based web forms using Java script

Evaluation as per Suggested Rubric for Assessment of Micro-Project:

Sr.
Poor Average Good (Marks Excellent (Marks
No. Characteristic to be assessed
(Marks (Marks 4-5) 6 - 8) 9-10)
1-3)
(A) Process and Product Assesssment (Convert above total marks out of 6 marks)

1 Relevance to the Course

Literature Survey /
2
Information Collection
Completion of the Target as
3
per project proposal
Analysis of data and
4
representation
5 Quality of Prototype / Model
6 Report Preparation
(B) Individual Presentation / Viva (Convert above total marks out of 4 marks)

8 Presentation
9 Viva

Micro – Project Evaluation Sheet:

Process Assessment Product Assessment
Part A Project Part B – Individual Total
– project Methodology Project Presentation / Marks 10
Name of Student Proposal (2 marks) Report / Working Viva (4
(2 marks) Model(2 marks) marks)

Waghchaure Pranjal Sambhaji

Name and designation of the faculty Member: Mr. D.B.Zambare Signature

1
 MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION

SNJB's Shri Hiralal Hastimal (Jain Brothers, Jalgaon)

Polytechnic, Chandwad)

MICRO PROJECT
Academic year 2024-25

TITLE OF PROJECT

Math Multiplication Game

Program: Computer Technology Program Code: CM

Course: Client Side Scripting Language Course code: 22519

2
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Sr.No. Name of Student Roll No Enrollment No Seat No

1. Waghchaure Pranjal 57 23651020423 390839
Sambhaji

CERTIFICATE
This is to certify Waghchaure Pranjal Sambhaji of 5th Semester of Diploma in Computer
Technology of Institute, SNJB's Shri Hiralal Hastimal (Jain Brothers, Jalgaon)
Polytechnic, Chandwad) (Code: 0079) has completed the Micro-Project satisfactorily in Subject
Client Side Scripting Language (22519) for the academic year 2024- 2025 as prescribed in the
curriculum.

Place: CHANDWAD

Date: / /2024

Subject Teacher Head of the Department Principal

(Mr. D.B.Zambare) (Mr.P.R.Sali) (Dr. V.A.Wankhede)

3
 INDEX

SR_NO
CONTENT PAGE NO.
.
Part A

1.0 Brief Introduction 1

2.0 Aim of Micro Project 1

3.0 Course Outcomes Addressed 1

4.0 Action Plan 2

5.0 2
Resources Required

Part B

1.0 Brief Description 3

2.0 Aim of Micro Project 3

3.0 Course Outcome Integrated 3

4.0 Actual Procedure Followed 4-6

5.0 Outputs of the Micro-projects 7-8

6.0 Actual Resource Used 9

7.0 Skill Developed 9

8.0 Applications of this Microproject 10

4
 PART A-Plan

Title of micro-project: Math Multiplication Game

1.0 Brief Introduction

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:

a. Create interactive web pages using program flow control structure.
b. Implement arrays and functions in Java script.
c. Create event based web forms using Java script.
d. Use Java Script for handling cookies.
e. Create interactive web pages using regular expressions for validations.
f. Create menus and navigations in web pages.

5
4.0Action Plan:

Planned Start Planned Finish

Sr no. Details of activity
Date Date
1. Finalization of topic 15-07-2024 19-07-2024
2. Preparation of Abstract 23-07-2024 3-08-2024
3. Collection of data 15-08-2024 10-09-2024
4. Preparation of concept 17-09-2024 05-10-2024
5. Seminar / Presentation 15-10-2024 20-10-2024
6. Submission of Micro Project 05-11-2024 10-11-2024

5.0Resources Required-

Sr.No Name of Resource/Material Specification Quantity Remarks

1. Computer (Desktop/Laptop) I5,RAM 8GB 1 Available
2. Microsoft office word 2010 1 Available
3. Books - - Available
4. Websites www.google.com Available
5. Softwares Notepad, Chrome, Available
1
VS.code
 PART B-Plan
Title of micro-project: Math Multiplication Game

1.0Brief Description:
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.0Aims/s Benefit of 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 Achieved:

a.Create interactive web pages using program flow control structure.
b.Implement arrays and functions in JavaScript
c.Create event based web forms using Java script
4.0 Actual Methodology/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.
Flowchart
Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Game</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

#container {
width: 600px;
margin: 50px auto;
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgb(0, 255, 47);
}

.box {
display: inline-block;
width: 120px;
height: 120px;
margin: 10px;
background-color: #f0f0f0;
border: 2px solid #ccc;
border-radius: 5px;
line-height: 120px;
font-size: 24px;
cursor: pointer;
}

.text-center {
text-align: center;
}

#correct, #wrong, #gameover {

display: none;
}

#startreset {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

#startreset:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue">0</span></div>
<div id="correct">Correct!</div>
<div id="wrong">Try Again!</div>
<div id="question" class="text-center"></div>
<div id="information" class="text-center">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">60</span></div>
<div id="gameover" class="text-center"></div>
</div>
<script>
// Global Variables
var playing = false;
var score;
var timeremaining;
var countdown;
var correctAns;

// 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) {
// Reset the game
window.location.reload();
} else {
// Start the game
playing = true;
this.innerHTML = "Reset Game";
score = 0;
setText("scoreValue", score);
hide("gameover");
timeremaining = 60;
setText("timeremainingValue", timeremaining);
show("timeremaining");

startCountdown();
generateQA();
}
}

function generateQA() {
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 <= 4; i++) {
if (i !== correctPos) {
var wrongAns;
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 checkAnswer() {
if (playing === true) {
if (this.innerHTML == correctAns) {
score++;
setText("scoreValue", score);
show("correct");
hide("wrong");
setTimeout(function () {
hide("correct");
}, 500);
generateQA();
} else {
show("wrong");
hide("correct");
setTimeout(function () {
hide("wrong");
}, 500);
}
}
}

function startCountdown() {
countdown = setInterval(function () {
timeremaining -= 1;
setText("timeremainingValue", timeremaining);

if (timeremaining <= 0) {
clearInterval(countdown);
playing = false;
show("gameover");
hide("timeremaining");

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';
}
</script>
</body>
</html>
5.0 Output of the Micro-

Project:

Step1:

Step2:
 Step3:

6.0 Actual Resources Used:

Sr.No Name of Resource/Material Specification Quantity Remarks

1. Computer i5,RAM 8GB 1 Available
(Desktop/Laptop)
2. Microsoft office word 2010 1 Available
3. Books - - Available
4. Websites www.google.com 1 Available
5. Softwares Notepad, Web 1 Available
Browser,
VS.code
7.0 Skill Developed:

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.

8.0 Applications of Microproject:

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.