Skip to content

Commit bdab885

Browse files
Chayandas07Chayandas07
authored
Merge pull request #68 from runtimeerror11/Math_game
Math game
2 parents ecb433d + b6b33ac commit bdab885

File tree

3 files changed

+321
-0
lines changed

3 files changed

+321
-0
lines changed

‎maths js/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<link rel="stylesheet" href="style.css">
9+
10+
<title>Math Game</title>
11+
</head>
12+
13+
<body>
14+
<div id="container">
15+
<div id="timeremaining">
16+
Time remaining: <span id="timeremainingvalue"> 60</span>
17+
</div>
18+
<div id="score">
19+
score: <span id="scorevalue" style="font-weight: 900">0</span>
20+
</div>
21+
<div id="correct">
22+
Correct!
23+
</div>
24+
<div id="wrong">
25+
Try again!
26+
</div>
27+
<div id="ques">
28+
29+
</div>
30+
<div id="inst">
31+
Click on the correct answer.
32+
</div>
33+
<div id="choices">
34+
35+
<div id="box1" class="box"> </div>
36+
<div id="box2" class="box"> </div>
37+
<div id="box3" class="box"> </div>
38+
<div id="box4" class="box"> </div>
39+
</div>
40+
<div id="startreset">
41+
Start Game
42+
</div>
43+
<div id="gameOver">
44+
45+
</div>
46+
</div>
47+
<script src="https://code.jquery.com/jquery-3.6.3.js"
48+
integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
49+
50+
<script src="script.js"></script>
51+
</body>
52+
53+
</html>

‎maths js/script.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
var timeremaining;
2+
var correctAnswer;
3+
var score;
4+
var action;
5+
var playing = false;
6+
7+
document.getElementById("startreset").onclick = function () {
8+
if (playing == true) {
9+
location.reload();
10+
}
11+
else {
12+
playing = true;
13+
score = 0;
14+
15+
document.getElementById("scorevalue").innerHTML = score;
16+
17+
show("timeremaining");
18+
timeremaining = 60;
19+
20+
document.getElementById("timeremainingvalue").innerHTML = timeremaining;
21+
22+
hide("gameOver");
23+
24+
document.getElementById("startreset").innerHTML = "Reset Game";
25+
26+
startCountdown();
27+
28+
generateQA();
29+
30+
}
31+
}
32+
33+
for (i = 1; i < 5; i++) {
34+
document.getElementById("box" + i).onclick = function () {
35+
if (playing == true) {
36+
if (this.innerHTML == correctAnswer) {
37+
38+
score++;
39+
document.getElementById("scorevalue").innerHTML = score;
40+
hide("wrong");
41+
show("correct");
42+
setTimeout(function () {
43+
hide("correct");
44+
}, 1000);
45+
generateQA();
46+
47+
} else {
48+
49+
hide("correct");
50+
show("wrong");
51+
setTimeout(function () {
52+
hide("wrong");
53+
}, 1000);
54+
}
55+
}
56+
}
57+
}
58+
59+
//functions
60+
61+
function startCountdown() {
62+
action = setInterval(function () {
63+
timeremaining -= 1;
64+
65+
66+
document.getElementById("timeremainingvalue").innerHTML = timeremaining;
67+
if (timeremaining == 0) {
68+
stopCountdown();
69+
show("gameOver");
70+
71+
//game over
72+
document.getElementById("gameOver").innerHTML = "<p>Game over!</p><p>Your score is " + score + ".</p>";
73+
hide("timeremaining");
74+
hide("correct");
75+
hide("wrong");
76+
playing = false;
77+
78+
document.getElementById("startreset").innerHTML = "Start Game";
79+
}
80+
}, 1000);
81+
}
82+
83+
84+
function stopCountdown() {
85+
clearInterval(action);
86+
}
87+
88+
89+
function hide(Id) {
90+
document.getElementById(Id).style.display = "none";
91+
}
92+
93+
94+
function show(Id) {
95+
document.getElementById(Id).style.display = "block";
96+
}
97+
98+
function generateQA() {
99+
var x = 1 + Math.round(9 * Math.random());
100+
var y = 1 + Math.round(9 * Math.random());
101+
correctAnswer = x * y;
102+
103+
document.getElementById("ques").innerHTML = x + "x" + y;
104+
var correctPosition = 1 + Math.round(3 * Math.random());
105+
106+
document.getElementById("box" + correctPosition).innerHTML = correctAnswer;//correct answer
107+
108+
109+
var answers = [correctAnswer];
110+
111+
for (i = 1; i < 5; i++) {
112+
if (i != correctPosition) {
113+
var wrongAnswer;
114+
do {
115+
wrongAnswer = (1 +
116+
Math.round(9 * Math.random())) * (1 +
117+
Math.round(9 * Math.random()));//wrong answer
118+
119+
} while (answers.indexOf(wrongAnswer) > -1)
120+
121+
document.getElementById("box" + i).innerHTML = wrongAnswer;
122+
answers.push(wrongAnswer);
123+
}
124+
}
125+
}

