Ruang Belajar Siswa - SMPN 72 MALUKU TENGAH

Kelas 7 IPA

ZAT, WUJUD ZAT, DAN PERUBAHANNYA 1 : Pengertian Materi, Sifat Ekstensif/Intensif, Sifat Fisis/Kimia, serta Perubahan Fisis & Perubahan Kimia

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pertemuan 1 - Sifat & Perubahan Zat</title> <script> MathJax = { tex: { inlineMath: [['$', '$'], ['\$', '\$']], displayMath: [['$$', '$$'], ['\\[', '\\]']] } }; </script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <style> :root { --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311b92 100%); --card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.2); --primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; } body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; } .slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; } .slide.active { display: flex; } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } .slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #f43f5e, #fbbf24); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; } h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #f43f5e, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; } h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; } p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; } .multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); } /* Variasi Visual 4 Tim Multi-User */ .zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; } .zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; } .zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; } .zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; } .interactive-btn { background: linear-gradient(135deg, #f43f5e, #fbbf24); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; } .interactive-btn:hover { transform: scale(1.04); } .opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; } .opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); } .controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; } .nav-control-btn { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; } .nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; } table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; } th, td { border: 1px solid var(--card-border); padding: 8px; text-align: left; } th { background: rgba(56, 189, 248, 0.25); text-align: center; } input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; } </style> </head> <body> <div class="deck-container">  <div class="slide active" style="text-align: center;"> <span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 1</span> <h1>MATERI, SIFAT & PERUBAHAN ZAT</h1> <p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 2: Zat, Wujud Zat, dan Perubahannya</p> <div class="glass-card" style="margin: 20px auto; width: 85%;"> <p>🎯 <b>Tujuan Pembelajaran Pertemuan Ini:</b></p> <p>1. Mengidentifikasi sifat-sifat berbagai jenis zat melalui pengamatan dan percobaan.</p> <p style="margin-top: 6px;">2. Menyelidiki jenis-jenis perubahan wujud dan perubahan zat (fisis vs kimia).</p> </div> <p style="color: var(--primary);">Klik tombol 'Selanjutnya ➡️' untuk memulai!</p> </div>  <div class="slide"> <span class="slide-tag">🕵️‍♂️ Tahapan Observasi</span> <h2>Pengamatan Perubahan Zat di Sekitar</h2> <p>Klik setiap kartu untuk mengamati dan mendeteksi sifat serta perubahan zat:</p> <div class="grid-2" style="text-align: center;"> <div class="glass-card"> <span style="font-size: 3.5rem;">🕯️</span> <p><b>Lilin Menyala</b></p> <button class="interactive-btn" onclick="alert('Pelelehan lilin = Perubahan Fisis (wujud padat ke cair).\nPembakaran sumbu = Perubahan Kimia (menghasilkan asap & zat baru)!')">Amati Reaksi</button> </div> <div class="glass-card"> <span style="font-size: 3.5rem;">🍅</span> <p><b>Tomat Memasak</b></p> <button class="interactive-btn" onclick="alert('Tomat mentah (hijau) menjadi matang (merah) terjadi karena perubahan komposisi zat kimia di dalam buah!')">Amati Reaksi</button> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🤔 Pertanyaan Pemantik</span> <h2>Bisakah Kembali ke Bentuk Semula?</h2> <div class="glass-card" style="text-align: center;"> <p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;"> "Mengapa es batu yang meleleh menjadi air dapat dibekukan kembali, sedangkan kayu yang dibakar menjadi abu tidak dapat dikembalikan lagi menjadi kayu?" </p> <p style="font-size: 3.8rem; margin: 15px 0;">🧊 🔄 🪵🔥</p> <p>Apakah perbedaan utama antara perubahan bentuk biasa dengan perubahan yang menghasilkan zat jenis baru?</p> </div> </div>  <div class="slide"> <span class="slide-tag">🌐 Tinjauan Kontekstual</span> <h2>Penerapan Dalam Kehidupan Sehari-hari</h2> <div class="glass-card"> <ul style="padding-left: 20px;"> <li style="margin-bottom: 10px;"><b>Pengolahan Bahan Pangan:</b> Penumbukan beras menjadi tepung beras merupakan perubahan fisis karena molekul kimianya tetap sama.</li> <li style="margin-bottom: 10px;"><b>Fenomena Korosi Besi:</b> Pagar besi rumah yang berkarat akibat bereaksi dengan air dan oksigen merupakan contoh perubahan kimia yang merusak.</li> <li><b>Proses Pembuatan Minuman:</b> Menyeduh teh dengan air panas menghasilkan campuran zat cair dan ekstrak daun teh.</li> </ul> </div> </div>  <div class="slide"> <span class="slide-tag">📖 Materi Padat TP 1</span> <h2>1. Pengertian Materi & Sifat-Sifat Zat</h2> <div class="glass-card" style="margin-bottom: 12px;"> <p><b>Materi:</b> Segala sesuatu yang memiliki massa, menempati ruang (memiliki volume), dan memiliki sifat-sifat tertentu.</p> <p style="margin-top: 4px;">• <b>Zat Murni:</b> Materi yang hanya tersusun dari satu jenis zat baku.<br>• <b>Campuran:</b> Materi yang tersusun dari dua atau lebih zat berbeda (contoh: air teh).</p> </div> <div class="grid-2"> <div class="glass-card"> <h3 style="color: var(--primary); margin-bottom: 6px;">A. Sifat Ekstensif</h3> <p>Sifat zat yang <b>tergantung pada jumlah atau ukuran</b> materi.</p> <p style="font-size: 0.95rem; color: var(--yellow); margin-top: 4px;"><b>Contoh:</b> Massa, volume, dan panjang benda.</p> </div> <div class="glass-card"> <h3 style="color: var(--accent); margin-bottom: 6px;">B. Sifat Intensif</h3> <p>Sifat zat yang <b>TIDAK tergantung pada jumlah/ukuran</b> materi.</p> <p style="font-size: 0.95rem; margin-top: 4px;">• <b>Sifat Fisis:</b> Warna, bau, rasa, kerapatan, titik didih, titik lebur, kelarutan, kekerasan.<br>• <b>Sifat Kimia:</b> Keterbakaran, perkaratan, kestabilan, dan kereaktifan.</p> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🎮 Kuis TP 1</span> <h2>Uji Pemahaman Sifat Zat (5 Soal)</h2> <div class="glass-card"> <h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3> <p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p> <div id="q1-opts"></div> <p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p> <button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">📖 Materi Padat TP 2</span> <h2>2. Perubahan Fisis vs Perubahan Kimia</h2> <div class="grid-2"> <div class="glass-card"> <h3 style="color: var(--success); margin-bottom: 6px;">🧊 Perubahan Fisis</h3> <p>Perubahan zat yang <b>tidak disertai terbentuknya zat baru</b> dan bersifat sementara (reversibel).</p> <p style="font-size: 0.95rem; margin-top: 6px;">• <b>Perubahan Bentuk:</b> Beras ditumbuk menjadi tepung.<br>• <b>Perubahan Wujud:</b> Air membeku menjadi es, mencair, atau menguap.</p> </div> <div class="glass-card"> <h3 style="color: var(--accent); margin-bottom: 6px;">🔥 Perubahan Kimia</h3> <p>Perubahan zat yang <b>menghasilkan zat jenis baru</b> dan bersifat kekal (ireversibel).</p> <p style="font-size: 0.95rem; margin-top: 6px;">Hukum Kekekalan Massa: Massa zat sebelum dan sesudah reaksi kimia adalah sama besar.</p> </div> </div> <div class="glass-card" style="margin-top: 10px;"> <h4 style="color: var(--yellow); margin-bottom: 4px;">⚡ 4 Ciri Utama Reaksi Kimia:</h4> <p style="font-size: 0.95rem;">1. <b>Perubahan Warna:</b> Buah mentah menjadi matang.<br>2. <b>Perubahan Suhu:</b> Reaksi $\text{HCl} + \text{NaOH}$ menghasilkan tabung hangat.<br>3. <b>Timbulnya Gas:</b> Telur direndam cuka menghasilkan gelembung gas.<br>4. <b>Terbentuk Endapan:</b> Reaksi Timbel(II) sulfat dengan Kalium Iodida menghasilkan endapan kuning.</p> </div> </div>  <div class="slide"> <span class="slide-tag">🎮 Kuis TP 2</span> <h2>Uji Pemahaman Perubahan Zat (5 Soal)</h2> <div class="glass-card"> <h3 id="q2-num" style="color: var(--yellow);">Soal 1 dari 5</h3> <p id="q2-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p> <div id="q2-opts"></div> <p id="q2-feedback" style="font-weight: bold; margin-top: 10px;"></p> <button class="interactive-btn" id="q2-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ2()">Lanjut Soal ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">🔥 Battle Kelompok Multi-User</span> <h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2> <div class="multi-grid">  <div class="zone-tim1"> <h4 style="color: #f43f5e;">🔴 Tim 1 (Wujud)</h4> <span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span> <p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p> <div id="t1-opts"></div> </div>  <div class="zone-tim2"> <h4 style="color: #fbbf24;">🟡 Tim 2 (Sifat)</h4> <span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span> <p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p> <div id="t2-opts"></div> </div>  <div class="zone-tim3"> <h4 style="color: #10b981;">🟢 Tim 3 (Fisis)</h4> <span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span> <p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p> <div id="t3-opts"></div> </div>  <div class="zone-tim4"> <h4 style="color: #c084fc;">🟣 Tim 4 (Kimia)</h4> <span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span> <p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p> <div id="t4-opts"></div> </div> </div> <p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p> </div>  <div class="slide"> <span class="slide-tag">🏆 Challenge Akhir</span> <h2>Ujian Akhir Individu (5 Soal Acak)</h2> <div class="glass-card"> <h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3> <p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p> <div id="ex-opts"></div> <p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p> <button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">🌈 Refleksi Diri</span> <h2>Bagaimana Perasaanmu Hari Ini?</h2> <div class="glass-card" style="text-align: center;"> <p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji yang menggambarkan pemahamanmu pada Pertemuan 1:</p> <div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;"> <button class="interactive-btn" onclick="alert('Luar biasa! Pemahamanmu sangat tajam! 😄🎉')">😄 Gampang Banget!</button> <button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Mantap! Pertahankan semangatmu! 👍')">😐 Lumayan Seru</button> <button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan menyerah, kamu pasti bisa! 💪')">😕 Susah Banget</button> </div> </div> </div>  <div class="slide"> <span class="slide-tag">✍️ Identitas Siswa</span> <h2>Lengkapi Data Diri</h2> <div class="glass-card"> <label style="font-weight: bold;">Nama Lengkap Siswa:</label> <input type="text" placeholder="Ketik nama lengkapmu di sini..."> <label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label> <select> <option value="">-- Pilih Kelas --</option> <option value="7-A">7-A 🚀</option> <option value="7-B">7-B ⚡</option> <option value="7-C">7-C 🔥</option> </select> <button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 2! 🎉')">Simpan & Selesai</button> </div> </div> </div> <div class="controls"> <button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button> <span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 12</span> <button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button> </div> <script> let currentSlide = 0; const slides = document.querySelectorAll('.slide'); const slideCounter = document.getElementById('slideCounter'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); } function updateSlide() { slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide)); slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`; prevBtn.disabled = currentSlide === 0; nextBtn.disabled = currentSlide === slides.length - 1; reRenderMath(); } function changeSlide(dir) { currentSlide += dir; if (currentSlide < 0) currentSlide = 0; if (currentSlide >= slides.length) currentSlide = slides.length - 1; updateSlide(); } // Kuis TP 1 (5 Soal) const q1Data = [ { q: "1. Segala sesuatu yang mempunyai massa dan menempati ruang dinamakan...", opts: ["Materi", "Energi", "Gaya"], ans: 0 }, { q: "2. Sifat zat yang bergantung pada jumlah atau ukuran materi adalah...", opts: ["Sifat Intensif", "Sifat Ekstensif", "Sifat Kimia"], ans: 1 }, { q: "3. Manakah yang tergolong ke dalam sifat fisika zat?", opts: ["Keterbakaran", "Titik didih", "Perkaratan"], ans: 1 }, { q: "4. Sifat yang menunjukkan kemampuan suatu zat untuk melakukan reaksi kimia dinamakan...", opts: ["Sifat Fisis", "Sifat Kimia", "Sifat Ekstensif"], ans: 1 }, { q: "5. Teh manis dalam gelas merupakan contoh bentuk dari...", opts: ["Zat Murni", "Campuran", "Unsur"], ans: 1 } ]; let q1Idx = 0; function renderQ1() { if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 1 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; } let d = q1Data[q1Idx]; document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`; document.getElementById('q1-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; }); document.getElementById('q1-opts').innerHTML = html; document.getElementById('q1-feedback').innerText = ""; document.getElementById('q1-next-btn').style.display = "none"; reRenderMath(); } function checkQ1(i) { if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; } else { document.getElementById('q1-feedback').innerText = "❌ Masih Salah!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; } document.getElementById('q1-next-btn').style.display = "inline-block"; } function nextQ1() { q1Idx++; renderQ1(); } // Kuis TP 2 (5 Soal) const q2Data = [ { q: "1. Perubahan zat yang tidak disertai terbentuknya zat baru dinamakan...", opts: ["Perubahan Kimia", "Perubahan Fisis", "Reaksi Kimia"], ans: 1 }, { q: "2. Ciri utama dari perubahan kimia adalah...", opts: ["Dapat kembali ke bentuk semula", "Terbentuk zat jenis baru", "Hanya terjadi perubahan wujud"], ans: 1 }, { q: "3. Beras ditumbuk menjadi tepung halus merupakan contoh perubahan...", opts: ["Fisis", "Kimia", "Biologi"], ans: 0 }, { q: "4. Reaksi perkaratan besi pada pagar rumah termasuk contoh perubahan...", opts: ["Fisis", "Kimia", "Suhu"], ans: 1 }, { q: "5. Ketika sebutir telur direndam dalam cuka, timbul gelembung gas. Ini membuktikan adanya perubahan...", opts: ["Fisis", "Kimia", "Wujud"], ans: 1 } ]; let q2Idx = 0; function renderQ2() { if(q2Idx >= q2Data.length) { document.getElementById('q2-text').innerText = "🎉 Tuntas! Kuis TP 2 Selesai!"; document.getElementById('q2-opts').innerHTML = ""; document.getElementById('q2-next-btn').style.display = "none"; return; } let d = q2Data[q2Idx]; document.getElementById('q2-num').innerText = `Soal ${q2Idx + 1} dari 5`; document.getElementById('q2-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ2(${i})">${o}</button>`; }); document.getElementById('q2-opts').innerHTML = html; document.getElementById('q2-feedback').innerText = ""; document.getElementById('q2-next-btn').style.display = "none"; reRenderMath(); } function checkQ2(i) { if(i === q2Data[q2Idx].ans) { document.getElementById('q2-feedback').innerText = "🎉 Benar!"; document.getElementById('q2-feedback').style.color = "var(--success)"; } else { document.getElementById('q2-feedback').innerText = "❌ Coba Lagi!"; document.getElementById('q2-feedback').style.color = "var(--accent)"; } document.getElementById('q2-next-btn').style.display = "inline-block"; } function nextQ2() { q2Idx++; renderQ2(); } // Multi User Engine (5 Soal per Tim) const teamData = { t1: [ { q: "Satu jenis zat murni disebut...", opts: ["Zat Murni", "Campuran"], ans: 0 }, { q: "Air menjadi es termasuk perubahan...", opts: ["Fisis", "Kimia"], ans: 0 }, { q: "Massa dan volume tergolong sifat...", opts: ["Ekstensif", "Intensif"], ans: 0 }, { q: "Kayu terbakar jadi abu adalah perubahan...", opts: ["Fisis", "Kimia"], ans: 1 }, { q: "Pelelehan lilin tergolong perubahan...", opts: ["Fisis", "Kimia"], ans: 0 } ], t2: [ { q: "Perkaratan besi termasuk sifat...", opts: ["Fisis", "Kimia"], ans: 1 }, { q: "Warna dan titik didih tergolong sifat...", opts: ["Fisis", "Kimia"], ans: 0 }, { q: "Besi berkarat tergolong perubahan...", opts: ["Fisis", "Kimia"], ans: 1 }, { q: "Dua zat atau lebih bercampur disebut...", opts: ["Unsur", "Campuran"], ans: 1 }, { q: "Sifat yang tidak tergantung ukuran dinamakan...", opts: ["Ekstensif", "Intensif"], ans: 1 } ], t3: [ { q: "Sifat bergantung ukuran zat dinamakan...", opts: ["Ekstensif", "Intensif"], ans: 0 }, { q: "Beras ditumbuk jadi tepung adalah perubahan...", opts: ["Fisis", "Kimia"], ans: 0 }, { q: "Penguapan air laut tergolong perubahan...", opts: ["Fisis", "Kimia"], ans: 0 }, { q: "Reaksi yang menghasilkan endapan adalah ciri...", opts: ["Perubahan Kimia", "Perubahan Fisis"], ans: 0 }, { q: "Kelarutan gula dalam air tergolong sifat...", opts: ["Fisis", "Kimia"], ans: 0 } ], t4: [ { q: "Telur + cuka menghasilkan gelembung gas...", opts: ["Perubahan Kimia", "Perubahan Fisis"], ans: 0 }, { q: "Sumbu lilin terbakar termasuk perubahan...", opts: ["Fisis", "Kimia"], ans: 1 }, { q: "Massa sebelum & sesudah reaksi kimia bernilai...", opts: ["Sama besar", "Berbeda"], ans: 0 }, { q: "Tomat hijau menjadi merah adalah ciri perubahan...", opts: ["Warna (Kimia)", "Bentuk (Fisis)"], ans: 0 }, { q: "Kestabilan zat tergolong ke dalam sifat...", opts: ["Kimia", "Fisis"], ans: 0 } ] }; let tIdx = { t1:0, t2:0, t3:0, t4:0 }; let tScore = { t1:0, t2:0, t3:0, t4:0 }; function renderTeam(teamKey) { let idx = tIdx[teamKey]; let list = teamData[teamKey]; let pElem = document.getElementById(`${teamKey}-progress`); let qElem = document.getElementById(`${teamKey}-q`); let optElem = document.getElementById(`${teamKey}-opts`); if(idx >= list.length) { pElem.innerText = "✅ Selesai!"; qElem.innerText = `Skor: ${tScore[teamKey]} / 5`; optElem.innerHTML = ""; updateGroupTotal(); return; } pElem.innerText = `Soal ${idx + 1} dari 5`; qElem.innerText = list[idx].q; let html = ""; list[idx].opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`; }); optElem.innerHTML = html; reRenderMath(); } function ansTeam(teamKey, optIdx) { if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++; tIdx[teamKey]++; renderTeam(teamKey); } function updateGroupTotal() { let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4; document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`; } // Ujian Akhir Individu (Acak) let rawExamData = [ { q: "1. Larutan HCl ditambah NaOH menghasilkan kenaikan suhu. Ini membuktikan terjadinya...", opts: ["Perubahan Kimia", "Perubahan Fisis", "Perubahan Bentuk"], ans: 0 }, { q: "2. Kerapatan, kelarutan, dan titik didih tergolong ke dalam sifat...", opts: ["Kimia", "Fisis", "Ekstensif"], ans: 1 }, { q: "3. Perubahan kimia bersifat kekal, artinya zat hasil perubahan...", opts: ["Bisa kembali seperti semula", "Tidak dapat kembali ke bentuk semula", "Selalu berwujud gas"], ans: 1 }, { q: "4. Massa zat sebelum dan sesudah reaksi pada perubahan kimia adalah...", opts: ["Meningkat", "Sama besar", "Mengecil"], ans: 1 }, { q: "5. Materi yang hanya tersusun dari satu jenis zat murni dinamakan...", opts: ["Zat Murni", "Campuran", "Larutan"], ans: 0 } ]; let exData = rawExamData.sort(() => Math.random() - 0.5); let exIdx = 0; function renderExam() { if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 1 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; } let d = exData[exIdx]; document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`; document.getElementById('ex-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; }); document.getElementById('ex-opts').innerHTML = html; document.getElementById('ex-feedback').innerText = ""; document.getElementById('ex-next-btn').style.display = "none"; reRenderMath(); } function checkExam(i) { document.getElementById('ex-feedback').innerText = "👍 Jawabanmu Terekam!"; document.getElementById('ex-feedback').style.color = "var(--success)"; document.getElementById('ex-next-btn').style.display = "inline-block"; } function nextExam() { exIdx++; renderExam(); } renderQ1(); renderQ2(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide(); </script> </body> </html>

Kelas 7 IPA

Besaran Pokok dan Besaran Turunan 2

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slide Pembelajaran IPA - Konversi & Pengukuran Alat Ukur</title>  <script> MathJax = { tex: { inlineMath: [['$', '$'], ['\$', '\$']], displayMath: [['$$', '$$'], ['\\[', '\\]']] } }; </script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <style> :root { --bg-gradient: linear-gradient(135deg, #0f172a 0%, #311b92 50%, #1e1b4b 100%); --card-bg: rgba(255, 255, 255, 0.1); --card-border: rgba(255, 255, 255, 0.25); --primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --text: #ffffff; --text-muted: #cbd5e1; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', sans-serif; user-select: none; } body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .deck-container { width: 92vw; height: 82vh; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(56, 189, 248, 0.2); position: relative; overflow: hidden; display: flex; flex-direction: column; } .slide { display: none; padding: 35px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.5s ease; } .slide.active { display: flex; } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.95); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 10px #38bdf8); } 50% { filter: drop-shadow(0 0 25px #f43f5e); } } .float-anim { animation: float 3s ease-in-out infinite; } .glow-anim { animation: pulse-glow 2s infinite; } .slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #f43f5e, #fbbf24); color: #fff; border-radius: 20px; font-size: 0.9rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; width: fit-content; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4); } h1 { font-size: 2.8rem; background: linear-gradient(to right, #38bdf8, #f43f5e, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; text-shadow: 0 4px 10px rgba(0,0,0,0.3); } h2 { font-size: 2rem; color: var(--yellow); margin-bottom: 15px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); } p, li { font-size: 1.15rem; line-height: 1.6; color: #f1f5f9; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; } .glass-card { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: 20px; padding: 22px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); } .svg-box { background: rgba(0, 0, 0, 0.35); border-radius: 16px; padding: 15px; display: flex; justify-content: center; align-items: center; margin: 15px 0; border: 1px dashed var(--primary); } .interactive-btn { background: linear-gradient(135deg, #f43f5e, #fbbf24); color: white; border: none; padding: 12px 20px; border-radius: 14px; font-size: 1.05rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; margin: 6px; box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4); } .interactive-btn:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 10px 25px rgba(251, 191, 36, 0.6); } .opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 2px solid var(--card-border); color: white; padding: 12px 18px; border-radius: 12px; margin-top: 10px; font-size: 1.05rem; cursor: pointer; transition: 0.2s; font-weight: 600; } .opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); transform: translateX(6px); } .multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .user-zone { background: rgba(0,0,0,0.4); border: 2px dashed var(--yellow); border-radius: 16px; padding: 15px; } .controls { margin-top: 15px; display: flex; gap: 20px; align-items: center; } .nav-control-btn { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: white; border: none; padding: 12px 32px; border-radius: 50px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: 0.2s; box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4); } .nav-control-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 8px 25px rgba(56, 189, 248, 0.7); } .nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; } .slide-counter { font-size: 1.15rem; font-weight: bold; color: var(--yellow); text-shadow: 0 2px 4px rgba(0,0,0,0.5); } input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1.05rem; margin-top: 6px; } .tool-card { background: rgba(0, 0, 0, 0.3); border-radius: 16px; padding: 15px; text-align: center; border: 1px solid var(--card-border); } </style> </head> <body> <div class="deck-container">  <div class="slide active" style="text-align: center;"> <span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Petualangan Sains IPA - Bagian 2</span> <h1 class="glow-anim">KONVERSI SATUAN & ALAT UKUR</h1> <p style="font-size: 1.3rem; color: var(--yellow); font-weight: bold;">Menguasai Konversi Satuan dan Penggunaan Alat Ukur Presisi! 📏⚖️⏱️</p> <div class="svg-box float-anim" style="border: none; background: transparent; margin: 25px 0;"> <svg width="240" height="120" viewBox="0 0 240 120"> <rect x="20" y="40" width="200" height="40" rx="8" fill="#38bdf8" opacity="0.3" stroke="#38bdf8" stroke-width="2"/> <line x1="40" y1="40" x2="40" y2="60" stroke="#fff" stroke-width="2"/> <line x1="60" y1="40" x2="60" y2="52" stroke="#fff" stroke-width="1.5"/> <line x1="80" y1="40" x2="80" y2="52" stroke="#fff" stroke-width="1.5"/> <line x1="100" y1="40" x2="100" y2="60" stroke="#fff" stroke-width="2"/> <line x1="120" y1="40" x2="120" y2="52" stroke="#fff" stroke-width="1.5"/> <line x1="140" y1="40" x2="140" y2="52" stroke="#fff" stroke-width="1.5"/> <line x1="160" y1="40" x2="160" y2="60" stroke="#fff" stroke-width="2"/> <line x1="180" y1="40" x2="180" y2="52" stroke="#fff" stroke-width="1.5"/> <line x1="200" y1="40" x2="200" y2="60" stroke="#fff" stroke-width="2"/> <text x="36" y="75" fill="#fbbf24" font-size="12" font-weight="bold">0</text> <text x="96" y="75" fill="#fbbf24" font-size="12" font-weight="bold">1</text> <text x="156" y="75" fill="#fbbf24" font-size="12" font-weight="bold">2</text> <text x="196" y="75" fill="#fbbf24" font-size="12" font-weight="bold">cm</text> </svg> </div> <p style="color: var(--primary); font-size: 1.1rem;">Tekan tombol <b>'Selanjutnya ➔'</b> untuk memulai!</p> </div>  <div class="slide"> <span class="slide-tag">🎯 Target Pembelajaran</span> <h2>Tujuan Pembelajaran Hari Ini</h2> <div class="glass-card"> <ul style="list-style-type: '⚡ '; padding-left: 20px;"> <li style="margin-bottom: 12px;"><b>TP 3:</b> Mengonversikan satuan **panjang**, **massa**, dan **waktu** dengan tepat.</li> <li style="margin-bottom: 12px;"><b>TP 4:</b> Mengukur besaran dengan **satuan baku** dan **tak baku** secara baik dan benar.</li> <li style="margin-bottom: 12px;"><b>TP 5:</b> Mengukur besaran menggunakan **alat ukur yang sesuai** secara baik dan benar.</li> </ul> </div> </div>  <div class="slide"> <span class="slide-tag">📖 Materi TP 3</span> <h2>Konversi Satuan (Panjang, Massa, Waktu)</h2> <div class="grid-3"> <div class="glass-card" style="padding: 15px;"> <h3 style="color: var(--primary); text-align: center;">📏 Panjang</h3> <p style="font-size: 0.95rem; margin-top: 8px;">Tangga Satuan: $\text{km}, \text{hm}, \text{dam}, \text{m}, \text{dm}, \text{cm}, \text{mm}$.</p> <p style="font-size: 0.95rem; color: var(--yellow); margin-top: 5px;">• Turun 1 tangga: $\times 10$<br>• Naik 1 tangga: $\div 10$</p> <p style="font-size: 0.9rem; margin-top: 8px;"><b>Contoh:</b> $1\text{ m} = 100\text{ cm}$</p> </div> <div class="glass-card" style="padding: 15px;"> <h3 style="color: var(--yellow); text-align: center;">⚖️ Massa</h3> <p style="font-size: 0.95rem; margin-top: 8px;">Tangga Satuan: $\text{kg}, \text{hg}(\text{ons}), \text{dag}, \text{g}, \text{dg}, \text{cg}, \text{mg}$.</p> <p style="font-size: 0.95rem; color: var(--primary); margin-top: 5px;">• Turun 1 tangga: $\times 10$<br>• Naik 1 tangga: $\div 10$</p> <p style="font-size: 0.9rem; margin-top: 8px;"><b>Contoh:</b> $1\text{ kg} = 1.000\text{ g}$</p> </div> <div class="glass-card" style="padding: 15px;"> <h3 style="color: var(--accent); text-align: center;">⏱️ Waktu</h3> <p style="font-size: 0.95rem; margin-top: 8px;">Sistem Konversi Waktu:</p> <p style="font-size: 0.95rem; color: var(--yellow); margin-top: 5px;">• $1\text{ jam} = 60\text{ menit}$<br>• $1\text{ menit} = 60\text{ sekon}$<br>• $1\text{ jam} = 3.600\text{ sekon}$</p> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🧪 Lab Interaktif</span> <h2>Kalkulator Konversi Satuan 🧮</h2> <div class="glass-card"> <div class="grid-2"> <div> <label style="font-weight: bold;">1. Konversi Panjang (Meter ke CM):</label> <input type="number" id="val-m" placeholder="Masukkan meter (m)..." oninput="calcLength()"> <p id="res-cm" style="margin-top: 10px; color: var(--yellow); font-weight: bold;">Hasil: - cm</p> </div> <div> <label style="font-weight: bold;">2. Konversi Massa (KG ke Gram):</label> <input type="number" id="val-kg" placeholder="Masukkan kilogram (kg)..." oninput="calcMass()"> <p id="res-g" style="margin-top: 10px; color: var(--primary); font-weight: bold;">Hasil: - g</p> </div> </div> <div style="margin-top: 20px;"> <label style="font-weight: bold;">3. Konversi Waktu (Jam ke Sekon/Detik):</label> <input type="number" id="val-hr" placeholder="Masukkan jam..." oninput="calcTime()"> <p id="res-s" style="margin-top: 10px; color: var(--success); font-weight: bold;">Hasil: - sekon</p> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🎮 Game Kuis TP 3</span> <h2>Latihan Konversi Satuan! ⚡</h2> <div class="glass-card"> <h3 id="q3-num" style="color: var(--yellow);">Soal 1 dari 3</h3> <p id="q3-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p> <div id="q3-opts"></div> <p id="q3-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p> <button class="interactive-btn" id="q3-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ3()">Soal Berikutnya ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">📖 Materi TP 4</span> <h2>Satuan Baku vs Satuan Tak Baku 📏</h2> <div class="grid-2"> <div class="glass-card"> <h3 style="color: var(--primary);">1. Satuan Baku 📐</h3> <p>Satuan yang diakui secara internasional dan **hasil pengukurannya selalu sama** bagi siapa saja.</p> <br> <p style="color: var(--yellow); font-size: 1rem;"><b>Contoh:</b> Meter ($\text{m}$), Centimeter ($\text{cm}$), Kilogram ($\text{kg}$), Sekon ($\text{s}$).</p> </div> <div class="glass-card"> <h3 style="color: var(--accent);">2. Satuan Tak Baku 🖐️</h3> <p>Satuan yang **hasil pengukurannya berbeda-beda** tergantung ukuran anggota tubuh pengukur.</p> <br> <p style="color: var(--primary); font-size: 1rem;"><b>Contoh:</b> Jengkal, Depa, Hasta, Langkah kaki, Cangkir.</p> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🔬 Praktik Mandiri</span> <h2>Eksperimen Satuan Tak Baku! ✋</h2> <div class="glass-card" style="text-align: center;"> <p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">Coba Ukur Panjang Meja/Bukumu Menggunakan Jengkal Tanganmu!</p> <div class="svg-box float-anim" style="margin: 20px auto; width: fit-content; padding: 10px 30px;"> <span style="font-size: 3.5rem;">✋ 📏 📚</span> </div> <p style="font-size: 1.05rem;">Bandingkan hasil jengkalmu dengan teman sebangkumu. Apakah hasilnya sama? Mengapa bisa berbeda?</p> <button class="interactive-btn" style="margin-top: 15px;" onclick="alert('Hasil jengkal berbeda karena ukuran tangan setiap manusia tidak sama! Makanya sains butuh Satuan Baku seperti Meter.')">💡 Mengapa Hasilnya Beda?</button> </div> </div>  <div class="slide"> <span class="slide-tag">📖 Materi TP 5</span> <h2>Mengenal Alat Ukur Sesuai Fungsinya 🛠️</h2> <div class="grid-2"> <div class="tool-card"> <h3 style="color: var(--primary);"> Penggaris & Meteran</h3> <p style="font-size: 0.95rem;">Mengukur panjang/tinggi benda biasa.</p> <p style="color: var(--yellow); font-size: 0.9rem;">Ketelitian: $1\text{ mm}$ ($0,1\text{ cm}$)</p> </div> <div class="tool-card"> <h3 style="color: var(--yellow);"> Jangka Sorong</h3> <p style="font-size: 0.95rem;">Mengukur diameter dalam/luar botol & kedalaman tabung.</p> <p style="color: var(--primary); font-size: 0.9rem;">Ketelitian: $0,1\text{ mm}$ ($0,01\text{ cm}$)</p> </div> <div class="tool-card"> <h3 style="color: var(--accent);"> Neraca / Timbangan</h3> <p style="font-size: 0.95rem;">Mengukur massa benda (Neraca Sama Lengan, Ohaus, Digital).</p> </div> <div class="tool-card"> <h3 style="color: var(--success);"> Stopwatch</h3> <p style="font-size: 0.95rem;">Mengukur selang waktu dengan presisi tinggi.</p> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🎯 Tantangan Detektif</span> <h2>Membaca Hasil Alat Ukur 🔍</h2> <div class="glass-card"> <h3 id="q5-num" style="color: var(--yellow);">Soal 1 dari 3</h3> <p id="q5-text" style="font-size: 1.2rem; margin: 10px 0; font-weight: bold;"></p> <div id="q5-opts"></div> <p id="q5-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p> <button class="interactive-btn" id="q5-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ5()">Soal Berikutnya ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">🔥 Battle Kelompok</span> <h2>Adu Cepat Alat Ukur & Konversi! ⚔️</h2> <div class="multi-grid"> <div class="user-zone"> <h4 style="color: var(--primary);">🔴 Tim 1 (Panjang)</h4> <p>$2,5\text{ m} = ...\text{ cm}$</p> <button class="opt-btn" onclick="groupAns2(1, true)">A. $250\text{ cm}$</button> <button class="opt-btn" onclick="groupAns2(1, false)">B. $25\text{ cm}$</button> </div> <div class="user-zone"> <h4 style="color: var(--yellow);">🟡 Tim 2 (Massa)</h4> <p>$500\text{ g} = ...\text{ kg}$</p> <button class="opt-btn" onclick="groupAns2(2, false)">A. $5\text{ kg}$</button> <button class="opt-btn" onclick="groupAns2(2, true)">B. $0,5\text{ kg}$</button> </div> <div class="user-zone"> <h4 style="color: var(--success);">🟢 Tim 3 (Satuan)</h4> <p>Satu 'Depa' termasuk satuan...?</p> <button class="opt-btn" onclick="groupAns2(3, false)">A. Baku</button> <button class="opt-btn" onclick="groupAns2(3, true)">B. Tak Baku</button> </div> <div class="user-zone"> <h4 style="color: #c084fc;">🟣 Tim 4 (Alat Ukur)</h4> <p>Alat paling tepat ukur diameter dalam pipa:</p> <button class="opt-btn" onclick="groupAns2(4, true)">A. Jangka Sorong</button> <button class="opt-btn" onclick="groupAns2(4, false)">B. Meteran Roll</button> </div> </div> <p id="group-score-display-2" style="text-align: center; margin-top: 10px; font-weight: bold; font-size: 1.3rem; color: var(--yellow);"></p> </div>  <div class="slide"> <span class="slide-tag">🏆 Evaluasi Akhir</span> <h2>Ujian Akhir (5 Soal Integrasi)</h2> <div class="glass-card"> <h3 id="ex2-num" style="color: var(--yellow);">Soal 1 dari 5</h3> <p id="ex2-text" style="font-size: 1.2rem; margin: 10px 0; font-weight: bold;"></p> <div id="ex2-opts"></div> <p id="ex2-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p> <button class="interactive-btn" id="ex2-next-btn" style="display: none; margin-top: 12px;" onclick="nextExam2()">Lanjut Soal ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">✍️ Data Diri</span> <h2>Lengkapi Data Pengukuranmu</h2> <div class="glass-card"> <p style="margin-bottom: 12px;">Isi identitas untuk menyimpan rekap hasil belajar:</p> <label style="font-weight: bold;">Nama Lengkap Siswa:</label> <input type="text" id="stu-name-2" placeholder="Ketik nama lengkapmu di sini..."> <label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label> <select id="stu-class-2"> <option value="">-- Pilih Kelas --</option> <option value="7-A">7-A 🚀</option> <option value="7-B">7-B ⚡</option> <option value="7-C">7-C 🔥</option> </select> </div> </div>  <div class="slide"> <span class="slide-tag">🌈 Refleksi Akhir</span> <h2>Hebat! Kamu Sudah Menyelesaikan Semua TP 🎉</h2> <div class="glass-card" style="text-align: center;"> <p style="font-size: 1.25rem; font-weight: bold; color: var(--yellow);">Bagaimana pengalamanmu mengonversi satuan & membaca alat ukur?</p> <div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;"> <button class="interactive-btn" onclick="alert('Luar biasa! Kamu sudah paham layaknya ilmuwan sejati! 🎯')">🤩 Sangat Paham!</button> <button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Tingkatkan terus latihannya ya! 💪')">🙂 Paham</button> <button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Tidak apa-apa, kamu bisa ulangi slide simulator konversi ya! 👍')">🤔 Masih Perlu Latihan</button> </div> <p style="color: var(--primary); font-size: 1.15rem; font-weight: bold;">"Ketelitian dalam mengukur adalah kunci utama penemuan ilmu fisika dan sains!" 🔬✨</p> </div> </div> </div>  <div class="controls"> <button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button> <span class="slide-counter" id="slideCounter">Slide 1 dari 13</span> <button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button> </div> <script> let currentSlide = 0; const slides = document.querySelectorAll('.slide'); const slideCounter = document.getElementById('slideCounter'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) { window.MathJax.typesetPromise(); } } function updateSlide() { slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide)); slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`; prevBtn.disabled = currentSlide === 0; nextBtn.disabled = currentSlide === slides.length - 1; reRenderMath(); } function changeSlide(dir) { currentSlide += dir; if (currentSlide < 0) currentSlide = 0; if (currentSlide >= slides.length) currentSlide = slides.length - 1; updateSlide(); } document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) changeSlide(1); if (e.key === 'ArrowLeft' && currentSlide > 0) changeSlide(-1); }); // Interactive Conversion Logic function calcLength() { let v = document.getElementById('val-m').value; document.getElementById('res-cm').innerText = v ? `Hasil: ${v * 100} cm` : "Hasil: - cm"; } function calcMass() { let v = document.getElementById('val-kg').value; document.getElementById('res-g').innerText = v ? `Hasil: ${v * 1000} g` : "Hasil: - g"; } function calcTime() { let v = document.getElementById('val-hr').value; document.getElementById('res-s').innerText = v ? `Hasil: ${v * 3600} sekon` : "Hasil: - sekon"; } // Bank Soal TP 3 (Konversi) const q3Data = [ { q: "Panjang papan tulis adalah $2\\text{ m}$. Jika diubah ke centimeter (\\text{cm}), hasilnya adalah...", opts: ["$20\\text{ cm}$", "$200\\text{ cm}$ 📏", "$2.000\\text{ cm}$"], ans: 1 }, { q: "Massa gula pasir $1,5\\text{ kg}$ setara dengan...", opts: ["$150\\text{ g}$", "$1.500\\text{ g}$ ⚖️", "$15.000\\text{ g}$"], ans: 1 }, { q: "Lari maraton ditempuh dalam waktu $0,5\\text{ jam}$. Berapa sekon (detik) waktu tersebut?", opts: ["$1.800\\text{ sekon}$ ⏱️", "$300\\text{ sekon}$", "$3.600\\text{ sekon}$"], ans: 0 } ]; let q3Idx = 0; function renderQ3() { if(q3Idx >= q3Data.length) { document.getElementById('q3-text').innerText = "🎉 Sukses! Kamu hebat mengonversi satuan!"; document.getElementById('q3-opts').innerHTML = ""; document.getElementById('q3-next-btn').style.display = "none"; return; } let d = q3Data[q3Idx]; document.getElementById('q3-num').innerText = `Soal ${q3Idx + 1} dari ${q3Data.length}`; document.getElementById('q3-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ3(${i})">${o}</button>`; }); document.getElementById('q3-opts').innerHTML = html; document.getElementById('q3-feedback').innerText = ""; document.getElementById('q3-next-btn').style.display = "none"; reRenderMath(); } function checkQ3(i) { if(i === q3Data[q3Idx].ans) { document.getElementById('q3-feedback').innerText = "🎉 Tepat Sekali!"; document.getElementById('q3-feedback').style.color = "var(--success)"; } else { document.getElementById('q3-feedback').innerText = "❌ Coba hitung lagi tangga konversinya!"; document.getElementById('q3-feedback').style.color = "var(--accent)"; } document.getElementById('q3-next-btn').style.display = "inline-block"; } function nextQ3() { q3Idx++; renderQ3(); } // Bank Soal TP 5 (Alat Ukur) const q5Data = [ { q: "Alat ukur yang paling tepat untuk mengukur diameter kelereng secara sangat teliti adalah...", opts: ["Penggaris Kayu", "Jangka Sorong 🔍", "Meteran Pita"], ans: 1 }, { q: "Untuk mengukur massa batu saat praktikum IPA, alat yang digunakan adalah...", opts: ["Neraca / Timbangan ⚖️", "Stopwatch", "Thermometer"], ans: 0 }, { q: "Pelari 100 meter diukur waktu tempuhnya menggunakan...", opts: ["Jam Dinding", "Stopwatch ⏱️", "Kalender"], ans: 1 } ]; let q5Idx = 0; function renderQ5() { if(q5Idx >= q5Data.length) { document.getElementById('q5-text').innerText = "🎉 Luar Biasa! Kamu makin paham alat ukur!"; document.getElementById('q5-opts').innerHTML = ""; document.getElementById('q5-next-btn').style.display = "none"; return; } let d = q5Data[q5Idx]; document.getElementById('q5-num').innerText = `Soal ${q5Idx + 1} dari ${q5Data.length}`; document.getElementById('q5-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ5(${i})">${o}</button>`; }); document.getElementById('q5-opts').innerHTML = html; document.getElementById('q5-feedback').innerText = ""; document.getElementById('q5-next-btn').style.display = "none"; reRenderMath(); } function checkQ5(i) { if(i === q5Data[q5Idx].ans) { document.getElementById('q5-feedback').innerText = "🎉 Pintar! Alat ukur tepat!"; document.getElementById('q5-feedback').style.color = "var(--success)"; } else { document.getElementById('q5-feedback').innerText = "❌ Kurang tepat, coba cek fungsi alatnya!"; document.getElementById('q5-feedback').style.color = "var(--accent)"; } document.getElementById('q5-next-btn').style.display = "inline-block"; } function nextQ5() { q5Idx++; renderQ5(); } // Multi User Score Modul 2 let groupScore2 = [false, false, false, false]; function groupAns2(user, isTrue) { if(isTrue) groupScore2[user-1] = true; let total = groupScore2.filter(Boolean).length; document.getElementById('group-score-display-2').innerText = `🔥 Total Skor Kelompok: ${total * 25} / 100`; } // Ujian Akhir Modul 2 const ex2Data = [ { q: "1. Mengubah $300\\text{ cm}$ menjadi meter menghasilkan...", opts: ["$30\\text{ m}$", "$3\\text{ m}$ 📏", "$0,3\\text{ m}$"], ans: 1 }, { q: "2. Satuan seperti 'Depa' dan 'Jengkal' dinamakan satuan...", opts: ["Baku", "Tak Baku 🖐️", "Internasional"], ans: 1 }, { q: "3. Ketelitian skala penggaris biasa umumnya sebesar...", opts: ["$1\\text{ mm}$ ($0,1\\text{ cm}$) 📏", "$1\\text{ m}$", "$1\\text{ micro}$"], ans: 0 }, { q: "4. Waktu $2\\text{ menit}$ setara dengan berapa sekon?", opts: ["$60\\text{ s}$", "$120\\text{ s}$ ⏱️", "$200\\text{ s}$"], ans: 1 }, { q: "5. Mengapa hasil ukur dengan meteran selalu sama untuk semua orang?", opts: ["Karena meteran terbuat dari plastik", "Karena meteran adalah alat ukur satuan baku 📐", "Karena ukurannya berubah-ubah"], ans: 1 } ]; let ex2Idx = 0; function renderExam2() { if(ex2Idx >= ex2Data.length) { document.getElementById('ex2-text').innerText = "🎉 Tuntas! Seluruh soal evaluasi telah diselesaikan!"; document.getElementById('ex2-opts').innerHTML = ""; document.getElementById('ex2-next-btn').style.display = "none"; return; } let d = ex2Data[ex2Idx]; document.getElementById('ex2-num').innerText = `Soal ${ex2Idx + 1} dari ${ex2Data.length}`; document.getElementById('ex2-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam2(${i})">${o}</button>`; }); document.getElementById('ex2-opts').innerHTML = html; document.getElementById('ex2-feedback').innerText = ""; document.getElementById('ex2-next-btn').style.display = "none"; reRenderMath(); } function checkExam2(i) { document.getElementById('ex2-feedback').innerText = "👍 Jawaban Tersimpan!"; document.getElementById('ex2-feedback').style.color = "var(--success)"; document.getElementById('ex2-next-btn').style.display = "inline-block"; } function nextExam2() { ex2Idx++; renderExam2(); } // Init Engine Modul 2 renderQ3(); renderQ5(); renderExam2(); updateSlide(); </script> </body> </html>

Kelas 7 IPA

Besan Pokok dan Besaran Turunan 1 : Mengidentifikasi besaran dalam kehidupan sehari-hari

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slide Pembelajaran IPA - Besaran & Pengukuran</title>  <script> MathJax = { tex: { inlineMath: [['$', '$'], ['\$', '\$']], displayMath: [['$$', '$$'], ['\\[', '\\]']] } }; </script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <style> :root { --bg-gradient: linear-gradient(135deg, #0f172a 0%, #311b92 50%, #1e1b4b 100%); --card-bg: rgba(255, 255, 255, 0.1); --card-border: rgba(255, 255, 255, 0.25); --primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --text: #ffffff; --text-muted: #cbd5e1; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', sans-serif; user-select: none; } body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .deck-container { width: 92vw; height: 82vh; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(56, 189, 248, 0.2); position: relative; overflow: hidden; display: flex; flex-direction: column; } .slide { display: none; padding: 35px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.5s ease; } .slide.active { display: flex; } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.95); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 10px #38bdf8); } 50% { filter: drop-shadow(0 0 25px #f43f5e); } } .float-anim { animation: float 3s ease-in-out infinite; } .spin-anim { animation: spin 8s linear infinite; } .glow-anim { animation: pulse-glow 2s infinite; } .slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #f43f5e, #fbbf24); color: #fff; border-radius: 20px; font-size: 0.9rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; width: fit-content; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4); } h1 { font-size: 2.8rem; background: linear-gradient(to right, #38bdf8, #f43f5e, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; text-shadow: 0 4px 10px rgba(0,0,0,0.3); } h2 { font-size: 2.1rem; color: var(--yellow); margin-bottom: 15px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); } p, li { font-size: 1.2rem; line-height: 1.6; color: #f1f5f9; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; } .glass-card { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: 20px; padding: 22px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); } .svg-box { background: rgba(0, 0, 0, 0.35); border-radius: 16px; padding: 15px; display: flex; justify-content: center; align-items: center; margin: 15px 0; border: 1px dashed var(--primary); } .interactive-btn { background: linear-gradient(135deg, #f43f5e, #fbbf24); color: white; border: none; padding: 14px 24px; border-radius: 14px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; margin: 6px; box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4); } .interactive-btn:hover { transform: scale(1.06) translateY(-2px); box-shadow: 0 10px 25px rgba(251, 191, 36, 0.6); } .opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 2px solid var(--card-border); color: white; padding: 14px 20px; border-radius: 12px; margin-top: 10px; font-size: 1.1rem; cursor: pointer; transition: 0.2s; font-weight: 600; } .opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); transform: translateX(6px); } .multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .user-zone { background: rgba(0,0,0,0.4); border: 2px dashed var(--yellow); border-radius: 16px; padding: 15px; } .controls { margin-top: 15px; display: flex; gap: 20px; align-items: center; } .nav-control-btn { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: white; border: none; padding: 12px 32px; border-radius: 50px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: 0.2s; box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4); } .nav-control-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 8px 25px rgba(56, 189, 248, 0.7); } .nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; } .slide-counter { font-size: 1.15rem; font-weight: bold; color: var(--yellow); text-shadow: 0 2px 4px rgba(0,0,0,0.5); } input, select { width: 100%; padding: 14px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1.1rem; margin-top: 8px; } </style> </head> <body> <div class="deck-container">  <div class="slide active" style="text-align: center;"> <span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Petualangan Sains IPA</span> <h1 class="glow-anim">BESARAN & PENGUKURAN</h1> <p style="font-size: 1.4rem; color: var(--yellow); font-weight: bold;">Mari Menjadi Ilmuwan Muda Yang Teliti! 🔬✨</p> <div class="svg-box float-anim" style="border: none; background: transparent; margin: 20px 0;"> <svg width="220" height="140" viewBox="0 0 220 140"> <g class="spin-anim" transform-origin="110 70"> <ellipse cx="110" cy="70" rx="60" ry="20" fill="none" stroke="#38bdf8" stroke-width="4"/> <ellipse cx="110" cy="70" rx="20" ry="60" fill="none" stroke="#f43f5e" stroke-width="4"/> </g> <circle cx="110" cy="70" r="16" fill="#fbbf24"/> <text x="103" y="75" fill="#000" font-weight="bold" font-size="14">IPA</text> </svg> </div> <p style="color: var(--primary); font-size: 1.2rem;">Tekan tombol <b>'Selanjutnya ➔'</b> atau Tombol Panah Kanan di Keyboard!</p> </div>  <div class="slide"> <span class="slide-tag">🎯 Target Hari Ini</span> <h2>Capaian & Tujuan Pembelajaran</h2> <div class="grid-2"> <div class="glass-card"> <h3 style="color: var(--primary); margin-bottom: 10px;">📌 Capaian Pembelajaran (CP)</h3> <p>Kalian akan mampu melakukan pengukuran benda & makhluk hidup serta menggunakan besaran dan satuan secara tepat dan kritis!</p> </div> <div class="glass-card"> <h3 style="color: var(--yellow); margin-bottom: 10px;">🌟 Tujuan Pembelajaran (TP)</h3> <p><b>TP 1:</b> Mampu membedakan mana <b>Besaran Pokok</b> dan mana <b>Besaran Turunan</b> di sekitarmu.</p> <p style="margin-top: 10px;"><b>TP 2:</b> Mampu menyebutkan hasil ukur dengan <b>Satuan Internasional (SI)</b> yang standar.</p> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🤔 Pikirkan Ini!</span> <h2>Beli Baju Pakai Ukuran Jengkal? 📏</h2> <div class="glass-card" style="text-align: center;"> <p style="font-size: 1.30rem; color: var(--yellow); font-weight: bold;"> "Bagaimana kalau kamu beli baju online, tapi penjualnya mengukur kain pakai JENGKAL TANGAN dia sendiri?" 😂 </p> <div class="float-anim" style="margin: 20px 0;"> <span style="font-size: 4rem;">✋ 📐 👕</span> </div> <p>Apakah ukuran bajunya bakal pas di badanmu? Mengapa sains butuh **Satuan Baku Internasional (SI)**?</p> </div> </div>  <div class="slide"> <span class="slide-tag">🕵️‍♂️ Detektif Sains</span> <h2>Observasi Objek Di Sekitarmu!</h2> <p>Klik tombol di bawah untuk mendeteksi besaran pada objek berikut:</p> <div class="svg-box" style="gap: 30px;"> <div class="float-anim" style="text-align: center;"> <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdWJnOHkya3BjcHprZnc3Ynl2bnVzOW8zcDV2OGd2MnZwNG8yZWp0byZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/BzyTuYCmvSORqs1ABM/giphy.gif" alt="Cat GIF" style="width:100px; height:100px; border-radius: 12px; object-fit: cover;"> <p style="font-size: 0.9rem; color: var(--yellow);">Kucing Lucu</p> </div> <div class="float-anim" style="text-align: center; animation-delay: 1s;"> <span style="font-size: 4rem;">🪴</span> <p style="font-size: 0.9rem; color: var(--primary);">Tanaman Pot</p> </div> </div> <div style="text-align: center;"> <button class="interactive-btn" onclick="alert('🌱 Tinggi Tanaman = 25 cm (Besaran Pokok Panjang)')">📏 Ukur Tinggi Tanaman</button> <button class="interactive-btn" onclick="alert('🐱 Massa Kucing = 3,5 kg (Besaran Pokok Massa)')">⚖️ Timbang Massa Kucing</button> <button class="interactive-btn" onclick="alert('🍃 Luas Daun = 12 cm² (Besaran Turunan Luas)')">📐 Hitung Luas Daun</button> </div> </div>  <div class="slide"> <span class="slide-tag">🌐 Sains Di Dunia Nyata</span> <h2>Pengukuran Dalam Kehidupan Sehari-hari</h2> <div class="glass-card"> <ul style="list-style-type: '🚀 '; padding-left: 20px;"> <li><b>Kesehatan & Dokter:</b> Mengukur Suhu Badan dalam Kelvin ($\text{K}$) atau Celsius ($^{\circ}\text{C}$) & Timbangan Massa Badan dalam Kilogram ($\text{kg}$).</li> <li><b>Dunia Olahraga:</b> Mengukur Waktu Tempuh Lari dalam Sekon/Detik ($\text{s}$) menggunakan *stopwatch*.</li> <li><b>Jual Beli Supermarket:</b> Membeli buah & beras ditimbang dengan satuan resmi Kilogram ($\text{kg}$).</li> </ul> </div> </div>  <div class="slide"> <span class="slide-tag">📖 Materi TP 1</span> <h2>Besaran Pokok vs Besaran Turunan</h2> <div class="grid-2"> <div class="glass-card"> <h3 style="color: var(--primary);">1. Besaran Pokok 🥇</h3> <p>Besaran utama yang satuannya sudah ditetapkan secara internasional terlebih dahulu.</p> <br> <p style="color: var(--yellow); font-size: 1rem;">✨ <b>7 Besaran Pokok:</b> Panjang, Massa, Waktu, Suhu, Kuat Arus, Intensitas Cahaya, Jumlah Zat.</p> </div> <div class="glass-card"> <h3 style="color: var(--accent);">2. Besaran Turunan 🥈</h3> <p>Besaran yang merupakan gabungan/turunan dari dua atau lebih besaran pokok.</p> <br> <p style="color: var(--primary); font-size: 1rem;">⚡ <b>Contoh:</b> Luas ($\text{m}^2$), Kecepatan ($\text{m/s}$), Volume ($\text{m}^3$).</p> </div> </div> </div>  <div class="slide"> <span class="slide-tag">🎮 Game Kuis TP 1</span> <h2>Uji Pemahaman Besaran! ⚡</h2> <div class="glass-card"> <h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 3</h3> <p id="q1-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p> <div id="q1-opts"></div> <p id="q1-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p> <button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ1()">Soal Berikutnya ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">📖 Materi TP 2</span> <h2>Satuan Sistem Internasional (SI) 🌍</h2> <div class="glass-card"> <p>Supaya hasil ukur di Indonesia sama persis dengan di Jepang atau Amerika, ilmuwan sepakat pakai **Satuan SI**!</p> <table border="1" style="width:100%; margin-top: 15px; border-collapse: collapse; border-color: var(--card-border); text-align: center; font-size: 1.1rem;"> <tr style="background: linear-gradient(90deg, #f43f5e, #38bdf8); color: white;"> <th>Besaran Pokok</th> <th>Satuan SI</th> <th>Simbol Matematika</th> </tr> <tr><td>Panjang 📏</td><td>Meter</td><td>$\text{m}$</td></tr> <tr><td>Massa ⚖️</td><td>Kilogram</td><td>$\text{kg}$</td></tr> <tr><td>Waktu ⏱️</td><td>Sekon (Detik)</td><td>$\text{s}$</td></tr> <tr><td>Suhu 🌡️</td><td>Kelvin</td><td>$\text{K}$</td></tr> </table> </div> </div>  <div class="slide"> <span class="slide-tag">🎮 Game Kuis TP 2</span> <h2>Tebak Satuan SI! 🎯</h2> <div class="glass-card"> <h3 id="q2-num" style="color: var(--yellow);">Soal 1 dari 3</h3> <p id="q2-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p> <div id="q2-opts"></div> <p id="q2-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p> <button class="interactive-btn" id="q2-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ2()">Soal Berikutnya ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">🔥 Battle Kelompok</span> <h2>Adu Cepat 4 Tim! ⚔️</h2> <div class="multi-grid"> <div class="user-zone"> <h4 style="color: var(--primary);">🔴 Tim 1 (Massa)</h4> <p>Massa kucing = $3{,}5\text{ kg}$. 'Massa' adalah besaran...?</p> <button class="opt-btn" onclick="groupAns(1, true)">A. Pokok</button> <button class="opt-btn" onclick="groupAns(1, false)">B. Turunan</button> </div> <div class="user-zone"> <h4 style="color: var(--yellow);">🟡 Tim 2 (Luas)</h4> <p>Luas daun ($12\text{ cm}^2$) termasuk besaran...?</p> <button class="opt-btn" onclick="groupAns(2, false)">A. Pokok</button> <button class="opt-btn" onclick="groupAns(2, true)">B. Turunan</button> </div> <div class="user-zone"> <h4 style="color: var(--success);">🟢 Tim 3 (Panjang)</h4> <p>Satuan SI resmi untuk Panjang adalah...?</p> <button class="opt-btn" onclick="groupAns(3, true)">A. Meter ($\text{m}$)</button> <button class="opt-btn" onclick="groupAns(3, false)">B. Centimeter ($\text{cm}$)</button> </div> <div class="user-zone"> <h4 style="color: #c084fc;">🟣 Tim 4 (Suhu)</h4> <p>Satuan SI resmi untuk Suhu adalah...?</p> <button class="opt-btn" onclick="groupAns(4, true)">A. Kelvin ($\text{K}$)</button> <button class="opt-btn" onclick="groupAns(4, false)">B. Celsius ($^{\circ}\text{C}$)</button> </div> </div> <p id="group-score-display" style="text-align: center; margin-top: 10px; font-weight: bold; font-size: 1.3rem; color: var(--yellow);"></p> </div>  <div class="slide"> <span class="slide-tag">🏆 Challenge Akhir</span> <h2>Ujian Akhir Individu (5 Soal)</h2> <div class="glass-card"> <h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3> <p id="ex-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p> <div id="ex-opts"></div> <p id="ex-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p> <button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 12px;" onclick="nextExam()">Lanjut Soal ➔</button> </div> </div>  <div class="slide"> <span class="slide-tag">✍️ Data Diri</span> <h2>Isi Identitas Dulu Yuk!</h2> <div class="glass-card"> <p style="margin-bottom: 15px;">Lengkapi data dirimu sebelum menuju refleksi kelas:</p> <label style="font-weight: bold;">Nama Lengkap Siswa:</label> <input type="text" id="stu-name" placeholder="Ketik nama lengkapmu di sini..."> <label style="margin-top: 15px; display: block; font-weight: bold;">Pilih Kelas:</label> <select id="stu-class"> <option value="">-- Pilih Kelas --</option> <option value="7-A">7-A 🚀</option> <option value="7-B">7-B ⚡</option> <option value="7-C">7-C 🔥</option> </select> </div> </div>  <div class="slide"> <span class="slide-tag">🌈 Suasana Hati</span> <h2>Refleksi Belajar Hari Ini</h2> <div class="glass-card" style="text-align: center;"> <p style="font-size: 1.3rem; font-weight: bold; color: var(--yellow);">Bagaimana perasaanmu belajar IPA hari ini?</p> <div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;"> <button class="interactive-btn" onclick="alert('Terima Kasih! Senang sekali kamu gembira hari ini! 😄🎉')">😄 Senang Banget!</button> <button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Mantap! Semangat terus ya! 👍')">😐 Seru Aja</button> <button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan menyerah! Besok kita belajar lebih seru lagi! 💪')">😕 Agak Bingung</button> </div> <p style="color: var(--primary); font-size: 1.2rem; font-weight: bold;">"Terima kasih atas partisipasi aktif kalian hari ini! Sampai jumpa di petualangan sains berikutnya!" 🎉✨</p> </div> </div> </div>  <div class="controls"> <button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button> <span class="slide-counter" id="slideCounter">Slide 1 dari 13</span> <button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button> </div> <script> let currentSlide = 0; const slides = document.querySelectorAll('.slide'); const slideCounter = document.getElementById('slideCounter'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) { window.MathJax.typesetPromise(); } } function updateSlide() { slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide)); slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`; prevBtn.disabled = currentSlide === 0; nextBtn.disabled = currentSlide === slides.length - 1; reRenderMath(); } function changeSlide(dir) { currentSlide += dir; if (currentSlide < 0) currentSlide = 0; if (currentSlide >= slides.length) currentSlide = slides.length - 1; updateSlide(); } document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) changeSlide(1); if (e.key === 'ArrowLeft' && currentSlide > 0) changeSlide(-1); }); // Bank Soal TP 1 (Simbol dihapus) const q1Data = [ { q: "Besaran yang satuannya sudah ditetapkan secara internasional terlebih dahulu adalah...", opts: ["Besaran Turunan", "Besaran Pokok", "Satuan Tak Baku"], ans: 1 }, { q: "Manakah di bawah ini yang merupakan contoh Besaran Pokok?", opts: ["Kecepatan Lari", "Massa Kucing ($3{,}5\\text{ kg}$)", "Luas Daun"], ans: 1 }, { q: "Luas Daun ($12\\text{ cm}^2$) dikategorikan ke dalam...", opts: ["Besaran Pokok", "Besaran Turunan", "Satuan Tradisional"], ans: 1 } ]; let q1Idx = 0; function renderQ1() { if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Hore! Kuis TP 1 Selesai dengan Sukses!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; } let d = q1Data[q1Idx]; document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari ${q1Data.length}`; document.getElementById('q1-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; }); document.getElementById('q1-opts').innerHTML = html; document.getElementById('q1-feedback').innerText = ""; document.getElementById('q1-next-btn').style.display = "none"; reRenderMath(); } function checkQ1(i) { if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Keren Sekali! Jawabanmu Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; } else { document.getElementById('q1-feedback').innerText = "❌ Ups! Ayo coba lagi di soal berikutnya!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; } document.getElementById('q1-next-btn').style.display = "inline-block"; } function nextQ1() { q1Idx++; renderQ1(); } // Bank Soal TP 2 (Simbol dihapus) const q2Data = [ { q: "Satuan Internasional (SI) untuk mengukur Panjang Kain adalah...", opts: ["Centimeter (\\text{cm})", "Meter (\\text{m})", "Kilometer (\\text{km})"], ans: 1 }, { q: "Satuan SI resmi untuk mengukur Suhu adalah...", opts: ["Celsius (^{\\circ}\\text{C})", "Fahrenheit (^{\\circ}\\text{F})", "Kelvin (\\text{K})"], ans: 2 }, { q: "Satuan SI resmi untuk Besaran Massa benda adalah...", opts: ["Gram (\\text{g})", "Kilogram (\\text{kg})", "Ton"], ans: 1 } ]; let q2Idx = 0; function renderQ2() { if(q2Idx >= q2Data.length) { document.getElementById('q2-text').innerText = "🎉 Luar Biasa! Kuis TP 2 Tuntas!"; document.getElementById('q2-opts').innerHTML = ""; document.getElementById('q2-next-btn').style.display = "none"; return; } let d = q2Data[q2Idx]; document.getElementById('q2-num').innerText = `Soal ${q2Idx + 1} dari ${q2Data.length}`; document.getElementById('q2-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ2(${i})">${o}</button>`; }); document.getElementById('q2-opts').innerHTML = html; document.getElementById('q2-feedback').innerText = ""; document.getElementById('q2-next-btn').style.display = "none"; reRenderMath(); } function checkQ2(i) { if(i === q2Data[q2Idx].ans) { document.getElementById('q2-feedback').innerText = "🎉 Hebat! Kamu makin paham SI!"; document.getElementById('q2-feedback').style.color = "var(--success)"; } else { document.getElementById('q2-feedback').innerText = "❌ Hampir benar, yuk lanjut!"; document.getElementById('q2-feedback').style.color = "var(--accent)"; } document.getElementById('q2-next-btn').style.display = "inline-block"; } function nextQ2() { q2Idx++; renderQ2(); } // Multi User Score let groupScore = [false, false, false, false]; function groupAns(user, isTrue) { if(isTrue) groupScore[user-1] = true; let total = groupScore.filter(Boolean).length; document.getElementById('group-score-display').innerText = `🔥 Total Skor Kelompok: ${total * 25} / 100`; } // Ujian Akhir (Simbol dihapus) const exData = [ { q: "1. Besaran yang diturunkan dari besaran pokok dinamakan...", opts: ["Besaran Pokok", "Besaran Turunan", "Besaran Utama"], ans: 1 }, { q: "2. Suhu tubuh adik saat demam adalah $310\\text{ K}$. Suhu adalah besaran...", opts: ["Pokok", "Turunan", "Lokal"], ans: 0 }, { q: "3. Satuan SI untuk Timbangan Massa Beras adalah...", opts: ["Gram (\\text{g})", "Kilogram (\\text{kg})", "Kuintal"], ans: 1 }, { q: "4. Mengapa jengkal dinamakan satuan tidak baku?", opts: ["Karena berlaku internasional", "Karena ukuran tangan tiap orang beda-beda", "Karena ukurannya pasti sama"], ans: 1 }, { q: "5. Kecepatan sepeda dinyatakan dalam $\\text{m/s}$. Kecepatan adalah besaran...", opts: ["Pokok", "Turunan", "Tradisional"], ans: 1 } ]; let exIdx = 0; function renderExam() { if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Kamu telah menyelesaikan Ujian Akhir!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; } let d = exData[exIdx]; document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari ${exData.length}`; document.getElementById('ex-text').innerText = d.q; let html = ""; d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; }); document.getElementById('ex-opts').innerHTML = html; document.getElementById('ex-feedback').innerText = ""; document.getElementById('ex-next-btn').style.display = "none"; reRenderMath(); } function checkExam(i) { document.getElementById('ex-feedback').innerText = "👍 Jawabanmu Terekam!"; document.getElementById('ex-feedback').style.color = "var(--success)"; document.getElementById('ex-next-btn').style.display = "inline-block"; } function nextExam() { exIdx++; renderExam(); } // Init Engine renderQ1(); renderQ2(); renderExam(); updateSlide(); </script> </body> </html>

Kelas 7 IPA

Sel dan Perkembangannya 1 : Struktur Sel dan Perbedaan

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IPA Kelas 8: Struktur & Perbedaan Sel (TP 1 & 2) 🧬</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet"> <style> body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f0fdf4; background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px); background-size: 24px 24px; } .slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white"> <i data-lucide="dna" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">IPA Kelas 8 - Fokus TP 1 & TP 2</span> <span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200"> <div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-4xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm"> Kurikulum Merdeka • Kelas 8 </div> <h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-2"> Struktur Sel & Perbedaan <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Sel Hewan vs Tumbuhan</span> 🔬 </h1> <div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto"> <h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Fokus Tujuan Pembelajaran:</h3> <ol class="space-y-3 text-sm font-bold text-slate-700 list-decimal list-inside pl-2"> <li>Peserta didik dapat <span class="text-emerald-700">menjelaskan struktur dan fungsi sel organisme</span> secara mendetail.</li> <li>Peserta didik dapat <span class="text-emerald-700">membedakan sel hewan dengan sel tumbuhan</span> berdasarkan organel penyusunnya.</li> </ol> </div> <p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Siap memperdalam pengetahuan biologismu? Mari mulai! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-lg mx-auto w-full min-h-[75vh] justify-center"> <div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-xl text-center"> <span class="text-4xl block mb-2">👤</span> <h2 class="text-2xl font-black text-slate-900 mb-1">Identitas Siswa</h2> <p class="text-slate-500 text-xs mb-6">Masukkan data diri sebelum memulai eksplorasi materi.</p> <div class="space-y-4 text-left"> <div> <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Nama Lengkap</label> <input type="text" id="input-nama" placeholder="Contoh: Budi Santoso" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold text-sm bg-slate-50 focus:outline-emerald-500"> </div> <div> <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Kelas / Kelompok</label> <input type="text" id="input-kelas" placeholder="Contoh: 8B / Kelompok 3" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold text-sm bg-slate-50 focus:outline-emerald-500"> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 1 (Bagian A)</span> <h2 class="text-3xl font-black text-emerald-900 mt-2">Apa Itu Sel? (Unit Terkecil Kehidupan) 🧫</h2> </div> <div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-lg space-y-4 text-sm"> <p class="text-slate-700 leading-relaxed font-medium"> Semua makhluk hidup di bumi tersusun atas sel. Kata "sel" pertama kali dicetuskan oleh <b>Robert Hooke</b> pada tahun 1665 saat mengamati sayatan gabus di bawah mikroskop sederhana. </p> <div class="grid md:grid-cols-2 gap-4"> <div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-2"> <h4 class="font-black text-emerald-900 text-sm">🧩 Satuan Struktural</h4> <p class="text-xs text-slate-600 leading-relaxed">Berarti sel adalah blok penyusun dasar yang membentuk seluruh tubuh makhluk hidup (baik uniseluler seperti bakteri maupun multiseluler seperti manusia).</p> </div> <div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-2"> <h4 class="font-black text-teal-900 text-sm">⚙️ Satuan Fungsional</h4> <p class="text-xs text-slate-600 leading-relaxed">Berarti seluruh proses kehidupan (metabolisme, respirasi, ekskresi, reproduksi) terjadi di dalam tingkat seluler.</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 1 (Bagian B)</span> <h2 class="text-3xl font-black text-emerald-900 mt-2">Struktur dan Fungsi Organel Sel 🔬</h2> </div> <div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-lg space-y-4 text-sm"> <p class="text-slate-700 font-medium">Di dalam sel terdapat berbagai bagian kecil bernama <b>organel sel</b> yang memiliki tugas spesifik:</p> <div class="grid md:grid-cols-2 gap-3"> <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200"> <h4 class="font-bold text-emerald-800 text-xs">1. Membran Sel</h4> <p class="text-xs text-slate-600 mt-0.5">Berperan sebagai penjaga gerbang yang mengatur keluar masuknya zat ke dalam dan ke luar sel.</p> </div> <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200"> <h4 class="font-bold text-emerald-800 text-xs">2. Nukleus (Inti Sel)</h4> <p class="text-xs text-slate-600 mt-0.5">Otak atau pusat pengendali seluruh aktivitas sel serta penyimpan materi genetik (DNA).</p> </div> <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200"> <h4 class="font-bold text-emerald-800 text-xs">3. Sitoplasma</h4> <p class="text-xs text-slate-600 mt-0.5">Cairan agar-agar tempat organel sel berada dan tempat terjadinya reaksi kimia metabolisme.</p> </div> <div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200"> <h4 class="font-bold text-emerald-800 text-xs">4. Mitokondria</h4> <p class="text-xs text-slate-600 mt-0.5">Pabrik tenaga sel yang menghasilkan energi melalui proses respirasi seluler.</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 1 (Bagian C)</span> <h2 class="text-3xl font-black text-emerald-900 mt-2">Organel Pendukung Sel Lainnya ⚙️</h2> </div> <div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-lg space-y-4 text-sm"> <div class="grid md:grid-cols-3 gap-4"> <div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1"> <h4 class="font-bold text-teal-900 text-xs">Ribosom</h4> <p class="text-xs text-slate-600">Tempat sintesis (pembentukan) protein di dalam sel.</p> </div> <div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1"> <h4 class="font-bold text-teal-900 text-xs">Retikulum Endoplasma (RE)</h4> <p class="text-xs text-slate-600">Saluran pengangkut zat di dalam sel (ada RE kasar dan halus).</p> </div> <div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1"> <h4 class="font-bold text-teal-900 text-xs">Badan Golgi</h4> <p class="text-xs text-slate-600">Memproses dan mengeksport protein ke luar sel.</p> </div> </div> <div class="bg-amber-50 p-4 rounded-2xl border border-amber-200"> <p class="text-xs font-bold text-amber-900">💡 Catatan Penting Struktur Sel:</p> <p class="text-xs text-amber-800 mt-1">Setiap organel saling bekerja sama secara harmonis ibarat sebuah pabrik industri yang terkoordinasi dengan sangat rapi.</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <span class="bg-teal-100 text-teal-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 2 (Bagian A)</span> <h2 class="text-3xl font-black text-teal-900 mt-2">Mengenal Tipe Sel Eukariotik: Hewan & Tumbuhan 🌿🐾</h2> </div> <div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-4 text-sm"> <p class="text-slate-700 leading-relaxed font-medium"> Meskipun sel hewan dan sel tumbuhan sama-sama memiliki inti sel dan organel dasar (seperti mitokondria dan ribosom), keduanya memiliki perbedaan struktur yang mencolok karena perbedaan cara hidup dan kebutuhan biologis mereka. </p> <div class="grid md:grid-cols-2 gap-4"> <div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200"> <h4 class="font-bold text-emerald-900 text-xs mb-1">🌿 Mengapa Tumbuhan Butuh Struktur Kaku?</h4> <p class="text-xs text-slate-600">Tumbuhan tidak memiliki rangka tulang seperti hewan, sehingga sel tumbuhan memerlukan dinding sel yang kokoh agar tubuhnya bisa berdiri tegak melawan gravitasi.</p> </div> <div class="bg-sky-50 p-4 rounded-2xl border border-sky-200"> <h4 class="font-bold text-sky-900 text-xs mb-1">🐾 Mengapa Hewan Bisa Bergerak Bebas?</h4> <p class="text-xs text-slate-600">Sel hewan tidak memiliki dinding sel yang kaku, sehingga membran selnya lebih fleksibel dan memungkinkan sel hewan memiliki berbagai bentuk serta mudah bergerak.</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <span class="bg-teal-100 text-teal-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 2 (Bagian B)</span> <h2 class="text-3xl font-black text-teal-900 mt-2">Tabel Perbandingan: Sel Hewan vs Sel Tumbuhan 📊</h2> </div> <div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg overflow-x-auto"> <table class="w-full text-left text-xs border-collapse"> <thead> <tr class="bg-teal-600 text-white"> <th class="p-3 border">Perbedaan Organel</th> <th class="p-3 border">Sel Tumbuhan</th> <th class="p-3 border">Sel Hewan</th> </tr> </thead> <tbody class="divide-y divide-slate-200 font-medium text-slate-700"> <tr> <td class="p-3 font-bold bg-slate-50">Dinding Sel</td> <td class="p-3 text-emerald-700 font-bold">Ada (Kaku dari selulosa)</td> <td class="p-3 text-rose-600 font-bold">Tidak Ada</td> </tr> <tr> <td class="p-3 font-bold bg-slate-50">Kloroplas (Plastida)</td> <td class="p-3 text-emerald-700 font-bold">Ada (Untuk fotosintesis)</td> <td class="p-3 text-rose-600 font-bold">Tidak Ada</td> </tr> <tr> <td class="p-3 font-bold bg-slate-50">Vakuola</td> <td class="p-3">Ada, ukuran <b>sangat besar</b></td> <td class="p-3">Ada, ukuran kecil / tidak permanen</td> </tr> <tr> <td class="p-3 font-bold bg-slate-50">Sentriol</td> <td class="p-3 text-rose-600">Tidak ada (umumnya)</td> <td class="p-3 text-emerald-700 font-bold">Ada (Berperan saat pembelahan sel)</td> </tr> <tr> <td class="p-3 font-bold bg-slate-50">Bentuk Sel</td> <td class="p-3">Tetap / Beraturan</td> <td class="p-3">Berubah-ubah / Fleksibel</td> </tr> </tbody> </table> </div> </div>  <div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]"> <div class="text-center"> <span class="bg-amber-100 text-amber-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Evaluasi Kelompok</span> <h2 class="text-3xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase mt-1">⚡ BATTLE KELOMPOK MULTI-USER (TP 1 & 2) ⚡</h2> <p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke depan! Jawab 5 soal struktur & perbedaan sel secara bergantian.</p> </div> <div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">  <div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm"> <span>🟢 Kelompok 1</span> <span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span> </div> <div class="mt-8 flex-1 flex flex-col justify-center space-y-3"> <div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center"> <p id="ifp-q-1" class="text-base font-black text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-1" class="space-y-2"></div> <div id="ifp-feedback-1" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div> </div> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm"> <span>🔵 Kelompok 2</span> <span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span> </div> <div class="mt-8 flex-1 flex flex-col justify-center space-y-3"> <div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center"> <p id="ifp-q-2" class="text-base font-black text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-2" class="space-y-2"></div> <div id="ifp-feedback-2" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div> </div> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm"> <span>🟡 Kelompok 3</span> <span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span> </div> <div class="mt-8 flex-1 flex flex-col justify-center space-y-3"> <div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center"> <p id="ifp-q-3" class="text-base font-black text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-3" class="space-y-2"></div> <div id="ifp-feedback-3" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div> </div> </div> </div>  <div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl"> <div class="text-8xl mb-4 animate-bounce">👑</div> <h2 id="ifp-winner-text" class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-400 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2> <button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#065f46] transition"> Mainkan Lagi 🔄 </button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Mandiri (Fokus TP 1 & 2)</h2> <p class="text-base font-bold text-slate-500 mb-6">Uji pemahaman individumu melalui 5 soal pilihan ganda berikut.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left"> <div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4"> <span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p> <div id="eval-options" class="space-y-3"></div> <div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🥇</div> <h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Mandiri: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p> <div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden"> <p class="font-bold text-slate-500 text-center mb-4">Kirim laporan nilai hasil belajarmu ke guru.</p> <div> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama & Kelas</label> <input type="text" id="input-nama-lapor" placeholder="Contoh: Budi (8A)" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50 text-sm"> </div> <div> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500 text-sm"> <option value="100">100% - Sangat Paham!</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Butuh Latihan Lagi</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all"> Kirim Laporan ke Guru 🚀 </button> </div> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Pembelajaran 💭</h2> <p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari struktur dan perbedaan sel hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center cursor-pointer"> <div class="text-5xl mb-2">😎</div> <h3 class="font-black text-lg text-slate-700">Senang & Paham</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center cursor-pointer"> <div class="text-5xl mb-2">🤔</div> <h3 class="font-black text-lg text-slate-700">Cukup Mengerti</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center cursor-pointer"> <div class="text-5xl mb-2">🤯</div> <h3 class="font-black text-lg text-slate-700">Perlu Bimbingan</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2 text-sm">Tuliskan kesan atau bagian paling menarik hari ini:</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium text-sm" rows="3" placeholder="Tuliskan di sini..."></textarea> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300"> <i data-lucide="chevron-left" class="w-5 h-5"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } // Sinkronisasi nama siswa ke form akhir if (current === 9) { let n = document.getElementById('input-nama').value; let k = document.getElementById('input-kelas').value; if(n) document.getElementById('input-nama-lapor').value = n + (k ? " (" + k + ")" : ""); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); // ========================================== // MULTI-USER KELOMPOK GAME (3 Kelompok, @5 Soal) // ========================================== let ifpProgress = { 1: 0, 2: 0, 3: 0 }; const TOTAL_IFP_QUESTIONS = 5; const multiUserBank = [ { q: "Pusat pengendali seluruh aktivitas sel dan pembawa materi genetik adalah...", opts: ["Nukleus", "Mitokondria", "Membran Sel"], ans: 0 }, { q: "Organel sel yang berfungsi menghasilkan energi melalui respirasi sel adalah...", opts: ["Mitokondria", "Ribosom", "Vakuola"], ans: 0 }, { q: "Manakah struktur yang hanya dijumpai pada sel tumbuhan?", opts: ["Dinding sel & Kloroplas", "Lisosom & Sentriol", "Membran sel"], ans: 0 }, { q: "Bagian sel yang berfungsi mengatur keluar masuknya zat adalah...", opts: ["Membran sel", "Nukleus", "Sitoplasma"], ans: 0 }, { q: "Organel yang berperan dalam pembentukan protein adalah...", opts: ["Ribosom", "Mitokondria", "Badan Golgi"], ans: 0 }, { q: "Manakah ciri khas yang hanya dimiliki oleh sel hewan?", opts: ["Memiliki sentriol", "Memiliki dinding sel", "Memiliki kloroplas"], ans: 0 } ]; function initIFPQuestion(group) { document.getElementById(`ifp-feedback-${group}`).classList.add('hidden'); if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) { document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`; document.getElementById(`ifp-opts-${group}`).innerHTML = ""; checkWinnerIFP(group); return; } document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`; let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)]; document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q; let optsContainer = document.getElementById(`ifp-opts-${group}`); optsContainer.innerHTML = ""; randQ.opts.forEach((opt, idx) => { let btn = document.createElement('button'); btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border border-slate-200 transition cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn); optsContainer.appendChild(btn); }); } let winnerDeclared = false; function checkIFPAnswer(group, selected, correctIdx, btn) { let optsContainer = document.getElementById(`ifp-opts-${group}`); let btns = optsContainer.querySelectorAll('button'); btns.forEach(b => b.disabled = true); let fb = document.getElementById(`ifp-feedback-${group}`); fb.classList.remove('hidden'); if(selected === correctIdx) { btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "✅ Benar! Lanjut..."; ifpProgress[group]++; setTimeout(() => { initIFPQuestion(group); }, 800); } else { btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700"; btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block"; fb.innerHTML = "❌ Salah!"; setTimeout(() => { initIFPQuestion(group); }, 1200); } } function checkWinnerIFP(group) { if(!winnerDeclared) { winnerDeclared = true; setTimeout(() => { document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`; document.getElementById('ifp-winner-modal').classList.remove('hidden'); document.getElementById('ifp-winner-modal').classList.add('flex'); }, 300); } } function resetIFPGame() { ifpProgress = { 1: 0, 2: 0, 3: 0 }; winnerDeclared = false; document.getElementById('ifp-winner-modal').classList.add('hidden'); document.getElementById('ifp-winner-modal').classList.remove('flex'); for(let i=1; i<=3; i++) { initIFPQuestion(i); } } for(let i=1; i<=3; i++) { initIFPQuestion(i); } // Refleksi function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Senang')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Cukup')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // Latihan Mandiri Individu (Ujian Akhir TP 1 & 2) const evaluasiBank = [ { q: "Bagian sel yang berfungsi sebagai pengendali seluruh aktivitas sel dan pembawa informasi genetik (DNA) adalah...", options: ["Nukleus", "Mitokondria", "Membran sel", "Ribosom"], a: 0, exp: "Nukleus atau inti sel bertindak sebagai pusat pengendali sel." }, { q: "Organel sel yang berfungsi sebagai tempat pembentukan energi (respirasi sel) adalah...", options: ["Mitokondria", "Badan Golgi", "Vakuola", "Sitoplasma"], a: 0, exp: "Mitokondria dikenal sebagai pabrik energi sel." }, { q: "Manakah di bawah ini yang merupakan organel yang HANYA terdapat pada sel tumbuhan?", options: ["Dinding sel dan kloroplas", "Mitokondria dan nukleus", "Membran sel dan ribosom", "Retikulum endoplasma"], a: 0, exp: "Dinding sel dan kloroplas merupakan ciri khas eksklusif pada sel tumbuhan." }, { q: "Mengapa sel tumbuhan memiliki bentuk yang kaku dan teratur?", options: ["Karena memiliki dinding sel dari selulosa", "Karena tidak memiliki inti sel", "Karena vakuolanya sangat kecil", "Karena dikelilingi oleh lisosom"], a: 0, exp: "Dinding sel yang keras memberikan bentuk kaku pada sel tumbuhan." }, { q: "Fungsi utama dari kloroplas pada sel tumbuhan adalah...", options: ["Tempat berlangsungnya fotosintesis", "Penyimpan cadangan air", "Pemberi energi gerak", "Pengatur keluar masuk zat"], a: 0, exp: "Kloroplas mengandung zat hijau daun (klorofil) untuk fotosintesis." } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } document.getElementById('eval-feedback').classList.add('hidden'); const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-base hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp); optsContainer.appendChild(btn); }); } function checkEvaluasi(selected, correct, btn, explanation) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('eval-feedback'); fb.classList.remove('hidden'); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-base font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`; evalSkor += 20; } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-base font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`; } setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500); } loadEvaluasi(); function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama-lapor').value.trim(); if(!nama) { alert("Silakan masukkan nama & kelas terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Selesai belajar!"; alert(`Laporan Berhasil Terkirim ke Guru! 🎉\n\nNama: ${nama}\nSkor Ujian: ${evalSkor}\nPemahaman: ${baterai}%\nCatatan: ${refleksi}`); } </script> </body> </html>

Kelas 7 SSK

Anti Narkoba Bagi Generasi Muda

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Misi Anti-Narkoba: Generasi Keren Tanpa Narkoba! 🚫💊</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #f0fdf4; /* Soft green theme */ background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .floating { animation: float 3s ease-in-out infinite; } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .check-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; } .check-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #34d399; } .check-item.checked { background: linear-gradient(135deg, #059669, #10b981); color: white; border-color: #047857; transform: scale(1.03); } .guess-btn, .auto-guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active, .auto-guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } .text-gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #059669, #3b82f6); } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/80 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm rotate-3 text-white"> <i data-lucide="shield-check" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Misi Ketahanan Diri</span> <span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-emerald-400 via-teal-500 to-blue-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-3xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-emerald-200 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(5,150,105,1)] rotate-[-2deg]"> #SMPN72MalukuTengah #SekolahSadarKependudukan </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Muda Keren, <br><span class="text-gradient">Bebas Narkoba!</span> 🛡️✨ </h1> <p class="text-xl text-slate-600 font-bold max-w-xl mx-auto"> Kenali bahayanya, kuatkan mental dari tekanan teman, dan raih masa depan gemilang tanpa zat terlarang! </p> <img src="https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=800&q=80" alt="Generasi Muda Sehat" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(16,185,129,0.4)] mt-8 border-4 border-white floating"> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-emerald-900 inline-block bg-emerald-100 px-6 py-2 rounded-2xl rotate-1">Apa Sih Bahaya Narkoba Itu? ⚠️</h2> </div> <div class="grid md:grid-cols-2 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-red-200 shadow-sm flex flex-col justify-between"> <div> <span class="text-4xl block mb-3">🧠</span> <h3 class="font-black text-2xl text-red-600 mb-2">Merusak Otak Remaja</h3> <p class="text-slate-600 font-bold">Otak remaja masih berkembang. Narkoba bisa merusak struktur saraf permanen, bikin susah fokus, dan emosi naik turun!</p> </div> <div class="mt-4 bg-red-50 p-3 rounded-xl text-xs font-bold text-red-700">Dampak: Penurunan drastis prestasi akademik di sekolah.</div> </div> <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm flex flex-col justify-between"> <div> <span class="text-4xl block mb-3">💔</span> <h3 class="font-black text-2xl text-amber-600 mb-2">Hancurnya Masa Depan</h3> <p class="text-slate-600 font-bold">Bukan cuma fisik dan organ dalam yang rusak, narkoba juga memutus hubungan sosial dengan keluarga dan teman baikmu.</p> </div> <div class="mt-4 bg-amber-50 p-3 rounded-xl text-xs font-bold text-amber-700">Dampak: Ketergantungan psikologis yang membelenggu hidup.</div> </div> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-2"> <div class="inline-block px-4 py-1 bg-blue-100 text-blue-700 font-black rounded-full text-sm mb-2">Simulasi Tantangan 🎭</div> <h2 class="text-3xl font-black text-slate-900">Uji Mental: Menghadapi "Permen" Misterius</h2> </div> <div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-[6px_6px_0px_#93c5fd] space-y-4"> <p class="text-lg font-extrabold text-slate-700 leading-relaxed bg-blue-50 p-4 rounded-2xl"> 💬 <i>"Nih cobain permen herbal dari kakak kelas, biar kepala rileks dan gampang paham pelajaran, gak usah tegang jadi anak baru..."</i> </p> <p class="font-bold text-slate-500">Menurutmu, apa tindakan paling tepat yang harus dilakukan?</p> <div class="space-y-3 pt-2"> <button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition"> A. Coba dikit aja deh biar gak dibilang penakut sama kakak kelas. ❌ </button> <button onclick="pilihOpsiKasus(true, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition"> B. Tolak dengan tegas, bilang "Maaf, saya tidak mau!", lalu segera menjauh dan lapor guru. ✅ </button> <button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition"> C. Terima dulu simpan di saku buat jaga-jaga. ❌ </button> </div> <div id="feedback-kasus" class="hidden p-4 rounded-2xl font-bold text-lg pop-in"></div> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="flex justify-between items-end mb-4 bg-emerald-100 p-6 rounded-3xl border-2 border-emerald-200"> <div> <h2 class="text-3xl font-black text-emerald-900">Kiat Tangguh Tolak Narkoba ✨</h2> <p class="text-emerald-700 font-bold mt-1 text-lg">Tap komitmen yang siap kamu pegang teguh!</p> </div> <span id="checklist-counter" class="text-lg font-black text-white bg-emerald-600 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/4</span> </div> <div class="space-y-4" id="checklist"> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🗣️</span> Berani bilang "TIDAK" dengan tegas tanpa ragu.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🏃‍♂️</span> Menjauhi lingkungan pergaulan yang toksik/berisiko.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">⚽</span> Sibukkan diri dengan hobi positif & ekstrakurikuler.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">👨‍👩‍👧‍👦</span> Terbuka dan komunikatif dengan orang tua atau guru BK.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Uji Penalaran: <span class="text-gradient">Kuis Anti-Narkoba</span> 🎮</h2> <p class="text-lg font-bold text-slate-500 mt-2">Uji kemampuan analisismu dalam situasi pergaulan sehari-hari!</p> <div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-emerald-800 text-xl">SKOR SAYA: <span id="quiz-score">0</span></span> </div> </div> <div id="auto-quiz-container" class="space-y-4"> <div class="quiz-card p-6 rounded-3xl bg-white border-2 border-slate-200 shadow-[4px_4px_0px_rgba(203,213,225,1)] transition-colors relative" id="active-quiz-card"> <div class="flex gap-4"> <div class="bg-emerald-100 text-emerald-700 font-black text-2xl p-4 rounded-2xl h-fit">Q</div> <p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p> </div> <div id="quiz-options" class="grid grid-cols-1 gap-3 ml-16 mt-2">  </div> <div id="quiz-feedback" class="hidden mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8"></div> <button id="next-quiz-btn" onclick="loadNewQuestion()" class="hidden mt-4 w-full ml-16 py-3 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700">Lanjut Soal Berikutnya ➡️</button> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-7xl mb-2 animate-bounce">🏆</div> <h2 class="text-4xl md:text-5xl font-black text-emerald-900 mb-2">Misi Selesai, Generasi Hebat!</h2> <p class="text-xl font-extrabold text-slate-600 max-w-xl"> Kamu telah menyelesaikan sesi pembelajaran anti-narkoba. Catat hasil skormu dan laporkan refleksimu ke sistem guru! </p> <div class="bg-white border-4 border-emerald-300 p-6 rounded-3xl max-w-md w-full shadow-xl space-y-4 text-left"> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Nama Lengkap Siswa</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold focus:outline-emerald-500"> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Seberapa paham kamu materi hari ini? (Baterai Pemahaman)</label> <select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold bg-white"> <option value="100">100% - Sangat Paham & Siap Menolak!</option> <option value="75">75% - Cukup Paham</option> <option value="50">50% - Masih Perlu Belajar Lagi</option> </select> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Hambatan / Pertanyaan Singkat</label> <input type="text" id="input-hambatan" placeholder="Misal: Cara menolak teman akrab..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold"> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Komitmen / Strategi Kamu</label> <input type="text" id="input-strategi" placeholder="Misal: Memilih teman yang hobi olahraga..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold"> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-lg font-black rounded-2xl shadow-lg hover:shadow-xl transition-all"> Kirim Hasil Belajar Ke Guru 🚀 </button> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-600 shadow-[0_4px_0px_#047857]"> <span class="hidden md:inline">Lanjut Misi</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.innerHTML = '<span class="hidden md:inline">Selesai 🌟</span>'; } else { nextBtn.disabled = false; nextBtn.innerHTML = '<span class="hidden md:inline">Lanjut Misi</span> <i data-lucide="rocket" class="w-6 h-6"></i>'; lucide.createIcons(); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); // Simulasi Kasus Interaktif (Slide 3) function pilihOpsiKasus(isBenar, btn) { const fb = document.getElementById('feedback-kasus'); fb.classList.remove('hidden'); if(isBenar) { btn.className = "w-full text-left p-4 rounded-2xl bg-emerald-500 text-white font-bold border-2 border-emerald-700"; fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-emerald-100 text-emerald-800 border-l-8 border-emerald-500 pop-in"; fb.innerHTML = "🎉 <b>Tepat Sekali!</b> Menolak dengan tegas dan melapor adalah tindakan anak cerdas pelindung masa depan."; } else { btn.className = "w-full text-left p-4 rounded-2xl bg-rose-500 text-white font-bold border-2 border-rose-700"; fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-rose-100 text-rose-800 border-l-8 border-rose-500 pop-in"; fb.innerHTML = "❌ <b>Kurang Tepat.</b> Menerima barang asing dari orang lain sangat membahayakan kesehatan dan masa depanmu!"; } } // Checklist Logic (Slide 4) const checkItems = document.querySelectorAll('.check-item'); const checklistCounter = document.getElementById('checklist-counter'); let checkedCount = 0; checkItems.forEach(btn => { btn.addEventListener('click', () => { const isChecked = btn.classList.toggle('checked'); const icon = btn.querySelector('svg'); if(isChecked) { checkedCount++; icon.classList.remove('opacity-30', 'text-slate-400'); icon.classList.add('text-white', 'opacity-100'); } else { checkedCount--; icon.classList.add('opacity-30', 'text-slate-400'); icon.classList.remove('text-white', 'opacity-100'); } checklistCounter.textContent = `${checkedCount}/${checkItems.length}`; }); }); // 5 Soal Pilihan Ganda HOTS (Survival Mode - Slide 5) const questionBank = [ { q: "Rian sering diejek sebagai anak kurang pergaulan karena menolak nongkrong malam di tempat sepi. Suatu hari temannya mendesak mencoba rokok elektrik (vape) bebas nikotin. Tindakan tepat Rian adalah...", options: [ "Menerima vape tersebut sekali saja agar diterima kelompok", "Mencoba diam-diam lalu menjauh esok hari", "Menolak dengan tegas, mengubah topik, dan meninggalkan lingkungan toksik", "Menerima vape untuk disimpan sendiri" ], correct: 2, msg: "Asertif menolak dan menjauhi lingkungan berisiko adalah kunci utama menghindari narkoba." }, { q: "Mengapa penyalahgunaan narkotika pada usia remaja (SMP) jauh lebih merusak dibandingkan pada usia dewasa?", options: [ "Remaja memiliki daya tahan tubuh lebih lemah", "Otak remaja masih berkembang aktif sehingga kecanduan mengubah struktur saraf permanen", "Remaja belum memiliki uang sendiri", "Lingkungan sekolah tidak punya sanksi tegas" ], correct: 1, msg: "Secara neurobiologis, otak remaja sangat rentan terhadap perubahan struktur akibat zat adiktif." }, { q: "Perubahan drastis: nilai turun, mengurung diri, emosi meledak. Sebagai keluarga komunikatif, langkah awal bijak adalah...", options: [ "Menghukum dan menggeledah kamar secara paksa", "Membiarkannya karena fase wajar kenakalan remaja", "Membuka dialog hangat tanpa menghakimi dan mencari konselor", "Memindahkan anak ke sekolah lain" ], correct: 2, msg: "Pendekatan dialogis dan suportif jauh lebih efektif merangkul remaja bermasalah." }, { q: "Susi diajak ke komunitas online tersembunyi yang menjanjikan pelarian stres dari zat tertentu. Strategi coping efektif Susi?", options: [ "Mengikuti kemauan mereka demi keamanan", "Keluar, blokir akun, dan alihkan waktu ke hobi positif", "Melaporkan ke media sosial secara terbuka", "Diam saja dan mengingatkan lewat pesan pribadi" ], correct: 1, msg: "Detoksifikasi pergaulan digital dan pengalihan ke hobi positif adalah manajemen diri terbaik." }, { q: "Sebagai Sekolah Sadar Kependudukan, peran ekosistem sekolah jika ada siswa terindikasi lingkungan berisiko adalah...", options: [ "Mengeluarkan siswa secepat mungkin", "Menutupi kasus rapat-rapat", "Menciptakan lingkungan aman, layanan konseling merangkul, dan pencegahan aktif", "Menyerahkan sepenuhnya ke polisi" ], correct: 2, msg: "Sekolah ramah anak mengedepankan fungsi preventif, rehabilitatif, dan suportif." } ]; let currentQIndex = -1; let quizScore = 0; let usedIndices = []; const qText = document.getElementById('quiz-question-text'); const qOptions = document.getElementById('quiz-options'); const qFeedback = document.getElementById('quiz-feedback'); const nextBtnQuiz = document.getElementById('next-quiz-btn'); const scoreDisplay = document.getElementById('quiz-score'); const activeCard = document.getElementById('active-quiz-card'); function loadNewQuestion() { qFeedback.classList.add('hidden'); nextBtnQuiz.classList.add('hidden'); activeCard.classList.remove('border-emerald-400', 'bg-emerald-50', 'border-rose-400', 'bg-rose-50'); if(usedIndices.length >= questionBank.length) usedIndices = []; let rand; do { rand = Math.floor(Math.random() * questionBank.length); } while (usedIndices.includes(rand)); usedIndices.push(rand); currentQIndex = rand; const currentQ = questionBank[rand]; qText.textContent = currentQ.q; qOptions.innerHTML = ""; currentQ.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.type = "button"; btn.className = "auto-guess-btn w-full text-left p-4 bg-slate-100 rounded-2xl text-slate-700 font-bold border-b-4 border-slate-300 hover:bg-slate-200 transition-all"; btn.textContent = opt; btn.onclick = () => checkAnswer(idx, currentQ.correct, btn, currentQ.msg); qOptions.appendChild(btn); }); } loadNewQuestion(); function checkAnswer(selected, correctIdx, btnElement, explanation) { const allBtns = qOptions.querySelectorAll('button'); allBtns.forEach(b => b.disabled = true); if(selected === correctIdx) { btnElement.classList.add('btn-correct'); activeCard.classList.add('border-emerald-400', 'bg-emerald-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-emerald-500 bg-emerald-100 text-emerald-800 pop-in block'; qFeedback.innerHTML = `<span class="text-xl block mb-1">🎉 Pintar Sekali!</span> ${explanation}`; quizScore += 100; scoreDisplay.textContent = quizScore; } else { btnElement.classList.add('btn-wrong'); allBtns[correctIdx].classList.add('btn-correct'); activeCard.classList.add('border-rose-400', 'bg-rose-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-rose-500 bg-rose-100 text-rose-800 pop-in block'; qFeedback.innerHTML = `<span class="text-xl block mb-1">😅 Kurang Tepat.</span> Analisis yang benar: ${explanation}`; quizScore = Math.max(0, quizScore - 30); scoreDisplay.textContent = quizScore; } nextBtnQuiz.classList.remove('hidden'); } // Fungsi kirim nilai kembali ke sistem LMS (siswa.php) function kirimNilaiLeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const hambatan = document.getElementById('input-hambatan').value || "Tidak ada"; const strategi = document.getElementById('input-strategi').value || "Aktif berolahraga dan jauhi narkoba"; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: quizScore, baterai: baterai, hambatan: hambatan, strategi: strategi }, "*"); } else { alert("Hasil berhasil direkam secara lokal! Skor Kuis Kamu: " + quizScore); } } </script> </body> </html>

Kelas 7 MPLS

Literasi Digital 2

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Misi MPLS: Jadi Netizen Kece! 🚀</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #f0fdfa; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } /* Fun Animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .floating { animation: float 3s ease-in-out infinite; } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Checklist Gamification */ .check-item, .confess-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; } .check-item:hover, .confess-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #fcd34d; } .check-item:active, .confess-item:active { transform: translateY(2px); border-bottom-width: 2px; } .check-item.checked { background: linear-gradient(135deg, #8b5cf6, #d946ef); color: white; border-color: #6d28d9; transform: scale(1.03); } .confess-item.checked { background: linear-gradient(135deg, #f43f5e, #fb923c); color: white; border-color: #be123c; transform: scale(1.03); } /* Quiz Button Styles */ .guess-btn, .auto-guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active, .auto-guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } /* Gradient Text */ .text-gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #7c3aed, #db2777); } /* Nav Buttons */ .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/80 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-yellow-400 p-2 rounded-xl shadow-sm rotate-3"> <i data-lucide="gamepad-2" class="w-6 h-6 text-purple-900"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Level Progress</span> <span id="progress-text" class="text-xs font-black text-white bg-pink-500 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-3xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-yellow-300 text-purple-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(124,58,237,1)] rotate-[-2deg]"> #MPLS_Seru2026 </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Siap Jadi <span class="text-gradient">Netizen Kece?</span> 😎📱 </h1> <p class="text-xl text-slate-600 font-bold max-w-xl mx-auto"> Welcome to SMP! Yuk belajar cara asyik dan aman main sosmed, game, dan internet bareng-bareng! </p> <img src="./assets/WhatsApp Image 2026-07-09 at 23.07.58.jpeg" alt="Teens on phones" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(219,39,119,0.5)] mt-8 border-4 border-white floating" onerror="this.src='https://images.unsplash.com/photo-1610427339798-2cb2d04a7428?auto=format&fit=crop&w=800&q=80'"> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-purple-800 inline-block bg-purple-100 px-6 py-2 rounded-2xl rotate-1">Literasi Digital Tuh Apaan Sih? 🤔</h2> </div> <div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-3xl shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200 mt-4"> <div class="flex-1 space-y-6 text-xl text-slate-700 font-bold"> <p class="bg-yellow-100 p-4 rounded-xl border-l-8 border-yellow-400">🎮 Bukan cuma soal jago <i>push rank</i> atau bikin konten FYP TikTok doang, bestie!</p> <ul class="space-y-4"> <li class="flex gap-4 items-center"><span class="bg-pink-100 text-pink-600 p-2 rounded-lg text-2xl">🧠</span> Pintar bedain mana info asli, mana hoaks.</li> <li class="flex gap-4 items-center"><span class="bg-blue-100 text-blue-600 p-2 rounded-lg text-2xl">🤝</span> Tau sopan santun waktu komen di IG/TikTok orang.</li> <li class="flex gap-4 items-center"><span class="bg-green-100 text-green-600 p-2 rounded-lg text-2xl">🔐</span> Jago ngelindungin akun sendiri biar nggak di-hack!</li> </ul> </div> <img src="https://static.vecteezy.com/system/resources/thumbnails/002/722/950/small_2x/side-view-of-children-using-laptop-for-communicate-video-conference-with-teacher-and-friends-on-white-background-free-vector.jpg" alt="Belajar Digital" class="w-72 h-64 object-cover rounded-2xl shadow-[6px_6px_0px_rgba(219,39,119,1)] transform rotate-2 floating border-4 border-white" onerror="this.src='https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=800&q=80'"> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="flex justify-between items-end mb-4 bg-purple-100 p-6 rounded-3xl border-2 border-purple-200"> <div> <h2 class="text-3xl font-black text-purple-900">Checklist Anak Gaul Internet ✨</h2> <p class="text-purple-700 font-bold mt-1 text-lg">Sentuh (Tap) kotak yang udah sering kamu lakuin!</p> </div> <span id="checklist-counter" class="text-lg font-black text-white bg-pink-500 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/5</span> </div> <div class="space-y-4" id="checklist"> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤫</span> Nggak pernah ngasih tau password ke temen.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤔</span> Mikir dulu sebelum ngetik komen pedas.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🕵️</span> Suka ngecek berita dulu (gak asal share).</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🚫</span> Block/Report orang yang suka nge-bully.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">⏰</span> Tau waktu! Kalo waktunya tidur, HP dimatiin.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Survival Game: <span class="text-gradient">Fakta vs Hoaks!</span> 🎮</h2> <p class="text-lg font-bold text-slate-500 mt-2">Kumpulkan skor sebanyak-banyaknya! Soal akan terus muncul.</p> <div class="mt-4 inline-flex items-center gap-3 bg-yellow-100 border-2 border-yellow-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-yellow-700 text-xl">SKOR: <span id="quiz-score">0</span></span> </div> </div> <div id="auto-quiz-container" class="space-y-4"> <div class="quiz-card p-6 rounded-3xl bg-white border-2 border-slate-200 shadow-[4px_4px_0px_rgba(203,213,225,1)] transition-colors relative" id="active-quiz-card"> <div class="flex gap-4"> <div class="bg-blue-100 text-blue-600 font-black text-2xl p-4 rounded-2xl h-fit">?</div> <p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p> </div> <div class="flex gap-4 options ml-16 mt-2"> <button type="button" onclick="checkAnswer('fakta', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-green-100 hover:text-green-700 transition-all active:translate-y-1 active:border-b-0">FAKTA ✅</button> <button type="button" onclick="checkAnswer('hoaks', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-red-100 hover:text-red-700 transition-all active:translate-y-1 active:border-b-0">HOAKS ❌</button> </div> <div id="quiz-feedback" class="hidden mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8"></div> <button id="next-quiz-btn" onclick="loadNewQuestion()" class="hidden mt-4 w-full ml-16 py-3 bg-purple-600 text-white rounded-xl font-bold hover:bg-purple-700">Lanjut Soal Berikutnya ➡️</button> </div> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-6"> <h2 class="text-4xl font-black text-white bg-pink-500 inline-block px-8 py-3 rounded-2xl transform rotate-2 shadow-[4px_4px_0px_#be185d]">No Drama, No Bully! 🛑</h2> </div> <div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-[2rem] shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200"> <div class="flex-1 space-y-5"> <div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-pink-300 transition-colors"> <div class="w-12 h-12 bg-pink-100 text-pink-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">1</div> <div> <p class="font-black text-xl text-slate-800">Fisik Dihina? BIG NO!</p> <p class="text-slate-600 font-bold mt-1">Ngejek fisik orang (Body Shaming) di kolom komentar itu jahat dan nggak keren sama sekali.</p> </div> </div> <div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-purple-300 transition-colors"> <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">2</div> <div> <p class="font-black text-xl text-slate-800">Jangan Jadi Cepu! 📸</p> <p class="text-slate-600 font-bold mt-1">Nyebarin rahasia atau bikin foto memalukan teman jadi stiker WA tanpa izin itu termasuk pelanggaran lho.</p> </div> </div> <div class="flex items-start gap-4 p-4 rounded-2xl bg-red-50 border-2 border-red-200 hover:border-red-400 transition-colors transform rotate-1"> <div class="w-12 h-12 bg-red-500 text-white rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm"><i data-lucide="megaphone" class="w-6 h-6"></i></div> <div> <p class="font-black text-xl text-red-700">Kena Bully? JANGAN DIAM!</p> <p class="text-red-600 font-extrabold mt-1">Screenshot buktinya, block pelakunya, dan laporkan ke orang tua atau guru BK. Kamu dilindungi!</p> </div> </div> </div> <div class="flex-shrink-0 relative"> <div class="absolute inset-0 bg-yellow-400 rounded-3xl transform rotate-6 scale-105 shadow-md"></div> <img src="https://i.pinimg.com/originals/e2/35/de/e235de5f2ee18e104fee4717d16cf73b.jpg" alt="Stop Bullying" class="w-64 h-80 object-cover rounded-3xl border-4 border-white relative z-10 floating" onerror="this.src='https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=400&q=80'"> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <h2 class="text-5xl font-black text-slate-900"><span class="bg-pink-200 px-4 rounded-xl">Saring</span> Sebelum <span class="bg-blue-200 px-4 rounded-xl">Sharing!</span> 🧠</h2> <div class="bg-white border-4 border-purple-400 rounded-[2rem] p-10 max-w-2xl space-y-6 shadow-[8px_8px_0px_rgba(192,132,252,1)] mt-6 relative"> <div class="absolute -top-10 left-1/2 transform -translate-x-1/2 w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center text-4xl shadow-md border-4 border-white">🕵️‍♂️</div> <p class="text-2xl text-slate-700 font-extrabold leading-snug pt-6">Kalo dapet berita heboh di grup kelas atau keluarga, JANGAN LANGSUNG DI-FORWARD!</p> <p class="text-lg font-bold text-slate-500">Cek dulu kebenarannya di website anti-hoaks resmi Indonesia ini:</p> <div class="py-4 space-y-3"> <div class="bg-purple-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2"> <p class="font-black text-2xl text-purple-700">turnbackhoax.id</p> </div> <div class="bg-pink-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2"> <p class="font-black text-2xl text-pink-700">cekfakta.com</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <h2 class="text-4xl font-black text-center mb-8">Gembok Akunmu Rapat-Rapat! 🔐</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative"> <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="key" class="w-8 h-8"></i></div> <p class="font-black text-2xl text-slate-800 pt-4">Password Kuat</p> <p class="text-slate-600 font-bold">Jangan pake password "123456" atau tanggal lahir. Pake kombinasi angka & simbol. Contoh: <span class="bg-yellow-200 px-2 rounded text-slate-800">@n4kK3c3_07!</span></p> </div> <div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative"> <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-pink-500 text-white w-14 h-14 rounded-xl flex items-center justify-center -rotate-6 shadow-sm"><i data-lucide="ghost" class="w-8 h-8"></i></div> <p class="font-black text-2xl text-slate-800 pt-4">Awas Phishing</p> <p class="text-slate-600 font-bold">Jangan asal klik link aneh yang dikirim lewat WA/DM IG dari orang nggak dikenal. Akunmu bisa lenyap!</p> </div> <div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative"> <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="shield-alert" class="w-8 h-8"></i></div> <p class="font-black text-2xl text-slate-800 pt-4">OTP itu Rahasia!</p> <p class="text-slate-600 font-bold">Kode 4-6 angka yang masuk via SMS/WA itu HARAM dikasih tau ke siapa aja, termasuk yang ngaku-ngaku admin/kasir.</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="flex flex-col md:flex-row gap-10 bg-gradient-to-br from-indigo-900 to-purple-900 p-10 rounded-[2.5rem] shadow-2xl items-center text-white mt-4 relative overflow-hidden"> <div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-10 rounded-full blur-3xl"></div> <div class="absolute bottom-0 left-0 w-48 h-48 bg-pink-500 opacity-20 rounded-full blur-2xl"></div> <div class="flex-1 space-y-6 z-10"> <h2 class="text-5xl font-black text-yellow-300 mb-2">Jejak Digital Beb! 👣</h2> <div class="space-y-4 text-lg font-bold"> <p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">📱 Curhatan galau, foto alay, komen nge-gas hari ini...</p> <p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">🎓 ...bisa dibaca sama pihak sekolah, kampus, atau bos kamu di masa depan!</p> <p class="bg-pink-500/80 p-4 rounded-2xl backdrop-blur-sm border border-pink-400 mt-4 text-xl">✨ Mulai sekarang, yuk bangun citra (branding) yang positif. Share karya, prestasi, atau kegiatan seru bareng teman!</p> </div> </div> <div class="text-center z-10"> <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&q=80" alt="Sosmed Icons" class="w-64 h-64 object-cover rounded-full shadow-[0_0_40px_rgba(236,72,153,0.5)] border-8 border-indigo-800 floating"> <p class="mt-6 font-black text-yellow-300 text-xl bg-black/30 py-2 px-4 rounded-full">Internet Gak Pernah Lupa!</p> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-red-100 text-red-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#fca5a5] rotate-[-2deg]"> #SpecialScreening 🍿 </div> <h2 class="text-5xl md:text-6xl font-black text-slate-900 mt-2">Nobar Bareng:<br><span class="text-gradient">Kemenangan Sejati</span> 🎬</h2> <p class="text-xl font-bold text-slate-600 mt-2 max-w-3xl">Judi Online (Judol) itu penipuan berkedok game yang bisa merusak masa depan. Yuk, tonton film pendek edukasi pencegahannya di bawah ini!</p>  <div class="w-full max-w-3xl mx-auto mt-6 rounded-2xl overflow-hidden border-4 border-slate-800 shadow-[8px_8px_0px_#cbd5e1] bg-black"> <video controls class="w-full aspect-video outline-none" poster="https://images.unsplash.com/photo-1594909122845-11baa439b7bf?auto=format&fit=crop&w=800&q=80"> <source src="./assets/FILM PENDEK _KEMENANGAN SEJATI_.mp4" type="video/mp4"> Browser kamu tidak mendukung pemutaran video. </video> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-3xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl transform -rotate-1">Refleksi Kemenangan Sejati 💭</h2> <p class="text-lg font-bold text-slate-500 mt-3">Yuk, tuangkan pendapatmu setelah nonton film tadi!</p> </div> <div class="space-y-4 mt-2">  <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">a. Apa pelajaran paling berharga dari film ini?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Tulis jawabanmu di sini..."></textarea> </div> <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">b & c. Kenapa tokoh utama bisa terjebak judol & apa faktornya?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Ceritakan pendapatmu..."></textarea> </div> <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">d. Apa dampak negatif yang terlihat dari Judol & Pinjol ilegal?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Sebutkan dampaknya..."></textarea> </div> <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">e & f. Kalau kamu/teman di posisi itu, apa tindakanmu & siapa yang dibantu?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Aku akan..."></textarea> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-4 h-full min-h-[75vh]" id="slide-10"> <div class="text-7xl mb-2 animate-bounce">🏆</div> <h2 class="text-5xl font-black text-purple-900 mb-2">Level 1 Completed!</h2> <p class="text-2xl font-extrabold text-slate-600">Selamat! Kamu resmi jadi Siswa SMP yang Melek Digital.</p> <div class="bg-white border-4 border-dashed border-pink-400 p-6 rounded-3xl max-w-4xl w-full mt-4 shadow-xl flex flex-col items-center"> <p class="text-xl font-bold text-slate-700 mb-4">Sebagai hadiah, Kakak udah siapin contekan keren buat kamu. Langsung baca atau download ya!</p>  <div class="w-full h-[40vh] md:h-[50vh] rounded-xl overflow-hidden border-2 border-slate-200 mb-4 relative z-10"> <iframe src="./assets/Unmasking_the_Gambling_Trap.pdf" class="w-full h-full border-none bg-slate-100" title="PDF Cheat Sheet"></iframe> </div> <a href="./assets/Unmasking_the_Gambling_Trap.pdf" download class="inline-flex items-center gap-3 px-8 py-3 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-xl font-black rounded-xl shadow-[0_6px_0px_#9333ea] hover:translate-y-1 transition-all active:shadow-none active:translate-y-2"> <i data-lucide="download-cloud" class="w-6 h-6"></i> Download File PDF </a> </div> <div class="bg-yellow-200 text-yellow-900 font-bold px-6 py-3 rounded-full animate-pulse border-2 border-yellow-400 mt-4"> ⚠️ Eits, jangan ditutup dulu! Masih ada 1 Misi Bonus di slide selanjutnya! 👉 </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-blue-100 text-blue-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#93c5fd] rotate-[-2deg] mx-auto text-center w-fit mb-2"> Bonus Stage: Misi Kampanye 3S 🎯 </div> <div class="text-center mb-2"> <h2 class="text-4xl font-black text-slate-900 inline-block bg-orange-200 px-6 py-2 rounded-2xl transform -rotate-2 mt-2">Pengakuan Dosa Netizen! 🫣</h2> <p class="text-lg font-bold text-slate-500 mt-3">Yuk jujur-jujuran. Klik (Tap) kotak di bawah kalau kamu <span class="text-red-500 underline">PERNAH</span> ngelakuin ini:</p> </div> <div class="space-y-4 mt-4" id="confession-list"> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">😵‍💫</span> Main gawai (HP/Laptop) sampai lupa waktu!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🛌</span> Tidur sambil bawa-bawa/peluk gawai!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🍜</span> Makan sambil nonton video atau TV!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">📚</span> Belajar sambil buka banyak aplikasi/tab lain!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> </div> <div id="confess-msg" class="hidden text-center mt-4 p-4 bg-orange-100 rounded-2xl border-2 border-orange-300 pop-in"> <p class="font-black text-orange-700 text-xl">Waduh! Ketahuan deh 🤭 Nggak apa-apa, yuk kita perbaiki sama-sama!</p> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <h2 class="text-5xl font-black text-slate-900 mb-2">Apa itu <span class="bg-blue-300 px-4 py-1 rounded-xl text-blue-900 transform inline-block rotate-2">Screen Time?</span> ⏱️</h2> <p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto"> <i>Screen time</i> (waktu layar) adalah total waktu yang kamu habisin buat natap layar (main HP, nonton TV, nge-game). Kalau kelamaan, awas efek sampingnya! </p> <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-6 w-full max-w-5xl"> <div class="bg-white border-4 border-red-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition"> <span class="text-5xl mb-2">👁️</span> <p class="font-black text-slate-700 text-center">Mata Lelah</p> </div> <div class="bg-white border-4 border-orange-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.1s;"> <span class="text-5xl mb-2">🦥</span> <p class="font-black text-slate-700 text-center">Malas Gerak</p> </div> <div class="bg-white border-4 border-yellow-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.2s;"> <span class="text-5xl mb-2">🥱</span> <p class="font-black text-slate-700 text-center">Susah Tidur</p> </div> <div class="bg-white border-4 border-pink-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.3s;"> <span class="text-5xl mb-2">🎢</span> <p class="font-black text-slate-700 text-center leading-tight">Emosi Naik Turun</p> </div> <div class="bg-white border-4 border-purple-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center col-span-2 md:col-span-1 pop-in hover:scale-105 transition" style="animation-delay: 0.4s;"> <span class="text-5xl mb-2">🧟</span> <p class="font-black text-slate-700 text-center">Kecanduan</p> </div> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-2"><span class="bg-purple-300 px-4 py-1 rounded-xl text-purple-900 transform inline-block -rotate-2">Screen Zone</span> (Zona Layar) 🚷</h2> <p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto mt-4"> Bikin kesepakatan tempat di rumah, mana yang <b>BOLEH</b> dan <b>DILARANG</b> main HP. Biar kamu nggak sembunyi-sembunyi dan tetap asyik ngobrol bareng keluarga! </p> </div> <div class="flex flex-col md:flex-row gap-8 mt-6 w-full max-w-4xl"> <div class="flex-1 bg-green-50 border-4 border-green-400 p-8 rounded-3xl shadow-[6px_6px_0px_#4ade80] hover:-translate-y-2 transition-transform"> <h3 class="font-black text-3xl text-green-700 mb-6 flex items-center gap-3"><i data-lucide="check-circle-2" class="w-8 h-8"></i> Boleh Banget!</h3> <ul class="space-y-4 text-xl font-bold text-slate-700"> <li class="flex items-center gap-3"><span class="text-3xl">🛋️</span> Ruang Keluarga</li> <li class="flex items-center gap-3"><span class="text-3xl">📚</span> Ruang Belajar</li> </ul> </div> <div class="flex-1 bg-red-50 border-4 border-red-400 p-8 rounded-3xl shadow-[6px_6px_0px_#f87171] hover:-translate-y-2 transition-transform"> <h3 class="font-black text-3xl text-red-700 mb-6 flex items-center gap-3"><i data-lucide="x-circle" class="w-8 h-8"></i> BIG NO!</h3> <ul class="space-y-4 text-xl font-bold text-slate-700"> <li class="flex items-center gap-3"><span class="text-3xl">🛏️</span> Kamar Tidur</li> <li class="flex items-center gap-3"><span class="text-3xl">🍽️</span> Meja Makan</li> <li class="flex items-center gap-3"><span class="text-3xl">🚽</span> Toilet</li> </ul> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <h2 class="text-5xl font-black text-slate-900 mb-2">Kasih Jeda Dong! <span class="bg-green-300 px-4 py-1 rounded-xl text-green-900 transform inline-block rotate-1">(Screen Break)</span> 🧘</h2> <p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto"> Setelah 30 menit main game atau scroll TikTok, mata & badan butuh istirahat! Kalau nggak, mata cepat capek dan badan kaku. Pas lagi jeda, lakuin aktivitas seru ini: </p> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-8 w-full max-w-5xl"> <div class="bg-white border-4 border-blue-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-blue-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">🪟</span> <p class="font-black text-xl text-slate-700">Melihat Keluar Jendela</p> </div> <div class="bg-white border-4 border-pink-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-pink-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">🚶</span> <p class="font-black text-xl text-slate-700">Berjalan-jalan Sebentar</p> </div> <div class="bg-white border-4 border-cyan-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-cyan-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">💧</span> <p class="font-black text-xl text-slate-700">Minum Air Putih</p> </div> <div class="bg-white border-4 border-orange-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-orange-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">🤸</span> <p class="font-black text-xl text-slate-700">Peregangan Badan</p> </div> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Mundur Dulu</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-yellow-400 text-slate-900 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-yellow-500 shadow-[0_4px_0px_#b45309]"> <span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); // Navigasi Slide Basic const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .check-item, .confess-item, img, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.innerHTML = '<span class="hidden md:inline">Tamat! 🎉</span>'; } else { nextBtn.disabled = false; nextBtn.innerHTML = '<span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i>'; lucide.createIcons(); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' && current < slides.length - 1) showSlide(current + 1); if (e.key === 'ArrowLeft' && current > 0) showSlide(current - 1); }); // Checklist Logic (Slide 3) const checkItems = document.querySelectorAll('.check-item'); const checklistCounter = document.getElementById('checklist-counter'); let checkedCount = 0; checkItems.forEach(btn => { btn.addEventListener('click', () => { const isChecked = btn.classList.toggle('checked'); const icon = btn.querySelector('svg'); if(isChecked) { checkedCount++; icon.classList.remove('opacity-30', 'text-slate-400'); icon.classList.add('text-white', 'opacity-100'); } else { checkedCount--; icon.classList.add('opacity-30', 'text-slate-400'); icon.classList.remove('text-white', 'opacity-100'); } checklistCounter.textContent = `${checkedCount}/${checkItems.length}`; if(checkedCount === checkItems.length) { checklistCounter.classList.remove('bg-pink-500'); checklistCounter.classList.add('bg-green-500'); checklistCounter.innerHTML = "LULUS! 🎉"; } else { checklistCounter.classList.add('bg-pink-500'); checklistCounter.classList.remove('bg-green-500'); } }); }); // Pengakuan Dosa Logic (Slide 11) const confessItems = document.querySelectorAll('.confess-item'); const confessMsg = document.getElementById('confess-msg'); let confessCount = 0; confessItems.forEach(btn => { btn.addEventListener('click', () => { const isChecked = btn.classList.toggle('checked'); const icon = btn.querySelector('svg'); if(isChecked) { confessCount++; icon.classList.remove('opacity-30', 'text-slate-400'); icon.classList.add('text-white', 'opacity-100'); } else { confessCount--; icon.classList.add('opacity-30', 'text-slate-400'); icon.classList.remove('text-white', 'opacity-100'); } if(confessCount > 0) { confessMsg.classList.remove('hidden'); } else { confessMsg.classList.add('hidden'); } }); }); // ========================================== // AUTO QUIZ BANK SOAL (SURVIVAL MODE) // ========================================== const questionBank = [ { q: `"Eh guys, klik link ini buat dapetin skin ML/FF gratis langsung dari Moonton/Garena! Asli no tipu-tipu!"`, a: 'hoaks', msg: "Penipuan (Phishing)! Jangan diklik, ntar akun kamu dicolong hacker." }, { q: `"Apapun yang kita hapus di Sosmed (foto alay, komen galak), sebenernya tetep ada jejaknya dan bisa dicari lagi."`, a: 'fakta', msg: "Jejak digital itu susah banget hilangnya! Hati-hati ya sebelum posting." }, { q: `"Menang undian hadiah motor 100 juta dari bank, tapi syaratnya disuruh transfer uang pajak dulu 2 juta."`, a: 'hoaks', msg: "Modus penipuan klasik! Undian resmi ngga akan minta transfer uang duluan." }, { q: `"Semua berita yang dibagikan oleh Om/Tante di grup WA keluarga itu pasti 100% benar karena mereka orang tua."`, a: 'hoaks', msg: "Belum tentu! Banyak orang tua yang juga gampang kemakan berita bohong/hoaks." }, { q: `"Nge-bully teman di internet pakai akun fake (palsu) itu aman dan nggak akan bisa dilacak oleh polisi."`, a: 'hoaks', msg: "Polisi punya tim siber yang bisa ngelacak alamat IP kamu walaupun pakai akun palsu!" }, { q: `"OTP (One Time Password) itu cuma boleh dipakai oleh kita sendiri dan ngga boleh dikasih ke siapapun."`, a: 'fakta', msg: "Bener banget! Kalau OTP dikasih ke orang, akun/dompet digital kamu bisa dikuras habis." }, { q: `"Kalau ada aplikasi yang nawarin bisa lihat siapa yang sering kepoin profil IG/WA kita, itu pasti bohongan."`, a: 'fakta', msg: "Betul! Kebanyakan aplikasi kaya gitu cuma buat nyuri data (password) kamu." } ]; let currentQIndex = -1; let quizScore = 0; let usedIndices = []; const qText = document.getElementById('quiz-question-text'); const qFeedback = document.getElementById('quiz-feedback'); const nextBtnQuiz = document.getElementById('next-quiz-btn'); const scoreDisplay = document.getElementById('quiz-score'); const activeCard = document.getElementById('active-quiz-card'); function loadNewQuestion() { qFeedback.classList.add('hidden'); nextBtnQuiz.classList.add('hidden'); activeCard.classList.remove('border-green-400', 'bg-green-50', 'border-red-400', 'bg-red-50'); const btns = document.querySelectorAll('.auto-guess-btn'); btns.forEach(b => { b.disabled = false; b.className = "auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-4 border-slate-300 hover:bg-slate-200 transition-all active:translate-y-1 active:border-b-0"; }); if(usedIndices.length >= questionBank.length) usedIndices = []; let rand; do { rand = Math.floor(Math.random() * questionBank.length); } while (usedIndices.includes(rand)); usedIndices.push(rand); currentQIndex = rand; qText.textContent = questionBank[rand].q; } loadNewQuestion(); window.checkAnswer = function(guess, btnElement) { const currentQ = questionBank[currentQIndex]; const btns = document.querySelectorAll('.auto-guess-btn'); btns.forEach(b => b.disabled = true); if(guess === currentQ.a) { btnElement.classList.add('btn-correct'); activeCard.classList.add('border-green-400', 'bg-green-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block'; qFeedback.innerHTML = `<span class="text-2xl block mb-2">🎉 Yasssh Benar Banget!</span> ${currentQ.msg}`; quizScore += 100; scoreDisplay.textContent = quizScore; } else { btnElement.classList.add('btn-wrong'); btns.forEach(b => { if(b.textContent.toLowerCase().includes(currentQ.a)) b.classList.add('btn-correct'); }); activeCard.classList.add('border-red-400', 'bg-red-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block'; qFeedback.innerHTML = `<span class="text-2xl block mb-2">😅 Yhaa Kegocek!</span> Jawabannya adalah <b>${currentQ.a.toUpperCase()}</b>.<br>${currentQ.msg}`; quizScore = Math.max(0, quizScore - 50); scoreDisplay.textContent = quizScore; } nextBtnQuiz.classList.remove('hidden'); }; </script> </body> </html>

Kelas 7 Matematika

Bilangan Rasional - kuis kelompok

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 7 - Bilangan Rasional</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&family=Fraunces:wght@700;800&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <style> body { font-family: 'Work Sans', sans-serif; } .font-display { font-family: 'Fraunces', serif; } .slide { display: none; animation: fadeIn 0.4s ease; } .slide.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .option-btn { transition: all 0.2s; } .option-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } @keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } } .timer-pulse { animation: pulse-glow 1s infinite; } .materi-card { background: white; border-radius: 12px; padding: 1.25rem; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } </style> </head> <body class="min-h-screen bg-gradient-to-br from-teal-50 via-slate-50 to-emerald-50 text-slate-800"> <div class="slide active" id="slide-0"> <div class="relative w-full min-h-screen flex flex-col items-center justify-center bg-teal-950 text-white text-center px-6 py-12"> <div class="absolute inset-0 bg-gradient-to-t from-teal-950/90 via-teal-900/60 to-teal-950/40"></div> <div class="relative z-10 flex flex-col items-center justify-center max-w-2xl mx-auto"> <span class="inline-block px-4 py-1 rounded-full text-sm font-medium mb-4 bg-teal-500 text-white shadow">Modul Interaktif Matematika</span> <h1 class="font-display leading-tight mb-4 text-4xl md:text-5xl font-black">Bab 2: Bilangan Rasional</h1> <p class="max-w-lg mb-8 text-teal-100 text-sm md:text-base text-balance">Mari pelajari cara menyatakan, membandingkan, dan mengoperasikan bilangan rasional dalam kehidupan sehari-hari!</p> <button class="px-8 py-3.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="goSlide(1)">Mulai Pembelajaran →</button> </div> </div> </div> <div class="slide" id="slide-1"> <div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center"> <div class="text-5xl mb-4">🎯</div> <h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Capaian Pembelajaran (CP)</h2> <div class="w-full bg-white border border-teal-100 rounded-2xl p-6 shadow-sm mb-8"> <p class="leading-relaxed text-slate-700 text-sm md:text-base">Di akhir fase D, peserta didik dapat membaca, menulis, dan membandingkan bilangan bulat, bilangan rasional dan irasional, bilangan desimal, bilangan berpangkat bulat dan akar, bilangan dalam notasi ilmiah. Mereka dapat menerapkan operasi aritmetika pada bilangan real, dan memberikan estimasi/perkiraan dalam menyelesaikan masalah.</p> </div> <div class="flex gap-4"> <button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(0)">← Kembali</button> <button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(2)">Lanjut →</button> </div> </div> </div> <div class="slide" id="slide-2"> <div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center"> <div class="text-5xl mb-4">📌</div> <h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Tujuan Pembelajaran (TP)</h2> <div class="w-full bg-white border border-slate-200 rounded-2xl p-6 shadow-sm mb-8 space-y-4 text-sm md:text-base text-slate-700"> <div class="flex gap-3"><span class="font-bold text-teal-600">1.</span><p>Peserta didik dapat mengidentifikasi bilangan rasional dan menyatakan bilangan rasional dalam bentuk pecahan dan desimal.</p></div> <div class="flex gap-3"><span class="font-bold text-teal-600">2.</span><p>Peserta didik dapat membandingkan dan mengurutkan bilangan rasional serta menaksir nilai bilangan rasional.</p></div> <div class="flex gap-3"><span class="font-bold text-teal-600">3.</span><p>Peserta didik dapat melakukan operasi hitung penjumlahan, pengurangan, perkalian, dan pembagian bilangan rasional serta memecahkan masalah kontekstual.</p></div> </div> <div class="flex gap-4"> <button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(1)">← Kembali</button> <button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(3)">Lanjut →</button> </div> </div> </div> <div class="slide" id="slide-3"> <div class="max-w-4xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center"> <h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-8">Eksplorasi Konsep Bilangan Rasional</h2> <div class="grid md:grid-cols-2 gap-4 mb-6"> <div class="materi-card"> <h3 class="font-bold text-teal-700 mb-1">💡 Definisi</h3> <p class="text-xs md:text-sm text-slate-600 leading-relaxed">Bilangan rasional adalah bilangan yang dapat ditulis sebagai pecahan <strong>a/b</strong> di mana <em>a</em> dan <em>b</em> bilangan bulat, serta <strong>b ≠ 0</strong>.</p> </div> <div class="materi-card"> <h3 class="font-bold text-teal-700 mb-1">🔄 Konversi Bentuk</h3> <p class="text-xs md:text-sm text-slate-600 leading-relaxed">Mengubah pecahan ke desimal dilakukan dengan pembagian kurung bersusun (misal: 1/4 = 0,25). Desimal berulang juga merupakan bilangan rasional (0,333...).</p> </div> <div class="materi-card"> <h3 class="font-bold text-teal-700 mb-1">⚖️ Membandingkan Nilai</h3> <p class="text-xs md:text-sm text-slate-600 leading-relaxed">Gunakan penyamaan penyebut atau ubah ke desimal. Hati-hati pada bilangan negatif: makin besar angkanya, nilainya makin kecil (<strong>-0,5 > -0,75</strong>).</p> </div> <div class="materi-card"> <h3 class="font-bold text-teal-700 mb-1">🧮 Operasi Aritmetika</h3> <p class="text-xs md:text-sm text-slate-600 leading-relaxed">Penjumlahan/pengurangan wajib menyamakan penyebut. Pada perkalian pecahan, kalikan langsung pembilang dengan pembilang, penyebut dengan penyebut.</p> </div> </div> <div class="materi-card mb-8"> <h3 class="font-bold text-teal-700 mb-1">🛒 Aplikasi Kontekstual</h3> <p class="text-xs md:text-sm text-slate-600 leading-relaxed">Digunakan saat menghitung sisa bahan kue, pembagian potongan tali, pengukuran kedalaman laut, atau menghitung diskon belanja secara presisi.</p> </div> <div class="flex justify-center gap-4"> <button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(2)">← Kembali</button> <button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(4)">Lanjut →</button> </div> </div> </div> <div class="slide" id="slide-4"> <div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col items-center justify-center"> <div class="text-5xl mb-4">✏️</div> <h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Contoh Soal & Pembahasan</h2> <div class="w-full space-y-4 mb-8 text-sm md:text-base"> <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm"> <p class="font-bold text-slate-800 mb-1">Contoh 1: Nyatakan 3/8 dalam desimal</p> <p class="text-teal-700 font-medium">Jawaban: lakukan pembagian bersusun 3 ÷ 8 = 0,375. (Rasional terbatas)</p> </div> <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm"> <p class="font-bold text-slate-800 mb-1">Contoh 2: Bandingkan -1/2 dengan -1/4</p> <p class="text-teal-700 font-medium">Jawaban: -0,5 < -0,25. Maka, -1/2 < -1/4.</p> </div> <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm"> <p class="font-bold text-slate-800 mb-1">Contoh 3: Ibu memiliki 2,5 kg beras, dimasak sebanyak 1 1/4 kg. Sisa beras?</p> <p class="text-teal-700 font-medium">Jawaban: 2,5 kg − 1,25 kg = 1,25 kg atau 1 1/4 kg.</p> </div> </div> <div class="flex gap-4"> <button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(3)">← Kembali</button> <button class="px-8 py-2.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold shadow-md hover:scale-105 transition" onclick="goSlide(5)">Mulai Quiz Kelompok ⚔️</button> </div> </div> </div> <div class="slide" id="slide-5"> <div class="w-full px-3 py-4 min-h-screen flex flex-col justify-between"> <div class="grid grid-cols-2 gap-3 flex-1"> <div class="border-2 border-teal-300 rounded-xl p-3 bg-white flex flex-col shadow-sm"> <div class="flex items-center justify-between mb-2"> <span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-teal-100 text-teal-800">🔥 KELOMPOK 1</span> <div id="timer1" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse"> <i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer1-text">15</span> </div> </div> <div class="w-full h-1.5 rounded-full bg-slate-200 mb-2"> <div id="bar1" class="h-1.5 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div> </div> <p id="q1-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p> <div id="q1-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div> <div id="fb1" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div> </div> <div class="border-2 border-orange-300 rounded-xl p-3 bg-white flex flex-col shadow-sm"> <div class="flex items-center justify-between mb-2"> <span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-orange-100 text-orange-800">⚡ KELOMPOK 2</span> <div id="timer2" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse"> <i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer2-text">15</span> </div> </div> <div class="w-full h-1.5 rounded-full bg-slate-200 mb-2"> <div id="bar2" class="h-1.5 rounded-full bg-orange-500 transition-all duration-300" style="width:0%"></div> </div> <p id="q2-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p> <div id="q2-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div> <div id="fb2" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div> </div> <div class="border-2 border-purple-300 rounded-xl p-3 bg-white flex flex-col shadow-sm"> <div class="flex items-center justify-between mb-2"> <span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-800">🔮 KELOMPOK 3</span> <div id="timer3" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse"> <i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer3-text">15</span> </div> </div> <div class="w-full h-1.5 rounded-full bg-slate-200 mb-2"> <div id="bar3" class="h-1.5 rounded-full bg-purple-500 transition-all duration-300" style="width:0%"></div> </div> <p id="q3-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p> <div id="q3-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div> <div id="fb3" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div> </div> <div class="border-2 border-blue-300 rounded-xl p-3 bg-white flex flex-col shadow-sm"> <div class="flex items-center justify-between mb-2"> <span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-blue-100 text-blue-800">🚀 KELOMPOK 4</span> <div id="timer4" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse"> <i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer4-text">15</span> </div> </div> <div class="w-full h-1.5 rounded-full bg-slate-200 mb-2"> <div id="bar4" class="h-1.5 rounded-full bg-blue-500 transition-all duration-300" style="width:0%"></div> </div> <p id="q4-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p> <div id="q4-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div> <div id="fb4" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div> </div> </div> </div> </div> <div class="slide" id="slide-6"> <div class="max-w-2xl mx-auto px-5 py-12 text-center"> <div class="text-6xl mb-4">🏆</div> <h2 class="font-display mb-6 text-3xl font-black text-slate-800">Papan Skor Akhir Pertandingan Kelompok</h2> <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8"> <div class="bg-teal-50 border border-teal-200 rounded-xl p-4 shadow-sm"> <p class="font-bold text-xs text-teal-800 mb-1">Kelompok 1</p> <p id="score1-text" class="text-2xl font-black text-teal-600"></p> </div> <div class="bg-orange-50 border border-orange-200 rounded-xl p-4 shadow-sm"> <p class="font-bold text-xs text-orange-800 mb-1">Kelompok 2</p> <p id="score2-text" class="text-2xl font-black text-orange-600"></p> </div> <div class="bg-purple-50 border border-purple-200 rounded-xl p-4 shadow-sm"> <p class="font-bold text-xs text-purple-800 mb-1">Kelompok 3</p> <p id="score3-text" class="text-2xl font-black text-purple-600"></p> </div> <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 shadow-sm"> <p class="font-bold text-xs text-blue-800 mb-1">Kelompok 4</p> <p id="score4-text" class="text-2xl font-black text-blue-600"></p> </div> </div> <p id="winner-text" class="text-xl font-black text-slate-800 mb-8 p-3 bg-amber-100 rounded-2xl inline-block px-6"></p> <div> <button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="startIndividuQuiz()">Lanjut Kuis Individu Mandiri →</button> </div> </div> </div> <div class="slide" id="slide-7"> <div class="max-w-xl mx-auto px-6 py-12 min-h-screen flex flex-col justify-center"> <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-md"> <div class="flex justify-between items-center mb-4"> <span class="px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-800">🎯 TANTANGAN INDIVIDU</span> <span id="ind-progress" class="text-xs font-bold text-slate-500">Soal 1 dari 5</span> </div> <div class="w-full bg-slate-100 h-2 rounded-full mb-6"> <div id="ind-bar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 20%"></div> </div> <p id="ind-q-text" class="text-base font-bold text-slate-800 mb-4 min-h-[60px]"></p> <div id="ind-options" class="flex flex-col gap-3"></div> <div id="ind-fb" class="mt-4 p-3 rounded-xl text-center font-bold text-sm hidden"></div> </div> </div> </div> <div class="slide" id="slide-8"> <div class="max-w-md mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center text-center"> <div class="text-6xl mb-4">⭐</div> <h2 class="font-display text-2xl font-black text-slate-800 mb-2">Evaluasi Hasil Mandiri</h2> <p class="text-sm text-slate-500 mb-6">Kerja bagus! Berikut perolehan poin latihan mandirimu hari ini:</p> <div class="bg-white border border-indigo-100 rounded-3xl p-6 shadow-sm w-full mb-8"> <p class="text-xs uppercase tracking-wider font-bold text-slate-400 mb-1">Skor Kamu</p> <p id="ind-score-text" class="text-5xl font-black text-indigo-600">0 / 5</p> <p id="ind-eval-msg" class="text-sm font-medium text-slate-600 mt-3"></p> </div> <button class="w-full py-3 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-bold shadow transition hover:scale-105" onclick="goSlide(9)">Isi Lembar Refleksi Akhir</button> </div> </div> <div class="slide" id="slide-9"> <div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center"> <div class="text-center mb-6"> <span class="text-5xl">💭</span> <h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 mt-2">Lembar Refleksi Pembelajaran</h2> <p class="text-xs md:text-sm text-slate-500">Evaluasi pemahaman kelompok dan individu secara jujur</p> </div> <div class="space-y-4 mb-8"> <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm"> <label class="block font-bold text-sm text-slate-800 mb-3">1. Bagaimana perasaan kelompokmu setelah mencoba soal Bilangan Rasional tadi?</label> <div class="grid grid-cols-4 gap-2 text-center text-sm"> <label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1"> <input type="radio" name="ref-feel" value="sangat-paham" class="text-teal-600"> <span class="text-xl">😎</span><span class="text-xs font-semibold">Sangat Paham</span> </label> <label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1"> <input type="radio" name="ref-feel" value="paham" class="text-teal-600" checked> <span class="text-xl">🙂</span><span class="text-xs font-semibold">Paham</span> </label> <label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1"> <input type="radio" name="ref-feel" value="bingung" class="text-teal-600"> <span class="text-xl">🤨</span><span class="text-xs font-semibold">Ragu-ragu</span> </label> <label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1"> <input type="radio" name="ref-feel" value="sulit" class="text-teal-600"> <span class="text-xl">😰</span><span class="text-xs font-semibold">Butuh Bimbingan</span> </label> </div> </div> <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm"> <label for="ref-kunci" class="block font-bold text-sm text-slate-800 mb-1">2. Bagian mana yang menurut kalian paling menantang?</label> <input type="text" id="ref-kunci" placeholder="Misal: mengubah desimal berulang, tanda negatif..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none"> </div> <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm"> <label for="ref-rencana" class="block font-bold text-sm text-slate-800 mb-1">3. Apa rencana perbaikan untuk pertemuan selanjutnya?</label> <input type="text" id="ref-rencana" placeholder="Misal: lebih teliti menyamakan penyebut pecahan..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none"> </div> </div> <div class="text-center space-y-2"> <button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full font-bold shadow-lg text-sm transition hover:scale-105" onclick="submitRefleksi()">Kirim Laporan & Selesai! 🎉</button> <p id="ref-success" class="text-xs font-bold text-emerald-600 hidden animate-pulse">Refleksi terkam! Terima kasih telah belajar dengan giat hari ini.</p> </div> </div> </div> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); function goSlide(n) { slides.forEach(s => s.classList.remove('active')); slides[n].classList.add('active'); if (n === 5) startQuiz(); } // BANK SOAL INDEPENDEN KELOMPOK const allQs = [ [ { q: "Manakah yang merupakan bilangan rasional?", opts: ["√2", "π (pi)", "0,35", "√7"], ans: 2 }, { q: "Bentuk desimal dari 3/5 Grandma adalah...", opts: ["0,3", "0,5", "0,6", "0,75"], ans: 2 }, { q: "Perbandingan yang benar adalah...", opts: ["1/2 < 1/4", "0,4 > 0,5", "-0,2 > -0,6", "3/5 < 2/5"], ans: 2 }, { q: "Hasil dari 1/4 + 0,5 = ...", opts: ["0,75", "0,55", "1,25", "0,60"], ans: 0 }, { q: "Suhu awal 2,5°C lalu turun 1,5°C menjadi...", opts: ["4°C", "1°C", "-1°C", "0°C"], ans: 1 } ], [ { q: "Pernyataan b ≠ 0 pada pecahan a/b karena...", opts: ["Hasil tak terdefinisi", "Hasil selalu nol", "Bukan bulat", "Angka pembilang"], ans: 0 }, { q: "Bentuk pecahan biasa dari 0,8 adalah...", opts: ["1/8", "4/5", "2/3", "3/4"], ans: 1 }, { q: "Manakah tanda yang tepat untuk 3/4 ... 0,70?", opts: [">", "<", "=", "≤"], ans: 0 }, { q: "Hasil dari 1,2 + 3/5 = ...", opts: ["1,5", "1,8", "2,0", "1,25"], ans: 1 }, { q: "Ibu punya 1,75 kg tepung, dipakai 0,5 kg. Sisa...", opts: ["1,20 kg", "1,50 kg", "1,25 kg", "0,75 kg"], ans: 2 } ], [ { q: "Bilangan manakah yang termasuk bilangan rasional?", opts: ["√8", "-2 1/2", "√5", "0,151617..."], ans: 1 }, { q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 }, { q: "Urutan dari yang terkecil adalah...", opts: ["-0,8 ; 0,2 ; 1/2", "0,2 ; 1/2 ; -0,8", "1/2 ; 0,2 ; -0,8", "-0,8 ; 1/2 ; 0,2"], ans: 0 }, { q: "Hasil dari 3/4 − 0,25 = ...", opts: ["0,25", "0,50", "0,75", "0"], ans: 1 }, { q: "Panjang pita 2,5 m dipotong 4 bagian sama rata...", opts: ["0,5 m", "0,625 m", "0,75 m", "1,25 m"], ans: 1 } ], [ { q: "Angka -4 dapat diubah ke pecahan menjadi...", opts: ["-4/0", "-4/1", "1/-4", "4/4"], ans: 1 }, { q: "Bentuk pecahan dari 0,25 adalah...", opts: ["1/2", "1/3", "1/4", "2/5"], ans: 2 }, { q: "Pernyataan yang benar adalah...", opts: ["-0,3 < -0,5", "3/5 = 0,6", "1/4 > 1/2", "-1 > 0"], ans: 1 }, { q: "Hasil dari 0,6 × 1/2 = ...", opts: ["0,3", "0,12", "0,5", "1,2"], ans: 0 }, { q: "Kedalaman kapal selam 5,5 m lalu naik 2,5 m menjadi...", opts: ["8 m", "3 m", "-3 m", "-8 m"], ans: 2 } ] ]; // SOAL KUIS MANDIRI / INDIVIDU const individuQs = [ { q: "Mengapa angka desimal 0,333... disebut bilangan rasional?", opts: ["Karena memiliki batas angka di ujung", "Karena bisa dinyatakan dalam pecahan 1/3", "Karena angkanya tidak pernah berhenti", "Karena nilainya kurang dari 1"], ans: 1 }, { q: "Manakah bilangan rasional di bawah ini yang posisinya paling kanan pada garis bilangan?", opts: ["-1,5", "-0,25", "0,15", "-2/5"], ans: 2 }, { q: "Tentukan hasil perhitungan dari 0,75 + 2/5 !", opts: ["1,15", "0,95", "1,35", "0,85"], ans: 0 }, { q: "Sebuah tali sepanjang 3,5 meter dipotong sepanjang 1 1/2 meter. Berapa sisa tali saat ini?", opts: ["2,5 meter", "1,75 meter", "2,0 meter", "2,25 meter"], ans: 2 }, { q: "Jika x = -0,6 dan y = -3/5, maka hubungan kebenaran yang mutlak adalah...", opts: ["x lebih besar dari y", "x lebih kecil dari y", "x sama dengan y", "x dan y tidak bisa dibandingkan"], ans: 2 } ]; let scores, currentQs, timers, timesLeft, finished; let indCurQ = 0, indScore = 0; function startQuiz() { scores = [0, 0, 0, 0]; currentQs = [0, 0, 0, 0]; finished = [false, false, false, false]; timers = [null, null, null, null]; timesLeft = [15, 15, 15, 15]; for (let g = 0; g < 4; g++) showQ(g); } function showQ(g) { const gIdx = g + 1; const qEl = document.getElementById(`q${gIdx}-text`); const optEl = document.getElementById(`q${gIdx}-options`); const barEl = document.getElementById(`bar${gIdx}`); const fbEl = document.getElementById(`fb${gIdx}`); const timerEl = document.getElementById(`timer${gIdx}-text`); if (currentQs[g] >= 5) { finished[g] = true; qEl.innerHTML = "<span class='text-emerald-600 font-bold'>🏁 Selesai! Menunggu kelompok lain...</span>"; optEl.innerHTML = ''; clearInterval(timers[g]); if (finished.every(f => f)) showResults(); return; } const q = allQs[g][currentQs[g]]; qEl.textContent = `${currentQs[g] + 1}. ${q.q}`; barEl.style.width = `${(currentQs[g] / 5) * 100}%`; fbEl.classList.add('hidden'); optEl.innerHTML = q.opts.map((o, i) => `<button class="option-btn rounded-lg p-2 border border-slate-200 bg-white font-medium text-slate-800 text-xs text-left" onclick="answer(${g},${i})">${o}</button>` ).join(''); timesLeft[g] = 15; timerEl.textContent = timesLeft[g]; clearInterval(timers[g]); timers[g] = setInterval(() => { timesLeft[g]--; timerEl.textContent = timesLeft[g]; if (timesLeft[g] <= 0) { clearInterval(timers[g]); answer(g, -1); } }, 1000); } function answer(g, val) { const gIdx = g + 1; clearInterval(timers[g]); const optEl = document.getElementById(`q${gIdx}-options`); const fbEl = document.getElementById(`fb${gIdx}`); const btns = optEl.querySelectorAll('.option-btn'); btns.forEach(b => b.disabled = true); const correct = allQs[g][currentQs[g]].ans; if (val === correct) { scores[g]++; if(btns[val]) btns[val].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold'); fbEl.textContent = '✅ Benar!'; fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-emerald-100 text-emerald-700'; } else if (val === -1) { if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold'); fbEl.textContent = '⏰ Waktu Habis!'; fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-amber-100 text-amber-700'; } else { if(btns[val]) btns[val].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold'); if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold'); fbEl.textContent = '❌ Salah!'; fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-rose-100 text-rose-700'; } fbEl.classList.remove('hidden'); currentQs[g]++; setTimeout(() => showQ(g), 1500); } function showResults() { for (let i = 0; i < 4; i++) { document.getElementById(`score${i+1}-text`).textContent = `${scores[i]} / 5`; } const max = Math.max(...scores); const winners = scores.reduce((acc, s, i) => s === max ? [...acc, i+1] : acc, []); let text = ''; if (winners.length === 4) text = '🤝 Seri! Kekuatan Semua Kelompok Seimbang!'; else if (winners.length > 1) text = `🤝 Seri: Kelompok ${winners.join(' & ')} unggul bersama!`; else text = `🎉 Selamat! Kelompok ${winners[0]} Keluar Sebagai Juara!`; document.getElementById('winner-text').textContent = text; goSlide(6); } // FUNGSI UTK KUIS INDIVIDU TANTANGAN function startIndividuQuiz() { indCurQ = 0; indScore = 0; goSlide(7); showIndividuQuestion(); } function showIndividuQuestion() { const qEl = document.getElementById("ind-q-text"); const optEl = document.getElementById("ind-options"); const fbEl = document.getElementById("ind-fb"); const progEl = document.getElementById("ind-progress"); const barEl = document.getElementById("ind-bar"); if (indCurQ >= individuQs.length) { showIndividuResults(); return; } fbEl.classList.add('hidden'); progEl.textContent = `Soal ${indCurQ + 1} dari ${individuQs.length}`; barEl.style.width = `${((indCurQ + 1) / individuQs.length) * 100}%`; const currentQ = individuQs[indCurQ]; qEl.textContent = currentQ.q; optEl.innerHTML = currentQ.opts.map((o, i) => `<button class="ind-opt-btn w-full p-3 text-left text-sm font-medium border border-slate-200 rounded-xl bg-slate-50 hover:bg-slate-100 transition" onclick="checkIndividuAnswer(${i})">${o}</button>` ).join(''); } function checkIndividuAnswer(selectedIdx) { const fbEl = document.getElementById("ind-fb"); const btns = document.querySelectorAll(".ind-opt-btn"); btns.forEach(b => b.disabled = true); const correctIdx = individuQs[indCurQ].ans; if (selectedIdx === correctIdx) { indScore++; btns[selectedIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold"); fbEl.textContent = "🎯 Hebat! Jawabanmu Tepat."; fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-emerald-100 text-emerald-700"; } else { btns[selectedIdx].classList.add("bg-rose-100", "border-rose-500", "text-rose-700", "font-bold"); btns[correctIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold"); fbEl.textContent = "📌 Masih Kurang Tepat, Perhatikan Pembahasan."; fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-rose-100 text-rose-700"; } fbEl.classList.remove('hidden'); indCurQ++; setTimeout(showIndividuQuestion, 2000); } function showIndividuResults() { goSlide(8); document.getElementById("ind-score-text").textContent = `${indScore} / ${individuQs.length}`; const msgEl = document.getElementById("ind-eval-msg"); if (indScore === 5) msgEl.textContent = "Luar biasa! Kamu menguasai penuh materi Bilangan Rasional. 🌟"; else if (indScore >= 3) msgEl.textContent = "Sudah bagus! Tingkatkan ketelitian pada pengerjaan tanda operasi hitung. 👍"; else msgEl.textContent = "Jangan patah semangat! Silakan ulas kembali contoh pembahasannya, ya! 📚"; } function submitRefleksi() { document.getElementById('ref-success').classList.remove('hidden'); setTimeout(() => { document.getElementById('ref-kunci').value = ''; document.getElementById('ref-rencana').value = ''; document.getElementById('ref-success').classList.add('hidden'); goSlide(0); }, 3000); } </script> </body> </html>

Kelas 7 Matematika

Bilangan Rasional

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 7 - Bilangan Rasional</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&family=Fraunces:wght@700;800&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <style> body { font-family: 'Work Sans', sans-serif; } .font-display { font-family: 'Fraunces', serif; } .slide { display: none; animation: fadeIn 0.4s ease; } .slide.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .option-btn { transition: all 0.2s; cursor: pointer; } .option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } @keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.4); } 50% { box-shadow: 0 0 0 8px rgba(20,184,166,0); } } .timer-pulse { animation: pulse-glow 1s infinite; } </style> </head> <body class="min-h-screen" style="background: linear-gradient(to bottom, #f0fdfa, #ccfbf1, #f0fdf4);"> <div class="slide active" id="slide-0"> <div class="relative w-full min-h-screen flex flex-col items-center justify-center"> <div class="absolute inset-0 bg-teal-950/80"></div> <div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-12 max-w-2xl mx-auto text-white"> <span class="inline-block px-4 py-1 bg-teal-500 text-white rounded-full text-sm font-medium mb-4 shadow">Modul Interaktif Matematika</span> <h1 class="font-display leading-tight mb-3 text-4xl md:text-5xl font-black">Bab: Bilangan Rasional</h1> <p class="max-w-lg mb-6 text-teal-100 text-sm md:text-base">Kuasai konsep bilangan rasional, bentuk pecahan/desimal, perbandingan, hingga operasi hitung secara berurutan!</p> <div class="mb-6 w-full max-w-xs text-left text-slate-800"> <label for="nama-siswa" class="block text-xs font-bold text-teal-200 uppercase mb-1">Nama Lengkap Siswa:</label> <input type="text" id="nama-siswa" placeholder="Ketik namamu di sini..." class="w-full p-3 border-2 border-white/20 bg-white/90 rounded-xl text-sm focus:ring-2 focus:ring-teal-400 focus:outline-none font-medium"> </div> <button class="px-8 py-3 bg-teal-500 text-white rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="mulaiKelas()">Mulai Petualangan Belajar 🚀</button> </div> </div> </div> <div class="slide" id="slide-1"> <div class="max-w-2xl mx-auto px-5 py-10"> <span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 1</span> <h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Pengertian & Bentuk Bilangan Rasional</h2> <div class="space-y-4 mb-6"> <div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm"> <p class="font-bold text-teal-700 mb-2">📌 Apa itu Bilangan Rasional?</p> <p class="text-slate-700 text-sm leading-relaxed">Bilangan rasional adalah bilangan yang dapat dinyatakan dalam bentuk pecahan <strong>a/b</strong>, dengan <i>a</i> dan <i>b</i> adalah bilangan bulat, serta <strong>b ≠ 0</strong>.</p> </div> <div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm"> <p class="font-bold text-teal-700 mb-2">🔄 Menyatakan ke Pecahan & Desimal</p> <p class="text-slate-700 text-sm mb-1">• <strong>Pecahan ke Desimal:</strong> 1/4 = 0,25 (Desimal terbatas) atau 1/3 = 0,333... (Desimal berulang).</p> <p class="text-slate-700 text-sm">• <strong>Desimal ke Pecahan:</strong> 0,5 = 5/10 = 1/2.</p> </div> </div> <button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab1')">Siap, Uji Kuis Bab 1 ⚡</button> </div> </div> <div class="slide" id="slide-2"> <div class="max-w-2xl mx-auto px-5 py-10"> <div class="flex items-center justify-between mb-4"> <span id="kuis-bab-label" class="inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold"></span> <div id="timer-display" class="flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-sm timer-pulse"> <i data-lucide="clock" style="width:16px;height:16px;"></i> <span id="timer-text">15</span> </div> </div> <div class="w-full h-2 rounded-full bg-slate-200 mb-6"> <div id="quiz-bar" class="h-2 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div> </div> <h2 id="quiz-question" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed"></h2> <div id="quiz-options" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div> <div id="quiz-feedback" class="mt-4 p-3 rounded-lg text-center font-semibold hidden"></div> </div> </div> <div class="slide" id="slide-3"> <div class="max-w-2xl mx-auto px-5 py-10"> <span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 2</span> <h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Membandingkan Bilangan Rasional</h2> <div class="space-y-4 mb-6"> <div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm"> <p class="font-bold text-teal-700 mb-2">⚖️ Cara Membandingkan Pecahan</p> <p class="text-slate-700 text-sm leading-relaxed">Untuk membandingkan dua pecahan (misal 2/3 dan 3/4), kita dapat menyamakan penyebutnya terlebih dahulu atau menggunakan metode perkalian silang:</p> <p class="text-slate-700 text-sm mt-2 font-medium">• 2 × 4 = 8 dan 3 × 3 = 9. Karena 8 < 9, maka <strong>2/3 < 3/4</strong>.</p> </div> <div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm"> <p class="font-bold text-teal-700 mb-2">📉 Bilangan Rasional Negatif</p> <p class="text-slate-700 text-sm leading-relaxed">Ingat, pada bilangan negatif, semakin besar angkanya justru nilainya semakin kecil. Contoh: <strong>-0,5 > -0,75</strong>.</p> </div> </div> <button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab2')">Siap, Uji Kuis Bab 2 ⚡</button> </div> </div> <div class="slide" id="slide-4"> <div class="max-w-2xl mx-auto px-5 py-10"> <span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 3</span> <h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Operasi Hitung & Penerapan Bilangan Rasional</h2> <div class="space-y-4 mb-6"> <div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm"> <p class="font-bold text-teal-700 mb-2">🧮 Penjumlahan & Perkalian</p> <p class="text-slate-700 text-sm mb-1">• <strong>Penjumlahan:</strong> 1/2 + 1/3 = 3/6 + 2/6 = 5/6 (Samakan penyebut).</p> <p class="text-slate-700 text-sm">• <strong>Perkalian:</strong> 2/3 × 4/5 = (2×4) / (3×5) = 8/15.</p> </div> <div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm"> <p class="font-bold text-teal-700 mb-2">💼 Soal Cerita kontekstual</p> <p class="text-slate-700 text-sm leading-relaxed">Ibu membeli gula sebanyak 2,5 kg, kemudian digunakan untuk membuat kue sebanyak 1 1/4 kg. Sisa gula ibu adalah: 2,5 − 1,25 = 1,25 kg.</p> </div> </div> <button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab3')">Siap, Uji Kuis Bab 3 ⚡</button> </div> </div> <div class="slide" id="slide-5"> <div class="max-w-2xl mx-auto px-5 py-10"> <div class="bg-indigo-600 rounded-2xl p-6 text-white shadow-xl mb-6"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🧭</span> <h2 class="font-display text-2xl font-bold">Panel Refleksi: Self-Check & Next Step</h2> </div> <p class="text-indigo-100 text-sm">Sebelum menutup misi belajar hari ini, yuk luangkan waktu 1 menit untuk melihat perkembangan dirimu secara jujur!</p> </div> <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4"> <p class="font-bold text-slate-800 text-sm mb-3 flex items-center gap-2">📊 Pengukur Pemahaman (Skala Likert)</p> <p class="text-xs text-slate-600 mb-4">Jika tingkat pemahamanmu terhadap materi hari ini diibaratkan sebagai Baterai HP, ada di level mana sekarang?</p> <div class="space-y-2 text-sm text-slate-700"> <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer"> <input type="radio" name="baterai-refleksi" value="25" class="w-4 h-4 text-teal-600 focus:ring-teal-500"> <span>🪫 <strong>25% (Low Batt):</strong> Masih bingung banget, butuh penjelasan ulang guru.</span> </label> <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer"> <input type="radio" name="baterai-refleksi" value="50" class="w-4 h-4 text-teal-600 focus:ring-teal-500"> <span>🔋 <strong>50% (Half):</strong> Setengah paham, tapi masih ragu di hitungan bentuk desimal/negatif.</span> </label> <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer"> <input type="radio" name="baterai-refleksi" value="75" class="w-4 h-4 text-teal-600 focus:ring-teal-500"> <span>🔋 <strong>75% (Good):</strong> Paham materi Bilangan Rasional dan bisa kuis dengan lancar.</span> </label> <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer"> <input type="radio" name="baterai-refleksi" value="100" class="w-4 h-4 text-teal-600 focus:ring-teal-500"> <span>⚡ <strong>100% (Full Power):</strong> Paham banget dan siap membantu mengajari teman!</span> </label> </div> </div> <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4"> <p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">🚧 Detektor Hambatan (Jawaban Singkat)</p> <label for="input-hambatan" class="block text-xs text-slate-600 mb-3">Tuliskan konsep atau jenis perkalian/pembagian tanda yang menurutmu paling menantang.</label> <input type="text" id="input-hambatan" placeholder="Tuliskan hambatanmu..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none"> </div> <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-6"> <p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">🧠 Strategi Belajar & Solusi</p> <label for="input-strategi" class="block text-xs text-slate-600 mb-3">Apa strategi belajarmu ke depan agar operasi bilangan bulat negatif terasa lebih mudah?</label> <input type="text" id="input-strategi" placeholder="Contoh: Membuat jembatan keledai tanda, latihan soal..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none"> </div> <div class="text-center"> <button class="px-8 py-3 bg-indigo-600 text-white rounded-full font-bold shadow-lg hover:scale-105 transition" onclick="simpanRefleksiDanLanjut()">Lihat Skor Akhir Anda →</button> </div> </div> </div> <div class="slide" id="slide-6"> <div class="max-w-md mx-auto px-5 py-12 text-center bg-white border border-teal-100 rounded-2xl shadow-md mt-12"> <div class="text-6xl mb-4" id="result-emoji">🎉</div> <h2 class="font-display mb-2 text-2xl font-bold text-slate-800">Misi Belajar Selesai!</h2> <p id="score-text" class="text-3xl font-black text-teal-600 mb-4"></p> <p class="text-sm text-slate-500 mb-6 px-4">Luar biasa! Seluruh lembar evaluasi dan data penilaian mandiri Anda telah direkam.</p> <div class="flex flex-col gap-2 max-w-xs mx-auto"> <button id="lms-send-btn" class="px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="kirimDataLms()">Kirim Laporan Nilai 🚀</button> <button class="px-6 py-2.5 bg-slate-100 text-slate-700 rounded-full font-semibold shadow hover:scale-105 transition text-sm" onclick="restart()">Ulangi Dari Awal</button> </div> <div id="lms-success-alert" class="hidden mt-4 text-xs font-bold text-green-700 bg-green-50 border border-green-200 p-2 rounded-lg animate-pulse"> Laporan kumulatif dan refleksi berhasil dikirim ke guru! </div> </div> </div> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); function goSlide(n) { slides.forEach(s => s.classList.remove('active')); slides[n].classList.add('active'); } function mulaiKelas() { if(!document.getElementById('nama-siswa').value.trim()) { alert("Masukkan nama terlebih dahulu!"); return; } goSlide(1); } // BANK SOAL BILANGAN RASIONAL SESUAI DENGAN TUJUAN PEMBELAJARAN const databaseKuis = { bab1: [ { q: "Manakah di bawah ini yang BUKAN merupakan bilangan rasional?", opts: ["√2", "0,5", "2/3", "-4"], ans: 0 }, { q: "Bentuk pecahan biasa yang paling sederhana dari bilangan desimal 0,75 adalah...", opts: ["1/2", "3/4", "7/5", "3/5"], ans: 1 }, { q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 } ], bab2: [ { q: "Di antara pilihan berikut, tanda perbandingan yang benar adalah...", opts: ["1/2 < 1/3", "2/5 > 3/5", "-0,6 > -0,2", "3/4 > 2/3"], ans: 3 }, { q: "Jika diurutkan dari yang terkecil, urutan yang benar adalah...", opts: ["-0,5 ; 1/4 ; 0,6", "0,6 ; 1/4 ; -0,5", "-0,5 ; 0,6 ; 1/4", "1/4 ; -0,5 ; 0,6"], ans: 0 } ], bab3: [ { q: "Hasil operasi hitung dari 1/2 + 0,25 adalah...", opts: ["0,5", "3/4", "1/4", "5/4"], ans: 1 }, { q: "Andi memiliki tali sepanjang 1,5 meter. Ia memotongnya sebanyak 3/4 meter untuk kerajinan. Sisa tali Andi adalah...", opts: ["0,5 meter", "0,25 meter", "0,75 meter", "1 meter"], ans: 2 } ] }; let babAktif = ''; let qIndex = 0; let totalSkorBenar = 0; let totalSoalDilewati = 0; let timer, timeLeft; let dataBateraiSiswa = "75"; let dataHambatanSiswa = "-"; let dataStrategiSiswa = "-"; function siapkanKuis(bab) { babAktif = bab; qIndex = 0; goSlide(2); jalankanKuisEngine(); } function jalankanKuisEngine() { const listSoal = databaseKuis[babAktif]; if (qIndex >= listSoal.length) { if(babAktif === 'bab1') { goSlide(3); } else if(babAktif === 'bab2') { goSlide(4); } else if(babAktif === 'bab3') { goSlide(5); } return; } const dataSoal = listSoal[qIndex]; document.getElementById('kuis-bab-label').textContent = `KUIS AKTIF: ${babAktif.toUpperCase()} - SOAL NO ${qIndex + 1}`; document.getElementById('quiz-bar').style.width = `${(qIndex / listSoal.length) * 100}%`; document.getElementById('quiz-feedback').classList.add('hidden'); document.getElementById('quiz-question').textContent = dataSoal.q; const optContainer = document.getElementById('quiz-options'); optContainer.innerHTML = dataSoal.opts.map((o, i) => `<button class="option-btn rounded-xl p-4 border-2 border-slate-200 bg-white font-medium text-slate-800 text-left" onclick="jawabKuis(${i})">${o}</button>` ).join(''); timeLeft = 15; document.getElementById('timer-text').textContent = timeLeft; clearInterval(timer); timer = setInterval(() => { timeLeft--; document.getElementById('timer-text').textContent = timeLeft; if (timeLeft <= 0) { clearInterval(timer); jawabKuis(-1); } }, 1000); } function jawabKuis(pilihanSiswa) { clearInterval(timer); totalSoalDilewati++; const btns = document.querySelectorAll('#quiz-options .option-btn'); btns.forEach(b => b.disabled = true); const correctAns = databaseKuis[babAktif][qIndex].ans; const fb = document.getElementById('quiz-feedback'); if (pilihanSiswa === correctAns) { totalSkorBenar++; btns[pilihanSiswa].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold'); fb.textContent = '✅ Jawabanmu Benar!'; fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-emerald-100 text-emerald-700 text-sm'; } else if (pilihanSiswa === -1) { btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold'); fb.textContent = '⏰ Waktu Habis!'; fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-amber-100 text-amber-700 text-sm'; } else { btns[pilihanSiswa].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold'); btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold'); fb.textContent = '❌ Masih Salah!'; fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-rose-100 text-rose-700 text-sm'; } fb.classList.remove('hidden'); qIndex++; setTimeout(jalankanKuisEngine, 1500); } function simpanRefleksiDanLanjut() { const radioBaterai = document.querySelector('input[name="baterai-refleksi"]:checked'); if (radioBaterai) { dataBateraiSiswa = radioBaterai.value; } dataHambatanSiswa = document.getElementById('input-hambatan').value.trim() || "Tidak ada hambatan"; dataStrategiSiswa = document.getElementById('input-strategi').value.trim() || "Tidak ada strategi khusus"; document.getElementById('score-text').textContent = `Total Skor: ${totalSkorBenar} / ${totalSoalDilewati}`; goSlide(6); } function restart() { totalSkorBenar = 0; totalSoalDilewati = 0; document.getElementById('nama-siswa').value = ''; document.getElementById('input-hambatan').value = ''; document.getElementById('input-strategi').value = ''; const rbs = document.querySelectorAll('input[name="baterai-refleksi"]'); rbs.forEach(rb => rb.checked = false); const btn = document.getElementById('lms-send-btn'); btn.disabled = false; btn.className = "px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm"; goSlide(0); } function kirimDataLms() { const nama = document.getElementById('nama-siswa').value.trim(); window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama || "Siswa Anonim", skor: `${totalSkorBenar} / ${totalSoalDilewati}`, baterai: dataBateraiSiswa, hambatan: "Hambatan Siswa: " + dataHambatanSiswa, strategi: "Strategi Siswa: " + dataStrategiSiswa }, "*"); document.getElementById('lms-success-alert').classList.remove('hidden'); const btn = document.getElementById('lms-send-btn'); btn.disabled = true; btn.className = "px-6 py-2.5 bg-slate-300 text-slate-500 rounded-full font-bold text-sm cursor-not-allowed"; } </script> </body> </html>

