<script>
tailwind.config = {
theme: {
extend: {
colors: {
'pusmendik-blue': '#4a82b8',
'pusmendik-dark-blue': '#346591',
'pusmendik-bg': '#5b8ec5',
'pusmendik-text': '#333333',
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
}
}
}
}
</script>
<style>
body {
background-color: #5b8ec5;
background-image: radial-gradient(circle at center, #6a9bd1 2px, transparent 2.5px);
background-size: 30px 30px;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.header-bg {
background-color: #4a82b8;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
select {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a82b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1em;
}
.view-section {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.view-section.active {
display: flex;
flex-direction: column;
flex-grow: 1;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.no-select {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Custom Scrollbar for AKM panels */
.akm-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.akm-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.akm-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.akm-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</style>
<!-- Header Section -->
<header class="header-bg py-4 px-6 flex items-center justify-between relative z-10 w-full">
<div class="flex items-center justify-between max-w-[1400px] w-full mx-auto">
<div class="flex items-center gap-4 cursor-pointer" onclick="kembaliKeHome()">
<div class="bg-white p-2 rounded-full h-12 w-12 flex items-center justify-center shadow-sm">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9c/Logo_of_Ministry_of_Education_and_Culture_of_Republic_of_Indonesia.svg" alt="Logo Kemdikbud" class="h-8 w-8 object-contain">
</div>
<div>
<h1 class="text-white font-bold text-xl tracking-wide">SMPN 4 BATANG CERDAS</h1>
<p class="text-white/80 text-sm hidden sm:block">APLIKASI ANBK - Simulasi TKA & AKM Literasi/Numerasi</p>
</div>
</div>
<div>
<button onclick="toggleAdminMenu()" class="text-white hover:bg-white/20 px-4 py-2 rounded-lg transition-colors flex items-center gap-2 border border-white/30">
<i class="fa-solid fa-user-shield"></i>
<span class="hidden sm:inline" id="adminMenuText">Masuk Admin</span>
</button>
</div>
</div>
</header>
<!-- MAIN CONTENT: STUDENT VIEW -->
<main id="student-view" class="view-section active items-center justify-center p-4 relative z-0">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all relative my-auto">
<div class="p-8">
<div class="flex justify-center mb-4">
<div class="bg-pusmendik-blue text-white rounded-full h-16 w-16 flex items-center justify-center shadow-inner">
<i class="fa-solid fa-graduation-cap text-3xl"></i>
</div>
</div>
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Simulasi TKA & AKM</h2>
<p class="text-sm text-gray-500 px-4">Pilih jenjang dan mata pelajaran untuk memulai ujian</p>
</div>
<form id="simulasiForm" onsubmit="mulaiSimulasi(event)">
<div class="mb-5">
<label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
<i class="fa-solid fa-layer-group text-pusmendik-blue w-4"></i> Jenjang Pendidikan:
</label>
<select id="jenjang" class="w-full border border-gray-300 rounded-lg py-3 px-4 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-pusmendik-blue" required>
<option value="SD">SD/MI/Sederajat</option>
<option value="SMP" selected>SMP/MTs/Sederajat</option>
<option value="SMA">SMA/MA/SMK/MAK/Sederajat</option>
</select>
</div>
<div class="mb-5">
<label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
<i class="fa-solid fa-book text-pusmendik-blue w-4"></i> Jenis Mata Pelajaran:
</label>
<select id="jenisMapel" class="w-full border border-gray-300 rounded-lg py-3 px-4 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-pusmendik-blue" required>
<option value="wajib" selected>Mata Pelajaran Wajib / AKM</option>
<option value="peminatan">Mata Pelajaran Peminatan</option>
</select>
</div>
<div class="mb-8">
<label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
<i class="fa-solid fa-book-open text-pusmendik-blue w-4"></i> Mata Pelajaran / Subjek:
</label>
<select id="mapel" class="w-full border border-gray-300 rounded-lg py-3 px-4 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-pusmendik-blue" required>
<!-- Options dipopulasikan secara dinamis -->
</select>
</div>
<button type="submit" class="w-full bg-pusmendik-blue hover:bg-pusmendik-dark-blue text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors shadow-md group">
<i class="fa-solid fa-play text-sm group-hover:scale-110 transition-transform"></i> Mulai Simulasi
</button>
</form>
</div>
<div class="bg-gray-50 py-3 text-center border-t border-gray-100">
<p class="text-xs text-gray-400">Copyright © 2026 SMPN 4 BATANG CERDAS. All rights reserved.</p>
</div>
</div>
</main>
<!-- MAIN CONTENT: BIODATA VIEW -->
<main id="biodata-view" class="view-section items-center justify-center p-4 relative z-0">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all relative my-auto">
<div class="p-8">
<div class="flex justify-center mb-4">
<div class="bg-pusmendik-blue text-white rounded-full h-16 w-16 flex items-center justify-center shadow-inner">
<i class="fa-solid fa-address-card text-3xl"></i>
</div>
</div>
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 mb-2">Konfirmasi Data</h2>
<p class="text-sm text-gray-500 px-4">Lengkapi data diri sebelum memulai ujian CBT.</p>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-6 text-center">
<span class="text-xs text-blue-500 font-bold uppercase tracking-wider block mb-1">Mata Pelajaran Terpilih</span>
<span id="selected-info" class="font-bold text-pusmendik-dark-blue">Bahasa Inggris</span>
</div>
<form id="biodataForm" onsubmit="konfirmasiBiodata(event)">
<div class="mb-4">
<label class="block text-sm font-semibold text-gray-700 mb-2">Nama Lengkap</label>
<input type="text" id="namaSiswa" class="w-full border border-gray-300 rounded-lg py-3 px-4 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-pusmendik-blue" placeholder="Masukkan nama lengkap" required>
</div>
<div class="flex gap-4 mb-8">
<div class="w-1/2">
<label class="block text-sm font-semibold text-gray-700 mb-2">Kelas</label>
<input type="text" id="kelasSiswa" class="w-full border border-gray-300 rounded-lg py-3 px-4 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-pusmendik-blue" placeholder="Misal: IX A" required>
</div>
<div class="w-1/2">
<label class="block text-sm font-semibold text-gray-700 mb-2">No. Absen</label>
<input type="number" id="absenSiswa" class="w-full border border-gray-300 rounded-lg py-3 px-4 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-pusmendik-blue" placeholder="Misal: 15" required min="1">
</div>
</div>
<div class="flex gap-3">
<button type="button" onclick="kembaliKePilihMapel()" class="w-1/3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-3 px-4 rounded-lg transition-colors text-sm">
Kembali
</button>
<button type="submit" class="w-2/3 bg-pusmendik-blue hover:bg-pusmendik-dark-blue text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors shadow-md group">
Lanjut <i class="fa-solid fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
</button>
</div>
</form>
</div>
</div>
</main>
<!-- MAIN CONTENT: CBT VIEW (UJIAN FORMAT AKM) -->
<main id="cbt-view" class="view-section w-full bg-gray-100 relative z-0 min-h-[calc(100vh-80px)] no-select">
<!-- Header CBT -->
<div class="bg-white shadow-sm border-b p-3 flex justify-between items-center w-full px-6">
<div class="flex items-center gap-4">
<div class="bg-blue-100 p-2 rounded text-blue-700 font-bold hidden sm:block">CBT-AKM</div>
<div>
<h2 class="text-md sm:text-lg font-bold text-gray-800" id="cbt-mapel">Mata Pelajaran</h2>
<p class="text-xs sm:text-sm text-gray-500" id="cbt-nama">Nama Siswa</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="bg-red-100 text-red-700 px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg font-bold flex items-center gap-2 text-sm sm:text-base">
<i class="fa-solid fa-clock"></i> <span id="cbt-timer">00:30:00</span>
</div>
<button onclick="akhiriUjianKonfirmasi()" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg font-bold transition-colors text-sm sm:text-base flex items-center gap-2 shadow-sm">
<i class="fa-solid fa-check"></i> Selesai
</button>
</div>
</div>
<!-- Area Split AKM -->
<div class="flex flex-col lg:flex-row gap-4 p-4 max-w-[1500px] mx-auto w-full flex-grow h-auto lg:h-[calc(100vh-140px)]">
<!-- Kiri: Panel Stimulus (Wacana/Infografis) -->
<div id="panel-stimulus" class="bg-white rounded-xl shadow-sm border border-gray-200 flex flex-col w-full lg:w-5/12 overflow-hidden h-[300px] lg:h-full">
<div class="p-3 sm:p-4 border-b bg-blue-50/50 flex items-center justify-between">
<h3 class="font-bold text-blue-800 flex items-center gap-2 text-sm sm:text-base"><i class="fa-solid fa-book-open"></i> Stimulus / Wacana Utama</h3>
<span class="text-xs bg-blue-200 text-blue-800 px-2 py-0.5 rounded font-semibold">Informasi / Grafik</span>
</div>
<div class="p-4 sm:p-6 text-gray-800 leading-relaxed overflow-y-auto akm-scroll flex-1 text-sm sm:text-base" id="stimulus-teks">
<!-- Teks wacana dirender disini -->
</div>
</div>
<!-- Tengah: Panel Soal & Jawaban -->
<div id="panel-soal" class="bg-white rounded-xl shadow-sm border border-gray-200 flex flex-col flex-grow w-full lg:w-5/12 overflow-hidden h-[500px] lg:h-full">
<div class="p-3 sm:p-4 border-b bg-gray-50 flex justify-between items-center">
<h3 class="font-bold text-gray-800 text-sm sm:text-base">SOAL NO. <span id="soal-nomor" class="text-xl text-blue-600">1</span></h3>
<span class="text-xs bg-gray-200 text-gray-700 px-2.5 py-1 rounded font-semibold" id="soal-tipe">Pilihan Ganda</span>
</div>
<div class="p-4 sm:p-6 overflow-y-auto akm-scroll flex-1 flex flex-col justify-between">
<div>
<!-- Optional Soal Image / Diagram -->
<div id="soal-image-container" class="mb-4 hidden text-center bg-gray-50 p-2 rounded-lg border">
<img id="soal-image" src="" alt="Gambar / Grafik Soal" class="max-h-52 mx-auto rounded-lg border shadow-sm object-contain">
</div>
<div class="text-gray-800 mb-6 leading-relaxed font-medium text-sm sm:text-base" id="soal-teks">
<!-- Teks pertanyaan dirender disini -->
</div>
<div class="flex flex-col gap-3" id="opsi-jawaban">
<!-- Opsi dirender disini -->
</div>
</div>
</div>
<!-- Footer Navigasi Soal Bawah -->
<div class="p-3 sm:p-4 border-t bg-gray-50 flex justify-between items-center gap-2">
<button onclick="soalSebelumnya()" id="btn-prev" class="px-3 sm:px-4 py-2 sm:py-2.5 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg font-semibold transition-colors text-xs sm:text-sm flex items-center gap-1.5 sm:gap-2">
<i class="fa-solid fa-arrow-left"></i> Kembali
</button>
<label class="px-3 sm:px-4 py-2 sm:py-2.5 bg-amber-100 hover:bg-amber-200 text-amber-800 rounded-lg font-semibold transition-colors text-xs sm:text-sm flex items-center gap-1.5 sm:gap-2 cursor-pointer select-none">
<input type="checkbox" id="check-ragu" onchange="toggleRagu(this)" class="w-4 h-4 text-amber-600 rounded focus:ring-amber-500">
<span>Ragu-ragu</span>
</label>
<button onclick="soalSelanjutnya()" id="btn-lanjut" class="px-3 sm:px-4 py-2 sm:py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors text-xs sm:text-sm flex items-center gap-1.5 sm:gap-2">
<span>Selanjutnya</span> <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- Kanan: Panel Navigasi Daftar Soal -->
<div class="w-full lg:w-2/12 bg-white rounded-xl shadow-sm border border-gray-200 flex flex-col h-auto lg:h-full overflow-hidden">
<div class="p-3 sm:p-4 border-b bg-gray-50 text-center">
<h3 class="font-bold text-gray-800 text-sm sm:text-base">Daftar Soal</h3>
</div>
<div class="p-3 sm:p-4 overflow-y-auto akm-scroll flex-grow max-h-[220px] lg:max-h-full">
<div class="grid grid-cols-5 sm:grid-cols-6 lg:grid-cols-3 xl:grid-cols-4 gap-2" id="grid-navigasi">
<!-- Grid navigasi di render disini -->
</div>
</div>
<div class="p-3 border-t bg-gray-50 text-xs text-gray-600 space-y-1.5">
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-blue-600 rounded"></div> Posisi Saat Ini</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-emerald-500 rounded"></div> Sudah Dijawab</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-amber-400 rounded"></div> Ragu-ragu</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-white border border-gray-400 rounded"></div> Belum Dijawab</div>
</div>
</div>
</div>
</main>
<!-- MAIN CONTENT: ADMIN VIEW -->
<main id="admin-view" class="view-section w-full bg-gray-100 relative z-0 min-h-[calc(100vh-80px)]">
<div class="flex flex-col md:flex-row w-full h-full min-h-[800px] shadow-inner">
<aside class="w-full md:w-64 bg-gray-800 text-white flex flex-col transition-all duration-300">
<div class="p-5 border-b border-gray-700 flex items-center gap-3">
<i class="fa-solid fa-user-shield text-2xl text-blue-400"></i>
<div>
<h2 class="text-lg font-bold">Admin TKA</h2>
<p class="text-xs text-gray-400">Panel Kontrol Utama</p>
</div>
</div>
<nav class="flex-1 p-4 space-y-2">
<button onclick="switchAdminMenu('menu-dashboard')" id="btn-menu-dashboard" class="admin-menu-btn w-full flex items-center gap-3 px-4 py-3 bg-blue-600 text-white rounded-lg transition-colors text-left font-medium text-sm">
<i class="fa-solid fa-chart-pie w-5"></i> Dashboard
</button>
<button onclick="switchAdminMenu('menu-banksoal')" id="btn-menu-banksoal" class="admin-menu-btn w-full flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white rounded-lg transition-colors text-left font-medium text-sm">
<i class="fa-solid fa-database w-5"></i> Bank Soal
</button>
<button onclick="switchAdminMenu('menu-monitoring')" id="btn-menu-monitoring" class="admin-menu-btn w-full flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white rounded-lg transition-colors text-left font-medium text-sm">
<i class="fa-solid fa-desktop w-5"></i> Monitoring Siswa
</button>
<button onclick="switchAdminMenu('menu-peringkat')" id="btn-menu-peringkat" class="admin-menu-btn w-full flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white rounded-lg transition-colors text-left font-medium text-sm">
<i class="fa-solid fa-trophy w-5 text-amber-400"></i> Peringkat Siswa
</button>
<button onclick="switchAdminMenu('menu-backup')" id="btn-menu-backup" class="admin-menu-btn w-full flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white rounded-lg transition-colors text-left font-medium text-sm">
<i class="fa-solid fa-download w-5"></i> Hasil & Backup
</button>
</nav>
</aside>
<div class="flex-1 p-4 md:p-8 overflow-y-auto">
<!-- DASHBOARD -->
<div id="menu-dashboard" class="admin-content-panel block">
<h3 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-2">Rekapitulasi Hasil Ujian</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-500 flex justify-between items-center">
<div><p class="text-sm text-gray-500 font-semibold">Total Peserta</p><p class="text-2xl font-bold text-gray-800" id="dash-total-peserta">0</p></div>
<i class="fa-solid fa-users text-3xl text-gray-200"></i>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-green-500 flex justify-between items-center">
<div><p class="text-sm text-gray-500 font-semibold">Rata-rata Nilai</p><p class="text-2xl font-bold text-gray-800" id="dash-ratarata">0</p></div>
<i class="fa-solid fa-graduation-cap text-3xl text-gray-200"></i>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-amber-500 flex justify-between items-center">
<div><p class="text-sm text-gray-500 font-semibold">Selesai Ujian</p><p class="text-2xl font-bold text-gray-800" id="dash-selesai">0</p></div>
<i class="fa-solid fa-circle-check text-3xl text-gray-200"></i>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-red-500 flex justify-between items-center">
<div><p class="text-sm text-gray-500 font-semibold">Nilai Tertinggi</p><p class="text-2xl font-bold text-gray-800" id="dash-tertinggi">0</p></div>
<i class="fa-solid fa-trophy text-3xl text-gray-200"></i>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 w-full max-w-4xl">
<h4 class="font-bold text-gray-700 mb-4">Grafik Performa Rata-rata per Mata Pelajaran</h4>
<div class="relative h-64 sm:h-80 w-full">
<canvas id="rekapChart"></canvas>
</div>
</div>
</div>
<!-- BANK SOAL -->
<div id="menu-banksoal" class="admin-content-panel hidden">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 border-b pb-4 gap-4">
<div>
<h3 class="text-2xl font-bold text-gray-800">Manajemen Bank Soal (Literasi & Numerasi)</h3>
<p class="text-sm text-gray-500">Kelola wacana stimulus dan pertanyaan AKM secara cepat.</p>
</div>
<div class="flex flex-wrap gap-2">
<button onclick="bukaModalEditSoal()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-lg shadow flex items-center gap-2 text-sm transition-colors">
<i class="fa-solid fa-plus"></i> Tambah Soal
</button>
<button onclick="bukaModalPasteExcel()" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-3 rounded-lg shadow flex items-center gap-2 text-sm transition-colors" title="Copy-Paste langsung dari Excel">
<i class="fa-solid fa-paste"></i> Paste dari Excel
</button>
<button onclick="eksporTemplateCSV()" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-3 rounded-lg shadow flex items-center gap-2 text-sm transition-colors" title="Unduh Template CSV Excel">
<i class="fa-solid fa-file-excel"></i> Template CSV
</button>
<button onclick="document.getElementById('file-upload').click()" class="bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded-lg shadow flex items-center gap-2 text-sm transition-colors">
<i class="fa-solid fa-file-import"></i> Impor CSV
</button>
<input id="file-upload" type="file" class="hidden" accept=".csv" onchange="handleUploadSoal(event)">
</div>
</div>
<!-- TIPS CEPAT UNTUK GURU -->
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 mb-6 rounded-r-xl shadow-sm text-xs sm:text-sm text-amber-900">
<p class="font-bold text-amber-800 flex items-center gap-1.5 mb-1">
<i class="fa-solid fa-bolt text-amber-600"></i> Cara Cepat Input 1 Wacana / Stimulus untuk Banyak Pertanyaan (Literasi & Numerasi):
</p>
<ul class="list-disc list-inside space-y-1 text-amber-800">
<li><b>Via Paste Excel:</b> Cukup isi teks Wacana/Stimulus di <b>baris pertama saja</b>! Baris soal ke-2, 3, 4 di bawahnya yang wacananya sama <b>dikosongkan</b> saja (sistem otomatis mengisi stimulus dari baris di atasnya).</li>
<li><b>Via Tombol Duplikat:</b> Tekan tombol <i class="fa-solid fa-copy text-indigo-600"></i> <b>Duplikat</b> pada tabel di bawah. Wacana & Mapel akan terduplikat instan, Anda tinggal ganti pertanyaan & kunci jawaban.</li>
<li><b>Via Tambah Manual:</b> Gunakan fitur <i>"Pilih Stimulus yang Pernah Dibuat"</i> pada form modal agar tidak perlu copas wacana berulang kali.</li>
</ul>
</div>
<!-- Filter Penggolongan Mapel -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 mb-6 flex flex-col sm:flex-row gap-4 items-center justify-between">
<div class="flex items-center gap-2 w-full sm:w-auto">
<span class="text-sm font-semibold text-gray-700 flex items-center gap-1">
<i class="fa-solid fa-filter text-blue-600"></i> Filter Mapel:
</span>
<select id="filterMapelBankSoal" onchange="filterBankSoal()" class="border border-gray-300 rounded-lg py-2 px-3 text-sm text-gray-700 bg-white focus:ring-2 focus:ring-blue-500">
<!-- Dipopulasikan secara dinamis -->
</select>
</div>
<div class="text-xs text-gray-500 font-medium" id="totalSoalInfo">
Total Soal: <span class="font-bold text-gray-800" id="countBankSoal">0</span> Soal
</div>
</div>
<!-- Tabel Cek & Edit Soal -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-800 text-white">
<tr>
<th class="px-4 py-3 text-center w-12">No</th>
<th class="px-4 py-3 text-left">Mata Pelajaran</th>
<th class="px-4 py-3 text-left">Tipe Soal</th>
<th class="px-4 py-3 text-left">Stimulus / Pertanyaan</th>
<th class="px-4 py-3 text-center">Gambar</th>
<th class="px-4 py-3 text-center w-36">Aksi Cepat</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="banksoal-table-body">
<!-- Baris tabel dirender secara dinamis oleh JS -->
</tbody>
</table>
</div>
</div>
</div>
<!-- MONITORING -->
<div id="menu-monitoring" class="admin-content-panel hidden">
<h3 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-2">Monitoring Siswa (Live Real-Time)</h3>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-800 text-white">
<tr>
<th class="px-6 py-3 text-left uppercase font-semibold">Nama Siswa</th>
<th class="px-6 py-3 text-left uppercase font-semibold">Mata Pelajaran</th>
<th class="px-6 py-3 text-left uppercase font-semibold">Kelas</th>
<th class="px-6 py-3 text-left uppercase font-semibold">Status</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="monitoring-table-body">
<!-- Real-time monitoring lines -->
</tbody>
</table>
</div>
</div>
<!-- PERINGKAT SISWA -->
<div id="menu-peringkat" class="admin-content-panel hidden">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b pb-4 gap-4">
<div>
<h3 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
<i class="fa-solid fa-trophy text-amber-500"></i> Peringkat Hasil Ujian Siswa
</h3>
<p class="text-sm text-gray-500">Daftar perolehan nilai tertinggi siswa dari pengerjaan simulasi CBT-AKM.</p>
</div>
<div class="flex items-center gap-2">
<button onclick="renderPeringkatTable()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow text-sm flex items-center gap-2 transition-colors">
<i class="fa-solid fa-arrows-rotate"></i> Refresh Peringkat
</button>
</div>
</div>
<!-- Top 3 Podium Highlights -->
<div id="podium-container" class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<!-- Rendered by JS -->
</div>
<!-- Filter & Search Bar -->
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 mb-6 flex flex-col md:flex-row gap-4 items-center justify-between">
<div class="flex flex-wrap items-center gap-3 w-full md:w-auto">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-gray-700 flex items-center gap-1">
<i class="fa-solid fa-filter text-blue-600"></i> Mapel:
</span>
<select id="filterPeringkatMapel" onchange="renderPeringkatTable()" class="border border-gray-300 rounded-lg py-2 px-3 text-sm text-gray-700 bg-white focus:ring-2 focus:ring-blue-500">
<!-- Dipopulasikan secara dinamis -->
</select>
</div>
</div>
<div class="w-full md:w-64">
<input type="text" id="searchPeringkatSiswa" onkeyup="renderPeringkatTable()" placeholder="Cari nama siswa..." class="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm focus:ring-2 focus:ring-blue-500">
</div>
</div>
<!-- Leaderboard Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-800 text-white">
<tr>
<th class="px-4 py-3 text-center w-16">Peringkat</th>
<th class="px-6 py-3 text-left">Nama Siswa</th>
<th class="px-4 py-3 text-center">Kelas / Absen</th>
<th class="px-6 py-3 text-left">Mata Pelajaran</th>
<th class="px-4 py-3 text-center">Skor Akhir</th>
<th class="px-4 py-3 text-center">Waktu Pengerjaan</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="peringkat-table-body">
<!-- Dynamic leaderboard rows -->
</tbody>
</table>
</div>
</div>
<!-- BACKUP & HASIL -->
<div id="menu-backup" class="admin-content-panel hidden">
<h3 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-2">Hasil & Ekspor Data</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
<div class="text-blue-600 text-3xl mb-3"><i class="fa-solid fa-file-arrow-down"></i></div>
<h4 class="font-bold text-lg text-gray-800 mb-2">Ekspor Rekap Hasil (CSV)</h4>
<p class="text-sm text-gray-600 mb-4">Unduh seluruh rekaman hasil ujian siswa dalam format file CSV spreadsheet yang dapat dibuka di MS Excel.</p>
<button onclick="eksporHasilCSV()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 px-4 rounded-lg shadow text-sm transition-colors">
Unduh CSV Rekap
</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
<div class="text-red-500 text-3xl mb-3"><i class="fa-solid fa-trash-can"></i></div>
<h4 class="font-bold text-lg text-gray-800 mb-2">Reset Data Simulasi</h4>
<p class="text-sm text-gray-600 mb-4">Hapus seluruh riwayat pengerjaan siswa atau kembalikan bank soal ke default.</p>
<div class="flex gap-2">
<button onclick="resetDataSimulasi()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2.5 px-3 rounded-lg shadow text-xs sm:text-sm transition-colors">
Reset Hasil Siswa
</button>
<button onclick="resetBankSoalDefault()" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2.5 px-3 rounded-lg shadow text-xs sm:text-sm transition-colors">
Reset Bank Soal Default
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- MODAL: HASIL UJIAN SELESAI -->
<div id="modal-hasil" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 text-center transform transition-all">
<div class="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl">
<i class="fa-solid fa-circle-check"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-1">Ujian Selesai!</h3>
<p class="text-sm text-gray-500 mb-6">Terima kasih telah menyelesaikan simulasi TKA & AKM.</p>
<div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6">
<div class="text-xs text-gray-500 uppercase font-semibold tracking-wider mb-1">Nilai Akhir Anda</div>
<div class="text-5xl font-extrabold text-pusmendik-blue my-2" id="hasil-skor">0</div>
<div class="grid grid-cols-2 gap-2 text-xs text-gray-600 pt-3 border-t">
<div>Jawaban Benar: <span class="font-bold text-emerald-600" id="hasil-benar">0</span></div>
<div>Jawaban Salah: <span class="font-bold text-red-600" id="hasil-salah">0</span></div>
</div>
</div>
<button onclick="tutupHasilDanKembali()" class="w-full bg-pusmendik-blue hover:bg-pusmendik-dark-blue text-white font-bold py-3 rounded-lg shadow transition-colors">
Kembali ke Halaman Utama
</button>
</div>
</div>
<!-- MODAL: PASTE DARI EXCEL (BATCH UPLOAD SMART AUTO-FILL) -->
<div id="modal-paste-excel" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden overflow-y-auto">
<div class="bg-white rounded-2xl shadow-2xl max-w-3xl w-full p-6 my-8 transform transition-all max-h-[90vh] overflow-y-auto akm-scroll">
<div class="flex justify-between items-center pb-4 border-b mb-4">
<div>
<h3 class="text-xl font-bold text-gray-800">Impor Soal Banyak via Copas Excel</h3>
<p class="text-xs text-gray-500">Copy (Ctrl+C) baris dari Excel/Google Sheets lalu Paste (Ctrl+V) di kolom bawah.</p>
</div>
<button onclick="tutupModalPasteExcel()" class="text-gray-400 hover:text-gray-600 text-lg"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="mb-4">
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-xs text-blue-900 mb-3 space-y-1">
<p class="font-bold text-blue-800 flex items-center gap-1.5"><i class="fa-solid fa-circle-info"></i> Urutan 10 Kolom Excel:</p>
<code class="block bg-white p-2 rounded border border-blue-200 font-mono text-[11px] text-blue-900 overflow-x-auto">
Mapel | Tipe | Stimulus | Pertanyaan | ImageURL | OpsiA | OpsiB | OpsiC | OpsiD | Kunci
</code>
<div class="bg-emerald-100/70 border border-emerald-300 text-emerald-900 p-2 rounded text-[11px] font-medium mt-1">
<i class="fa-solid fa-bolt text-emerald-700"></i> <b>Fitur Otomatis Stimulus:</b> Jika 1 Wacana/Stimulus dipakai untuk 3-5 pertanyaan, Anda cukup isi Stimulus pada **baris pertama saja**. Baris berikutnya kosongkan saja, sistem akan otomatis memakainya!
</div>
</div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Tempelkan Teks Excel di Sini:</label>
<textarea id="paste-excel-text" oninput="pratinjauPasteExcel()" rows="6" class="w-full border rounded-lg p-3 text-xs font-mono focus:ring-2 focus:ring-blue-500" placeholder="Contoh: AKM Literasi Pilihan Ganda Bacalah cerita 'Kancil dan Buaya' berikut... Apa pesan moral cerita? Opsi A Opsi B Opsi C Opsi D A AKM Literasi Benar-Salah Siapa tokoh utamanya? Pernyataan 1 Pernyataan 2 Pernyataan 3 Pernyataan 4 Benar,Salah,Benar,Salah"></textarea>
</div>
<!-- Preview Table -->
<div id="preview-paste-container" class="hidden mb-4">
<h4 class="font-bold text-xs uppercase text-gray-700 mb-2">Pratinjau Hasil Parser (<span id="preview-paste-count" class="text-blue-600">0</span> Soal Terdeteksi)</h4>
<div class="max-h-48 overflow-y-auto border rounded-lg text-xs">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100 font-bold text-gray-700">
<tr>
<th class="p-2 text-left">Mapel</th>
<th class="p-2 text-left">Tipe</th>
<th class="p-2 text-left">Stimulus Terdeteksi</th>
<th class="p-2 text-left">Pertanyaan</th>
<th class="p-2 text-center">Kunci</th>
</tr>
</thead>
<tbody id="preview-paste-tbody" class="divide-y divide-gray-200 bg-white">
</tbody>
</table>
</div>
</div>
<div class="flex justify-end gap-3 pt-3 border-t">
<button type="button" onclick="tutupModalPasteExcel()" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm font-semibold">Batal</button>
<button type="button" onclick="eksekusiPasteExcel()" id="btn-submit-excel" disabled class="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg text-sm font-semibold shadow flex items-center gap-2">
<i class="fa-solid fa-file-import"></i> Impor Sekarang
</button>
</div>
</div>
</div>
<!-- MODAL: TAMBAH / EDIT SOAL -->
<div id="modal-edit-soal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden overflow-y-auto">
<div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-6 my-8 transform transition-all max-h-[90vh] overflow-y-auto akm-scroll">
<div class="flex justify-between items-center pb-4 border-b mb-4">
<h3 class="text-xl font-bold text-gray-800" id="modal-soal-title">Tambah Soal Baru</h3>
<button onclick="tutupModalEditSoal()" class="text-gray-400 hover:text-gray-600 text-lg"><i class="fa-solid fa-xmark"></i></button>
</div>
<form id="formSoal" onsubmit="simpanSoal(event)" class="space-y-4">
<input type="hidden" id="edit-soal-id" value="">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Mata Pelajaran</label>
<input type="text" id="edit-mapel" class="w-full border rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500" placeholder="Ketik atau pilih misal: AKM Literasi" list="list-mapel-suggestions" required>
<datalist id="list-mapel-suggestions"></datalist>
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Tipe Soal</label>
<select id="edit-tipe" onchange="penyesuaianTipeSoalModal()" class="w-full border rounded-lg p-2.5 text-sm" required>
<option value="Pilihan Ganda">Pilihan Ganda</option>
<option value="Pilihan Ganda Kompleks">Pilihan Ganda Kompleks</option>
<option value="Benar-Salah">Benar / Salah (4 Pernyataan)</option>
</select>
</div>
</div>
<!-- Pilihan Cepat Reuse Stimulus -->
<div class="bg-blue-50 p-3 rounded-xl border border-blue-200">
<label class="block text-xs font-bold text-blue-900 uppercase mb-1 flex items-center justify-between">
<span><i class="fa-solid fa-folder-open text-blue-600"></i> Pilih Stimulus / Wacana Yang Pernah Dibuat:</span>
<span class="text-[10px] text-blue-600 font-normal">Sangat membantu untuk AKM Literasi/Numerasi</span>
</label>
<select id="select-existing-stimulus" onchange="pilihStimulusLama(this.value)" class="w-full border rounded-lg p-2 text-xs text-gray-700 bg-white focus:ring-2 focus:ring-blue-500">
<option value="">-- Gunakan Teks Wacana Baru --</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Wacana / Stimulus Soal</label>
<textarea id="edit-stimulus" rows="3" class="w-full border rounded-lg p-2.5 text-sm" placeholder="Tuliskan wacana, teks bacaan, atau petunjuk soal..."></textarea>
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Pertanyaan / Petunjuk Soal</label>
<textarea id="edit-pertanyaan" rows="3" class="w-full border rounded-lg p-2.5 text-sm" placeholder="Tuliskan pertanyaan atau petunjuk..." required></textarea>
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">URL Gambar / Grafik Soal (Opsional)</label>
<input type="url" id="edit-image" oninput="previewImageURL(this.value)" class="w-full border rounded-lg p-2.5 text-sm" placeholder="https://images.unsplash.com/... (atau link gambar diagram/grafik)">
<!-- Pratinjau Gambar di Modal -->
<div id="image-preview-container" class="mt-2 hidden bg-gray-50 border p-2 rounded-lg text-center">
<p class="text-xs text-gray-500 font-semibold mb-1">Pratinjau Gambar:</p>
<img id="image-preview" src="" alt="Preview" class="max-h-40 mx-auto rounded border object-contain" onerror="handlePreviewError()">
<p id="image-error-text" class="text-xs text-red-500 mt-1 hidden"><i class="fa-solid fa-triangle-exclamation"></i> Link gambar tidak valid atau tidak dapat dimuat.</p>
</div>
</div>
<div class="border-t pt-4">
<label id="label-opsi-jawaban" class="block text-xs font-bold text-gray-700 uppercase mb-2">Opsi Jawaban / Pernyataan (4 Buah)</label>
<div class="space-y-2">
<div class="flex items-center gap-2">
<span id="prefix-a" class="font-bold text-sm w-8">A/1.</span>
<input type="text" id="edit-opsi-a" class="w-full border rounded-lg p-2 text-sm" placeholder="Opsi A / Pernyataan 1" required>
</div>
<div class="flex items-center gap-2">
<span id="prefix-b" class="font-bold text-sm w-8">B/2.</span>
<input type="text" id="edit-opsi-b" class="w-full border rounded-lg p-2 text-sm" placeholder="Opsi B / Pernyataan 2" required>
</div>
<div class="flex items-center gap-2">
<span id="prefix-c" class="font-bold text-sm w-8">C/3.</span>
<input type="text" id="edit-opsi-c" class="w-full border rounded-lg p-2 text-sm" placeholder="Opsi C / Pernyataan 3" required>
</div>
<div class="flex items-center gap-2">
<span id="prefix-d" class="font-bold text-sm w-8">D/4.</span>
<input type="text" id="edit-opsi-d" class="w-full border rounded-lg p-2 text-sm" placeholder="Opsi D / Pernyataan 4" required>
</div>
</div>
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Kunci Jawaban</label>
<input type="text" id="edit-kunci" class="w-full border rounded-lg p-2.5 text-sm font-bold text-blue-700" placeholder="Contoh Pilihan Ganda: A | Contoh Benar-Salah: Benar,Salah,Benar,Salah" required>
<p id="kunci-hint" class="text-xs text-gray-500 mt-1">Untuk Benar-Salah, tuliskan 4 nilai dipisahkan koma (contoh: Benar,Salah,Benar,Salah atau B,S,B,S).</p>
</div>
<div class="flex justify-end gap-3 pt-4 border-t">
<button type="button" onclick="tutupModalEditSoal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm font-semibold">Batal</button>
<button type="submit" class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold shadow">Simpan Soal</button>
</div>
</form>
</div>
</div>
<!-- CUSTOM DIALOG MODAL -->
<div id="modal-dialog" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6 text-center transform transition-all">
<div id="dialog-icon" class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3 text-2xl">
<i class="fa-solid fa-circle-info"></i>
</div>
<h3 id="dialog-title" class="text-lg font-bold text-gray-800 mb-2">Informasi</h3>
<p id="dialog-message" class="text-sm text-gray-600 mb-6">Pesan konfirmasi.</p>
<div class="flex gap-3" id="dialog-buttons">
<button id="dialog-btn-ok" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-lg text-sm transition-colors">OK</button>
</div>
</div>
</div>
<script>
// Master Initial Questions Data Default
const defaultQuestionsBank = [
// AKM Literasi (1 Stimulus untuk beberapa soal)
{
id: 101,
mapel: "AKM Literasi",
tipe: "Pilihan Ganda",
stimulus: "<b>Gerakan Literasi Sekolah dan Masa Depan Digital</b><br>SMPN 4 Batang menggalakkan program 'Selasa Membaca' selama 15 menit sebelum kegiatan pembelajaran dimulai. Berdasarkan data perpustakaan, minat baca siswa meningkat hingga 35% dalam satu semester. Literasi bukan hanya tentang membaca buku cetak, namun juga kemampuan memilah berita hoaks di media sosial secara teruji.",
pertanyaan: "Apa tujuan utama diadakannya program 'Selasa Membaca' menurut wacana?",
image: "",
opsi: { A: "Mengurangi jam pelajaran sekolah", B: "Meningkatkan minat baca dan kemampuan literasi siswa", C: "Menjual buku cerita kepada siswa", D: "Mengganti fungsi perpustakaan sekolah" },
kunci: "B"
},
{
id: 102,
mapel: "AKM Literasi",
tipe: "Benar-Salah",
stimulus: "<b>Gerakan Literasi Sekolah dan Masa Depan Digital</b><br>SMPN 4 Batang menggalakkan program 'Selasa Membaca' selama 15 menit sebelum kegiatan pembelajaran dimulai. Berdasarkan data perpustakaan, minat baca siswa meningkat hingga 35% dalam satu semester. Literasi bukan hanya tentang membaca buku cetak, namun juga kemampuan memilah berita hoaks di media sosial secara teruji.",
pertanyaan: "Berdasarkan wacana 'Gerakan Literasi Sekolah', tentukan BENAR atau SALAH untuk setiap pernyataan berikut:",
image: "",
opsi: {
A: "Program Selasa Membaca dilakukan selama 15 menit sebelum KBM.",
B: "Minat baca siswa menurun setelah ada program literasi.",
C: "Kemampuan memilah hoaks juga merupakan bagian dari literasi.",
D: "Literasi hanya terbatas pada membaca buku cetak saja."
},
kunci: "Benar,Salah,Benar,Salah"
},
// AKM Numerasi (1 Stimulus / Data Grafik untuk beberapa soal)
{
id: 201,
mapel: "AKM Numerasi",
tipe: "Pilihan Ganda",
stimulus: "<b>Pengelolaan Kantin Sehat SMPN 4 Batang</b><br>Kantin sekolah menjual minuman jus buah segar. Pada hari Senin terjual 40 gelas, Selasa 50 gelas, Rabu 30 gelas, Kamis 60 gelas, dan Jumat 70 gelas. Harga $1$ gelas jus buah adalah $\\text{Rp } 5.000,00$.",
pertanyaan: "Berapa total pendapatan kantin sekolah dari penjualan jus buah dari hari Senin hingga Jumat?",
image: "",
opsi: { A: "Rp 1.000.000,00", B: "Rp 1.250.000,00", C: "Rp 1.500.000,00", D: "Rp 1.750.000,00" },
kunci: "B"
},
{
id: 202,
mapel: "AKM Numerasi",
tipe: "Pilihan Ganda Kompleks",
stimulus: "<b>Pengelolaan Kantin Sehat SMPN 4 Batang</b><br>Kantin sekolah menjual minuman jus buah segar. Pada hari Senin terjual 40 gelas, Selasa 50 gelas, Rabu 30 gelas, Kamis 60 gelas, dan Jumat 70 gelas. Harga $1$ gelas jus buah adalah $\\text{Rp } 5.000,00$.",
pertanyaan: "Pilihlah pernyataan yang BENAR berdasarkan data penjualan jus buah tersebut! (Jawaban lebih dari satu)",
image: "",
opsi: {
A: "Penjualan tertinggi terjadi pada hari Jumat.",
B: "Penjualan pada hari Rabu lebih banyak dari hari Senin.",
C: "Rata-rata penjualan jus per hari adalah 50 gelas.",
D: "Selisih penjualan tertinggi dan terendah adalah 40 gelas."
},
kunci: "A,C,D"
},
// Bahasa Inggris
{
id: 301,
mapel: "Bahasa Inggris",
tipe: "Pilihan Ganda",
stimulus: "<b>Rani:</b> Hi Budi, congratulations on winning the English Speech Contest in Central Java!<br><b>Budi:</b> Thank you so much Rani, I worked hard for it.<br><b>Rani:</b> You really deserve it.",
pertanyaan: "Why does Rani congratulate Budi?",
image: "",
opsi: { A: "Because Budi passed the English test", B: "Because Budi won the English Speech Contest", C: "Because Budi supported Rani", D: "Because Budi is traveling to Central Java" },
kunci: "B"
}
];
const defaultStudentResults = [
{ nama: "Budi Santoso", kelas: "IX A", absen: 5, mapel: "AKM Literasi", skor: 100, waktu: "18 Menit", tanggal: "2026-09-21" },
{ nama: "Siti Rahmawati", kelas: "IX B", absen: 12, mapel: "AKM Numerasi", skor: 100, waktu: "20 Menit", tanggal: "2026-09-21" },
{ nama: "Ahmad Rizky", kelas: "IX C", absen: 2, mapel: "Bahasa Inggris", skor: 85, waktu: "25 Menit", tanggal: "2026-09-21" }
];
let questionsBank = [];
let studentResults = [];
// Active State Variables
let currentStudent = { nama: "", kelas: "", absen: "", mapel: "", jenjang: "" };
let activeQuestions = [];
let currentQuestionIndex = 0;
let studentAnswers = {};
let flaggedQuestions = {};
let examTimer = null;
let timeRemaining = 1800; // 30 minutes in seconds
let isAdminLoggedIn = false;
let rekapChartInstance = null;
let tempParsedExcelSoal = [];
// LocalStorage Management
function initDataStorage() {
const storedQuestions = localStorage.getItem('smpn4_questions_bank');
if (storedQuestions) {
try { questionsBank = JSON.parse(storedQuestions); } catch(e) { questionsBank = [...defaultQuestionsBank]; }
} else {
questionsBank = [...defaultQuestionsBank];
saveQuestionsToStorage();
}
const storedResults = localStorage.getItem('smpn4_student_results');
if (storedResults) {
try { studentResults = JSON.parse(storedResults); } catch(e) { studentResults = [...defaultStudentResults]; }
} else {
studentResults = [...defaultStudentResults];
saveResultsToStorage();
}
updateMapelDropdowns();
}
function saveQuestionsToStorage() {
localStorage.setItem('smpn4_questions_bank', JSON.stringify(questionsBank));
updateMapelDropdowns();
}
function saveResultsToStorage() {
localStorage.setItem('smpn4_student_results', JSON.stringify(studentResults));
}
// Dynamically update mapel selects based on bank soal
function updateMapelDropdowns() {
const mapelList = [...new Set(questionsBank.map(q => q.mapel.trim()))].filter(Boolean);
if (mapelList.length === 0) mapelList.push("AKM Literasi", "AKM Numerasi", "Bahasa Inggris", "Bahasa Indonesia");
// Student Mapel Select
const studentSelect = document.getElementById('mapel');
if (studentSelect) {
const currentVal = studentSelect.value;
studentSelect.innerHTML = mapelList.map(m => `<option value="${m}">${m}</option>`).join('');
if (mapelList.includes(currentVal)) {
studentSelect.value = currentVal;
} else if (mapelList.length > 0) {
studentSelect.value = mapelList[0];
}
}
// Bank Soal Filter
const bankFilter = document.getElementById('filterMapelBankSoal');
if (bankFilter) {
const currentVal = bankFilter.value || "Semua";
bankFilter.innerHTML = `<option value="Semua">Semua Mata Pelajaran</option>` +
mapelList.map(m => `<option value="${m}">${m}</option>`).join('');
if (mapelList.includes(currentVal) || currentVal === "Semua") bankFilter.value = currentVal;
}
// Peringkat Filter
const peringkatFilter = document.getElementById('filterPeringkatMapel');
if (peringkatFilter) {
const currentVal = peringkatFilter.value || "Semua";
peringkatFilter.innerHTML = `<option value="Semua">Semua Mata Pelajaran</option>` +
mapelList.map(m => `<option value="${m}">${m}</option>`).join('');
if (mapelList.includes(currentVal) || currentVal === "Semua") peringkatFilter.value = currentVal;
}
// Modal Mapel Suggestions Datalist
const datalist = document.getElementById('list-mapel-suggestions');
if (datalist) {
datalist.innerHTML = mapelList.map(m => `<option value="${m}">`).join('');
}
}
// View Navigation Helper
function switchView(viewId) {
document.querySelectorAll('.view-section').forEach(view => {
view.classList.remove('active');
view.style.display = 'none';
});
const target = document.getElementById(viewId);
if (target) {
target.classList.add('active');
target.style.display = 'flex';
}
}
function kembaliKeHome() {
if (examTimer) clearInterval(examTimer);
updateMapelDropdowns();
switchView('student-view');
}
function kembaliKePilihMapel() {
switchView('student-view');
}
// Student Exam Flow
function mulaiSimulasi(e) {
e.preventDefault();
const mapel = document.getElementById('mapel').value;
const jenjang = document.getElementById('jenjang').value;
if (!mapel) {
showDialog("Peringatan", "Silakan pilih mata pelajaran terlebih dahulu.");
return;
}
currentStudent.mapel = mapel;
currentStudent.jenjang = jenjang;
document.getElementById('selected-info').innerText = mapel + " (" + jenjang + ")";
switchView('biodata-view');
}
function konfirmasiBiodata(e) {
e.preventDefault();
currentStudent.nama = document.getElementById('namaSiswa').value.trim();
currentStudent.kelas = document.getElementById('kelasSiswa').value.trim();
currentStudent.absen = document.getElementById('absenSiswa').value;
// Filter questions for chosen Mapel
activeQuestions = questionsBank.filter(q => q.mapel.trim().toLowerCase() === currentStudent.mapel.trim().toLowerCase());
if (activeQuestions.length === 0) {
activeQuestions = questionsBank;
}
// Reset Session
studentAnswers = {};
flaggedQuestions = {};
currentQuestionIndex = 0;
// UI CBT Header
document.getElementById('cbt-mapel').innerText = currentStudent.mapel;
document.getElementById('cbt-nama').innerText = `${currentStudent.nama} (${currentStudent.kelas} / Absen ${currentStudent.absen})`;
// Start Timer (30 mins)
timeRemaining = 1800;
startTimer();
// Render
renderCurrentQuestion();
renderNavigasiGrid();
switchView('cbt-view');
}
function startTimer() {
if (examTimer) clearInterval(examTimer);
examTimer = setInterval(() => {
timeRemaining--;
if (timeRemaining <= 0) {
clearInterval(examTimer);
showDialog("Waktu Habis!", "Waktu ujian Anda telah habis. Sistem akan menyimpan jawaban secara otomatis.", () => {
akhiriUjian();
});
}
updateTimerDisplay();
}, 1000);
updateTimerDisplay();
}
function updateTimerDisplay() {
const h = Math.floor(timeRemaining / 3600);
const m = Math.floor((timeRemaining % 3600) / 60);
const s = timeRemaining % 60;
document.getElementById('cbt-timer').innerText =
`${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
}
function renderCurrentQuestion() {
const q = activeQuestions[currentQuestionIndex];
if (!q) return;
document.getElementById('soal-nomor').innerText = currentQuestionIndex + 1;
document.getElementById('soal-tipe').innerText = q.tipe;
document.getElementById('stimulus-teks').innerHTML = q.stimulus || "<i>Tidak ada wacana khusus untuk soal ini. Silakan langsung menjawab pertanyaan.</i>";
document.getElementById('soal-teks').innerHTML = q.pertanyaan;
// Handle optional image link
const imgContainer = document.getElementById('soal-image-container');
const imgElem = document.getElementById('soal-image');
if (q.image && q.image.trim() !== "") {
imgElem.src = q.image.trim();
imgElem.onerror = function() {
imgContainer.classList.add('hidden');
};
imgElem.onload = function() {
imgContainer.classList.remove('hidden');
};
} else {
imgContainer.classList.add('hidden');
}
// Render Opsi Jawaban
const container = document.getElementById('opsi-jawaban');
container.innerHTML = '';
if (q.tipe === "Benar-Salah") {
const currentAnsObj = studentAnswers[q.id] || {};
const table = document.createElement('div');
table.className = "border rounded-xl overflow-hidden shadow-sm bg-white";
let tableHtml = `
<div class="grid grid-cols-12 bg-gray-100 font-bold text-xs sm:text-sm text-gray-700 p-3 border-b">
<div class="col-span-8">Pernyataan</div>
<div class="col-span-2 text-center">Benar</div>
<div class="col-span-2 text-center">Salah</div>
</div>
`;
const keys = ['A', 'B', 'C', 'D'];
keys.forEach((key, idx) => {
if (q.opsi && q.opsi[key]) {
const selectedVal = currentAnsObj[key] || '';
tableHtml += `
<div class="grid grid-cols-12 items-center p-3 border-b last:border-b-0 hover:bg-blue-50/40 transition-colors text-xs sm:text-sm">
<div class="col-span-8 pr-2 flex items-start gap-2">
<span class="font-bold text-blue-700">${idx + 1}.</span>
<span>${q.opsi[key]}</span>
</div>
<div class="col-span-2 text-center">
<button type="button" onclick="pilihBenarSalah(${q.id}, '${key}', 'Benar')"
class="px-2.5 py-1.5 rounded-lg border text-xs sm:text-sm font-semibold transition-all ${
selectedVal === 'Benar' ? 'bg-emerald-600 text-white border-emerald-600 shadow-sm ring-2 ring-emerald-200' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100'
}">
Benar
</button>
</div>
<div class="col-span-2 text-center">
<button type="button" onclick="pilihBenarSalah(${q.id}, '${key}', 'Salah')"
class="px-2.5 py-1.5 rounded-lg border text-xs sm:text-sm font-semibold transition-all ${
selectedVal === 'Salah' ? 'bg-red-600 text-white border-red-600 shadow-sm ring-2 ring-red-200' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100'
}">
Salah
</button>
</div>
</div>
`;
}
});
table.innerHTML = tableHtml;
container.appendChild(table);
} else {
const isMultiSelect = q.tipe.includes("Kompleks");
const currentAns = studentAnswers[q.id] || (isMultiSelect ? [] : "");
if (q.opsi) {
Object.keys(q.opsi).forEach(key => {
if (q.opsi[key]) {
const isSelected = isMultiSelect ? currentAns.includes(key) : currentAns === key;
const wrapper = document.createElement('div');
wrapper.className = `p-3.5 border-2 rounded-xl cursor-pointer transition-all flex items-center gap-3 ${
isSelected ? 'border-blue-600 bg-blue-50/80 font-medium text-blue-900 shadow-sm' : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
}`;
wrapper.innerHTML = `
<div class="w-6 h-6 rounded-${isMultiSelect ? 'md' : 'full'} border-2 flex items-center justify-center ${isSelected ? 'bg-blue-600 border-blue-600 text-white' : 'border-gray-300'} text-xs font-bold">
${isSelected ? (isMultiSelect ? '✓' : key) : key}
</div>
<div class="flex-1 text-sm sm:text-base">${q.opsi[key]}</div>
`;
wrapper.onclick = () => pilihJawaban(q.id, key, isMultiSelect);
container.appendChild(wrapper);
}
});
}
}
document.getElementById('check-ragu').checked = !!flaggedQuestions[q.id];
document.getElementById('btn-prev').disabled = currentQuestionIndex === 0;
document.getElementById('btn-prev').style.opacity = currentQuestionIndex === 0 ? "0.5" : "1";
}
function pilihBenarSalah(qId, key, value) {
if (!studentAnswers[qId] || typeof studentAnswers[qId] !== 'object' || Array.isArray(studentAnswers[qId])) {
studentAnswers[qId] = {};
}
studentAnswers[qId][key] = value;
renderCurrentQuestion();
renderNavigasiGrid();
}
function renderNavigasiGrid() {
const grid = document.getElementById('grid-navigasi');
grid.innerHTML = '';
activeQuestions.forEach((q, idx) => {
const isCurrent = idx === currentQuestionIndex;
let isAnswered = false;
if (q.tipe === "Benar-Salah") {
const ansObj = studentAnswers[q.id];
if (ansObj && typeof ansObj === 'object') {
const keysCount = Object.keys(ansObj).length;
isAnswered = keysCount >= 4;
}
} else {
isAnswered = studentAnswers[q.id] && (Array.isArray(studentAnswers[q.id]) ? studentAnswers[q.id].length > 0 : studentAnswers[q.id] !== "");
}
const isFlagged = flaggedQuestions[q.id];
let bgClass = "bg-white text-gray-700 border-gray-300";
if (isCurrent) {
bgClass = "bg-blue-600 text-white border-blue-600 font-bold ring-2 ring-blue-300";
} else if (isFlagged) {
bgClass = "bg-amber-400 text-white border-amber-400 font-bold";
} else if (isAnswered) {
bgClass = "bg-emerald-500 text-white border-emerald-500 font-bold";
}
const btn = document.createElement('button');
btn.className = `h-10 rounded-lg border flex items-center justify-center text-sm transition-all ${bgClass}`;
btn.innerText = idx + 1;
btn.onclick = () => melompatKeSoal(idx);
grid.appendChild(btn);
});
}
function akhiriUjian() {
if (examTimer) clearInterval(examTimer);
let correctCount = 0;
activeQuestions.forEach(q => {
const userAns = studentAnswers[q.id];
if (!userAns) return;
if (q.tipe === "Benar-Salah") {
const kunciArr = q.kunci.split(',').map(s => s.trim().toLowerCase());
const keys = ['A', 'B', 'C', 'D'];
let statementCorrect = 0;
keys.forEach((key, idx) => {
if (kunciArr[idx]) {
const expected = kunciArr[idx].startsWith('b') || kunciArr[idx] === 'b' ? 'benar' : 'salah';
const given = (userAns[key] || '').toLowerCase();
if (given === expected) {
statementCorrect++;
}
}
});
if (statementCorrect === 4) {
correctCount++;
} else if (statementCorrect > 0) {
correctCount += (statementCorrect / 4);
}
} else if (q.tipe.includes("Kompleks")) {
const keys = q.kunci.split(',').map(s => s.trim()).sort().join(',');
const userKeys = Array.isArray(userAns) ? userAns.sort().join(',') : userAns;
if (keys === userKeys) correctCount++;
} else {
if (userAns.toString().toUpperCase() === q.kunci.toUpperCase()) correctCount++;
}
});
const score = activeQuestions.length > 0 ? Math.round((correctCount / activeQuestions.length) * 100) : 0;
const wrongCount = Math.max(0, activeQuestions.length - Math.floor(correctCount));
document.getElementById('hasil-skor').innerText = score;
document.getElementById('hasil-benar').innerText = Math.round(correctCount);
document.getElementById('hasil-salah').innerText = wrongCount;
document.getElementById('modal-hasil').classList.remove('hidden');
const elapsedSeconds = 1800 - timeRemaining;
const elapsedMins = Math.max(1, Math.round(elapsedSeconds / 60));
studentResults.unshift({
nama: currentStudent.nama,
kelas: currentStudent.kelas,
absen: parseInt(currentStudent.absen),
mapel: currentStudent.mapel,
skor: score,
waktu: `${elapsedMins} Menit`,
tanggal: new Date().toISOString().split('T')[0]
});
saveResultsToStorage();
}
function toggleAdminMenu() {
if (!isAdminLoggedIn) {
showPromptDialog("Akses Terproteksi Admin", "Masukkan PIN Rahasia Admin (Default: 1234):", (pin) => {
if (pin === "1234" || pin === "admin" || pin === "smpn4batang") {
isAdminLoggedIn = true;
document.getElementById('adminMenuText').innerText = "Keluar Admin";
switchView('admin-view');
switchAdminMenu('menu-dashboard');
showToast("Berhasil masuk sebagai Admin!");
} else {
showDialog("Akses Ditolak", "PIN Rahasia Admin salah.");
}
});
} else {
isAdminLoggedIn = false;
document.getElementById('adminMenuText').innerText = "Masuk Admin";
kembaliKeHome();
showToast("Anda telah keluar dari Admin.");
}
}
// BATCH PASTE EXCEL HANDLERS (SMART AUTO-FILL STIMULUS)
function bukaModalPasteExcel() {
document.getElementById('paste-excel-text').value = '';
document.getElementById('preview-paste-container').classList.add('hidden');
document.getElementById('btn-submit-excel').disabled = true;
tempParsedExcelSoal = [];
document.getElementById('modal-paste-excel').classList.remove('hidden');
}
function tutupModalPasteExcel() {
document.getElementById('modal-paste-excel').classList.add('hidden');
}
function pratinjauPasteExcel() {
const rawText = document.getElementById('paste-excel-text').value.trim();
if (!rawText) {
document.getElementById('preview-paste-container').classList.add('hidden');
document.getElementById('btn-submit-excel').disabled = true;
tempParsedExcelSoal = [];
return;
}
const lines = rawText.split(/\r?\n/);
tempParsedExcelSoal = [];
let lastStimulus = "";
let lastImage = "";
let lastMapel = "";
lines.forEach((line, index) => {
if (!line.trim()) return;
const cols = line.includes('\t') ? line.split('\t') : line.split(',');
const cleanedCols = cols.map(c => c.replace(/^"|"$/g, '').trim());
if (index === 0 && (cleanedCols[0].toLowerCase() === 'mapel' || cleanedCols[3]?.toLowerCase() === 'pertanyaan')) {
return;
}
if (cleanedCols.length >= 4) {
let mapelVal = cleanedCols[0] || lastMapel || "AKM Literasi";
let tipeVal = cleanedCols[1] || "Pilihan Ganda";
let stimulusVal = cleanedCols[2] || "";
let pertanyaanVal = cleanedCols[3] || "Pertanyaan";
let imageVal = cleanedCols[4] || "";
// AUTO-FILL LOGIC: Jika Stimulus/Wacana kosong, pakai stimulus dari baris sebelumnya
if (!stimulusVal && lastStimulus) {
stimulusVal = lastStimulus;
} else if (stimulusVal) {
lastStimulus = stimulusVal;
}
if (!imageVal && lastImage && stimulusVal === lastStimulus) {
imageVal = lastImage;
} else if (imageVal) {
lastImage = imageVal;
}
if (mapelVal) lastMapel = mapelVal;
tempParsedExcelSoal.push({
id: Date.now() + index,
mapel: mapelVal,
tipe: tipeVal,
stimulus: stimulusVal,
pertanyaan: pertanyaanVal,
image: imageVal,
opsi: {
A: cleanedCols[5] || "",
B: cleanedCols[6] || "",
C: cleanedCols[7] || "",
D: cleanedCols[8] || ""
},
kunci: (cleanedCols[9] || "A").toUpperCase()
});
}
});
const container = document.getElementById('preview-paste-container');
const tbody = document.getElementById('preview-paste-tbody');
const countElem = document.getElementById('preview-paste-count');
const btn = document.getElementById('btn-submit-excel');
if (tempParsedExcelSoal.length > 0) {
countElem.innerText = tempParsedExcelSoal.length;
tbody.innerHTML = tempParsedExcelSoal.map(q => `
<tr>
<td class="p-2 font-semibold text-blue-700">${q.mapel}</td>
<td class="p-2 text-gray-600">${q.tipe}</td>
<td class="p-2 truncate max-w-xs text-gray-500 italic">${q.stimulus ? q.stimulus.replace(/<[^>]*>?/gm, '').substring(0, 30) + '...' : '(Tidak ada)'}</td>
<td class="p-2 truncate max-w-xs text-gray-800 font-medium">${q.pertanyaan}</td>
<td class="p-2 text-center font-bold text-emerald-600">${q.kunci}</td>
</tr>
`).join('');
container.classList.remove('hidden');
btn.disabled = false;
} else {
container.classList.add('hidden');
btn.disabled = true;
}
}
function eksekusiPasteExcel() {
if (tempParsedExcelSoal.length === 0) return;
questionsBank.push(...tempParsedExcelSoal);
saveQuestionsToStorage();
tutupModalPasteExcel();
renderBankSoalTable();
showToast(`Berhasil mengimpor ${tempParsedExcelSoal.length} soal baru!`);
}
function previewImageURL(url) {
const container = document.getElementById('image-preview-container');
const img = document.getElementById('image-preview');
const errText = document.getElementById('image-error-text');
if (url && url.trim() !== '') {
container.classList.remove('hidden');
errText.classList.add('hidden');
img.classList.remove('hidden');
img.src = url.trim();
} else {
container.classList.add('hidden');
}
}
function handlePreviewError() {
document.getElementById('image-preview').classList.add('hidden');
document.getElementById('image-error-text').classList.remove('hidden');
}
function penyesuaianTipeSoalModal() {
const tipe = document.getElementById('edit-tipe').value;
const hint = document.getElementById('kunci-hint');
if (tipe === "Benar-Salah") {
hint.innerText = "Format kunci Benar-Salah: tuliskan 4 nilai dipisahkan koma untuk Pernyataan 1, 2, 3, 4 (contoh: Benar,Salah,Benar,Salah atau B,S,B,S).";
} else if (tipe.includes("Kompleks")) {
hint.innerText = "Format kunci Kompleks: tuliskan huruf opsi benar dipisahkan koma (contoh: A,C).";
} else {
hint.innerText = "Format kunci Pilihan Ganda: tuliskan satu huruf opsi benar (contoh: A).";
}
}
function populasikanDropdownStimulusLama() {
const select = document.getElementById('select-existing-stimulus');
if (!select) return;
const existingStimuli = [...new Set(questionsBank.map(q => q.stimulus ? q.stimulus.trim() : ""))].filter(Boolean);
select.innerHTML = `<option value="">-- Gunakan Teks Wacana Baru / Ketik Sendiri --</option>`;
existingStimuli.forEach((stim, idx) => {
const cleanText = stim.replace(/<[^>]*>?/gm, '').substring(0, 70);
const option = document.createElement('option');
option.value = stim;
option.innerText = `[Stimulus ${idx + 1}] ${cleanText}...`;
select.appendChild(option);
});
}
function pilihStimulusLama(stimulusText) {
if (stimulusText) {
document.getElementById('edit-stimulus').value = stimulusText;
// Cari apakah ada soal yang memakai stimulus ini untuk otomatis menyalin gambar & mapel jika cocok
const parentSoal = questionsBank.find(q => q.stimulus === stimulusText);
if (parentSoal) {
if (parentSoal.mapel) document.getElementById('edit-mapel').value = parentSoal.mapel;
if (parentSoal.image && !document.getElementById('edit-image').value) {
document.getElementById('edit-image').value = parentSoal.image;
previewImageURL(parentSoal.image);
}
}
}
}
function bukaModalEditSoal(id = null) {
document.getElementById('formSoal').reset();
document.getElementById('edit-soal-id').value = '';
document.getElementById('image-preview-container').classList.add('hidden');
populasikanDropdownStimulusLama();
if (id) {
const q = questionsBank.find(item => item.id === id);
if (q) {
document.getElementById('modal-soal-title').innerText = "Edit Soal";
document.getElementById('edit-soal-id').value = q.id;
document.getElementById('edit-mapel').value = q.mapel;
document.getElementById('edit-tipe').value = q.tipe;
document.getElementById('edit-stimulus').value = q.stimulus || '';
document.getElementById('edit-pertanyaan').value = q.pertanyaan;
document.getElementById('edit-image').value = q.image || '';
if (q.opsi) {
document.getElementById('edit-opsi-a').value = q.opsi.A || '';
document.getElementById('edit-opsi-b').value = q.opsi.B || '';
document.getElementById('edit-opsi-c').value = q.opsi.C || '';
document.getElementById('edit-opsi-d').value = q.opsi.D || '';
}
document.getElementById('edit-kunci').value = q.kunci;
previewImageURL(q.image);
}
} else {
document.getElementById('modal-soal-title').innerText = "Tambah Soal Baru";
}
penyesuaianTipeSoalModal();
document.getElementById('modal-edit-soal').classList.remove('hidden');
}
function tutupModalEditSoal() {
document.getElementById('modal-edit-soal').classList.add('hidden');
}
function simpanSoal(e) {
e.preventDefault();
const id = document.getElementById('edit-soal-id').value;
const newSoal = {
id: id ? parseInt(id) : Date.now(),
mapel: document.getElementById('edit-mapel').value.trim(),
tipe: document.getElementById('edit-tipe').value,
stimulus: document.getElementById('edit-stimulus').value,
pertanyaan: document.getElementById('edit-pertanyaan').value,
image: document.getElementById('edit-image').value.trim(),
opsi: {
A: document.getElementById('edit-opsi-a').value,
B: document.getElementById('edit-opsi-b').value,
C: document.getElementById('edit-opsi-c').value,
D: document.getElementById('edit-opsi-d').value
},
kunci: document.getElementById('edit-kunci').value.toUpperCase().trim()
};
if (id) {
const idx = questionsBank.findIndex(q => q.id === parseInt(id));
if (idx !== -1) questionsBank[idx] = newSoal;
} else {
questionsBank.push(newSoal);
}
saveQuestionsToStorage();
tutupModalEditSoal();
renderBankSoalTable();
showToast("Soal berhasil disimpan!");
}
// FITUR SUPER CEPAT GURU: DUPLIKAT SOAL
function duplikatSoal(id) {
const original = questionsBank.find(q => q.id === id);
if (!original) return;
const clonedSoal = JSON.parse(JSON.stringify(original));
clonedSoal.id = Date.now();
clonedSoal.pertanyaan = `[Salinan] ${clonedSoal.pertanyaan}`;
questionsBank.push(clonedSoal);
saveQuestionsToStorage();
renderBankSoalTable();
showToast("Soal berhasil diduplikat! Silakan sesuaikan pertanyaan.");
// Langsung buka modal edit untuk soal hasil duplikat tersebut
setTimeout(() => {
bukaModalEditSoal(clonedSoal.id);
}, 300);
}
function hapusSoal(id) {
showConfirmDialog("Hapus Soal", "Apakah Anda yakin ingin menghapus soal ini dari bank soal?", () => {
questionsBank = questionsBank.filter(q => q.id !== id);
saveQuestionsToStorage();
renderBankSoalTable();
showToast("Soal berhasil dihapus!");
});
}
function renderMonitoringTable() {
const tbody = document.getElementById('monitoring-table-body');
tbody.innerHTML = '';
studentResults.slice(0, 10).forEach(r => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td class="px-6 py-4 font-bold text-gray-800">${r.nama}</td>
<td class="px-6 py-4 text-blue-700 font-semibold">${r.mapel}</td>
<td class="px-6 py-4 text-gray-600">${r.kelas} / Absen ${r.absen}</td>
<td class="px-6 py-4"><span class="bg-emerald-100 text-emerald-800 px-2.5 py-1 rounded-full text-xs font-bold">Selesai Ujian</span></td>
`;
tbody.appendChild(tr);
});
}
function renderPeringkatTable() {
const mapelFilter = document.getElementById('filterPeringkatMapel').value;
const searchQuery = document.getElementById('searchPeringkatSiswa').value.toLowerCase();
let filtered = studentResults.filter(r => {
const matchMapel = mapelFilter === "Semua" || r.mapel.trim().toLowerCase() === mapelFilter.trim().toLowerCase();
const matchSearch = r.nama.toLowerCase().includes(searchQuery);
return matchMapel && matchSearch;
});
filtered.sort((a, b) => b.skor - a.skor);
const podiumContainer = document.getElementById('podium-container');
podiumContainer.innerHTML = '';
const top3 = filtered.slice(0, 3);
const podiumColors = [
{ bg: 'bg-amber-500', icon: 'fa-trophy', text: 'Juara 1', border: 'border-amber-400' },
{ bg: 'bg-slate-400', icon: 'fa-medal', text: 'Juara 2', border: 'border-slate-300' },
{ bg: 'bg-amber-700', icon: 'fa-award', text: 'Juara 3', border: 'border-amber-600' }
];
top3.forEach((item, idx) => {
const p = podiumColors[idx];
const card = document.createElement('div');
card.className = `bg-white rounded-xl shadow-sm border-2 ${p.border} p-4 text-center flex flex-col items-center relative overflow-hidden`;
card.innerHTML = `
<div class="${p.bg} text-white w-10 h-10 rounded-full flex items-center justify-center font-bold mb-2 shadow">
<i class="fa-solid ${p.icon}"></i>
</div>
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">${p.text}</span>
<h4 class="font-bold text-gray-800 text-base mt-1">${item.nama}</h4>
<p class="text-xs text-gray-500">${item.kelas} • ${item.mapel}</p>
<div class="mt-3 text-2xl font-black text-blue-600">${item.skor} <span class="text-xs text-gray-400 font-normal">pts</span></div>
`;
podiumContainer.appendChild(card);
});
const tbody = document.getElementById('peringkat-table-body');
tbody.innerHTML = '';
filtered.forEach((r, idx) => {
const tr = document.createElement('tr');
tr.className = "hover:bg-gray-50 border-b";
tr.innerHTML = `
<td class="px-4 py-3 text-center font-extrabold ${idx < 3 ? 'text-amber-500 text-base' : 'text-gray-500'}">#${idx + 1}</td>
<td class="px-6 py-3 font-bold text-gray-800">${r.nama}</td>
<td class="px-4 py-3 text-center text-gray-600">${r.kelas} / ${r.absen}</td>
<td class="px-6 py-3 font-semibold text-blue-700">${r.mapel}</td>
<td class="px-4 py-3 text-center font-bold text-lg text-emerald-600">${r.skor}</td>
<td class="px-4 py-3 text-center text-xs text-gray-500">${r.waktu}</td>
`;
tbody.appendChild(tr);
});
}
function eksporHasilCSV() {
let csv = "Nama Siswa,Kelas,No Absen,Mata Pelajaran,Skor,Waktu,Tanggal\n";
studentResults.forEach(r => {
csv += `"${r.nama}","${r.kelas}",${r.absen},"${r.mapel}",${r.skor},"${r.waktu}","${r.tanggal}"\n`;
});
const blob = new Blob([csv], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', `Hasil_Simulasi_TKA_SMPN4BATANG_${new Date().toISOString().split('T')[0]}.csv`);
a.click();
}
function eksporTemplateCSV() {
let csv = "Mapel,Tipe,Stimulus,Pertanyaan,ImageURL,OpsiA,OpsiB,OpsiC,OpsiD,Kunci\n";
csv += `"AKM Literasi","Pilihan Ganda","Bacalah cerita pendek berikut...","Apa pesan moral dari wacana di samping?","","Opsi Jawaban A","Opsi Jawaban B","Opsi Jawaban C","Opsi Jawaban D","A"\n`;
csv += `"AKM Literasi","Benar-Salah","","Siapa sajakah tokoh dalam cerita tersebut?","","Pernyataan 1","Pernyataan 2","Pernyataan 3","Pernyataan 4","Benar,Salah,Benar,Salah"\n`;
const blob = new Blob([csv], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', 'Template_Bank_Soal_AKM.csv');
a.click();
}
function handleUploadSoal(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(evt) {
const text = evt.target.result;
const lines = text.split(/\r?\n/);
let count = 0;
let lastStimulus = "";
let lastImage = "";
let lastMapel = "";
for (let i = 1; i < lines.length; i++) {
if (!lines[i].trim()) continue;
const cols = lines[i].split(',').map(s => s.replace(/^"|"$/g, '').trim());
if (cols.length >= 4) {
let mapelVal = cols[0] || lastMapel || "AKM Literasi";
let tipeVal = cols[1] || "Pilihan Ganda";
let stimulusVal = cols[2] || "";
let pertanyaanVal = cols[3] || "Soal Impor";
let imageVal = cols[4] || "";
if (!stimulusVal && lastStimulus) stimulusVal = lastStimulus;
else if (stimulusVal) lastStimulus = stimulusVal;
if (!imageVal && lastImage && stimulusVal === lastStimulus) imageVal = lastImage;
else if (imageVal) lastImage = imageVal;
if (mapelVal) lastMapel = mapelVal;
questionsBank.push({
id: Date.now() + i,
mapel: mapelVal,
tipe: tipeVal,
stimulus: stimulusVal,
pertanyaan: pertanyaanVal,
image: imageVal,
opsi: { A: cols[5], B: cols[6], C: cols[7], D: cols[8] },
kunci: cols[9] || "A"
});
count++;
}
}
saveQuestionsToStorage();
renderBankSoalTable();
showToast(`Berhasil mengimpor ${count} soal baru!`);
};
reader.readAsText(file);
}
function resetDataSimulasi() {
showConfirmDialog("Reset Hasil Ujian", "Apakah Anda yakin ingin mengosongkan semua riwayat pengerjaan siswa?", () => {
studentResults = [];
saveResultsToStorage();
renderDashboard();
renderPeringkatTable();
showToast("Data hasil ujian berhasil direset.");
});
}
function resetBankSoalDefault() {
showConfirmDialog("Reset Bank Soal", "Kembalikan bank soal ke soal bawaan awal?", () => {
questionsBank = [...defaultQuestionsBank];
saveQuestionsToStorage();
renderBankSoalTable();
showToast("Bank soal dikembalikan ke default.");
});
}
function showDialog(title, message, onOk = null) {
document.getElementById('dialog-title').innerText = title;
document.getElementById('dialog-message').innerText = message;
document.getElementById('dialog-buttons').innerHTML = '';
const newBtn = document.createElement('button');
newBtn.className = "w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-lg text-sm transition-colors";
newBtn.innerText = "OK";
newBtn.onclick = () => {
document.getElementById('modal-dialog').classList.add('hidden');
if (onOk) onOk();
};
document.getElementById('dialog-buttons').appendChild(newBtn);
document.getElementById('modal-dialog').classList.remove('hidden');
}
function showConfirmDialog(title, message, onConfirm) {
document.getElementById('dialog-title').innerText = title;
document.getElementById('dialog-message').innerText = message;
const btnContainer = document.getElementById('dialog-buttons');
btnContainer.innerHTML = `
<button id="dlg-cancel" class="w-1/2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2.5 rounded-lg text-sm">Batal</button>
<button id="dlg-yes" class="w-1/2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-lg text-sm shadow">Ya, Lanjutkan</button>
`;
document.getElementById('dlg-cancel').onclick = () => {
document.getElementById('modal-dialog').classList.add('hidden');
};
document.getElementById('dlg-yes').onclick = () => {
document.getElementById('modal-dialog').classList.add('hidden');
if (onConfirm) onConfirm();
};
document.getElementById('modal-dialog').classList.remove('hidden');
}
function showPromptDialog(title, message, onSubmit) {
document.getElementById('dialog-title').innerText = title;
const btnContainer = document.getElementById('dialog-buttons');
document.getElementById('dialog-message').innerHTML = `
<p class="mb-3 text-sm text-gray-600">${message}</p>
<input type="password" id="dlg-prompt-input" class="w-full border rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500" placeholder="Masukkan PIN...">
`;
btnContainer.innerHTML = `
<button id="dlg-cancel" class="w-1/2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2.5 rounded-lg text-sm">Batal</button>
<button id="dlg-yes" class="w-1/2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-lg text-sm shadow">Masuk</button>
`;
document.getElementById('dlg-cancel').onclick = () => {
document.getElementById('modal-dialog').classList.add('hidden');
};
document.getElementById('dlg-yes').onclick = () => {
const val = document.getElementById('dlg-prompt-input').value;
document.getElementById('modal-dialog').classList.add('hidden');
if (onSubmit) onSubmit(val);
};
document.getElementById('modal-dialog').classList.remove('hidden');
setTimeout(() => {
const input = document.getElementById('dlg-prompt-input');
if (input) input.focus();
}, 100);
}
function showToast(msg) {
const toast = document.createElement('div');
toast.className = "fixed bottom-5 right-5 bg-gray-800 text-white text-sm px-4 py-3 rounded-lg shadow-xl z-50 transition-all duration-300 transform translate-y-2 opacity-0 flex items-center gap-2";
toast.innerHTML = `<i class="fa-solid fa-circle-check text-green-400"></i> ${msg}`;
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.remove('translate-y-2', 'opacity-0');
}, 50);
setTimeout(() => {
toast.classList.add('opacity-0');
setTimeout(() => toast.remove(), 300);
}, 3000);
}
// CBT Navigation & Answer Handlers
function melompatKeSoal(idx) {
if (idx >= 0 && idx < activeQuestions.length) {
currentQuestionIndex = idx;
renderCurrentQuestion();
renderNavigasiGrid();
}
}
function soalSebelumnya() {
if (currentQuestionIndex > 0) {
melompatKeSoal(currentQuestionIndex - 1);
}
}
function soalSelanjutnya() {
if (currentQuestionIndex < activeQuestions.length - 1) {
melompatKeSoal(currentQuestionIndex + 1);
}
}
function toggleRagu(el) {
const q = activeQuestions[currentQuestionIndex];
if (q) {
flaggedQuestions[q.id] = el.checked;
renderNavigasiGrid();
}
}
function pilihJawaban(qId, key, isMultiSelect) {
if (isMultiSelect) {
if (!Array.isArray(studentAnswers[qId])) {
studentAnswers[qId] = [];
}
const index = studentAnswers[qId].indexOf(key);
if (index > -1) {
studentAnswers[qId].splice(index, 1);
} else {
studentAnswers[qId].push(key);
}
} else {
studentAnswers[qId] = key;
}
renderCurrentQuestion();
renderNavigasiGrid();
}
function akhiriUjianKonfirmasi() {
showConfirmDialog("Selesaikan Ujian?", "Apakah Anda yakin ingin menyelesaikan simulasi ujian ini? Jawaban Anda akan langsung dikirim dan dihitung.", () => {
akhiriUjian();
});
}
function tutupHasilDanKembali() {
document.getElementById('modal-hasil').classList.add('hidden');
kembaliKeHome();
}
// Admin Navigation & Rendering Handlers
function switchAdminMenu(menuId) {
document.querySelectorAll('.admin-content-panel').forEach(panel => {
panel.classList.add('hidden');
panel.classList.remove('block');
});
document.querySelectorAll('.admin-menu-btn').forEach(btn => {
btn.classList.remove('bg-blue-600', 'text-white');
btn.classList.add('text-gray-300', 'hover:bg-gray-700', 'hover:text-white');
});
const targetPanel = document.getElementById(menuId);
if (targetPanel) {
targetPanel.classList.remove('hidden');
targetPanel.classList.add('block');
}
const activeBtn = document.getElementById('btn-' + menuId);
if (activeBtn) {
activeBtn.classList.remove('text-gray-300', 'hover:bg-gray-700', 'hover:text-white');
activeBtn.classList.add('bg-blue-600', 'text-white');
}
if (menuId === 'menu-dashboard') {
renderDashboard();
} else if (menuId === 'menu-banksoal') {
renderBankSoalTable();
} else if (menuId === 'menu-monitoring') {
renderMonitoringTable();
} else if (menuId === 'menu-peringkat') {
renderPeringkatTable();
}
}
function renderDashboard() {
const totalPeserta = studentResults.length;
document.getElementById('dash-total-peserta').innerText = totalPeserta;
document.getElementById('dash-selesai').innerText = totalPeserta;
if (totalPeserta > 0) {
const totalSkor = studentResults.reduce((acc, curr) => acc + curr.skor, 0);
const maxSkor = Math.max(...studentResults.map(r => r.skor));
document.getElementById('dash-ratarata').innerText = (totalSkor / totalPeserta).toFixed(1);
document.getElementById('dash-tertinggi').innerText = maxSkor;
} else {
document.getElementById('dash-ratarata').innerText = "0";
document.getElementById('dash-tertinggi').innerText = "0";
}
const mapels = [...new Set(questionsBank.map(q => q.mapel))];
const averages = mapels.map(m => {
const items = studentResults.filter(r => r.mapel === m);
if (items.length === 0) return 0;
return Math.round(items.reduce((a, b) => a + b.skor, 0) / items.length);
});
const ctx = document.getElementById('rekapChart');
if (ctx) {
if (rekapChartInstance) {
rekapChartInstance.destroy();
}
rekapChartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: mapels.length > 0 ? mapels : ["AKM Literasi", "AKM Numerasi", "Bahasa Inggris"],
datasets: [{
label: 'Rata-Rata Nilai',
data: averages,
backgroundColor: ['rgba(74, 130, 184, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)', 'rgba(139, 92, 246, 0.8)'],
borderRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: { beginAtZero: true, max: 100 }
}
}
});
}
}
function filterBankSoal() {
renderBankSoalTable();
}
function renderBankSoalTable() {
const mapelFilter = document.getElementById('filterMapelBankSoal') ? document.getElementById('filterMapelBankSoal').value : 'Semua';
let filtered = questionsBank;
if (mapelFilter !== 'Semua') {
filtered = questionsBank.filter(q => q.mapel.trim().toLowerCase() === mapelFilter.trim().toLowerCase());
}
const countElem = document.getElementById('countBankSoal');
if (countElem) countElem.innerText = filtered.length;
const tbody = document.getElementById('banksoal-table-body');
if (!tbody) return;
tbody.innerHTML = '';
filtered.forEach((q, idx) => {
const tr = document.createElement('tr');
tr.className = "hover:bg-gray-50 border-b";
const hasImage = q.image && q.image.trim() !== '' ? `<span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full font-bold"><i class="fa-solid fa-image"></i> Ada</span>` : `<span class="text-xs text-gray-400">Tidak</span>`;
tr.innerHTML = `
<td class="px-4 py-3 text-center font-bold text-gray-600">${idx + 1}</td>
<td class="px-4 py-3 font-semibold text-blue-700">${q.mapel}</td>
<td class="px-4 py-3 text-xs font-bold text-gray-600">${q.tipe}</td>
<td class="px-4 py-3 max-w-xs text-gray-800">
<div class="text-xs text-blue-600 font-semibold truncate mb-0.5" title="${q.stimulus}">Wacana: ${q.stimulus ? q.stimulus.replace(/<[^>]*>?/gm, '').substring(0, 35) + '...' : '(Kosong)'}</div>
<div class="font-medium truncate" title="${q.pertanyaan}">${q.pertanyaan}</div>
</td>
<td class="px-4 py-3 text-center">${hasImage}</td>
<td class="px-4 py-3 text-center">
<div class="flex items-center justify-center gap-1.5">
<button onclick="duplikatSoal(${q.id})" class="p-1.5 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-xs font-bold transition-colors flex items-center gap-1" title="Duplikat Soal Ini (1-Klik)">
<i class="fa-solid fa-copy"></i> Copy
</button>
<button onclick="bukaModalEditSoal(${q.id})" class="p-1.5 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-xs font-bold transition-colors" title="Edit Soal">
<i class="fa-solid fa-pen-to-square"></i>
</button>
<button onclick="hapusSoal(${q.id})" class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-xs font-bold transition-colors" title="Hapus Soal">
<i class="fa-solid fa-trash-can"></i>
</button>
</div>
</td>
`;
tbody.appendChild(tr);
});
}
// Initialize App on Window Load
window.onload = function() {
initDataStorage();
switchView('student-view');
};
</script>
