In this project, we would make a math web app with html5, css3 and javascript. Firstly we would design the whole app structure with html and make it presentable with css.
Then we would add math logic and much more to it through javascript.
Name the html file as "index.html". The html code is as follows -
<!DOCTYPE html>
<html lang="en">
<header>
<title>maths game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="style.css">
</header>
<body>
<div id="container">
<div id="score">
Score : <span id="scorevalue">0</span>
</div>
<div id="correct">correct</div>
<div id="tryagain">try again</div>
<div id="quest"><span id="int1">0</span>x<span id="int2">0</span></div>
<div id="instruction">choose the correct</div>
<div id="choices">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</div>
<div id="startreset">start game</div>
<div id="timeremaining">time remaining : <span id="timeremainingvalue">60</span> sec</div>
<div id="gameover">GAME OVER!<br>YOUR SCORE IS <span id="finalscore">0</span></div>
</div>
<script src="javascript.js"></script>
</body>
</html>
the css code is following:
html{
height: 100%;
background: radial-gradient(circle,white,gray);
}
#container{
height: 450px;
width: 600px;
background-color: cornflowerblue;
border-radius: 10px;
box-shadow: 4px 4px 0px 0px darkcyan;
padding: 20px;
margin: 100px auto;
position: relative;
}
#score{
background-color: lightcoral;
font-size: 25px;
color: floralwhite;
border-radius: 4px;
box-shadow: 0px 4px 0px indianred;
position: absolute;
left: 510px;
padding: 10px;
}
#correct{
padding:10px;
position: absolute;
left: 260px;
font-size: 25px;
background-color: lightgreen;
border-radius: 5px;
color: antiquewhite;
display: none;
}
#tryagain{
padding:10px;
position: absolute;
left: 260px;
font-size: 25px;
background-color: orangered;
border-radius: 5px;
color: antiquewhite;
display: none;
}
#quest{
height: 150px;
width: 500px;
background-color: palegoldenrod;
margin: 70px auto 10px auto;
font-size: 100px;
color: rebeccapurple;
text-align: center;
font-family: cursive, sans-serif;
box-shadow: 4px 4px 0px sandybrown;
}
#instruction{
height: 50px;
width: 500px;
background-color: salmon;
margin: 5px auto;
text-align: center;
color: midnightblue;
line-height: 45px;
font-size: 30px;
box-shadow: 4px 4px 0px tomato;
}
#choices{
height: 100px;
width: 500px;
margin: 15px auto;
}
.box{
height: 85px;
width: 85px;
float: left;
margin-right: 53px;
background-color: mintcream;
box-shadow: 4px 4px 0px peachpuff;
border-radius: 3px;
transition: 0.1s;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
text-align: center;
line-height: 85px;
font-size: 20px;
font-family: cursive, sans-serif;
position: relative;
}
#box4{
margin-right: 0;
}
.box:hover, #startreset:hover{
background-color: plum;
box-shadow: 0px 4px purple;
}
.box:active, #startreset:active{
box-shadow: 0px 0px purple;
top: 6px;
}
#startreset{
width: 150px;
padding: 5px;
background-color: skyblue;
box-shadow: 4px 4px 0px slateblue;
border-radius: 2px;
transition: 0.1s;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
text-align: center;
font-size: 20px;
font-family: cursive, sans-serif;
position: relative;
margin: 0 auto;
}
#timeremaining{
padding: 10px;
width: 170px;
background-color: yellowgreen;
box-shadow: 4px 4px 0px seagreen;
border-radius: 5px;
text-align: center;
margin: 0px auto;
left: 430px;
display: none;
position: absolute;
top: 430px;
}
#gameover{
position: absolute;
top: 100px;
left: 120px;
height: 300px;
width: 400px;
text-align: center;
color: seashell;
background: linear-gradient(#F3CA6B,orange);
font-family: cursive, sans-serif;
font-size: 40px;
line-height: 120px;
z-index: 2;
display: none;
}
// if we click on the start/reset
//if we are playing
//reload page
//if we are not playing
//set score to 0
//show countdown box
//reduce time by 1 sec in loops
//timeleft
//yes - continue
//no-gameover
//change button to reset
//generate new q&a
//if we click on answer box
//if we are playing
//correct
//yes
//increase score
//show correct box for 1 sec
//generate new q&a
//no
//show try again for 1 secvar playing=false;
var score;
var action;
var timeremaining;
var correctanswer;
var correctbox;
var incorrect;
var i;
document.getElementById("startreset").onclick=function(){
if(playing==true){
location.reload();
}
else{
playing=true;
score=0;
hide("gameover");
document.getElementById("scorevalue").innerHTML=score;
show("timeremaining");
document.getElementById("startreset").innerHTML="Reset Game";
timeremaining=60;
document.getElementById("timeremainingvalue").innerHTML=timeremaining;
startcountdown();
generate();
for(i=1;i<5;i++){
document.getElementById("box"+i).onclick=function(){
if(playing==true) {
if(this.innerHTML==correctanswer){
score++;
document.getElementById("scorevalue").innerHTML=score;
hide("tryagain");
show("correct");
setTimeout(function(){
hide("correct");
}, 1000);
generate();
}
else{
hide("correct");
show("tryagain");
setTimeout(function(){
hide("tryagain");
}, 1000);
}
}
}
}
}
}
//functions -
function startcountdown(){
action = setInterval(function(){
timeremaining-=1;
document.getElementById("timeremainingvalue").innerHTML=timeremaining;
if(timeremaining==0){
show("gameover");
hide("timeremaining");
hide("correct");
hide("tryagain");
clearInterval(action);
playing=false;
document.getElementById("startreset").innerHTML="Start Game";
document.getElementById("finalscore").innerHTML=score;
}
},1000)
}
function hide(id){
document.getElementById(id).style.display="none";
}
function show(id){
document.getElementById(id).style.display="block";
}
// generate ques and answ
function generate(){
var x = 1 +Math.round(9*Math.random());
var y = 1 +Math.round(9*Math.random());
correctanswer = x*y;
document.getElementById("int1").innerHTML=x;
document.getElementById("int2").innerHTML=y;
//random box for answer
correctbox=1+Math.round(3*Math.random());
document.getElementById("box"+correctbox).innerHTML=correctanswer;
for(i=1;i<5;i++){
if(i!=correctbox){
do{
incorrect=(1 +Math.round(9*Math.random())) *(1 +Math.round(9*Math.random()));
document.getElementById("box"+i).innerHTML= incorrect;}
while(correctanswer==incorrect){
incorrect=59;
}
}
}
}
0 Comments