Nama Siswa	Materi Pelajaran	Hasil Skor	Tingkat Paham	Hambatan Belajar	Strategi Tindakan
Siswa 1	Bilangan Rasional Matematika — Kelas 7	3 / 7	100%	Hambatan Siswa: Tidak ada hambatan	Strategi Siswa: Tidak ada strategi khusus
sasasa	Bilangan Rasional Matematika — Kelas 7	3 / 7	100%	Hambatan Siswa: sas	Strategi Siswa: sas
Coba1	Bilangan Rasional Matematika — Kelas 7	1 / 7	100%	Hambatan Siswa: 1	Strategi Siswa: 2
sasdsadasd	Bilangan Rasional Matematika — Kelas 7	2 / 7	50%	Hambatan Siswa: dasda	Strategi Siswa: asdas
dddddddd	Bilangan Rasional Matematika — Kelas 7	3 / 7	75%	Hambatan Siswa: Hambatan	Strategi Siswa: Strategi

📂 Pilih Materi Pelajaran Belajar

ZAT, WUJUD ZAT, DAN PERUBAHANNYA 1 : Pengertian Materi, Sifat Ekstensif/Intensif, Sifat Fisis/Kimia, serta Perubahan Fisis & Perubahan Kimia

Besaran Pokok dan Besaran Turunan 2

Besan Pokok dan Besaran Turunan 1 : Mengidentifikasi besaran dalam kehidupan sehari-hari

Sel dan Perkembangannya 1 : Struktur Sel dan Perbedaan

Anti Narkoba Bagi Generasi Muda

Literasi Digital 2

Bilangan Rasional - kuis kelompok

Bilangan Rasional

📊 Papan Nilai & Aktivitas Kelas

Mode Belajar Interaktif