Untuk menarik minat belajar siswa di kelas maka kamu harus memiliki skill mengajar yang inovatif. salah satunya dengan game sederhana ini cukup membuat peserta didik lebih bersemangat dalam belajar.
Game math ini dibuat dengan HTML sederhana.
Simpan file ini dengan nama math.html
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
.game-container {
margin-top: 50px;
}
.question {
font-size: 5em;
margin-bottom: 20px;
}
.answer {
font-size: 1.5em;
padding: 10px;
width: 100px;
text-align: center;
border-radius: 5px;
border: 2px solid #2980b9;
}
button {
margin-top: 10px;
padding: 10px 20px;
font-size: 1em;
background-color: #e67e22;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #d35400;
}
.message {
font-size: 1.5em;
font-weight: bold;
color: #e74c3c;
}
</style>
</head>
<body>
<audio id="bgMusic" loop autoplay>
<source src="background.mp3" type="audio/mpeg">
</audio>
<audio id="correctSound" src="correct.mp3"></audio>
<audio id="wrongSound" src="wrong.mp3"></audio>
<div class="game-container">
<h1>Game Matematika</h1>
<p>Jawablah pertanyaan dengan benar!</p>
<div class="question" id="question"></div>
<input type="number" id="answer" class="answer" placeholder="Jawab" autofocus />
<br>
<button onclick="checkAnswer()">Kirim Jawaban</button>
<p id="message" class="message"></p>
</div>
<script>
let num1, num2, operator, correctAnswer;
const operators = ['+', '-', '*', '/'];
function generateQuestion() {
num1 = Math.floor(Math.random() * 10) + 1;
num2 = Math.floor(Math.random() * 10) + 1;
operator = operators[Math.floor(Math.random() * operators.length)];
if (operator === '/' && num1 % num2 !== 0) {
generateQuestion();
return;
}
correctAnswer = eval(`${num1} ${operator} ${num2}`);
document.getElementById("question").innerText = `${num1} ${operator} ${num2} = ?`;
}
function checkAnswer() {
let userAnswer = parseFloat(document.getElementById("answer").value);
if (userAnswer === correctAnswer) {
document.getElementById("message").innerText = "✅ Jawaban Benar!";
document.getElementById("correctSound").play();
} else {
document.getElementById("message").innerText = "❌ Jawaban Salah! Coba Lagi.";
document.getElementById("wrongSound").play();
}
setTimeout(() => {
document.getElementById("message").innerText = "";
document.getElementById("answer").value = "";
generateQuestion();
}, 2000);
}
generateQuestion();
</script>
</body>
</div>
</div>
</div>
</div>
Note : jika menyertakan media seperti sound, gambar dan lainnya kamu wajib menyimpannya dalam 1 folder dan panggil sesuai dengan nama file.
Selamat Mencoba
0 komentar: