🎮 Game Kuis Pilihan Ganda dengan Mode Gelap, Timer, dan Soal Acak



🎮 Game Kuis Pilihan Ganda dengan Mode Gelap, Timer, dan Soal Acak

Ingin belajar sambil bermain kuis interaktif langsung dari browser? Berikut adalah proyek game kuis sederhana berbasis HTML, CSS, dan JavaScript yang memiliki tampilan modern mode gelap, dilengkapi dengan soal acak dan timer otomatis per soal.

Game ini cocok digunakan oleh pelajar, pengajar, maupun siapa saja yang ingin berlatih pengetahuan umum atau membuat proyek JavaScript kecil yang menarik.

🔥 Fitur Utama

✅ Mode Gelap yang nyaman di mata

✅ Soal diacak otomatis setiap kali reload

✅ Timer per soal (default: 15 detik)

✅ Tampilan interaktif saat menjawab

✅ Skor akhir ditampilkan dengan tombol replay

💡 Cara Memasang & Menjalankan

  1. Buat folder bernama kuis-game.
  1. Buat 3 file berikut di dalam folder tersebut:
    • index.html
    • style.css
    • script.js
  1. Buka file index.html di browser favoritmu.
  1. Selesai! Game akan langsung berjalan.

📁 File 1: index.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Game Kuis Interaktif</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1 class="title">🎮 Kuis Pintar</h1>
    <div class="question-box">
      <div class="progress" id="progress">Soal 1 dari 10</div>
      <div class="timer" id="timer">15 detik</div>
      <div class="question" id="question">Memuat...</div>
      <div class="choices" id="choices"></div>
      <button class="next-btn hide" id="nextBtn">Pertanyaan Selanjutnya</button>
      <div class="score hide" id="score"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

🎨 File 2: style.css

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  width: 90%;
  max-width: 700px;
  padding: 2rem;
  background-color: rgba(30, 30, 30, 0.9);
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

.title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #00d8ff;
}

.progress {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #bbb;
  text-align: center;
}

.question {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-align: center;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

button {
  background: #333;
  color: #f1f1f1;
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

button:hover {
  background: #444;
  transform: scale(1.02);
}

.correct {
  background-color: #2e7d32;
}

.wrong {
  background-color: #c62828;
}

.score {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 1rem;
  color: #00e676;
}

.next-btn {
  margin-top: 1rem;
  background: #2196f3;
  font-weight: bold;
}

.hide {
  display: none;
}

.timer {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #ffab00;
  font-weight: bold;
}

⚙️ File 3: script.js

let questions = [
  { question: "Apa ibukota Indonesia?", choices: ["Jakarta", "Bandung", "Surabaya", "Medan"], answer: "Jakarta" },
  { question: "Berapa hasil dari 5 + 3?", choices: ["5", "8", "9", "10"], answer: "8" },
  { question: "Siapa penemu lampu pijar?", choices: ["Tesla", "Edison", "Newton", "Einstein"], answer: "Edison" },
  { question: "Apa warna primer?", choices: ["Merah, Kuning, Biru", "Hijau, Ungu, Oranye", "Merah, Hijau, Biru", "Putih, Hitam, Abu"], answer: "Merah, Kuning, Biru" },
  { question: "Planet ke-3 dari matahari?", choices: ["Mars", "Venus", "Bumi", "Saturnus"], answer: "Bumi" },
  { question: "Alat musik petik?", choices: ["Piano", "Gitar", "Drum", "Saxophone"], answer: "Gitar" },
  { question: "Bahasa pemrograman web?", choices: ["HTML", "Python", "Java", "C++"], answer: "HTML" },
  { question: "Gunung tertinggi di dunia?", choices: ["Everest", "Semeru", "Kilimanjaro", "Andes"], answer: "Everest" },
  { question: "Binatang yang bisa terbang?", choices: ["Ikan", "Burung", "Singa", "Ular"], answer: "Burung" },
  { question: "Warna langit saat cerah?", choices: ["Merah", "Hitam", "Biru", "Kuning"], answer: "Biru" }
];

// Acak soal
questions = questions.sort(() => Math.random() - 0.5);

let currentQuestionIndex = 0;
let score = 0;
let timerInterval;
let timeLeft = 15;

const questionEl = document.getElementById("question");
const choicesEl = document.getElementById("choices");
const nextBtn = document.getElementById("nextBtn");
const scoreEl = document.getElementById("score");
const progressEl = document.getElementById("progress");
const timerEl = document.getElementById("timer");

function startTimer() {
  timeLeft = 15;
  timerEl.textContent = `${timeLeft} detik`;

  timerInterval = setInterval(() => {
    timeLeft--;
    timerEl.textContent = `${timeLeft} detik`;
    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      showCorrectAnswer();
      nextBtn.classList.remove("hide");
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(timerInterval);
}

function showQuestion() {
  resetState();
  const currentQuestion = questions[currentQuestionIndex];
  questionEl.textContent = currentQuestion.question;
  progressEl.textContent = `Soal ${currentQuestionIndex + 1} dari ${questions.length}`;
  timerEl.classList.remove("hide");

  currentQuestion.choices.forEach(choice => {
    const button = document.createElement("button");
    button.textContent = choice;
    button.addEventListener("click", () => selectAnswer(button, currentQuestion.answer));
    choicesEl.appendChild(button);
  });

  startTimer();
}

function selectAnswer(button, correctAnswer) {
  stopTimer();
  const isCorrect = button.textContent === correctAnswer;
  if (isCorrect) {
    button.classList.add("correct");
    score++;
  } else {
    button.classList.add("wrong");
  }

  Array.from(choicesEl.children).forEach(btn => {
    btn.disabled = true;
    if (btn.textContent === correctAnswer) {
      btn.classList.add("correct");
    }
  });

  nextBtn.classList.remove("hide");
}

function showCorrectAnswer() {
  Array.from(choicesEl.children).forEach(btn => {
    btn.disabled = true;
    if (btn.textContent === questions[currentQuestionIndex].answer) {
      btn.classList.add("correct");
    }
  });
}

function resetState() {
  stopTimer();
  nextBtn.classList.add("hide");
  scoreEl.classList.add("hide");
  timerEl.textContent = "";
  while (choicesEl.firstChild) {
    choicesEl.removeChild(choicesEl.firstChild);
  }
}

nextBtn.addEventListener("click", () => {
  currentQuestionIndex++;
  if (currentQuestionIndex < questions.length) {
    showQuestion();
  } else {
    showScore();
  }
});

function showScore() {
  resetState();
  questionEl.textContent = "🎉 Kuis Selesai!";
  progressEl.textContent = "";
  scoreEl.textContent = `Skor Anda: ${score} dari ${questions.length}`;
  scoreEl.classList.remove("hide");
  nextBtn.textContent = "Ulangi Kuis";
  nextBtn.classList.remove("hide");
  nextBtn.onclick = () => location.reload();
}

showQuestion();

🚀 Siap Coba?

Cukup buka file index.html di browser — tidak perlu hosting, tidak perlu server! Bisa dimainkan offline, cocok juga untuk pembelajaran di kelas.

Ingin menambahkan fitur lain seperti kategori soal, leaderboard, atau penyimpanan skor lokal? Tinggal lanjutkan dari kode ini. Kalau butuh bantuan mengembangkan fitur tambahan, saya siap bantu!

Komentar

Posting Komentar