Gramin Technical And Management Campus Nanded
Department Of Computer Engineering
MICRO PROJECT
Academic Year
2021-22
Math Game
Program : Computer Engineering Program Code : CO5I
Course : Client Side Scripting Language Course Code : 22519
Submitted By
Jadhav Kiran Datta
Submitted To
Mr. Wahe Sir
MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION
Certificate
This is to certify that Mr. /Ms. Jadhav Kiran Datta Roll No. 013 (2nd Shift) of Fifth
Semester of Diploma in Computer Engineering of Institute, Gramin Technical And
Management Campus Nanded has completed the Micro Project satisfactorily in Subject –
Client Side Scripting Language (22519) for the academic year 2021- 2022 as prescribed
in the curriculum.
Place: Vishnupuri Nanded. Enrollment No: .
Date: ________________ Exam Seat No: _______________
Subject Teacher Head of the Department Principal
Seal of
Institution
Coding:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UACompatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<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">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"></span></div>
<div id="gameover" class="text-center"></div>
</div>
<script src="main.js"></script>
</body>
</html>
JavaScript
// 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) {
// 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() {
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 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("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';
}
Screenshots :
WHEN A QUESTION IS GENERATED:
WHEN CORRECT ANSWER IS SELECTED:
WHEN AN INCORRECT ANSWER IS SELECTED:
WHEN TIMER STOPS AND FINAL SCORE IS DISPLAYED:
End Of Microproject…!!
