<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kuis Komponen Jaringan Komputer</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    body {
      font-family: 'Poppins', sans-serif;
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }
  </style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen flex items-center justify-center p-4">

  <div class="w-full max-w-3xl bg-slate-800 rounded-2xl shadow-2xl overflow-hidden border border-slate-700 relative">
    
    <!-- Header App -->
    <header class="bg-slate-950/50 p-6 border-b border-slate-700/50 flex flex-col md:flex-row md:items-center justify-between gap-4">
      <div class="flex items-center space-x-3">
        <div class="bg-indigo-600 p-2.5 rounded-xl text-white">
          <i class="fa-solid fa-network-wired text-xl"></i>
        </div>
        <div>
          <h1 class="font-bold text-lg text-white leading-tight">NetQuiz Master</h1>
          <p class="text-xs text-slate-400">Uji Pengetahuan Jaringan Komputer</p>
        </div>
      </div>
      
      <!-- Live Stats (Quiz Mode) -->
      <div id="quiz-header-stats" class="hidden flex items-center justify-between md:justify-end space-x-6 bg-slate-900/60 px-4 py-2 rounded-xl border border-slate-700/60">
        <div class="flex items-center space-x-2">
          <i class="fa-regular fa-clock text-amber-400"></i>
          <span id="timer-display" class="font-mono text-lg font-bold text-amber-400">00:00</span>
        </div>
        <div class="h-4 w-px bg-slate-700"></div>
        <div class="text-xs text-slate-300">
          Soal: <span id="current-question-num" class="font-bold text-indigo-400">1</span>/15
        </div>
      </div>
    </header>

    <!-- Content Screen Area -->
    <main class="p-6 md:p-8">

      <!-- 1. SCREEN START -->
      <section id="screen-start" class="text-center space-y-6 py-4">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-indigo-500/10 text-indigo-400 rounded-full mb-2">
          <i class="fa-solid fa-server text-4xl"></i>
        </div>
        <h2 class="text-2xl md:text-3xl font-bold text-white">Tantangan Komponen Jarkom</h2>
        <p class="text-slate-300 max-w-md mx-auto text-sm leading-relaxed">
          Uji pemahaman Anda tentang hardware & perangkat lunak jaringan komputer. Terdapat 15 soal pilihan ganda dengan durasi waktu total.
        </p>

        <!-- Rules Box -->
        <div class="bg-slate-900/50 rounded-xl p-4 max-w-md mx-auto text-left border border-slate-700/50 space-y-2 text-xs text-slate-300">
          <div class="flex items-center space-x-2 text-indigo-400 font-semibold mb-1">
            <i class="fa-solid fa-circle-info"></i>
            <span>Aturan Main:</span>
          </div>
          <p class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-400 text-[10px]"></i> Total 15 Soal Pilihan Ganda</p>
          <p class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-400 text-[10px]"></i> Waktu Pengerjaan: 10 Menit</p>
          <p class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-400 text-[10px]"></i> Jawaban benar mendapatkan poin +10</p>
        </div>

        <button id="btn-start" class="w-full max-w-xs bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-3.5 px-6 rounded-xl shadow-lg shadow-indigo-600/30 transition-all transform hover:-translate-y-0.5 active:translate-y-0">
          Mulai Kuis <i class="fa-solid fa-arrow-right ml-2"></i>
        </button>
      </section>

      <!-- 2. SCREEN QUIZ -->
      <section id="screen-quiz" class="hidden space-y-6">
        <!-- Progress Bar -->
        <div class="w-full bg-slate-700/50 h-2 rounded-full overflow-hidden">
          <div id="quiz-progress" class="bg-indigo-500 h-full w-0 transition-all duration-300"></div>
        </div>

        <!-- Question Text -->
        <div class="bg-slate-900/40 p-5 rounded-xl border border-slate-700/40">
          <span id="question-category" class="text-[11px] font-semibold text-indigo-400 uppercase tracking-wider block mb-1">Kategori: Perangkat Jaringan</span>
          <h3 id="question-text" class="text-lg md:text-xl font-medium text-white leading-snug">
            Memuat pertanyaan...
          </h3>
        </div>

        <!-- Options Container -->
        <div id="options-container" class="grid grid-cols-1 gap-3">
          <!-- Transformed by JS -->
        </div>

        <!-- Footer Control Quiz -->
        <div class="flex items-center justify-between pt-4 border-t border-slate-700/50">
          <button id="btn-prev" class="hidden text-xs text-slate-400 hover:text-white px-3 py-2 rounded-lg hover:bg-slate-700/50 transition">
            <i class="fa-solid fa-chevron-left mr-1"></i> Sebelumnya
          </button>
          <div class="ml-auto">
            <button id="btn-next" disabled class="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium text-sm px-6 py-2.5 rounded-xl transition">
              Selanjutnya <i class="fa-solid fa-chevron-right ml-1"></i>
            </button>
          </div>
        </div>
      </section>

      <!-- 3. SCREEN RESULT -->
      <section id="screen-result" class="hidden space-y-6 text-center py-2">
        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-slate-900 border-4 border-indigo-500/30 mb-2 relative">
          <i id="result-icon" class="fa-solid fa-trophy text-3xl text-amber-400"></i>
        </div>

        <div>
          <h2 class="text-2xl font-bold text-white mb-1" id="result-title">Hasil Kuis Anda</h2>
          <p class="text-sm text-slate-400" id="result-message">Terima kasih telah menyelesaikan kuis!</p>
        </div>

        <!-- Stat Cards -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 max-w-2xl mx-auto">
          <div class="bg-slate-900/60 p-4 rounded-xl border border-slate-700/50 text-center">
            <div class="text-xs text-slate-400 mb-1">Skor Akhir</div>
            <div id="score-text" class="text-2xl font-bold text-indigo-400">0</div>
          </div>
          <div class="bg-slate-900/60 p-4 rounded-xl border border-slate-700/50 text-center">
            <div class="text-xs text-slate-400 mb-1">Benar</div>
            <div id="correct-count" class="text-2xl font-bold text-emerald-400">0</div>
          </div>
          <div class="bg-slate-900/60 p-4 rounded-xl border border-slate-700/50 text-center">
            <div class="text-xs text-slate-400 mb-1">Salah</div>
            <div id="wrong-count" class="text-2xl font-bold text-rose-400">0</div>
          </div>
          <div class="bg-slate-900/60 p-4 rounded-xl border border-slate-700/50 text-center">
            <div class="text-xs text-slate-400 mb-1">Waktu Dihabiskan</div>
            <div id="time-spent" class="text-2xl font-bold text-amber-400">00:00</div>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2">
          <button id="btn-restart" class="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-500 text-white font-medium px-6 py-3 rounded-xl transition text-sm">
            <i class="fa-solid fa-rotate-right mr-2"></i> Coba Lagi
          </button>
          <button id="btn-review" class="w-full sm:w-auto bg-slate-700 hover:bg-slate-600 text-white font-medium px-6 py-3 rounded-xl transition text-sm">
            <i class="fa-solid fa-list-check mr-2"></i> Review Pembahasan
          </button>
        </div>

        <!-- Review Section (Accordion/Scroll) -->
        <div id="review-container" class="hidden text-left mt-6 border-t border-slate-700/50 pt-6">
          <h3 class="text-base font-semibold text-white mb-4 flex items-center justify-between">
            <span>Pembahasan Jawaban</span>
            <span class="text-xs text-slate-400 font-normal">15 Soal</span>
          </h3>
          <div id="review-list" class="space-y-3 max-h-80 overflow-y-auto pr-2 custom-scrollbar">
            <!-- Review items injected here -->
          </div>
        </div>
      </section>

    </main>

  </div>

  <script>
    // DATA SOAL JARKOM (15 Soal)
    const quizQuestions = [
      {
        id: 1,
        question: "Perangkat jaringan yang berfungsi menghubungkan beberapa jaringan berbeda segmen/IP address dan menentukan rute terbaik adalah...",
        options: [
          "Switch",
          "Router",
          "Hub",
          "Access Point"
        ],
        answer: 1, // Index 1 = Router
        explanation: "Router bekerja pada Layer 3 (Network) OSI untuk menghubungkan jaringan yang berlainan segmen dan mengarahkan paket data (routing)."
      },
      {
        id: 2,
        question: "Perangkat yang digunakan untuk menghubungkan komputer dalam satu jaringan lokal (LAN) berbasis alamat MAC adalah...",
        options: [
          "Switch",
          "Router",
          "Modem",
          "Repeater"
        ],
        answer: 0, // Switch
        explanation: "Switch bekerja pada Layer 2 (Data Link) dan mempergunakan MAC Address untuk menyampaikan data ke komputer tujuan di LAN."
      },
      {
        id: 3,
        question: "Kabel jaringan yang menggunakan serat kaca/plastik untuk mentransmisikan data dalam bentuk gelombang cahaya adalah...",
        options: [
          "Kabel Coaxial",
          "Kabel UTP (Unshielded Twisted Pair)",
          "Kabel Fiber Optic",
          "Kabel STP (Shielded Twisted Pair)"
        ],
        answer: 2, // Fiber Optic
        explanation: "Kabel Fiber Optic menggunakan transmisi cahaya sehingga memiliki kecepatan sangat tinggi dan tahan dari gangguan elektromagnetik."
      },
      {
        id: 4,
        question: "Konektor standar yang biasa dipasangkan pada ujung kabel UTP jenis RJ untuk jaringan Ethernet adalah...",
        options: [
          "RJ-11",
          "RJ-45",
          "BNC",
          "FC Connector"
        ],
        answer: 1, // RJ-45
        explanation: "Konektor RJ-45 merupakan konektor standar 8 pin yang digunakan untuk kabel UTP/STP dalam jaringan komputer."
      },
      {
        id: 5,
        question: "Perangkat yang berfungsi mengubah sinyal analog menjadi digital dan sebaliknya agar komputer dapat terhubung ke internet adalah...",
        options: [
          "Modem",
          "Bridge",
          "Repeater",
          "NIC"
        ],
        answer: 0, // Modem
        explanation: "Modem singkatan dari Modulator Demodulator, bertugas mengubah sinyal digital dari komputer menjadi analog dan sebaliknya."
      },
      {
        id: 6,
        question: "Kartu jaringan yang terpasang pada komputer untuk menghubungkannya ke media jaringan dinamakan...",
        options: [
          "GPU",
          "NIC (Network Interface Card)",
          "VGA Card",
          "Sound Card"
        ],
        answer: 1, // NIC
        explanation: "NIC (Network Interface Card) atau LAN Card adalah perangkat keras berupa kartu ekspansi/chipset yang menghubungkan perangkat ke jaringan."
      },
      {
        id: 7,
        question: "Perangkat yang berfungsi memancarkan sinyal radio nirkabel agar perangkat seluler/laptop terhubung ke jaringan LAN dinamakan...",
        options: [
          "Access Point",
          "Switch Hub",
          "Network Bridge",
          "Server"
        ],
        answer: 0, // Access Point
        explanation: "Access Point (AP) menyediakan koneksi wireless (Wi-Fi) untuk perangkat klien terhubung ke jaringan kabel."
      },
      {
        id: 8,
        question: "Perangkat sederhana yang meneruskan data (broadcast) ke seluruh port tanpa membaca MAC Address penerima adalah...",
        options: [
          "Switch Layer 3",
          "Router",
          "Hub",
          "Firewall"
        ],
        answer: 2, // Hub
        explanation: "Hub bekerja pada Layer 1 (Physical) dan bersifat broadcast, artinya pesan yang masuk dikirim ke seluruh port tanpa filter."
      },
      {
        id: 9,
        question: "Komponen jaringan yang berfungsi memperkuat dan memperluas jangkauan sinyal yang melemah akibat jarak jauh adalah...",
        options: [
          "Repeater",
          "Splitter",
          "Attenuator",
          "Multiplexer"
        ],
        answer: 0, // Repeater
        explanation: "Repeater menerima sinyal yang sudah melemah lalu meregenerasi/memperkuatnya kembali sebelum diteruskan."
      },
      {
        id: 10,
        question: "Alat hardware/software yang bertindak sebagai benteng pertahanan untuk menyaring traffic jaringan yang masuk dan keluar dinamakan...",
        options: [
          "Gateway",
          "Firewall",
          "Proxy",
          "DHCP Server"
        ],
        answer: 1, // Firewall
        explanation: "Firewall memproteksi jaringan internal dari akses yang tidak sah dari luar berdasarkan aturan/rule lalu lintas data."
      },
      {
        id: 11,
        question: "Kabel UTP yang disusun dengan urutan kabel sama di kedua ujungnya (Straight-through) digunakan untuk menghubungkan...",
        options: [
          "Komputer ke Komputer",
          "Switch ke Switch",
          "Komputer ke Switch",
          "Router ke Router"
        ],
        answer: 2, // Komputer ke Switch
        explanation: "Kabel Straight-Through digunakan untuk menghubungkan dua perangkat yang berbeda jenis (misal: Komputer ke Switch/Hub)."
      },
      {
        id: 12,
        question: "Perangkat komputer berspesifikasi tinggi yang menyediakan layanan, data, atau sumber daya untuk komputer klien dalam jaringan adalah...",
        options: [
          "Client",
          "Server",
          "Workstation",
          "Terminal"
        ],
        answer: 1, // Server
        explanation: "Server berfungsi memproses dan melayani permintaan dari komputer klien dalam suatu jaringan."
      },
      {
        id: 13,
        question: "Alat yang digunakan untuk memotong, mengupas kabel UTP, dan mengepres (crimping) konektor RJ-45 adalah...",
        options: [
          "LAN Tester",
          "Tang Crimping",
          "Solder",
          "Multitester"
        ],
        answer: 1, // Tang Crimping
        explanation: "Tang Crimping (Crimping Tool) adalah tang khusus yang digunakan untuk mengunci konektor RJ-45 pada kabel UTP."
      },
      {
        id: 14,
        question: "Alat pengetes yang digunakan untuk memeriksa kebenaran urutan pin sambungan kabel UTP adalah...",
        options: [
          "LAN Tester",
          "Protocol Analyzer",
          "Oscilloscope",
          "Spectrum Analyzer"
        ],
        answer: 0, // LAN Tester
        explanation: "LAN Tester digunakan untuk menguji ketersambungan dan kebenaran konfigurasi pin pada kabel LAN/UTP."
      },
      {
        id: 15,
        question: "Perangkat jaringan yang berfungsi menghubungkan dua segmen jaringan LAN yang berbeda pada Layer 2 OSI adalah...",
        options: [
          "Bridge",
          "Gateway",
          "Modem",
          "Repeater"
        ],
        answer: 0, // Bridge
        explanation: "Bridge digunakan untuk menggabungkan dua jaringan LAN yang terpisah agar dapat saling berkomunikasi di Layer 2."
      }
    ];

    // QUIZ STATE
    const TOTAL_QUESTIONS = quizQuestions.length;
    const TIME_LIMIT_SECONDS = 600; // 10 menit
    
    let currentQuestionIndex = 0;
    let userAnswers = new Array(TOTAL_QUESTIONS).fill(null);
    let timerInterval = null;
    let secondsRemaining = TIME_LIMIT_SECONDS;

    // DOM ELEMENTS
    const screenStart = document.getElementById('screen-start');
    const screenQuiz = document.getElementById('screen-quiz');
    const screenResult = document.getElementById('screen-result');
    
    const quizHeaderStats = document.getElementById('quiz-header-stats');
    const timerDisplay = document.getElementById('timer-display');
    const currentQuestionNum = document.getElementById('current-question-num');
    const quizProgress = document.getElementById('quiz-progress');

    const questionText = document.getElementById('question-text');
    const optionsContainer = document.getElementById('options-container');
    const btnNext = document.getElementById('btn-next');
    const btnPrev = document.getElementById('btn-prev');

    const btnStart = document.getElementById('btn-start');
    const btnRestart = document.getElementById('btn-restart');
    const btnReview = document.getElementById('btn-review');
    
    const reviewContainer = document.getElementById('review-container');
    const reviewList = document.getElementById('review-list');

    // EVENT LISTENERS
    btnStart.addEventListener('click', startQuiz);
    btnNext.addEventListener('click', handleNext);
    btnPrev.addEventListener('click', handlePrev);
    btnRestart.addEventListener('click', startQuiz);
    btnReview.addEventListener('click', toggleReview);

    // FUNCTIONS
    function startQuiz() {
      // Reset State
      currentQuestionIndex = 0;
      userAnswers = new Array(TOTAL_QUESTIONS).fill(null);
      secondsRemaining = TIME_LIMIT_SECONDS;

      // Reset UI
      reviewContainer.classList.add('hidden');
      screenStart.classList.add('hidden');
      screenResult.classList.add('hidden');
      screenQuiz.classList.remove('hidden');
      quizHeaderStats.classList.remove('hidden');

      // Start Timer
      updateTimerDisplay();
      clearInterval(timerInterval);
      timerInterval = setInterval(() => {
        secondsRemaining--;
        updateTimerDisplay();

        if (secondsRemaining <= 0) {
          clearInterval(timerInterval);
          finishQuiz();
        }
      }, 1000);

      // Load First Question
      renderQuestion();
    }

    function updateTimerDisplay() {
      const minutes = Math.floor(secondsRemaining / 60);
      const seconds = secondsRemaining % 60;
      timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }

    function renderQuestion() {
      const q = quizQuestions[currentQuestionIndex];
      
      // Update Progress & Header
      currentQuestionNum.textContent = currentQuestionIndex + 1;
      const progressPercent = ((currentQuestionIndex + 1) / TOTAL_QUESTIONS) * 100;
      quizProgress.style.width = `${progressPercent}%`;

      // Set Question
      questionText.textContent = q.question;

      // Clear Options
      optionsContainer.innerHTML = '';

      // Render Options
      const optionLabels = ['A', 'B', 'C', 'D'];
      q.options.forEach((opt, idx) => {
        const isSelected = userAnswers[currentQuestionIndex] === idx;
        
        const optionBtn = document.createElement('button');
        optionBtn.className = `w-full text-left p-4 rounded-xl border transition flex items-center justify-between ${
          isSelected 
            ? 'bg-indigo-600/20 border-indigo-500 text-white' 
            : 'bg-slate-900/60 border-slate-700/60 text-slate-300 hover:bg-slate-700/40 hover:border-slate-600'
        }`;

        optionBtn.innerHTML = `
          <div class="flex items-center space-x-3">
            <span class="w-7 h-7 rounded-lg flex items-center justify-center text-xs font-bold ${
              isSelected ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-400'
            }">${optionLabels[idx]}</span>
            <span class="text-sm md:text-base">${opt}</span>
          </div>
          ${isSelected ? '<i class="fa-solid fa-circle-check text-indigo-400 text-lg"></i>' : ''}
        `;

        optionBtn.addEventListener('click', () => selectOption(idx));
        optionsContainer.appendChild(optionBtn);
      });

      // Update Navigation Buttons
      btnPrev.classList.toggle('hidden', currentQuestionIndex === 0);
      
      if (userAnswers[currentQuestionIndex] !== null) {
        btnNext.disabled = false;
      } else {
        btnNext.disabled = true;
      }

      if (currentQuestionIndex === TOTAL_QUESTIONS - 1) {
        btnNext.innerHTML = 'Selesai <i class="fa-solid fa-check ml-1"></i>';
      } else {
        btnNext.innerHTML = 'Selanjutnya <i class="fa-solid fa-chevron-right ml-1"></i>';
      }
    }

    function selectOption(optionIndex) {
      userAnswers[currentQuestionIndex] = optionIndex;
      renderQuestion();
    }

    function handleNext() {
      if (currentQuestionIndex < TOTAL_QUESTIONS - 1) {
        currentQuestionIndex++;
        renderQuestion();
      } else {
        finishQuiz();
      }
    }

    function handlePrev() {
      if (currentQuestionIndex > 0) {
        currentQuestionIndex--;
        renderQuestion();
      }
    }

    function finishQuiz() {
      clearInterval(timerInterval);

      // Hide Quiz UI
      screenQuiz.classList.add('hidden');
      quizHeaderStats.classList.add('hidden');
      screenResult.classList.remove('hidden');

      // Calculate Scores
      let correctCount = 0;
      userAnswers.forEach((ans, idx) => {
        if (ans === quizQuestions[idx].answer) {
          correctCount++;
        }
      });

      const wrongCount = TOTAL_QUESTIONS - correctCount;
      const score = Math.round((correctCount / TOTAL_QUESTIONS) * 100);
      const timeSpentSec = TIME_LIMIT_SECONDS - secondsRemaining;
      const spentMin = Math.floor(timeSpentSec / 60);
      const spentSec = timeSpentSec % 60;

      // Update Results Screen
      document.getElementById('score-text').textContent = score;
      document.getElementById('correct-count').textContent = correctCount;
      document.getElementById('wrong-count').textContent = wrongCount;
      document.getElementById('time-spent').textContent = `${String(spentMin).padStart(2, '0')}:${String(spentSec).padStart(2, '0')}`;

      // Custom Message based on Score
      const resultTitle = document.getElementById('result-title');
      const resultMessage = document.getElementById('result-message');
      const resultIcon = document.getElementById('result-icon');

      if (score >= 80) {
        resultTitle.textContent = "Luar Biasa!";
        resultMessage.textContent = "Pemahaman Anda tentang komponen jaringan sangat baik!";
        resultIcon.className = "fa-solid fa-trophy text-3xl text-amber-400";
      } else if (score >= 60) {
        resultTitle.textContent = "Bagus!";
        resultMessage.textContent = "Anda cukup menguasai komponen jaringan komputer.";
        resultIcon.className = "fa-solid fa-medal text-3xl text-indigo-400";
      } else {
        resultTitle.textContent = "Perlu Belajar Lagi";
        resultMessage.textContent = "Pelajari kembali materi komponen jaringan & coba lagi.";
        resultIcon.className = "fa-solid fa-book-open text-3xl text-rose-400";
      }

      // Generate Review List
      buildReviewList();
    }

    function buildReviewList() {
      reviewList.innerHTML = '';
      const optionLabels = ['A', 'B', 'C', 'D'];

      quizQuestions.forEach((q, idx) => {
        const userAns = userAnswers[idx];
        const isCorrect = userAns === q.answer;

        const item = document.createElement('div');
        item.className = `p-4 rounded-xl border text-sm space-y-2 ${
          isCorrect ? 'bg-emerald-950/20 border-emerald-800/40' : 'bg-rose-950/20 border-rose-800/40'
        }`;

        item.innerHTML = `
          <div class="flex items-start justify-between gap-2">
            <span class="font-medium text-white">${idx + 1}. ${q.question}</span>
            <span class="px-2 py-0.5 rounded text-[10px] font-bold ${
              isCorrect ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-rose-500/20 text-rose-400 border border-rose-500/30'
            }">${isCorrect ? 'BENAR' : 'SALAH'}</span>
          </div>
          
          <div class="text-xs space-y-1 pt-1">
            <p class="${userAns === null ? 'text-amber-400' : isCorrect ? 'text-emerald-400' : 'text-rose-400'}">
              Jawaban Anda: <span class="font-semibold">${userAns !== null ? `${optionLabels[userAns]}.${q.options[userAns]}` : 'Tidak Dijawab'}</span>
            </p>
            ${!isCorrect ? `
              <p class="text-emerald-400">
                Jawaban Benar: <span class="font-semibold">${optionLabels[q.answer]}.${q.options[q.answer]}</span>
              </p>
            ` : ''}
          </div>

          <div class="bg-slate-900/60 p-2.5 rounded-lg text-xs text-slate-400 border border-slate-800 mt-2">
            <span class="font-semibold text-slate-300">Pembahasan:</span> ${q.explanation}
          </div>
        `;

        reviewList.appendChild(item);
      });
    }

    function toggleReview() {
      reviewContainer.classList.toggle('hidden');
      if (!reviewContainer.classList.contains('hidden')) {
        reviewContainer.scrollIntoView({ behavior: 'smooth' });
      }
    }
  </script>
</body>
</html>