Edukolab
Loading...
Forum › Modul Interaktif & Multimedia (Video, Infografik, Podcast) › Matematika
Pengantar
………………………………………………
………………………………………………
Tujuan
……………………………………………….
Created By…………….
Berikut link Viideo : Matematika Dasar
Game Interaktif:
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Game Matematika Dasar</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #74ebd5, #ACB6E5);
text-align: center;
padding: 50px;
}
.game-box {
background: white;
padding: 30px;
border-radius: 15px;
width: 350px;
margin: auto;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
h1 {
color: #333;
}
#question {
font-size: 28px;
margin: 20px 0;
}
input {
padding: 10px;
font-size: 18px;
width: 100px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 10px;
border: none;
border-radius: 8px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
font-size: 18px;
margin-top: 15px;
font-weight: bold;
}
#score {
margin-top: 10px;
font-size: 18px;
color: #555;
}
</style>
</head>
<body>
<div class=”game-box”>
<h1>Game Matematika Dasar</h1>
<div id=”question”>Memuat soal…</div>
<input type=”number” id=”answer” placeholder=”Jawaban”>
<br>
<button onclick=”checkAnswer()”>Cek Jawaban</button>
<div id=”result”></div>
<div id=”score”>Skor: 0</div>
</div>
<script>
let num1, num2, operator;
let correctAnswer;
let score = 0;
function generateQuestion() {
num1 = Math.floor(Math.random() * 10) + 1;
num2 = Math.floor(Math.random() * 10) + 1;
const operators = [“+”, “-“, “×”];
operator = operators[Math.floor(Math.random() * operators.length)];
if (operator === “+”) {
correctAnswer = num1 + num2;
} else if (operator === “-“) {
correctAnswer = num1 – num2;
} else {
correctAnswer = num1 * num2;
}
document.getElementById(“question”).innerText =
${num1} ${operator} ${num2} = ?;
document.getElementById(“answer”).value = “”;
document.getElementById(“result”).innerText = “”;
}
function checkAnswer() {
const userAnswer = parseInt(document.getElementById(“answer”).value);
if (userAnswer === correctAnswer) {
score += 10;
document.getElementById(“result”).innerText = “Benar! 🎉”;
document.getElementById(“result”).style.color = “green”;
} else {
document.getElementById(“result”).innerText =
Salah! Jawaban: ${correctAnswer};
document.getElementById(“result”).style.color = “red”;
}
document.getElementById(“score”).innerText = Skor: ${score};
setTimeout(generateQuestion, 1500);
}
// Mulai game
generateQuestion();
</script>
</body>
</html>