1400→                                    <text x="55" y="55" fill="#06b6d4" font-size="9">T₁ (rendah)</text>
  1401→                                    
  1402→                                    <!-- High T curve (broader, flatter) -->
  1403→                                    <path d="M 20 140 Q 80 40, 160 140" stroke="#f59e0b" stroke-width="2" fill="none"/>
  1404→                                    <text x="100" y="35" fill="#f59e0b" font-size="9">T₂ (tinggi)</text>
  1405→                                    
  1406→                                    <!-- Ea line -->
  1407→                                    <line x1="110" y1="10" x2="110" y2="140" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3,2"/>
  1408→                                    <text x="115" y="20" fill="#ef4444" font-size="9">Eₐ</text>
  1409→                                    
  1410→                                    <!-- Shaded area beyond Ea for T1 -->
  1411→                                    <path d="M 110 140 Q 110 100, 130 140 Z" fill="rgba(6, 182, 212, 0.3)"/>
  1412→                                    <!-- Shaded area beyond Ea for T2 -->
  1413→                                    <path d="M 110 140 Q 130 80, 160 140 Z" fill="rgba(245, 158, 11, 0.3)"/>
  1414→                                </svg>
  1415→                            </div>
  1416→                            <p class="text-[10px] text-slate-400 mt-2 leading-relaxed">
  1417→                                Pada suhu lebih tinggi (T₂), kurva lebih lebar dan lebih banyak partikel memiliki energi ≥ Eₐ (area oranye). Inilah mengapa kenaikan suhu mempercepat reaksi secara eksponensial.
  1418→                            </p>
  1419→                        </div>
  1420→
  1421→                        <!-- Factors Affecting Rate -->
  1422→                        <div class="glass-panel rounded-xl p-5">
  1423→                            <h3 class="text-sm font-bold text-amber-400 uppercase tracking-wider mb-3 font-display">Faktor Lain yang Memengaruhi Laju</h3>
  1424→                            <div class="space-y-2">
  1425→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-rose-400">
  1426→                                    <div class="flex justify-between items-center">
  1427→                                        <span class="text-xs font-bold text-rose-400">Suhu</span>
  1428→                                        <span class="text-[10px] text-slate-500">↑T → ↑v</span>
  1429→                                    </div>
  1430→                                    <p class="text-[10px] text-slate-400 mt-1">Energi kinetik partikel naik, lebih banyak melewati Eₐ</p>
  1431→                                </div>
  1432→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-purple-400">
  1433→                                    <div class="flex justify-between items-center">
  1434→                                        <span class="text-xs font-bold text-purple-400">Konsentrasi</span>
  1435→                                        <span class="text-[10px] text-slate-500">↑[ ] → ↑v</span>
  1436→                                    </div>
  1437→                                    <p class="text-[10px] text-slate-400 mt-1">Frekuensi tumbukan meningkat</p>
  1438→                                </div>
  1439→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-cyan-400">
  1440→                                    <div class="flex justify-between items-center">
  1441→                                        <span class="text-xs font-bold text-cyan-400">Luas Permukaan</span>
  1442→                                        <span class="text-[10px] text-slate-500">↑A → ↑v</span>
  1443→                                    </div>
  1444→                                    <p class="text-[10px] text-slate-400 mt-1">Lebih banyak partikel terekspos untuk bereaksi</p>
  1445→                                </div>
  1446→                                <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-emerald-400">
  1447→                                    <div class="flex justify-between items-center">
  1448→                                        <span class="text-xs font-bold text-emerald-400">Katalis</span>
  1449→                                        <span class="text-[10px] text-slate-500">+kat → ↑v</span>
  1450→                                    </div>
  1451→                                    <p class="text-[10px] text-slate-400 mt-1">Menurunkan Eₐ, menyediakan jalur alternatif</p>
  1452→                                </div>
  1453→                            </div>
  1454→                        </div>
  1455→
  1456→                        <!-- Real-World Applications -->
  1457→                        <div class="glass-panel rounded-xl p-5">
  1458→                            <h3 class="text-sm font-bold text-emerald-400 uppercase tracking-wider mb-3 font-display">Aplikasi Nyata</h3>
  1459→                            <div class="space-y-3 text-xs">
  1460→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1461→                                    <div class="font-bold text-emerald-300 mb-1">🏭 Industri Kimia</div>
  1462→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Pemilihan konsentrasi optimal reaktan dalam sintesis amonia (Haber-Bosch) untuk efisiensi produksi.</p>
  1463→                                </div>
  1464→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1465→                                    <div class="font-bold text-emerald-300 mb-1">🍞 Pengawetan Makanan</div>
  1466→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Lemari es menurunkan suhu → menurunkan laju reaksi pembusukan. Kadar garam/vinegar menghambat mikroba.</p>
  1467→                                </div>
  1468→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1469→                                    <div class="font-bold text-emerald-300 mb-1">💊 Farmasi</div>
  1470→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Konsentrasi obat dalam darah menentukan kecepatan metabolisme dan efektivitas terapi.</p>
  1471→                                </div>
  1472→                                <div class="bg-slate-800/40 rounded-lg p-3">
  1473→                                    <div class="font-bold text-emerald-300 mb-1">🔋 Baterai & Sel Bahan Bakar</div>
  1474→                                    <p class="text-slate-400 text-[11px] leading-relaxed">Konsentrasi elektrolit memengaruhi laju reaksi elektrokimia dan daya output.</p>
  1475→                                </div>
  1476→                            </div>
  1477→                        </div>
  1478→
  1479→                        <!-- Key Formulas Summary -->
  1480→                        <div class="glass-panel rounded-xl p-5">
  1481→                            <h3 class="text-sm font-bold text-cyan-400 uppercase tracking-wider mb-3 font-display">Ringkasan Rumus</h3>
  1482→                            <div class="space-y-2 text-xs">
  1483→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-cyan-300 text-center">v = k[A]ᵐ[B]ⁿ</div>
  1484→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-amber-300 text-center">k = A·e^(−Eₐ/RT)</div>
  1485→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-emerald-300 text-center">v = 1/t (untuk eksperimen ini)</div>
  1486→                                <div class="bg-slate-800/50 rounded p-2 font-mono text-purple-300 text-center">ln k = ln A − Eₐ/(RT)</div>
  1487→                            </div>
  1488→                        </div>
  1489→
  1490→                    </div>
  1491→                </div>
  1492→            </div>
  1493→
  1494→            <!-- ============== KPS PANEL ============== -->
  1495→            <div id="panel-kps" class="panel-hidden tab-content">
  1496→                <div class="glass-panel rounded-xl p-6 mb-4">
  1497→                    <div class="section-title mb-4">
  1498→                        <div class="section-title-icon"><svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></div>
  1499→                        <div>
  1500→                            <h2 class="text-lg font-bold text-white font-display">Lembar Kerja KPS</h2>
  1501→                            <p class="text-xs text-slate-400">Keterampilan Proses Sains - Pengaruh Konsentrasi terhadap Laju Reaksi</p>
  1502→                        </div>
  1503→                    </div>
  1504→
  1505→                    <div class="bg-amber-900/10 border border-amber-500/20 rounded-lg p-3 mb-5 text-xs text-amber-200">
  1506→                        <strong>Petunjuk:</strong> Lengkapi setiap tahap KPS dengan menjawab pertanyaan atau melakukan tugas. Klik "Periksa Jawaban" untuk evaluasi otomatis pada soal objektif.
  1507→                    </div>
  1508→
  1509→                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
  1510→                        
  1511→                        <!-- Skill 1: Observation -->
  1512→                        <div class="kps-card rounded-lg p-4" id="kps-card-1">
  1513→                            <div class="flex items-center gap-2 mb-3">
  1514→                                <span class="num-badge bg-cyan-500/20 text-cyan-400">1</span>
  1515→                                <h3 class="text-sm font-bold text-white font-display">Mengamati</h3>
  1516→                            </div>
  1517→                            <p class="text-xs text-slate-400 mb-3 leading-relaxed">Amati simulasi pada tab Makroskopis. Apa yang terjadi setelah larutan Na₂S₂O₃ dan HCl dicampur? Jelaskan minimal 3 perubahan yang Anda amati.</p>
  1518→                            <textarea class="w-full bg-slate-800/50 border border-slate-700 rounded p-2 text-xs text-slate-200 focus:border-cyan-500 focus:outline-none transition resize-none" rows="3" id="kps-observe" placeholder="Contoh: 1) Larutan awalnya bening... 2) ... 3) ..."></textarea>
  1519→                            <div class="text-[10px] text-slate-500 mt-1"><span id="kps-observe-count">0</span>/60 kata minimal</div>
  1520→                        </div>
  1521→
  1522→                        <!-- Skill 2: Classification -->
  1523→                        <div class="kps-card rounded-lg p-4" id="kps-card-2">
  1524→                            <div class="flex items-center gap-2 mb-3">
  1525→                                <span class="num-badge bg-purple-500/20 text-purple-400">2</span>
  1526→                                <h3 class="text-sm font-bold text-white font-display">Mengklasifikasi Variabel</h3>
  1527→                            </div>
  1528→                            <p class="text-xs text-slate-400 mb-3">Identifikasi variabel-variabel dalam eksperimen pengaruh konsentrasi ini.</p>
  1529→                            <div class="space-y-2 text-xs">
  1530→                                <div>
  1531→                                    <label class="text-slate-300 block mb-1">Variabel Bebas:</label>
  1532→                                    <select class="w-full bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-purple-500 focus:outline-none" id="kps-var-independent">
  1533→                                        <option value="">-- Pilih --</option>
  1534→                                        <option value="Suhu">Suhu</option>
  1535→                                        <option value="Konsentrasi Larutan">Konsentrasi Larutan</option>
  1536→                                        <option value="Volume Pelarut">Volume Pelarut</option>
  1537→                                        <option value="Waktu">Waktu</option>
  1538→                                    </select>
  1539→                                </div>
  1540→                                <div>
  1541→                                    <label class="text-slate-300 block mb-1">Variabel Terikat:</label>
  1542→                                    <select class="w-full bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-purple-500 focus:outline-none" id="kps-var-dependent">
  1543→                                        <option value="">-- Pilih --</option>
  1544→                                        <option value="Konsentrasi">Konsentrasi</option>
  1545→                                        <option value="Waktu kemunculan endapan">Waktu kemunculan endapan</option>
  1546→                                        <option value="Warna larutan">Warna larutan</option>
  1547→                                        <option value="Volume gas">Volume gas</option>
  1548→                                    </select>
  1549→                                </div>
  1550→                                <div>
  1551→                                    <label class="text-slate-300 block mb-1">Variabel Kontrol (pilih 2):</label>
  1552→                                    <div class="space-y-1">
  1553→                                        <label class="custom-checkbox"><input type="checkbox" name="kps-control" value="Suhu"> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Suhu</label>
  1554→                                        <label class="custom-checkbox"><input type="checkbox" name="kps-control" value="Volume"> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Volume larutan</label>
  1555→                                        <label class="custom-checkbox"><input type="checkbox" name="kps-control" value="Jenis"> <span class="checkmark"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span> Jenis larutan</label>
  1556→                                    </div>
  1557→                                </div>
  1558→                            </div>
  1559→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(2)">Periksa Jawaban</button>
  1560→                            <div id="kps-feedback-2" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1561→                        </div>
  1562→
  1563→                        <!-- Skill 3: Prediction -->
  1564→                        <div class="kps-card rounded-lg p-4" id="kps-card-3">
  1565→                            <div class="flex items-center gap-2 mb-3">
  1566→                                <span class="num-badge bg-blue-500/20 text-blue-400">3</span>
  1567→                                <h3 class="text-sm font-bold text-white font-display">Memprediksi</h3>
  1568→                            </div>
  1569→                            <p class="text-xs text-slate-400 mb-3">Jika konsentrasi Na₂S₂O₃ diperbesar menjadi dua kali lipat, apa yang terjadi pada waktu reaksi?</p>
  1570→                            <div class="space-y-1.5 text-xs text-slate-300">
  1571→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="3" data-value="correct">
  1572→                                    <input type="radio" name="kps-predict" value="correct" class="hidden"> 
  1573→                                    <span>Waktu reaksi lebih singkat karena partikel per volume bertambah.</span>
  1574→                                </label>
  1575→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="3" data-value="wrong1">
  1576→                                    <input type="radio" name="kps-predict" value="wrong1" class="hidden"> 
  1577→                                    <span>Waktu reaksi bertambah lama karena larutan lebih pekat.</span>
  1578→                                </label>
  1579→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="3" data-value="wrong2">
  1580→                                    <input type="radio" name="kps-predict" value="wrong2" class="hidden"> 
  1581→                                    <span>Waktu reaksi tetap karena suhu tidak berubah.</span>
  1582→                                </label>
  1583→                            </div>
  1584→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(3)">Periksa Jawaban</button>
  1585→                            <div id="kps-feedback-3" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1586→                        </div>
  1587→
  1588→                        <!-- Skill 4: Hypothesis -->
  1589→                        <div class="kps-card rounded-lg p-4" id="kps-card-4">
  1590→                            <div class="flex items-center gap-2 mb-3">
  1591→                                <span class="num-badge bg-emerald-500/20 text-emerald-400">4</span>
  1592→                                <h3 class="text-sm font-bold text-white font-display">Merumuskan Hipotesis</h3>
  1593→                            </div>
  1594→                            <p class="text-xs text-slate-400 mb-3">Lengkapi hipotesis berikut dengan memilih kata yang tepat:</p>
  1595→                            <div class="bg-slate-800/50 border border-slate-700 rounded p-3 text-xs text-slate-300 italic leading-relaxed">
  1596→                                "Jika konsentrasi Na₂S₂O₃ diperbesar, maka laju reaksi akan <span class="text-cyan-400 font-bold">...(1)...</span> karena frekuensi tumbukan efektif antar partikel <span class="text-purple-400 font-bold">...(2)...</span>."
  1597→                            </div>
  1598→                            <div class="grid grid-cols-2 gap-2 mt-3 text-xs">
  1599→                                <select class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-emerald-500 focus:outline-none" id="kps-hypo-1">
  1600→                                    <option value="">(1)...</option>
  1601→                                    <option value="meningkat">meningkat</option>
  1602→                                    <option value="menurun">menurun</option>
  1603→                                    <option value="tetap">tetap</option>
  1604→                                </select>
  1605→                                <select class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 focus:border-emerald-500 focus:outline-none" id="kps-hypo-2">
  1606→                                    <option value="">(2)...</option>
  1607→                                    <option value="bertambah">bertambah</option>
  1608→                                    <option value="berkurang">berkurang</option>
  1609→                                    <option value="tidak berubah">tidak berubah</option>
  1610→                                </select>
  1611→                            </div>
  1612→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(4)">Periksa Jawaban</button>
  1613→                            <div id="kps-feedback-4" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1614→                        </div>
  1615→
  1616→                        <!-- Skill 5: Experiment -->
  1617→                        <div class="kps-card rounded-lg p-4" id="kps-card-5">
  1618→                            <div class="flex items-center gap-2 mb-3">
  1619→                                <span class="num-badge bg-rose-500/20 text-rose-400">5</span>
  1620→                                <h3 class="text-sm font-bold text-white font-display">Melakukan Eksperimen</h3>
  1621→                            </div>
  1622→                            <p class="text-xs text-slate-400 mb-3 leading-relaxed">Lakukan minimal 3 percobaan dengan konsentrasi berbeda di tab Makroskopis. Catat hasilnya pada tabel di bawah, lalu pindahkan ke kotak ini.</p>
  1623→                            <div class="space-y-2 text-xs">
  1624→                                <div class="grid grid-cols-3 gap-1">
  1625→                                    <input type="number" id="kps-exp-c1" placeholder="Konsentrasi 1 (M)" step="0.1" min="0.5" max="2" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1626→                                    <input type="number" id="kps-exp-t1" placeholder="Waktu 1 (s)" step="0.01" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1627→                                    <input type="number" id="kps-exp-r1" placeholder="1/t 1" step="0.001" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1628→                                </div>
  1629→                                <div class="grid grid-cols-3 gap-1">
  1630→                                    <input type="number" id="kps-exp-c2" placeholder="Konsentrasi 2 (M)" step="0.1" min="0.5" max="2" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1631→                                    <input type="number" id="kps-exp-t2" placeholder="Waktu 2 (s)" step="0.01" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1632→                                    <input type="number" id="kps-exp-r2" placeholder="1/t 2" step="0.001" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1633→                                </div>
  1634→                                <div class="grid grid-cols-3 gap-1">
  1635→                                    <input type="number" id="kps-exp-c3" placeholder="Konsentrasi 3 (M)" step="0.1" min="0.5" max="2" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1636→                                    <input type="number" id="kps-exp-t3" placeholder="Waktu 3 (s)" step="0.01" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1637→                                    <input type="number" id="kps-exp-r3" placeholder="1/t 3" step="0.001" class="bg-slate-800 border border-slate-700 rounded p-1.5 text-slate-200 text-[11px] focus:border-rose-500 focus:outline-none">
  1638→                                </div>
  1639→                            </div>
  1640→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(5)">Validasi Data</button>
  1641→                            <div id="kps-feedback-5" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1642→                        </div>
  1643→
  1644→                        <!-- Skill 6: Data Interpretation -->
  1645→                        <div class="kps-card rounded-lg p-4" id="kps-card-6">
  1646→                            <div class="flex items-center gap-2 mb-3">
  1647→                                <span class="num-badge bg-teal-500/20 text-teal-400">6</span>
  1648→                                <h3 class="text-sm font-bold text-white font-display">Menginterpretasi Data</h3>
  1649→                            </div>
  1650→                            <p class="text-xs text-slate-400 mb-3">Berdasarkan data yang Anda peroleh, pola hubungan seperti apa antara konsentrasi dan laju (1/t)?</p>
  1651→                            <div class="space-y-1.5 text-xs text-slate-300">
  1652→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="6" data-value="correct">
  1653→                                    <input type="radio" name="kps-interpret" value="correct" class="hidden"> 
  1654→                                    <span>Berbanding lurus: konsentrasi naik → laju naik</span>
  1655→                                </label>
  1656→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="6" data-value="wrong1">
  1657→                                    <input type="radio" name="kps-interpret" value="wrong1" class="hidden"> 
  1658→                                    <span>Berbanding terbalik: konsentrasi naik → laju turun</span>
  1659→                                </label>
  1660→                                <label class="quiz-option flex items-center gap-2 p-2 rounded cursor-pointer" data-question="6" data-value="wrong2">
  1661→                                    <input type="radio" name="kps-interpret" value="wrong2" class="hidden"> 
  1662→                                    <span>Tidak ada hubungan yang jelas</span>
  1663→                                </label>
  1664→                            </div>
  1665→                            <button class="mt-3 btn-secondary px-3 py-1 rounded text-[10px] uppercase font-bold w-full" onclick="checkKPS(6)">Periksa Jawaban</button>
  1666→                            <div id="kps-feedback-6" class="mt-2 text-[10px] hidden p-2 rounded"></div>
  1667→                        </div>
  1668→
  1669→                        <!-- Skill 7: Communication -->
  1670→                        <div class="kps-card rounded-lg p-4 md:col-span-2" id="kps-card-7">
  1671→                            <div class="flex items-center gap-2 mb-3">
  1672→                                <span class="num-badge bg-indigo-500/20 text-indigo-400">7</span>
  1673→                                <h3 class="text-sm font-bold text-white font-display">Mengomunikasikan / Menyimpulkan</h3>
  1674→                            </div>
  1675→                            <p class="text-xs text-slate-400 mb-3">Tulis kesimpulan akhir eksperimen dengan struktur: tujuan, hasil utama, dan hubungan konsep. Minimal 80 kata.</p>
  1676→                            <textarea class="w-full bg-slate-800/50 border border-slate-700 rounded p-2 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none transition resize-none" rows="4" id="kps-conclude" placeholder="Berdasarkan eksperimen, dapat disimpulkan bahwa..."></textarea>
  1677→                            <div class="flex justify-between text-[10px] text-slate-500 mt-1">
  1678→                                <span><span id="kps-conclude-count">0</span>/80 kata minimal</span>
  1679→                                <span id="kps-conclude-status" class="text-slate-500">— belum lengkap —</span>
  1680→                            </div>
  1681→                        </div>
  1682→
  1683→                    </div>
  1684→
  1685→                    <div class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-3 border-t border-slate-700 pt-4">
  1686→                        <div class="text-xs text-slate-400">
  1687→                            Skor KPS Objektif: <span id="kps-score" class="font-bold text-amber-400 font-mono">0</span>/4
  1688→                        </div>
  1689→                        <div class="flex gap-2">
  1690→                            <button id="btn-reset-kps" class="btn-secondary px-4 py-2 rounded-lg text-xs font-bold uppercase">Reset</button>
  1691→                            <button id="btn-download-kps" class="btn-primary px-6 py-2 rounded-lg text-sm font-bold">Download Jawaban</button>
  1692→                        </div>
  1693→                    </div>
  1694→                </div>
  1695→            </div>
  1696→
  1697→            <!-- ============== QUIZ PANEL ============== -->
  1698→            <div id="panel-quiz" class="panel-hidden tab-content">
  1699→                <div class="glass-panel rounded-xl p-6">
  1700→                    <div class="section-title mb-5">
  1701→                        <div class="section-title-icon"><svg class="w-6 h-6 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg></div>
  1702→                        <div>
  1703→                            <h2 class="text-lg font-bold text-white font-display">Asesmen Pemahaman</h2>
  1704→                            <p class="text-xs text-slate-400">10 soal pilihan ganda • Setiap jawaban dilengkapi pembahasan</p>
  1705→                        </div>
  1706→                    </div>
  1707→
  1708→                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
  1709→                        <div class="lg:col-span-2 space-y-4" id="quiz-container">
  1710→                            <!-- Questions will be injected by JS -->
  1711→                        </div>
  1712→
  1713→                        <div class="space-y-4">
  1714→                            <div class="glass-panel-strong rounded-xl p-5 sticky top-4">
  1715→                                <h3 class="text-sm font-bold text-rose-400 uppercase tracking-wider mb-3 font-display">Hasil Asesmen</h3>
  1716→                                
  1717→                                <!-- Score Circle -->
  1718→                                <div class="flex justify-center mb-4">
  1719→                                    <div class="relative w-32 h-32">
  1720→                                        <svg class="progress-ring w-full h-full" viewBox="0 0 120 120">
  1721→                                            <circle cx="60" cy="60" r="52" fill="none" stroke="rgba(100,116,139,0.2)" stroke-width="8"/>
  1722→                                            <circle id="score-circle" class="progress-ring-circle" cx="60" cy="60" r="52" fill="none" stroke="url(#scoreGradient)" stroke-width="8" stroke-linecap="round" stroke-dasharray="326.7" stroke-dashoffset="326.7"/>
  1723→                                            <defs>
  1724→                                                <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="100%">
  1725→                                                    <stop offset="0%" stop-color="#10b981"/>
  1726→                                                    <stop offset="100%" stop-color="#06b6d4"/>
  1727→                                                </linearGradient>
  1728→                                            </defs>
  1729→                                        </svg>
  1730→                                        <div class="absolute inset-0 flex flex-col items-center justify-center">
  1731→                                            <div class="text-3xl font-bold text-white font-display" id="quiz-score-display">0</div>
  1732→                                            <div class="text-[10px] text-slate-400 uppercase tracking-wider">dari 10</div>
  1733→                                        </div>
  1734→                                    </div>
  1735→                                </div>
  1736→
  1737→                                <div class="space-y-2 text-xs">
  1738→                                    <div class="flex justify-between">
  1739→                                        <span class="text-slate-400">Benar:</span>
  1740→                                        <span id="quiz-correct" class="text-emerald-400 font-bold">0</span>
  1741→                                    </div>
  1742→                                    <div class="flex justify-between">
  1743→                                        <span class="text-slate-400">Salah:</span>
  1744→                                        <span id="quiz-wrong" class="text-rose-400 font-bold">0</span>
  1745→                                    </div>
  1746→                                    <div class="flex justify-between">
  1747→                                        <span class="text-slate-400">Belum dijawab:</span>
  1748→                                        <span id="quiz-unanswered" class="text-slate-300 font-bold">10</span>
  1749→                                    </div>
  1750→                                </div>
  1751→
  1752→                                <div class="mt-4 pt-4 border-t border-slate-700">
  1753→                                    <div id="quiz-grade" class="text-center text-sm font-bold text-slate-400">Belum mulai</div>
  1754→                                    <div id="quiz-message" class="text-center text-[10px] text-slate-500 mt-1">Jawab semua soal untuk melihat nilai</div>
  1755→                                </div>
  1756→
  1757→                                <div class="mt-4 grid grid-cols-5 gap-1" id="quiz-grid">
  1758→                                    <!-- Numbered grid will be injected -->
  1759→                                </div>
  1760→
  1761→                                <button id="btn-reset-quiz" class="w-full mt-4 btn-secondary py-2 rounded-lg text-xs uppercase font-bold">Ulangi Kuis</button>
  1762→                            </div>
  1763→                        </div>
  1764→                    </div>
  1765→                </div>
  1766→            </div>
  1767→
  1768→        </div>
  1769→    </div>
  1770→</div>
  1771→
  1772→<script type="module">
  1773→    import * as THREE from 'three';
  1774→    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  1775→
  1776→    // === STATE ===
  1777→    let scene, camera, renderer, controls;
  1778→    
  1779→    let isMacroReacting = false;
  1780→    let isMicroReacting = false;
  1781→    
  1782→    let startTime = 0;
  1783→    let currentTemp = 25;
  1784→    let currentConc = 1.0;
  1785→    let cloudiness = 0;
  1786→    let chartMacro, chartCollision, chartEnergy;
  1787→    let currentMode = 'macro';
  1788→    let guideStep = 0; 
  1789→    
  1790→    let expDesign = {
  1791→        objective: 'conc', 
  1792→        tools: { measure: true, thermo: false }
  1793→    };
  1794→    
  1795→    let EaValue = 50; 
  1796→    let microTemp = 25;
  1797→    let molecules = [];
  1798→    let totalCollisionsTemp = 0;
  1799→    let totalReactionsTemp = 0;
  1800→    let collisionHistory = [];
  1801→    let reactionHistory = [];
  1802→    let lastChartUpdate = 0;
  1803→    let lastSecondMark = 0;
  1804→    let collisionsThisSecond = 0;
  1805→    let reactionsThisSecond = 0;
  1806→    let microGroup;
  1807→    let labGroup;
  1808→    let liquidMesh, crossMesh;
  1809→    let bubbles = []; 
  1810→    let flaskMesh;
  1811→    let starField;
  1812→    let particleTrails = [];
  1813→    let reactionFlashes = [];
  1814→    let liquidSurfaceMesh;
  1815→    let dropperMesh;
  1816→    let stirrerMesh;
  1817→    let autoRotate = false;
  1818→    let comparisonMode = false;
  1819→    let catalystActive = false;
  1820→    let cameraPresets = {};
  1821→    let clock;
  1822→    let mixAnimation = null;
  1823→
  1824→    // === NEW STATE VARIABLES ===
  1825→    let sulfurParticles = [];
  1826→    let isMacroPaused = false;
  1827→    let pauseTimeOffset = 0;
  1828→    let microSpeed = 1;
  1829→    let soundEnabled = false;
  1830→    let audioContext = null;
  1831→    let experimentHistory = [];
  1832→    let currentTourStep = 0;
  1833→    let labGroup2 = null;
  1834→    let liquidMesh2 = null;
  1835→    let isComparison2Reacting = false;
  1836→    let startTime2 = 0;
  1837→    let cloudiness2 = 0;
  1838→    let conc2 = 1.5;
  1839→
  1840→    // Quiz state
  1841→    const quizAnswers = {};
  1842→    let quizLocked = {};
  1843→
  1844→    // === QUIZ DATA ===
  1845→    const quizData = [
  1846→        {
  1847→            q: "Reaksi antara Na₂S₂O₃ dan HCl menghasilkan endapan yang membuat larutan menjadi keruh. Zat yang menyebabkan kekeruhan adalah...",
  1848→            options: ["NaCl (garam dapur)", "S (belerang)", "SO₂ (gas)", "H₂O (air)"],
  1849→            correct: 1,
  1850→            explanation: "Belerang (S) terbentuk sebagai endapan kuning yang membuat larutan keruh, sebagaimana persamaan reaksi: Na₂S₂O₃ + 2HCl → S↓ + 2NaCl + SO₂ + H₂O."
  1851→        },
  1852→        {
  1853→            q: "Menurut Teori Tumbukan, dua syarat agar tumbukan menghasilkan reaksi (tumbukan efektif) adalah...",
  1854→            options: [
  1855→                "Energi tinggi dan volume besar",
  1856→                "Energi ≥ Eₐ dan orientasi tepat",
  1857→                "Suhu tinggi dan tekanan rendah",
  1858→                "Katalis dan suhu rendah"
  1859→            ],
  1860→            correct: 1,
  1861→            explanation: "Tumbukan efektif memerlukan dua syarat: (1) energi kinetik partikel ≥ energi aktivasi (Eₐ), dan (2) orientasi tumbukan yang tepat sehingga ikatan dapat terbentuk."
  1862→        },
  1863→        {
  1864→            q: "Jika konsentrasi Na₂S₂O₃ dinaikkan dari 0,5 M menjadi 1,5 M, maka waktu yang dibutuhkan untuk tanda 'X' menghilang akan...",
  1865→            options: ["Bertambah lama", "Berkurang", "Tetap", "Tidak dapat diprediksi"],
  1866→            correct: 1,
  1867→            explanation: "Konsentrasi lebih tinggi → lebih banyak partikel per volume → frekuensi tumbukan efektif meningkat → reaksi berlangsung lebih cepat → waktu reaksi berkurang."
  1868→        },
  1869→        {
  1870→            q: "Pada eksperimen ini, laju reaksi dihitung dengan rumus v = 1/t. Hal ini dilakukan karena...",
  1871→            options: [
  1872→                "Jumlah endapan yang terbentuk saat X menghilang dianggap konstan",
  1873→                "Energi aktivasi tidak terlibat",
  1874→                "HCl tidak ikut bereaksi",
  1875→                "Volume selalu berubah"
  1876→            ],
  1877→            correct: 0,
  1878→            explanation: "Kita menggunakan waktu saat tanda X tepat menghilang sebagai indikator. Karena jumlah endapan yang terbentuk pada saat itu dianggap konstan, maka laju (v) berbanding terbalik dengan waktu (t): v = 1/t."
  1879→        },
  1880→        {
  1881→            q: "Persamaan Arrhenius menghubungkan konstanta laju (k) dengan suhu dan energi aktivasi. Persamaan tersebut adalah...",
  1882→            options: [
  1883→                "k = A·e^(Eₐ/RT)",
  1884→                "k = A·e^(−Eₐ/RT)",
  1885→                "k = A·ln(Eₐ/RT)",
  1886→                "k = RT/Eₐ"
  1887→            ],
  1888→            correct: 1,
  1889→            explanation: "Persamaan Arrhenius: k = A·e^(−Eₐ/RT). Tanda negatif pada eksponen menunjukkan bahwa k menurun ketika Eₐ meningkat (reaksi lebih lambat), dan k meningkat ketika T meningkat (reaksi lebih cepat)."
  1890→        },
  1891→        {
  1892→            q: "Pada reaksi orde satu terhadap reaktan A, jika konsentrasi A dilipatduakan, maka laju reaksi akan...",
  1893→            options: ["Tetap", "Lipatdua", "Lipatempat", "Lipattiga"],
  1894→            correct: 1,
  1895→            explanation: "Untuk reaksi orde satu: v = k[A]. Jika [A] dilipatduakan menjadi 2[A], maka v = k·(2[A]) = 2·k[A] = 2v. Jadi laju reaksi menjadi dua kali lipat."
  1896→        },
  1897→        {
  1898→            q: "Manakah dari berikut ini BUKAN faktor yang memengaruhi laju reaksi?",
  1899→            options: ["Suhu", "Konsentrasi", "Warna larutan", "Katalis"],

[showing lines 1400-1899 of 4452; use offset=1900 with limit to continue reading]