Ano
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Math Quiz Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 40px;
background-color: #f0f8ff;
}
.quiz-box {
background: white;
padding: 20px;
margin: auto;
max-width: 400px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.question {
font-size: 24px;
margin-bottom: 20px;
}
.options button {
display: block;
width: 100%;
margin: 10px 0;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: none;
background-color: #e0e0e0;
cursor: pointer;
}
.score, .timer {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="quiz-box">
<div class="question" id="question">Loading...</div>
<div class="options" id="options"></div>
<div class="score">Skor: <span id="score">0</span></div>
<div class="timer">Masa: <span id="time">30</span>saat</div>
</div> <script>
const questionEl = document.getElementById("question");
const optionsEl = document.getElementById("options");
const scoreEl = document.getElementById("score");
const timeEl = document.getElementById("time");
let score = 0;
let time = 30;
let currentAnswer = 0;
function generateQuestion() {
const num1 = Math.floor(Math.random() * 20);
const num2 = Math.floor(Math.random() * 20);
const operator = ["+", "-", "*", "/"][Math.floor(Math.random() * 4)];
let question = `${num1} ${operator} ${num2}`;
let answer = eval(question);
answer = Math.round(answer * 10) / 10; // round to 1 decimal if needed
currentAnswer = answer;
questionEl.textContent = `Berapakah hasil: ${question} ?`;
// Generate choices
optionsEl.innerHTML = "";
let choices = [answer];
while
Comments
Post a Comment