Scribd
Upload
290 views

Microproject of CSS

This document is a microproject submission for a math game created using HTML, CSS, and JavaScript. The summary includes: 1) The microproject was submitted by Jadhav Kiran Datta to their instructor Mr. Wahe Sir for the Client Side Scripting Language course at Gramin Technical And Management Campus Nanded. 2) The math game generates random math problems, displays answer options, tracks the score, and has a timer. It uses functions to generate questions, check answers, update the score, and start/stop the timer. 3) Screenshots show examples of the game displaying a question, updating the score for a correct answer, showing an error for an incorrect answer, and displaying

Uploaded by

Ak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
290 views

Microproject of CSS

This document is a microproject submission for a math game created using HTML, CSS, and JavaScript. The summary includes: 1) The microproject was submitted by Jadhav Kiran Datta to their instructor Mr. Wahe Sir for the Client Side Scripting Language course at Gramin Technical And Management Campus Nanded. 2) The math game generates random math problems, displays answer options, tracks the score, and has a timer. It uses functions to generate questions, check answers, update the score, and start/stop the timer. 3) Screenshots show examples of the game displaying a question, updating the score for a correct answer, showing an error for an incorrect answer, and displaying

Uploaded by

Ak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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…!!

You might also like