Create a Math Quiz App using HTML CSS and JavaScript. Hello, in today's tutorial video I'm going to show you how to create a math quiz app/game using HTML, CSS, and javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Math Quiz</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.quiz {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: darkCyan;
border-radius: 5px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
padding: 30px;
}
.quiz * {
width: 100%;
height: 25px;
margin-top: 2px;
text-align: center;
}
.reset {
color: #fff;
text-decoration: underline;
cursor: pointer;
}
.score {
color: #fff;
font-weight: bolder;
}
h1 {
color: #fff;
}
.result {
color: pink;
font-weight: bolder;
}
.next {
display: none;
}
</style>
</head>
<body>
<form class='quiz'>
<span class='result'>Solve It</span>
<h1>
<span class='quest'>10+10</span>
<span> = ?</span>
</h1>
<input type='number' class='ans' placeholder='0' required>
<input type='submit' class='submit'>
<button type='button' class='next'>Play next</button>
<button type='button' class='score' disabled>Score</button>
<span class='reset'>Reset score</span>
</form>
<script>
let quiz = document.querySelector(".quiz");
let result = document.querySelector(".result");
let quest = document.querySelector(".quest");
let ans = document.querySelector(".ans");
let submit = document.querySelector(".submit");
let next = document.querySelector(".next");
let score = document.querySelector(".score");
let reset = document.querySelector(".reset");
let prevScore = ~~localStorage.getItem('score');
score.textContent = `Score : ${prevScore}`;
function gq() {
let op = ['+', '-', '*', '/'];
let r1 = ~~(Math.random() * 5) + 5;
let r2 = ~~(Math.random() * 5);
let rop = ~~(Math.random() * 4);
quest.textContent = `${r1} ${op[rop]} ${r2}`;
}
gq();
quiz.addEventListener('submit', (e) => {
e.preventDefault();
submit.style.display = "none";
next.style.display = "block";
let cans = ~~Function('return ' + quest.textContent)().toFixed();
if (cans == ans.value) {
result.textContent = 'Wow Score Added!';
let scr = prevScore + 5;
prevScore = scr;
localStorage.setItem("score", prevScore);
score.textContent = `Score : ${prevScore}`;
} else {
result.textContent = `Oops! Correct ans is ${cans}`;
}
})
next.addEventListener('click', () => {
gq();
result.textContent = 'Solve It';
quiz.reset();
next.style.display = "none";
submit.style.display = "block";
})
reset.addEventListener('click', () => {
localStorage.removeItem('score');
location.reload();
})
</script>
</body>
</html>