Subject: CSS(22519) Academic Yea:2024-25
Course :IF5I Semester : Fifth
MICROPROJECT REPORT ON
MATHS GAME
By the group of 1 students
Sr. No Roll No Name of Students Enrollment No Seat No
137974
1. 47 Hemant Ingale 2209350281
Under the guidance of Shruthi Nandargi
Second year of diploma program in engineering and
technology of Maharashtra state board of technical
education, Mumbai.
At
Shivajirao S. Jondhale Polytechnic Asangaon
MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION
This Is Certify That Mr.Hemant Ingale , Roll No:47.
In Fifth Semester Of Information Technology Diploma
Program In Engineering And Technology At 0935-
Shivajirao .S. Jondhale Polytechnic Has Completed the
Micro Project in Subject CSS(22519).In The Academic
Year 2024-25 As Per The MSBTE Prescribed Curriculum
Of ‘I’ Scheme.
Place:- Asangaon Enrollment No:- 2209350281
Date:- / / 2024 Seat No:- 137974
Subject Teacher Head of Department principal
1
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…!!
