game
const option1 = document.getElementById("option1");
const option2 = document.getElementById("option2");
const option3 = document.getElementById("option3");
var answer = document.getElementById("myAudio");
var answer = 0;
function generate_equation(){
var num1 = Math.floor( Math.random()*13);
var num2 = Math.floor( Math.random()*13);
var dummyAnswer1 = Math.floor( Math.random()*13);
var dummyAnswer2 = Math.floor( Math.random()*13);
var allAnswer = [];
var switchAnswer = [];
answer = num1 + num2;
document.getElementById("num1").innerHTML = num1;
document.getElementById("num2").innerHTML = num2;
option1.innerHTML = answer;
option2.innerHTML = dummyAnswer1;
option3.innerHTML = dummyAnswer2;
}
option1.addEventListener("click",function(){
if (option1.innerHTML == answer){
generate_equation();
}
else{
audio.play();
}
});
option2.addEventListener("click",function(){
if (option2.innerHTML == answer){
generate_equation();
}
else{
audio.play();
}
});
option3.addEventListener("click",function(){
if (option3.innerHTML == answer){
generate_equation();
}
else{
audio.play();
}
});
generate_equation();
css
body{
background-color: grey;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container{
background-color: pink;
padding: 20px;
display: flex;
}
.container h1{
color: white;
}
.container ul{
list-style-type: none;
font-size: 20px;
}
.container li{
margin-top: 10px;
float: left;
}
.container a{
color: rgb(74, 7, 7);
text-decoration: none;
margin-left: 20px;
font-size: 25px;
}
.wrapper{
display: grid;
grid-template-columns: 82% 18%;
}
.equation{
font-size: 65px;
background-color: rgb(173, 160, 160);
align-items: center;
border-radius: 10px;
padding-top: 15%;
margin-top: 10px;
}
.equation h1{
display: inline;
padding-left: 20px;
padding-bottom: 40px;
margin-left: 50px;
}
.answer-options{
font-size: 67px;
margin-left: 40px;
}
.answer-options h1{
color: brown;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/kidsgame.css">
</head>
<body>
<audio src="../"></audio>
<header>
<div class="container">
<h1>Math For Kids</h1>
<ul>
<li class="current"><a href="kidsgame.html">Add</a></li>
<li><a class="" href="subtract.html">Subtract</a></li>
<li><a class="" href="multiply.html">Multiply</a></li>
<li><a class="" href="divide.html">divide</a></li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="equation">
<h1 id="num1" style="color: red;">1</h1>
<h1 style="color: yellow;">+</h1>
<h1 id="num2" style="color: blue;">1</h1>
<h1 style="color: black;">=</h1>
<h1 style="color: pink;">?</h1>
</div>
<div class="answer-options">
<h1 id="option1" >1</h1>
<h1 id="option2" >2</h1>
<h1 id="option3" >3</h1>
</div>
</div>
<script src="../javascript/kidsgame.js"></script>
</body>
</html>
Comments
Post a Comment