Activity 3 Counting Drill Game
<!DOCTYPE html>
<html>
<head>
<title> Activity 3 Counting Drill Game </title>
<style>
box-sizing: border-box;
}
h1.font1 {
margin-left: 10%;
}
fieldset {
width: 25%;
background-color: #e1eff2;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5%;
margin-top: 20px;
margin-left: 18%;
border-style: dashed;
border-width: 5px;
border-color: brown;
text-align: center;
}
</style>
</head>
<body>
<fieldset>
<h1 style="font-family:'Comic san'">Activity 3 Counting Drill Game </h1>
<h2 style="font-family:'Comic san'">Count how many square on the screen! </h2>
<canvas id="myCanvas" width="900" height="200" style="border:none;">
</canvas>
<p id="demo" class="demo"> </p>
<label> How many shapes do you see? </label>
<input type="number" id="answer"> </input>
<button id="eraser" onclick="eraser()" > Next </button>
<button id="compare" onclick="compare();eraser()" > Answer </button>
<p> <b> Score: </b> </p> <div id="myScore"> 0 </div>
</fieldset>
<script type = "text/javascript">
var score=0;
function colors()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
x=Math.round(Math.random()*10+1);
for(f=1; f<=x;f++)
{
switch(f)
{
case 1: c="#F86D66"; break
case 2: c="#F89766";break
case 3: c="#F8CE66"; break
case 4: c="#66F86A";break
case 5: c="#66B8F8"; break
case 6: c="#8766F8"; break
case 7: c="#8766F8"; break
case 8: c="#00FFE8"; break
case 9: c="#B48E4B"; break
case 10: c="#8B8985"; break
}
document.getElementById("compare").style.backgroundColor=c;
document.getElementById("compare").style.color="white";
document.getElementById("compare").style.width="200px";
document.getElementById("compare").style.height="100px";
document.getElementById("eraser").style.backgroundColor=c;
document.getElementById("eraser").style.color="white";
document.getElementById("eraser").style.width="200px";
document.getElementById("eraser").style.height="100px";
ctx.font = "25px comic san ";
ctx.fillStyle=c;
ctx.fillRect(10+f*100,100, 50, 50);
}
}
function eraser()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,1200,300);
colors();
}
colors()
function compare()
{
ans=document.getElementById("answer").value
if (ans==x) {
score += 1;
document.getElementById("myScore").innerHTML=score.toString()
document.getElementById("demo").innerHTML="GREAT!! Your answer is correct!"
}
else {
document.getElementById("demo").innerHTML="Sorry,Your answer is wrong. Better Luck Next Time"
}
}
</script>
</body>
</html>
</html>
</html>
Comments
Post a Comment