Skip to content

Commit 70b976c

Browse files
nisha331nisha331
authored
Maths quiz game
1 parent 7333237 commit 70b976c

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎Maths quiz game/README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Welcome 🖐 to Maths Addition Quiz Game
2+
3+
This webapp is basically for kids to practice addition.
4+
5+
## 💻Tech Stack
6+
<br>
7+
8+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
9+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
10+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
11+
12+
<br>
13+
14+
### How to get the game on your local machine:
15+
16+
---
17+
18+
- Download or clone the repository
19+
20+
```
21+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
22+
```
23+
24+
- Go to the directory
25+
- Run the index.html file
26+
- Check your addition solving capacity.
27+
28+
the a
29+
30+
<br>
31+
32+
### How to use
33+
1. Add and write your ans in the box and click check answer.
34+
2. Alert will be given if the ans is write or wrong .
35+
3. Click ok to continue the quiz.
36+
37+
It somehow look like this.
38+
39+
![c2](https://user-images.githubusercontent.com/76838660/126802791-4ff8bdd6-423f-49e8-a075-8026f451c258.PNG)
40+
![c1](https://user-images.githubusercontent.com/76838660/126802799-08661f02-807b-4e06-a718-4e8cea8c1c52.PNG)
41+
42+
43+
44+
## Happy Coding!

‎Maths quiz game/quiz.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
5+
}
6+
7+
section{
8+
height: 100vh;
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
align-items: center;
13+
background-color: azure;
14+
}
15+
section h1{
16+
padding-bottom: 30px;
17+
font-size: 2rem;
18+
text-shadow: 1px 1px 2px white;
19+
}
20+
.centerdiv{
21+
width: 500px;
22+
height: 400px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
flex-direction: column;
27+
background-color: aquamarine;
28+
}
29+
.insertBox{
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
height: 100px;
34+
}
35+
#v1, #v2{
36+
text-align: center;
37+
padding: 20px 30px;
38+
width: 35px;
39+
font-size: 30px;
40+
box-shadow: 1px 1px 0px #999,
41+
2px 2px 0px #999,
42+
3px 3px 0px #999,
43+
4px 4px 0px #999;
44+
}
45+
.box1 p{
46+
font-size: 60px;
47+
margin: 1px 5px;
48+
}
49+
.middleBox #answer{
50+
margin: 30px 0;
51+
padding: 5px 0;
52+
font-size: 30px;
53+
text-align: center;
54+
width: 180px;
55+
}
56+
.sentBox button{
57+
padding: 10px 20px;
58+
font-size: 0.8rem;
59+
color: white;
60+
border: none;
61+
background-color: rgb(1, 121, 81);
62+
border-radius: 2px;
63+
}

‎Maths quiz game/quiz.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="quiz.css">
8+
<title>Math Game</title>
9+
</head>
10+
<body>
11+
<section>
12+
<h1>Maths Quiz</h1>
13+
<div class="centerdiv">
14+
<div class="insertBox">
15+
<div class="box1">
16+
<input type="text" id="v1">
17+
</div>
18+
<div class="box1">
19+
<p>+</p>
20+
</div>
21+
<div class="box1">
22+
<input type="text" id="v2">
23+
</div>
24+
</div>
25+
<div class="middleBox">
26+
<input type="text" id="answer">
27+
</div>
28+
<div class="sentBox">
29+
<button onclick={jsGame()}>Check answer</button>
30+
</div>
31+
</div>
32+
</section>
33+
34+
35+
<script>
36+
var n1,n2;
37+
n1 = Math.floor(Math.random()*10+1);
38+
n2 = Math.floor(Math.random()*10+1);
39+
40+
console.log(n1,n2);
41+
42+
document.getElementById('v1').value = n1;
43+
document.getElementById('v2').value = n2;
44+
45+
var ans = n1+n2;
46+
async function jsGame() {
47+
var userans = document.getElementById("answer").value;
48+
console.log(userans);
49+
50+
if(userans == ans){
51+
alert('Well Done! Your answer is correct. ');
52+
}
53+
else{
54+
alert("Correct answer is " + ans + ". Try again. " );
55+
}
56+
history.go(0);
57+
}
58+
</script>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)