Scribd
Upload
2 views

css microproject hemant

This document is a microproject report on a Maths Game created by Hemant Ingale as part of the CSS(22519) course for the academic year 2024-25. The project includes HTML and JavaScript code for a game that tests multiplication skills, featuring a scoring system and a countdown timer. The report certifies the completion of the project under the guidance of Shruthi Nandargi at Shivajirao S. Jondhale Polytechnic, Asangaon.

Uploaded by

Hemeant Ingale
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

css microproject hemant

This document is a microproject report on a Maths Game created by Hemant Ingale as part of the CSS(22519) course for the academic year 2024-25. The project includes HTML and JavaScript code for a game that tests multiplication skills, featuring a scoring system and a countdown timer. The report certifies the completion of the project under the guidance of Shruthi Nandargi at Shivajirao S. Jondhale Polytechnic, Asangaon.

Uploaded by

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

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

You might also like