‎maths js/style.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap");
2+
3+
html {
4+
height: 100%;
5+
background: #0F2C59;
6+
}
7+
8+
#container {
9+
height: 450px;
10+
width: 550px;
11+
background-color: #DAC0A3;
12+
margin: 100px auto;
13+
padding: 20px;
14+
border-radius: 10px;
15+
box-shadow: 0px 4px 0px 0px #243859;
16+
position: relative;
17+
font-family: "Roboto", sans-serif;
18+
}
19+
20+
#score {
21+
color: white;
22+
position: absolute;
23+
right: 10px;
24+
font-size: 25px;
25+
}
26+
27+
#correct {
28+
position: absolute;
29+
left: 250px;
30+
background-color: #42e252;
31+
color: white;
32+
padding: 5px 12px;
33+
display: none;
34+
}
35+
36+
#wrong {
37+
position: absolute;
38+
left: 250px;
39+
background-color: #de401a;
40+
color: white;
41+
padding: 5px 12px;
42+
display: none;
43+
}
44+
45+
#ques {
46+
width: 450px;
47+
height: 150px;
48+
margin: 50px auto 10px auto;
49+
background-color: #334155;
50+
font-size: 100px;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
color: white;
55+
}
56+
57+
#choices {
58+
width: 450px;
59+
height: 100px;
60+
margin: 5px auto;
61+
}
62+
#inst {
63+
width: 450px;
64+
height: 50px;
65+
margin: 10px auto;
66+
text-align: center;
67+
line-height: 45px;
68+
color: white;
69+
}
70+
71+
72+
.box {
73+
margin-right: 36px;
74+
width: 85px;
75+
height: 85px;
76+
background-color: white;
77+
float: left;
78+
border-radius: 3px;
79+
cursor: pointer;
80+
box-shadow: 0px 4px black;
81+
text-align: center;
82+
line-height: 80px;
83+
position: relative;
84+
transition: all 0.2s;
85+
}
86+
87+
.box:hover,
88+
#startreset:hoover {
89+
background-color: #9c89f6;
90+
color: white;
91+
box-shadow: 0px 4px #6b54d3;
92+
}
93+
94+
.box:active,
95+
#startreset:active {
96+
box-shadow: 0px 0px #6b54d3;
97+
top: 4px;
98+
}
99+
#startreset {
100+
width: 150px;
101+
padding: 10px;
102+
background-color: lawngreen;
103+
margin: 0 auto;
104+
border-radius: 3px;
105+
cursor: pointer;
106+
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
107+
text-align: center;
108+
position: relative;
109+
transition: all 0.2s;
110+
}
111+
112+
#box4 {
113+
margin-right: 0;
114+
}
115+
116+
117+
#gameOver {
118+
height: 200px;
119+
width: 500px;
120+
background: black;
121+
color: white;
122+
font-size: 2.3em;
123+
text-align: center;
124+
text-transform: uppercase;
125+
position: absolute;
126+
top: 100px;
127+
left: 45px;
128+
z-index: 2;
129+
display: none;
130+
}
131+
132+
#timeremaining {
133+
color: red;
134+
padding: 10px;
135+
position: absolute;
136+
top: 10px;
137+
left: 10px;
138+
border-radius: 5px;
139+
display: none;
140+
font-weight: 500;
141+
font-size: 30px;
142+
}
143+

0 commit comments

Comments
 (0)