<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulasi TKA Ekonomi SMA 2026 - HOTS Interaktif</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- MathJax for rendering LaTeX formulas -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="mathjax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
.
custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.
custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.
custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.
custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-indigo-700 text-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-3">
<i data-lucide="book-open-check" class="w-8 h-8"></i>
<div>
<h1 class="font-bold text-lg leading-tight">Simulasi TKA Ekonomi SMA 2026</h1>
<p class="text-xs text-indigo-200">Latihan Soal HOTS Interaktif &
Pembahasan</p>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="text-right hidden sm:block">
<span class="text-xs block text-indigo-200">Progres Pengerjaan</span>
<span id="progress-text" class="font-bold text-sm">0 / 10 Soal</span>
</div>
<div class="w-24 bg-indigo-900 rounded-full h-3 overflow-hidden border
border-indigo-400">
<div id="progress-bar" class="bg-emerald-400 h-full w-0 transition-all
duration-300"></div>
</div>
</div>
</div>
</header>
<!-- Main Content Container -->
<main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-4
gap-6">
<!-- Sidebar Navigation (Grid Soal) -->
<aside class="lg:col-span-1 bg-white rounded-xl shadow-sm border border-slate-200 p-4
h-fit sticky top-20">
<h2 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
<i data-lucide="grid" class="w-5 h-5 text-indigo-600"></i> Navigasi Soal
</h2>
<div class="flex flex-wrap gap-1.5 max-h-[60vh] overflow-y-auto custom-scrollbar p-1"
id="nav-grid">
<!-- Nav buttons generated dynamically -->
</div>
<div class="mt-4 pt-3 border-t border-slate-100 text-xs text-slate-500 space-y-1">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded bg-indigo-600 inline-block"></span> Aktif
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded bg-emerald-500 inline-block"></span> Benar
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded bg-rose-500 inline-block"></span> Salah
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded bg-slate-200 inline-block"></span> Belum Dijawab
</div>
</div>
</aside>
<!-- Question View Area -->
<section class="lg:col-span-3 flex flex-col space-y-6">
<!-- Question Card -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex-1 flex
flex-col">
<!-- Top Info Bar -->
<div class="flex flex-wrap justify-between items-center gap-2 pb-4 mb-4 border-b
border-slate-100">
<span id="question-badge" class="px-3 py-1 bg-indigo-100 text-indigo-800
font-semibold text-xs rounded-full">
Soal #1
</span>
<span id="question-type" class="px-3 py-1 bg-amber-100 text-amber-800 text-xs
font-medium rounded-full">
Pilihan Ganda
</span>
<span id="question-topic" class="text-xs text-slate-500 font-medium ml-auto">
Materi: Konsep Dasar Ekonomi
</span>
</div>
<!-- Question Body -->
<div id="question-body" class="text-slate-800 text-base leading-relaxed space-y-4
mb-6">
<!-- Dynamic Question Text & Table/Graph -->
</div>
<!-- Answer Interactive Area -->
<div id="answer-interactive" class="space-y-3 mb-6">
<!-- Dynamic Interactive Options -->
</div>
<!-- Check / Action Button -->
<div class="mt-auto pt-4 border-t border-slate-100 flex justify-between items-center">
<button id="btn-prev" onclick="prevQuestion()" class="px-4 py-2 bg-slate-100
hover:bg-slate-200 text-slate-700 text-sm font-medium rounded-lg transition flex
items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button id="btn-submit" onclick="submitAnswer()" class="px-6 py-2.5
bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg shadow-md
hover:shadow transition flex items-center gap-2">
<i data-lucide="check-circle-2" class="w-4 h-4"></i> Periksa Jawaban
</button>
<button id="btn-next" onclick="nextQuestion()" class="px-4 py-2 bg-slate-100
hover:bg-slate-200 text-slate-700 text-sm font-medium rounded-lg transition flex
items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed">
Selanjutnya <i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
</div>
</div>
<!-- Instant Feedback & Explanation Panel -->
<div id="explanation-panel" class="hidden bg-slate-800 text-slate-100 rounded-xl p-6
shadow-lg border border-slate-700 space-y-3 transition-all duration-300">
<div class="flex items-center gap-2 text-lg font-bold" id="feedback-status">
<!-- Status Icon & Text -->
</div>
<div class="text-sm leading-relaxed text-slate-300 space-y-2 border-t
border-slate-700 pt-3" id="explanation-text">
<!-- Detailed Rationale -->
</div>
</div>
</section>
</main>
<!-- Script Application Logic -->
<script>
const questionsData = [
{
id: 1,
type: "pg",
topic: "Konsep Dasar Ekonomi",
question: "Seseorang memiliki dana modal sebesar Rp100.000.000,00 dan dihadapkan
pada tiga alternatif keputusan usaha:\n\n1. Membuka toko pakaian: Proyeksi keuntungan
bersih Rp15.000.000/bulan.\n2. Membuka kedai kopi: Proyeksi keuntungan bersih
Rp18.000.000/bulan.\n3. Menjadi agen franchise kuliner: Proyeksi keuntungan bersih
Rp12.000.000/bulan.\n\nJika orang tersebut memilih untuk **membuka kedai kopi**,
berapakah besarnya **Biaya Peluang (Opportunity Cost)** yang dikorbankan?",
options: [
"Rp18.000.000/bulan",
"Rp15.000.000/bulan",
"Rp27.000.000/bulan",
"Rp12.000.000/bulan",
"Rp45.000.000/bulan"
],
correctAnswer: 1,
explanation: "<strong>Pembahasan HOTS:</strong><br>Biaya peluang adalah nilai
kesempatan terbaik *berikutnya* yang dikorbankan ketika memilih suatu alternatif.
Kesempatan yang dikorbankan adalah Toko Pakaian (Rp15 jt) dan Franchise Kuliner (Rp12
jt). Nilai tertinggi dari pilihan yang ditinggalkan tersebut adalah
<strong>Rp15.000.000/bulan</strong> (Toko Pakaian)."
},
{
id: 2,
type: "pg_kompleks",
topic: "Ekonomi Mikro & Pasar",
question: "Pemerintah menetapkan kebijakan **Harga Eceran Tertinggi (Maximum
Price/Ceiling Price)** pada komoditas beras medium untuk menjaga keterjangkauan
masyarakat. Manakah dari pernyataan berikut yang **BENAR** terkait dampak ekonomi dari
kebijakan tersebut? *(Pilih lebih dari satu)*",
options: [
"Terjadi kondisi kelebihan penawaran (Excess Supply) di pasar.",
"Terjadi kondisi kelebihan permintaan (Excess Demand) atau kelangkaan barang.",
"Produsen cenderung mengurangi kuantitas produksi karena harga yang ditetapkan
di bawah harga keseimbangan.",
"Pasar gelap (black market) berpotensi muncul sebagai imbas dari kekurangan
pasokan.",
"Kesejahteraan konsumen secara keseluruhan dipastikan meningkat tanpa adanya
pengorbanan."
],
correctAnswer: [1, 2, 3],
explanation: "<strong>Pembahasan HOTS:</strong><br>Penerapan *Ceiling Price* di
bawah harga keseimbangan pasar menyebabkan kuantitas yang diminta naik (karena
murah) sementara kuantitas yang ditawarkan turun (produsen enggan menjual murah).
Akibatnya:<br>1. Terjadi *Excess Demand* (Kelangkaan).<br>2. Produsen menekan jumlah
pasokan.<br>3. Mendorong timbulnya transaksi *Black Market* dengan harga tinggi secara
ilegal."
},
{
id: 3,
type: "data_table",
topic: "Ekonomi Makro & Kebijakan",
question: "Perhatikan data PDB nominal dan Indeks Harga Konsumen (IHK) Negara
'Sejahtera' berikut:\n\n<table class='min-w-full text-xs text-left text-slate-700 border
border-slate-300 my-2'><thead class='bg-slate-100'><tr><th class='p-2
border'>Tahun</th><th class='p-2 border'>PDB Nominal (Miliar Rp)</th><th class='p-2
border'>IHK (Tahun Dasar 2023=100)</th></tr></thead><tbody><tr><td class='p-2
border'>2024</td><td class='p-2 border'>1.200</td><td class='p-2
border'>100</td></tr><tr><td class='p-2 border'>2025</td><td class='p-2
border'>1.380</td><td class='p-2 border'>115</td></tr></tbody></table>\nBerdasarkan data
di atas, bagaimanakah kondisi **Pertumbuhan Ekonomi Riil** Negara Sejahtera pada tahun
2025 dibandingkan tahun 2024?",
options: [
"Tumbuh sebesar 15%",
"Tumbuh sebesar 0% (Stagnan)",
"Mengalami kontraksi sebesar -5%",
"Tumbuh sebesar 12%",
"Tumbuh sebesar 5%"
],
correctAnswer: 1,
explanation: "<strong>Pembahasan HOTS:</strong><br>PDB Riil dihitung untuk
mengeliminasi pengaruh inflasi.<br>$$\\text{PDB Riil 2024} = \\frac{1.200}{100} \\times 100
= 1.200$$<br>$$\\text{PDB Riil 2025} = \\frac{1.380}{115} \\times 100 = 1.200$$<br>Karena
PDB Riil 2024 = PDB Riil 2025 = 1.200, maka Laju Pertumbuhan Ekonomi Riil adalah
<strong>0% (Stagnan)</strong>. Kenaikan PDB Nominal semata-mata disebabkan oleh
kenaikan harga (inflasi 15%)."
},
{
id: 4,
type: "tf",
topic: "Kebijakan Moneter & Fiskal",
question: "Ketika suatu negara mengalami **Inflasi Tinggi** akibat kenaikan agregat
permintaan (Demand-Pull Inflation), Bank Sentral dapat menerapkan Kebijakan Moneter
Kontraktif dengan cara **menaikkan Tingkat Diskonto (Discount Rate)** dan **menaikkan
Giro Wajib Minimum (GWM)** untuk menekan jumlah uang beredar.",
options: ["BENAR", "SALAH"],
correctAnswer: 0,
explanation: "<strong>Pembahasan HOTS:</strong><br><strong>BENAR.</strong>
Untuk mengendalikan *Demand-Pull Inflation*, Bank Sentral menerapkan kebijakan uang
ketat (*Tight Money Policy*). Menarik cadangan bank (naik GWM) dan menaikkan suku
bunga kredit (naik diskonto) akan mengurangi pinjaman masyarakat, menurunkan jumlah
uang beredar, serta menurunkan permintaan agregat."
},
{
id: 5,
type: "matching",
topic: "Akuntansi Keuangan Dasar",
question: "Jodohkanlah jenis transaksi akuntansi berikut dengan pengaruhnya terhadap
Persamaan Dasar Akuntansi ($Aset = Liabilitas + Ekuitas$):",
pairs: [
{ item: "1. Membeli perlengkapan kantor secara kredit", match: "A. Aset (+) dan
Liabilitas (+)" },
{ item: "2. Menerima pelunasan piutang dari pelanggan", match: "B. Aset (+) dan
Aset (-)" },
{ item: "3. Membayar beban gaji karyawan tunai", match: "C. Aset (-) dan Ekuitas (-)"
}
],
options: [
"1-A, 2-B, 3-C",
"1-B, 2-A, 3-C",
"1-C, 2-B, 3-A",
"1-A, 2-C, 3-B"
],
correctAnswer: 0,
explanation: "<strong>Pembahasan HOTS:</strong><br>1. Beli kredit: Perlengkapan
(Aset) bertambah, Utang (Liabilitas) bertambah $\\rightarrow$ (A).<br>2. Pelunasan piutang:
Kas (Aset) bertambah, Piutang (Aset) berkurang $\\rightarrow$ (B).<br>3. Bayar gaji: Kas
(Aset) berkurang, Beban mengurangi Modal (Ekuitas) $\\rightarrow$ (C)."
},
{
id: 6,
type: "isian",
topic: "Lembaga Keuangan & Koperasi",
question: "Di akhir tahun buku, Koperasi 'Maju Bersama' memperoleh Sisa Hasil Usaha
(SHU) Total sebesar Rp60.000.000,00. Berdasarkan AD/ART, alokasi untuk Jasa Anggota
Jasa Usaha/Penjualan adalah 25%. Total penjualan Koperasi kepada seluruh anggota
adalah Rp200.000.000,00.<br><br>Jika Pak Budi melakukan pembelian di koperasi selama
satu tahun sebesar Rp10.000.000,00, hitunglah besarnya bagian **SHU Jasa Usaha** yang
diterima Pak Budi! *(Ketikkan angka tanpa titik/Rp, contoh: 750000)*",
correctAnswer: "750000",
explanation: "<strong>Pembahasan HOTS:</strong><br>$$\\text{Total Bagian SHU
Jasa Penjualan} = 25\\% \\times \\text{Rp}60.000.000 =
\\text{Rp}15.000.000$$<br>$$\\text{SHU Pak Budi} = \\left( \\frac{\\text{Pembelian
Budi}}{\\text{Total Penjualan Koperasi}} \\right) \\times \\text{Total SHU Jasa
Penjualan}$$<br>$$\\text{SHU Pak Budi} = \\left( \\frac{10.000.000}{200.000.000} \\right)
\\times 15.000.000 = \\mathbf{750.000}$$"
},
{
id: 7,
type: "pg",
topic: "Ekonomi Internasional",
question: "Apabila rupiah mengalami **Depresiasi** terhadap Dolar AS (misalnya dari
Rp15.000/US$ menjadi Rp16.500/US$), dampak yang paling tepat terhadap neraca
perdagangan dan perekonomian domestik Indonesia adalah...",
options: [
"Harga barang impor menjadi lebih murah, mendorong peningkatan volume impor.",
"Daya saing komoditas ekspor Indonesia meningkat di pasar internasional karena
relatif lebih murah.",
"Neraca perdagangan dipastikan langsung mengalami defisit besar.",
"Industri dalam negeri yang bergantung pada bahan baku impor akan mengalami
penurunan biaya produksi.",
"Jumlah utang luar negeri Indonesia dalam denominasi US$ jika dikonversi ke
Rupiah nilainya menurun."
],
correctAnswer: 1,
explanation: "<strong>Pembahasan HOTS:</strong><br>Saat Rupiah
melemah/depresiasi terhadap US$, harga produk ekspor Indonesia dalam valuta asing
menjadi relatif murah di mata pembeli asing, sehingga daya saing barang ekspor meningkat.
Sebaliknya, barang impor menjadi mahal."
},
{
id: 8,
type: "pg",
topic: "Ekonomi Mikro & Pasar",
question: "Diketahui fungsi permintaan barang $Q_d = 100 - 2P$ dan fungsi penawaran
$Q_s = -20 + 3P$. Jika pemerintah mengenakan **pajak spesifik sebesar $t = 5$ per unit**
barang, tentukan harga keseimbangan pasar setelah pajak ($P_e'$)!",
options: [
"P = 27",
"P = 24",
"P = 25",
"P = 30",
"P = 22"
],
correctAnswer: 0,
explanation: "<strong>Pembahasan HOTS:</strong><br>Pajak menggeser fungsi
penawaran:<br>$$Q_s' = -20 + 3(P - 5) = -20 + 3P - 15 = -35 + 3P$$<br>Keseimbangan
baru $Q_d = Q_s'$:<br>$$100 - 2P = -35 + 3P$$<br>$$135 = 5P \\implies P_e' = 27$$"
},
{
id: 9,
type: "pg_kompleks",
topic: "Akuntansi Keuangan Dasar",
question: "Data penyesuaian per 31 Desember 2025 menunjukkan: **Asuransi dibayar
di muka** dicatat sebesar Rp12.000.000,00 pada tanggal 1 September 2025 untuk jangka
waktu 1 tahun. Manakah analisis ayat jurnal penyesuaian yang **BENAR**? *(Pilih lebih dari
satu)*",
options: [
"Beban Asuransi yang diakui sebesar Rp4.000.000,00",
"Beban Asuransi yang diakui sebesar Rp8.000.000,00",
"Asuransi Dibayar di Muka dikreditkan sebesar Rp4.000.000,00",
"Jurnalnya adalah: Beban Asuransi (D) Rp4.000.000 dan Asuransi Dibayar di Muka
(K) Rp4.000.000",
"Jurnalnya adalah: Beban Asuransi (D) Rp8.000.000 dan Kas (K) Rp8.000.000"
],
correctAnswer: [0, 2, 3],
explanation: "<strong>Pembahasan HOTS:</strong><br>Masa yang telah terlampaui
dari 1 Sept - 31 Des = 4 bulan (Sept, Okt, Nov, Des).<br>$$\\text{Beban Asuransi} =
\\frac{4}{12} \\times \\text{Rp}12.000.000 = \\text{Rp}4.000.000$$<br>Jurnal
penyesuaian:<br>Beban Asuransi (D) Rp4.000.000<br>Asuransi Dibayar di Muka (K)
Rp4.000.000"
},
{
id: 10,
type: "tf",
topic: "Lembaga Keuangan & OJK",
question: "Otoritas Jasa Keuangan (OJK) memiliki kewenangan independen untuk
mengatur dan mengawasi kegiatan jasa keuangan di sektor Perbankan, Pasar Modal, serta
Perasuransian dan Dana Pensiun, sementara fungsi menjaga kestabilan nilai rupiah tetap
berada di bawah wewenang Bank Indonesia.",
options: ["BENAR", "SALAH"],
correctAnswer: 0,
explanation: "<strong>Pembahasan HOTS:</strong><br><strong>BENAR.</strong>
Sejak UU OJK dibentuk, fungsi pengawasan makroprudensial dan stabilitas nilai mata uang
dipegang BI, sedangkan pengawasan mikroprudensial terhadap lembaga jasa keuangan
(bank, perasuransian, pasar modal) menjadi wewenang OJK."
}
];
let userAnswers = {};
let currentQuestionIndex = 0;
document.addEventListener('DOMContentLoaded', () => {
renderNavGrid();
loadQuestion(0);
lucide.createIcons();
});
function renderNavGrid() {
const gridContainer = document.getElementById('nav-grid');
gridContainer.innerHTML = '';
questionsData.forEach((q, idx) => {
const btn = document.createElement('button');
btn.id = `nav-btn-${idx}`;
btn.className = `w-9 h-9 font-semibold text-xs rounded-lg border flex items-center
justify-center transition-all ${getNavStatusStyle(idx)}`;
btn.innerText = idx + 1;
btn.onclick = () => loadQuestion(idx);
gridContainer.appendChild(btn);
});
}
function getNavStatusStyle(idx) {
if (idx === currentQuestionIndex) {
return 'bg-indigo-600 text-white border-indigo-700 shadow';
}
if (userAnswers[idx] !== undefined) {
return userAnswers[idx].isCorrect
? 'bg-emerald-500 text-white border-emerald-600'
: 'bg-rose-500 text-white border-rose-600';
}
return 'bg-slate-100 text-slate-700 border-slate-200 hover:bg-slate-200';
}
function updateProgress() {
const answeredCount = Object.keys(userAnswers).length;
const total = questionsData.length;
document.getElementById('progress-text').innerText = `${answeredCount} / ${total} Soal`;
const percentage = (answeredCount / total) * 100;
document.getElementById('progress-bar').style.width = `${percentage}%`;
}
function loadQuestion(index) {
currentQuestionIndex = index;
const q = questionsData[index];
document.getElementById('question-badge').innerText = `Soal #${index + 1}`;
document.getElementById('question-topic').innerText = `Materi: ${q.topic}`;
const typeLabels = {
'pg': 'Pilihan Ganda (1 Jawaban)',
'pg_kompleks': 'Pilihan Ganda Kompleks',
'data_table': 'Analisis Data / Tabel',
'tf': 'Benar / Salah',
'matching': 'Menjodohkan',
'isian': 'Isian Singkat'
};
document.getElementById('question-type').innerText = typeLabels[q.type] || 'Soal
Ekonomi';
const bodyEl = document.getElementById('question-body');
bodyEl.innerHTML = q.question.replace(/\n/g, '<br>');
const interactiveEl = document.getElementById('answer-interactive');
interactiveEl.innerHTML = '';
const isAnswered = userAnswers[index] !== undefined;
if (q.type === 'pg' || q.type === 'data_table' || q.type === 'tf' || q.type === 'matching') {
q.options.forEach((opt, optIdx) => {
const label = document.createElement('label');
label.className = `flex items-start p-3.5 rounded-lg border cursor-pointer transition
text-sm ${
isAnswered ? 'pointer-events-none' : 'hover:bg-indigo-50/50
hover:border-indigo-300'
} ${getOptionStyle(index, optIdx)}`;
const isChecked = isAnswered && userAnswers[index].userSelection === optIdx;
label.innerHTML = `
<input type="radio" name="option" value="${optIdx}" ${isChecked ? 'checked' : ''}
${isAnswered ? 'disabled' : ''} class="mt-0.5 h-4 w-4 text-indigo-600 border-slate-300
focus:ring-indigo-500">
<span class="ml-3 font-medium text-slate-700">${opt}</span>
`;
interactiveEl.appendChild(label);
});
} else if (q.type === 'pg_kompleks') {
q.options.forEach((opt, optIdx) => {
const label = document.createElement('label');
const selectedArr = isAnswered ? userAnswers[index].userSelection : [];
const isChecked = selectedArr.includes(optIdx);
label.className = `flex items-start p-3.5 rounded-lg border cursor-pointer transition
text-sm ${
isAnswered ? 'pointer-events-none' : 'hover:bg-indigo-50/50
hover:border-indigo-300'
} ${getComplexOptionStyle(index, optIdx)}`;
label.innerHTML = `
<input type="checkbox" name="complex_option" value="${optIdx}" ${isChecked ?
'checked' : ''} ${isAnswered ? 'disabled' : ''} class="mt-0.5 h-4 w-4 text-indigo-600 rounded
border-slate-300 focus:ring-indigo-500">
<span class="ml-3 font-medium text-slate-700">${opt}</span>
`;
interactiveEl.appendChild(label);
});
} else if (q.type === 'isian') {
const val = isAnswered ? userAnswers[index].userSelection : '';
interactiveEl.innerHTML = `
<div class="mt-2">
<input type="text" id="input-isian" value="${val}" ${isAnswered ? 'disabled' : ''}
placeholder="Ketikkan jawaban Anda di sini..." class="w-full md:w-1/2 p-3 border
border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none">
</div>
`;
}
const btnSubmit = document.getElementById('btn-submit');
if (isAnswered) {
btnSubmit.disabled = true;
btnSubmit.classList.add('opacity-50', 'cursor-not-allowed');
showExplanationPanel(index);
} else {
btnSubmit.disabled = false;
btnSubmit.classList.remove('opacity-50', 'cursor-not-allowed');
hideExplanationPanel();
}
document.getElementById('btn-prev').disabled = index === 0;
document.getElementById('btn-next').disabled = index === questionsData.length - 1;
renderNavGrid();
updateProgress();
if (window.MathJax) {
MathJax.typesetPromise();
}
}
function getOptionStyle(qIdx, optIdx) {
if (userAnswers[qIdx] === undefined) return 'bg-white border-slate-200';
const ua = userAnswers[qIdx];
if (optIdx === questionsData[qIdx].correctAnswer) {
return 'bg-emerald-50 border-emerald-400 text-emerald-900';
}
if (ua.userSelection === optIdx && !ua.isCorrect) {
return 'bg-rose-50 border-rose-400 text-rose-900';
}
return 'bg-slate-50 border-slate-200 opacity-60';
}
function getComplexOptionStyle(qIdx, optIdx) {
if (userAnswers[qIdx] === undefined) return 'bg-white border-slate-200';
const correctArr = questionsData[qIdx].correctAnswer;
const userArr = userAnswers[qIdx].userSelection;
const isCorrectOption = correctArr.includes(optIdx);
const isUserPicked = userArr.includes(optIdx);
if (isCorrectOption) {
return 'bg-emerald-50 border-emerald-400 text-emerald-900';
}
if (isUserPicked && !isCorrectOption) {
return 'bg-rose-50 border-rose-400 text-rose-900';
}
return 'bg-slate-50 border-slate-200 opacity-60';
}
function submitAnswer() {
const q = questionsData[currentQuestionIndex];
let userSel;
let isCorrect = false;
if (q.type === 'pg' || q.type === 'data_table' || q.type === 'tf' || q.type === 'matching') {
const selected = document.querySelector('input[name="option"]:checked');
if (!selected) {
alert('Silakan pilih salah satu jawaban terlebih dahulu!');
return;
}
userSel = parseInt(selected.value);
isCorrect = userSel === q.correctAnswer;
} else if (q.type === 'pg_kompleks') {
const selected =
Array.from(document.querySelectorAll('input[name="complex_option"]:checked')).map(el =>
parseInt(el.value));
if (selected.length === 0) {
alert('Silakan pilih minimal satu opsi!');
return;
}
userSel = selected;
const correctSorted = [...q.correctAnswer].sort();
const userSorted = [...selected].sort();
isCorrect = JSON.stringify(correctSorted) === JSON.stringify(userSorted);
} else if (q.type === 'isian') {
const inputVal = document.getElementById('input-isian').value.trim();
if (!inputVal) {
alert('Silakan isi jawaban terlebih dahulu!');
return;
}
userSel = inputVal;
isCorrect = inputVal.toLowerCase() === q.correctAnswer.toLowerCase();
}
userAnswers[currentQuestionIndex] = {
userSelection: userSel,
isCorrect: isCorrect
};
loadQuestion(currentQuestionIndex);
}
function showExplanationPanel(index) {
const panel = document.getElementById('explanation-panel');
const statusEl = document.getElementById('feedback-status');
const textEl = document.getElementById('explanation-text');
const ua = userAnswers[index];
const q = questionsData[index];
panel.classList.remove('hidden');
if (ua.isCorrect) {
statusEl.className = 'flex items-center gap-2 text-lg font-bold text-emerald-400';
statusEl.innerHTML = `<i data-lucide="check-circle" class="w-6 h-6"></i> Jawaban
Anda BENAR!`;
} else {
statusEl.className = 'flex items-center gap-2 text-lg font-bold text-rose-400';
statusEl.innerHTML = `<i data-lucide="x-circle" class="w-6 h-6"></i> Jawaban Anda
KURANG TEPAT!`;
}
textEl.innerHTML = q.explanation;
lucide.createIcons();
if (window.MathJax) {
MathJax.typesetPromise();
}
}
function hideExplanationPanel() {
document.getElementById('explanation-panel').classList.add('hidden');
}
function nextQuestion() {
if (currentQuestionIndex < questionsData.length - 1) {
loadQuestion(currentQuestionIndex + 1);
}
}
function prevQuestion() {
if (currentQuestionIndex > 0) {
loadQuestion(currentQuestionIndex - 1);
}
}
</script>
</body>
</html>
