<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Math Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h1>Math Quiz</h1>
<a href ="game.html"><h2>Start</h2></a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Math Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h1>Math Quiz</h1>
<div id = "gamecontent">
<p>Timer:</p>
<p id = "countdowntimer"></p>
<p id ="question"></p>
<p id ="feedback">Enter answer below</p>
<input id = "ans" type="text" size="40" onkeypress="getresponse(event)">
<br>
<p id = "score"></p>
</div>
</div>
</body>
<script src = "script.js"></script>
</html>
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
#countdowntimer{
background-color: white;
width:100px;
margin:auto;
font-size: 20px;
border-radius:5px;
}
#ans{
font-size: 25px;
width:100px;
text-align: center;
}
#question{
color:blue;
align-content: center;
font-size: 30px;
font-weight: 200;
background-color: yellow;
border-radius:5px;
}
#enter{
border-radius: 5px;
font-size: 20px;
height:50px;
padding:10px 50px 10px 50px;
background-color: aquamarine
}
.content{
background-color: lightblue;
max-width: 800px;
margin:auto;
border-color: black;
padding: 20px;
border-radius: 5px;
text-align: center;
min-height: 350px;
}
body {
background-color: white;
font-family: "Open Sans", sans-serif;
padding: 5px 25px;
font-size: 18px;
margin: 0;
color: #444;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
color: red;
}
var score = 0;
var num1 = 0;
var num2=0;
var answer = 0;
var countdown = 30;
document.getElementById("score").innerHTML = "score: " + score;
document.getElementById("countdowntimer").innerHTML = countdown;
var timer = setInterval(clock, 1000)
function clock(){
if(countdown>0){
countdown = countdown -1;
document.getElementById("countdowntimer").innerHTML = countdown;
}
else{
clearTimeout(timer);
document.getElementById("gamecontent").innerHTML
= "<h2>You got " + score + " questions correct</h2> <a href = \"index.html\"<h2>Play Again</h2></a>";
}
}
makeQuestion();
function makeQuestion(){
num1 = Math.round(Math.random()*10);
num2 = Math.round(Math.random()*10);
answer = num1 + num2;
//display question
question.innerHTML=num1 + " + " + num2 + " = ";
}
function getresponse(event){
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode == 13) {
var ua = document.getElementById("ans").value;
if (parseInt(ua)==answer){
feedback.innerHTML="Well Done";
score+=1;
}
else{
feedback.innerHTML="That was incorrect. The correct answer was " + answer;
}
document.getElementById("ans").value = "";
document.getElementById("score").innerHTML = "score: " + score;
makeQuestion();
}
}