🧠 Math Challenge: Game Edukasi Matematika Online yang Seru dan Penuh Warna!

Math Challenge adalah aplikasi edukatif berbasis web yang dirancang untuk mengasah kemampuan berhitung dengan cara yang seru, penuh warna, dan menantang! Cocok dimainkan oleh anak-anak, pelajar, hingga orang dewasa yang ingin menguji kecepatan dan ketepatan dalam menyelesaikan soal matematika.

🎮 Fitur Unggulan Math Challenge

✅ Tingkat Kesulitan Fleksibel: pilih level mudah, sedang, atau sulit.

✅ Timer 10 Detik: jawab soal sebelum waktu habis!

✅ Skor Reset Jika Salah: mode tantangan bikin makin seru.

✅ Latar Gelap Warna-Warni: tetap kontras dan enak dipandang.

✅ Pesan Motivasi: kata-kata semangat muncul saat kamu menjawab dengan benar.

🔧 Cara Memasang Aplikasi Ini

Cukup salin dan simpan kode berikut menjadi tiga file: index.html, style.css, dan script.js di folder yang sama. Lalu buka file index.html di browser.

🗂 File: `index.html`

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Math Challenge</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Math Challenge!</h1>

    <div class="controls">
      <label for="level">Pilih Kesulitan:</label>
      <select id="level" onchange="startNewChallenge()">
        <option value="easy">Mudah</option>
        <option value="medium">Sedang</option>
        <option value="hard">Sulit</option>
      </select>
    </div>

    <div class="challenge-box">
      <div id="question">5 + 3 = ?</div>
      <input type="number" id="answer" placeholder="Jawaban kamu" />
      <button onclick="checkAnswer()">Cek Jawaban</button>
      <div id="feedback"></div>
      <div class="score">Skor: <span id="score">0</span></div>
      <div class="timer">Waktu: <span id="timer">10</span> detik</div>
    </div>

    <button onclick="startNewChallenge()">Soal Baru</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

🎨 File: `style.css`

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #121212;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: background 0.5s ease;
}

.container {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  max-width: 400px;
  width: 100%;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #ff6b6b, #fddb3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.challenge-box {
  margin: 1rem 0;
}

#question {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #00ffff;
}

input[type="number"] {
  padding: 0.5rem;
  font-size: 1.2rem;
  border-radius: 8px;
  border: none;
  margin-bottom: 1rem;
  width: 60%;
  text-align: center;
}

button {
  background: #ff6b6b;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: 0.3s;
}

button:hover {
  background: #ff3b3b;
}

.score {
  margin-top: 1rem;
  font-weight: bold;
  color: #fddb3a;
}

#feedback {
  margin-top: 0.5rem;
  font-size: 1.1rem;
}

.controls {
  margin-bottom: 1rem;
}

select {
  padding: 0.4rem;
  font-size: 1rem;
  border-radius: 8px;
  margin-left: 0.5rem;
}

.timer {
  margin-top: 1rem;
  font-size: 1rem;
  color: #00ffcc;
}

🧠 File: `script.js`

let score = 0;
let correctAnswer = 0;
let answered = false;
let timer;
let timeLeft = 10;

const messages = [
  "Keren!", "Luar biasa!", "Hebat!", "Mantap!", "Bagus!", "Semangat terus!"
];

function getRandomMessage() {
  return messages[Math.floor(Math.random() * messages.length)];
}

function generateQuestion() {
  const level = document.getElementById("level").value;
  let a, b, operator;

  switch (level) {
    case "easy":
      a = rand(1, 10);
      b = rand(1, 10);
      operator = "+";
      correctAnswer = a + b;
      break;
    case "medium":
      a = rand(1, 20);
      b = rand(1, 20);
      operator = Math.random() < 0.5 ? "+" : "-";
      correctAnswer = operator === "+" ? a + b : a - b;
      break;
    case "hard":
      a = rand(1, 100);
      b = rand(1, 10);
      const ops = ["+", "-", "*", "/"];
      operator = ops[Math.floor(Math.random() * ops.length)];
      switch (operator) {
        case "+": correctAnswer = a + b; break;
        case "-": correctAnswer = a - b; break;
        case "*": correctAnswer = a * b; break;
        case "/":
          correctAnswer = Math.floor(a / b);
          a = correctAnswer * b; // Pastikan hasil pembagian bulat
          break;
      }
      break;
  }

  document.getElementById("question").textContent = `${a} ${operator} ${b} = ?`;
  document.getElementById("answer").value = "";
  document.getElementById("feedback").textContent = "";
  answered = false;

  randomizeBackground();
  resetTimer();
}

function checkAnswer() {
  if (answered) return;

  clearInterval(timer);
  const userAnswer = parseInt(document.getElementById("answer").value);
  const feedback = document.getElementById("feedback");

  if (userAnswer === correctAnswer) {
    feedback.textContent = getRandomMessage();
    feedback.style.color = "#00ff88";
    score++;
  } else {
    feedback.textContent = `Salah! Jawaban benar: ${correctAnswer}`;
    feedback.style.color = "#ff6b6b";
    score = 0; // mode tantangan
  }

  document.getElementById("score").textContent = score;
  answered = true;
}

function startNewChallenge() {
  generateQuestion();
}

function resetTimer() {
  timeLeft = 10;
  document.getElementById("timer").textContent = timeLeft;

  clearInterval(timer);
  timer = setInterval(() => {
    timeLeft--;
    document.getElementById("timer").textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(timer);
      if (!answered) {
        document.getElementById("feedback").textContent = `Waktu habis! Jawaban benar: ${correctAnswer}`;
        document.getElementById("feedback").style.color = "#ff6b6b";
        score = 0;
        document.getElementById("score").textContent = score;
        answered = true;
      }
    }
  }, 1000);
}

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomizeBackground() {
  const darkColors = [
    "#1e1e2f", "#2c2c3a", "#252530", "#1a1a2e", "#202034",
    "#1f1f3d", "#191933", "#282844", "#232336", "#1c1c28"
  ];
  const selected = darkColors[Math.floor(Math.random() * darkColors.length)];
  document.body.style.background = selected;
}

window.onload = startNewChallenge;

✨ Penutup

Aplikasi Math Challenge ini cocok digunakan untuk belajar, mengajar, atau sekadar mengisi waktu luang dengan cara yang menyenangkan dan mendidik. Jangan ragu untuk memodifikasi tampilannya, menambahkan skor tertinggi, atau menambahkan suara agar makin seru!

CandraAndiP

Cari Blog Ini