Ruang Belajar Siswa - SMPN 72 MALUKU TENGAH

Pilih Berdasarkan Kelas:

Pilih Berdasarkan Mata Pelajaran:

Semua Mapel Bahasa Indonesia Bahasa Inggris Games IPA Matematika MPLS PPKN SSK

📂 Pilih Materi Pelajaran Belajar

Kelas 8 PPKN

Hak dan Kewajiban Warga Negara

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kegiatan Pembuka PPKn</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <link href="https://fonts.googleapis.com/css2?family=DM+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: 'DM 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(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes growBar { from { width: 0; } } .poll-bar { animation: growBar 0.6s ease-out; } @keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } } .timer-pulse { animation: pulse-glow 1s infinite; } .option-btn { transition: all 0.2s; cursor: pointer; } .option-btn:hover { transform: translateY(-2px); } .option-btn.selected { ring: 3px; transform: scale(0.97); } </style> </head> <body class="min-h-screen" style="background: linear-gradient(rgb(255, 247, 237), rgb(254, 243, 199), rgb(236, 253, 245));">  <div class="slide active" id="slide-0"> <div class="relative w-full min-h-screen flex flex-col items-center justify-center"> <img data-template-id="hero-img" class="canva-image absolute inset-0 w-full h-full object-cover" loading="lazy"> <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/50 to-slate-900/20"></div> <div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-12 max-w-2xl mx-auto"> <span data-template-id="badge-text" class="canva-tag inline-block px-4 py-1 bg-orange-500 text-white rounded-full text-sm font-medium mb-4 shadow"></span> <h1 data-template-id="main-title" class="canva-text font-display leading-tight mb-3 text-white text-4xl md:text-5xl font-black"></h1> <p data-template-id="main-subtitle" class="canva-text max-w-lg mb-6 text-slate-200 text-sm md:text-base font-medium"></p>  <div class="mb-6 w-full max-w-xs text-left"> <label for="nama-siswa-ppkn" class="block text-xs font-bold text-slate-300 uppercase mb-1">Nama Lengkap Siswa:</label> <input type="text" id="nama-siswa-ppkn" placeholder="Ketik namamu di sini..." class="w-full p-3 border-2 border-white/20 bg-white/10 text-white placeholder-slate-400 rounded-xl text-sm focus:ring-2 focus:ring-orange-400 focus:outline-none font-medium"> </div> <button data-template-id="start-btn" class="canva-button px-8 py-3 bg-orange-500 text-white rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="mulaiKelas()"></button> </div> </div> </div>  <div class="slide" id="slide-1"> <div class="max-w-2xl mx-auto px-5 py-12"> <p data-template-id="poll-label" class="canva-tag inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-semibold mb-3"></p> <h2 data-template-id="poll-title" class="canva-text font-display mb-2 text-2xl font-bold text-slate-800"></h2> <p data-template-id="poll-scenario" class="canva-text text-sm text-slate-600 mb-6 leading-relaxed"></p> <div id="poll-options" class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6"> <button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(0)">🏛️ Hak warga negara</button> <button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(1)">📋 Kewajiban warga negara</button> <button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(2)">🤝 Keduanya</button> <button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(3)">❌ Bukan keduanya</button> </div> <div id="poll-results" class="hidden bg-white p-4 border rounded-2xl shadow-sm mb-6"> <div class="text-sm font-medium text-slate-600 space-y-3" id="poll-result-bars"></div> </div> <div id="poll-nav" class="hidden text-center"> <button data-template-id="next-quiz-btn" class="canva-button px-8 py-2.5 bg-indigo-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="goSlide(2)"></button> </div> </div> </div>  <div class="slide" id="slide-2"> <div class="max-w-2xl mx-auto px-5 py-12"> <div class="flex items-center justify-between mb-4"> <p data-template-id="quiz-label" class="canva-tag inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold"></p> <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">10</span> </div> </div> <div id="quiz-progress" class="w-full h-2 rounded-full bg-slate-200 mb-6"> <div id="quiz-bar" class="h-2 rounded-full bg-indigo-500 transition-all duration-300" style="width:20%"></div> </div> <h2 id="quiz-question" class="text-lg md:text-xl font-bold text-slate-800 mb-6 leading-relaxed"></h2> <div class="grid grid-cols-2 gap-4"> <button id="btn-true" class="option-btn rounded-xl p-4 border-2 border-emerald-200 bg-emerald-50 font-bold text-emerald-700 text-lg hover:bg-emerald-100 transition shadow-sm" onclick="answer(true)">✅ Benar</button> <button id="btn-false" class="option-btn rounded-xl p-4 border-2 border-rose-200 bg-rose-50 font-bold text-rose-700 text-lg hover:bg-rose-100 transition shadow-sm" onclick="answer(false)">❌ Salah</button> </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-md mx-auto px-5 py-16 text-center bg-white border rounded-2xl shadow-md mt-12"> <div class="text-6xl mb-4" id="result-emoji">🎉</div> <h2 data-template-id="result-title" class="canva-text font-display mb-2 text-2xl font-bold text-slate-800"></h2> <p id="score-text" class="text-3xl font-black text-indigo-600 mb-4"></p> <p data-template-id="reflection-prompt" class="canva-text text-sm text-slate-500 mb-6 px-4"></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 ke Guru 🚀</button> <button data-template-id="restart-btn" class="canva-button px-6 py-2.5 bg-slate-100 text-slate-700 rounded-full font-semibold shadow hover:scale-105 transition text-sm" onclick="restart()"></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 nilai & rekapitulasi Anda berhasil terkirim ke database guru! </div> </div> </div> <script> // DATA KONTEN OTOMATIS AWAL document.addEventListener("DOMContentLoaded", () => { document.querySelector('[data-template-id="hero-img"]').src = "https://images.pexels.com/photos/5412101/pexels-photo-5412101.jpeg?auto=compress&cs=tinysrgb&w=1280"; document.querySelector('[data-template-id="badge-text"]').textContent = "Aktivitas Pembuka • PPKn Kelas 8"; document.querySelector('[data-template-id="main-title"]').textContent = "Hak & Kewajiban Warga Negara"; document.querySelector('[data-template-id="main-subtitle"]').textContent = "Pelajari jembatan konsep keselarasan hak dan kewajiban kita sebagai warga negara Indonesia dengan cara interaktif!"; document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Kelas Digital 🚀"; document.querySelector('[data-template-id="poll-label"]').textContent = "STUDI KASUS JEMBATAN PILIHAN"; document.querySelector('[data-template-id="poll-title"]').textContent = "Membayar Pajak Tepat Waktu"; document.querySelector('[data-template-id="poll-scenario"]').textContent = "Negara membangun fasilitas jembatan umum dan jalan raya menggunakan dana pajak. Tindakan warga negara yang taat membayar pajak tersebut termasuk dalam kategori apa menurut pandanganmu?"; document.querySelector('[data-template-id="next-quiz-btn"]').textContent = "Lanjut ke Tantangan Kuis Cepat →"; document.querySelector('[data-template-id="quiz-label"]').textContent = "UJI PEMAHAMAN KILAT"; document.querySelector('[data-template-id="result-title"]').textContent = "Misi Selesai!"; document.querySelector('[data-template-id="reflection-prompt"]').textContent = "Hebat! Kamu telah menyelesaikan modul pemantik hari ini. Pastikan untuk menekan tombol 'Kirim Laporan' agar hasil belajarmu terekam otomatis di dasbor guru."; document.querySelector('[data-template-id="restart-btn"]').textContent = "Ulangi Modul Belajar"; lucide.createIcons(); }); const slides = document.querySelectorAll('.slide'); function goSlide(n) { slides.forEach(s => s.classList.remove('active')); slides[n].classList.add('active'); document.getElementById('slide-counter').textContent = `${n + 1} / ${slides.length}`; if(n===2) startQuiz(); } function mulaiKelas() { const nama = document.getElementById('nama-siswa-ppkn').value.trim(); if(!nama) { alert("Mohon masukkan nama lengkapmu terlebih dahulu untuk memulai rekapitulasi belajar!"); return; } goSlide(1); } function restart() { score=0; qIndex=0; pilihanPollingSiswa = "-"; goSlide(0); resetPoll(); } // Variabel Penampung Rekap let pilihanPollingSiswa = "-"; // Poll Logika const pollLabels = ['Hak Warga Negara','Kewajiban Warga Negara','Keduanya','Bukan keduanya']; let votes = [0,0,0,0]; let voted = false; function vote(i) { if(voted) return; voted=true; pilihanPollingSiswa = pollLabels[i]; votes[i]++; // simulasi data respon siswa lain di kelas votes[0]+=6; votes[1]+=18; votes[2]+=11; votes[3]+=1; const total = votes.reduce((a,b)=>a+b,0); const container = document.getElementById('poll-result-bars'); container.innerHTML = votes.map((v,idx) => { const pct = Math.round(v/total*100); return `<div class="mb-2"><div class="flex justify-between text-xs mb-1 font-bold"><span>${pollLabels[idx]}</span><span>${pct}%</span></div><div class="h-4 rounded-full bg-slate-100 overflow-hidden"><div class="poll-bar h-full rounded-full ${idx===i?'bg-emerald-500':'bg-indigo-400'}" style="width:${pct}%"></div></div></div>`; }).join(''); document.getElementById('poll-results').classList.remove('hidden'); document.getElementById('poll-nav').classList.remove('hidden'); document.querySelectorAll('#poll-options .option-btn').forEach((b,idx)=>{ b.classList.add(idx===i?'border-indigo-600 bg-indigo-50 font-bold':'opacity-50'); b.disabled=true; }); } function resetPoll() { votes=[0,0,0,0]; voted=false; document.getElementById('poll-results').classList.add('hidden'); document.getElementById('poll-nav').classList.add('hidden'); document.querySelectorAll('#poll-options .option-btn').forEach(b=>{b.classList.remove('border-indigo-600','bg-indigo-50','font-bold','opacity-50');b.disabled=false;}); } // Kuis Logika const questions = [ { q: "Setiap warga negara wajib membayar pajak sesuai undang-undang yang berlaku.", a: true }, { q: "Hak untuk mendapatkan pendidikan dasar secara konstitusi hanya berlaku bagi anak kalangan tertentu.", a: false }, { q: "Membela kedaulatan negara adalah kewajiban dasar setiap warga negara Indonesia.", a: true }, { q: "Kebebasan berpendapat di muka umum berarti bebas menghina orang lain di media sosial.", a: false }, { q: "Warga negara berhak mendapat perlindungan serta kedudukan hukum yang sama di depan pengadilan.", a: true } ]; let qIndex=0, score=0, timer, timeLeft; function startQuiz() { qIndex=0; score=0; showQuestion(); } function showQuestion() { if(qIndex>=questions.length){ endQuiz(); return; } document.getElementById('quiz-question').textContent = `${qIndex+1}. ${questions[qIndex].q}`; document.getElementById('quiz-bar').style.width = `${(qIndex+1)/questions.length*100}%`; document.getElementById('quiz-feedback').classList.add('hidden'); document.getElementById('btn-true').disabled=false; document.getElementById('btn-false').disabled=false; timeLeft=10; document.getElementById('timer-text').textContent=timeLeft; clearInterval(timer); timer=setInterval(()=>{ timeLeft--; document.getElementById('timer-text').textContent=timeLeft; if(timeLeft<=0){ clearInterval(timer); answer(null); } },1000); } function answer(val) { clearInterval(timer); document.getElementById('btn-true').disabled=true; document.getElementById('btn-false').disabled=true; const fb = document.getElementById('quiz-feedback'); const correct = questions[qIndex].a; if(val===correct){ score++; fb.textContent='✅ Benar!'; fb.className='mt-4 p-3 rounded-lg text-center font-semibold bg-emerald-100 text-emerald-700 text-sm'; } else if(val===null){ fb.textContent='⏰ Waktu habis! Kunci Jawaban: '+(correct?'Benar':'Salah'); fb.className='mt-4 p-3 rounded-lg text-center font-semibold bg-amber-100 text-amber-700 text-sm'; } else { fb.textContent='❌ Salah. Kunci Jawaban: '+(correct?'Benar':'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(showQuestion, 1500); } function endQuiz() { document.getElementById('score-text').textContent = `${score} / ${questions.length}`; document.getElementById('result-emoji').textContent = score>=4?'🎉':score>=2?'👍':'💪'; goSlide(3); } // ==================================================================== // MENGIRIMKAN DATA REKAPITULASI DUA ARAH MENEMBUS IFRAME LMS UTAMA // ==================================================================== function kirimDataLms() { const namaLengkap = document.getElementById('nama-siswa-ppkn').value.trim(); // Membisikkan objek payload ke penangkap pesan window parent index.php window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: namaLengkap || "Siswa PPKn Anonim", skor: score + " / " + questions.length, baterai: score >= 4 ? "100" : score >= 2 ? "75" : "50", // Konversi skor menjadi indikator persen pemahaman hambatan: "Pilihan Kasus Polling: " + pilihanPollingSiswa, strategi: score >= 4 ? "Sangat Menguasai Materi Pokok" : "Butuh Latihan Penguatan Soal Kewajiban" }, "*"); const alertBox = document.getElementById('lms-success-alert'); alertBox.classList.remove('hidden'); document.getElementById('lms-send-btn').disabled = true; document.getElementById('lms-send-btn').className = "px-6 py-2.5 bg-slate-300 text-slate-500 rounded-full font-bold text-sm cursor-not-allowed"; setTimeout(() => alertBox.classList.add('hidden'), 3500); } </script> </body> </html>

Kelas 8 IPA

Sistem Pencernaan Manusia

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Analisis Kedokteran: Sistem Pencernaan Manusia</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;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet"> <style> body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; } .heading-font { font-family: 'Playfair Display', serif; } .slide { display: none; } .slide.active { display: flex; } .match-card { transition: all 0.2s ease; cursor: pointer; } .match-card.selected { transform: translateY(-2px); box-shadow: 0 0 0 3px #10b981; border-color: #10b981; } .match-card.matched { opacity: 0.6; pointer-events: none; background: #ecfdf5 !important; border-color: #a7f3d0 !important; } .nav-btn:disabled { opacity: 0.3; pointer-events: none; } .sticky-note { animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes popIn { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } </style> </head> <body class="w-full min-h-screen flex flex-col pb-12 text-slate-800">  <nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md border-b border-slate-200/80 shadow-sm"> <button class="nav-btn px-4 py-2 border border-slate-300 rounded-xl text-xs font-bold text-slate-700 bg-white hover:bg-slate-50 shadow-sm transition flex items-center gap-1" id="prev-btn" disabled> <i data-lucide="arrow-left" style="width:14px;height:14px"></i> Kembali </button> <span class="text-xs font-bold tracking-widest text-slate-500 uppercase bg-slate-100 px-3 py-1.5 rounded-full" id="slide-counter">1 / 10</span> <button class="nav-btn px-4 py-2 border border-slate-300 rounded-xl text-xs font-bold text-white bg-indigo-600 hover:bg-indigo-700 shadow-sm transition flex items-center gap-1" id="next-btn"> Lanjut <i data-lucide="arrow-right" style="width:14px;height:14px"></i> </button> </nav> <main class="flex-1 pt-24 pb-6 px-4 w-full max-w-4xl mx-auto">  <section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[65vh]" data-slide="1"> <div class="px-4 py-1.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full text-xs font-bold uppercase tracking-wider"> Modul Sains & Anatomi • Kelas VIII </div> <h1 class="heading-font text-4xl md:text-6xl font-black text-slate-900 leading-tight">Bioreaktor Tubuh:<br><span class="text-emerald-600">Fisiologi Sistem Pencernaan</span></h1> <p class="text-base md:text-lg max-w-2xl text-slate-500 font-medium leading-relaxed">Analisis komprehensif transformasi makromolekul nutrisi secara mekanis dan kimiawi di dalam saluran gastrointestinal manusia.</p> <button id="start-btn" class="mt-4 px-8 py-3.5 bg-slate-900 text-white rounded-xl text-sm font-bold shadow-lg hover:bg-slate-800 transition transform hover:-translate-y-0.5 flex items-center gap-2"> Buka Modul Eksplorasi <i data-lucide="play" style="width:16px;height:16px"></i> </button> </section>  <section class="slide flex-col gap-4 min-h-[65vh]" data-slide="2"> <h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-2 flex items-center gap-2"> <i data-lucide="file-text" class="text-indigo-600"></i> Capaian & Target Kompetensi </h2> <div class="bg-white border border-slate-200 p-5 rounded-2xl shadow-sm space-y-3"> <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">Capaian Pembelajaran (Kurikulum Nasional)</h3> <p class="text-slate-700 text-sm leading-relaxed font-medium"> Peserta didik mampu mengidentifikasi serta menganalisis keterkaitan antara struktur organ saluran gastrointestinal dengan fungsinya dalam proses pemecahan zat makanan, serta memahami biokimia enzim pencernaan. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-2"> <div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm"> <span class="text-xs font-bold text-emerald-600 uppercase">Indikator 01</span> <p class="text-xs text-slate-600 font-semibold mt-1">Memetakan anatomi organ pencernaan utama dan kelenjar aksesori.</p> </div> <div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm"> <span class="text-xs font-bold text-emerald-600 uppercase">Indikator 02</span> <p class="text-xs text-slate-600 font-semibold mt-1">Membedakan hidrolisis zat makanan secara mekanis dan enzimatik.</p> </div> <div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm"> <span class="text-xs font-bold text-emerald-600 uppercase">Indikator 03</span> <p class="text-xs text-slate-600 font-semibold mt-1">Mendiagnosis gangguan biokimia (maag, konstipasi, dll) pada organ.</p> </div> </div> </section>  <section class="slide flex-col gap-5 min-h-[65vh]" data-slide="3"> <h2 class="heading-font text-2xl font-bold text-slate-900 flex items-center gap-2"><i data-lucide="video" class="text-rose-600"></i> Video Stimulus: Proses Transportasi Makanan</h2> <div class="w-full aspect-video bg-slate-950 rounded-2xl overflow-hidden shadow-inner border border-slate-800">  <video width="100%" height="100%" controls class="w-full h-full object-contain"> <source src="http://192.168.1.100//filesharing///////////////////elearning/media/2026/0000183.C__Users_soumena_AppData_Local_edu.ruang.murid_decrypted_9272b5ef9510c946_b8f68198-714e-404f-8aec-38957fffaf6c.mp4" type="video/mp4"> Browser Anda tidak mendukung pemutar video lokal server. Silakan hubungi proktor/teknisi IT. </video> </div> <div class="bg-slate-900 text-white p-5 rounded-2xl shadow-md"> <h4 class="text-xs font-bold uppercase tracking-wider text-amber-400 mb-1 flex items-center gap-1"><i data-lucide="help-circle" style="width:14px;height:14px"></i> Studi Kasus Klinis</h4> <p class="text-slate-300 text-xs leading-relaxed mb-3">Berdasarkan visualisasi video tersebut, analisislah bagaimana mekanisme bolus makanan terdorong ke lambung meskipun tubuh dalam posisi terbalik/gravitasi nol?</p> <textarea id="checkpoint-answer" class="w-full p-3 bg-slate-800 border border-slate-700 text-slate-100 rounded-xl resize-none h-20 text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none" placeholder="Tuliskan analisis ilmiah Anda..."></textarea> <button class="mt-2 px-4 py-2 bg-emerald-600 text-white text-xs font-bold rounded-lg hover:bg-emerald-500 transition shadow" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Analisis</button> <p id="checkpoint-feedback" class="hidden mt-2 text-emerald-400 font-semibold text-xs flex items-center gap-1">✅ Tepat! Gerakan tersebut adalah peristaltik esofagus yang dipicu kontraksi otot sirkular dan longitudinal secara ritmis.</p> </div> </section>  <section class="slide flex-col gap-4 min-h-[65vh]" data-slide="4"> <h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-1 flex items-center gap-2"><i data-lucide="book-open" class="text-emerald-600"></i> Fisiologi Organ Atas: Mulut hingga Lambung</h2> <div class="space-y-3 text-sm text-slate-600 leading-relaxed"> <div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm"> <h3 class="font-bold text-slate-800 text-base mb-1 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 1. Rongga Mulut (Cavum Oris)</h3> <p class="text-xs text-slate-500 mb-2">Terjadi perpaduan pencernaan mekanis (oleh gigi dan lidah) serta kimiawi.</p> <ul class="list-disc pl-5 space-y-1 text-xs"> <li><b>Gigi (Dentes):</b> Memotong (insisivus), merobek (caninus), dan mengunyah (molar) makanan menjadi bolus kecil.</li> <li><b>Kelenjar Ludah (Saliva):</b> Menghasilkan enzim <b>Amilase (Ptialin)</b> yang menghidrolisis amilum menjadi disakarida (maltosa) pada pH ideal $\approx 6.8$.</li> </ul> </div> <div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm"> <h3 class="font-bold text-slate-800 text-base mb-1 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 2. Lambung (Ventriculus)</h3> <p class="text-xs text-slate-500 mb-2">Kantong otot kontraktil yang menghasilkan getah lambung bersifat sangat asam (pH 1.5 - 2.5).</p> <ul class="list-disc pl-5 space-y-1 text-xs"> <li><b>Asam Klorida (HCl):</b> Membunuh patogen mikroskopis dan mengaktifkan pepsinogen menjadi pepsin.</li> <li><b>Enzim Pepsin:</b> Memecah makromolekul rantai protein kompleks menjadi gugus peptida (pepton).</li> <li><b>Enzim Renin:</b> Mengkoagulasikan kasein (protein susu) dari cairan susu mamalia.</li> </ul> </div> </div> </section>  <section class="slide flex-col gap-4 min-h-[65vh]" data-slide="5"> <h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-1 flex items-center gap-2"><i data-lucide="layers" class="text-emerald-600"></i> Absorpsi & Peran Organ Aksesori Kelenjar</h2> <div class="space-y-3 text-sm text-slate-600 leading-relaxed"> <div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm"> <h3 class="font-bold text-slate-800 text-sm mb-1">Usus Halus (Intestinum Tenue)</h3> <p class="text-xs text-slate-500 mb-1">Terbagi atas Duodenum (12 jari), Jejunum (kosong), dan Ileum (penyerapan). Struktur dinding Ileum dipenuhi vili (jonjot usus) untuk memperluas area penyerapan sari makanan.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs"> <div class="bg-amber-50/50 border border-amber-200 p-4 rounded-xl"> <h4 class="font-bold text-amber-800 mb-1">Pankreas (Kelenjar Eksokrin)</h4> <p class="text-slate-600 leading-relaxed mb-2">Mensekresikan natrium bikarbonat untuk menetralkan asam kimus lambung serta enzim penting:</p> <ul class="list-disc pl-4 space-y-1 text-slate-700"> <li><b>Tripsin:</b> Memecah pepton menjadi asam amino dasar.</li> <li><b>Lipase Pankreas:</b> Memecah emulsi lemak menjadi asam lemak dan gliserol.</li> </ul> </div> <div class="bg-emerald-50/50 border border-emerald-200 p-4 rounded-xl"> <h4 class="font-bold text-emerald-800 mb-1">Hati & Kantung Empedu</h4> <p class="text-slate-600 leading-relaxed">Hati memproduksi cairan <b>Empedu (Bile)</b> yang disimpan di kantung empedu. Cairan ini tidak mengandung enzim, melainkan garam empedu yang berfungsi **mengemulsikan lemak** secara mekanis agar bisa dihidrolisis zat lipase.</p> </div> </div> </div> </section>  <section class="slide flex-col gap-6 min-h-[65vh]" data-slide="6"> <h2 class="heading-font text-2xl font-bold text-slate-900 text-center">🎮 Kompetensi 1: Uji Biokimia Enzim</h2> <div class="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm max-w-2xl mx-auto w-full"> <p class="font-bold text-base text-slate-800 mb-4 text-center">Pasien klinis mengalami malabsorpsi lemak akibat gangguan sekresi getah alkali. Kerusakan pada organ manakah yang paling mungkin memicu penurunan hidrolisis emulsi lemak tersebut?</p> <div class="flex flex-col gap-3" id="pg-area"> <button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">A. Glandula Parotis (Kelenjar Ludah)</button> <button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, true)">B. Pankreas (Penurunan Sekresi Lipase & Bikarbonat)</button> <button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">C. Dinding Dalam Mukosa Lambung</button> </div> <p id="pg-feedback" class="hidden mt-4 font-bold text-center text-xs"></p> </div> </section>  <section class="slide flex-col gap-4 min-h-[65vh]" data-slide="7"> <h2 data-template-id="match-title" class="heading-font text-2xl font-bold text-center text-slate-900"></h2> <p class="text-center text-xs text-slate-500">Pasangkan nama organ/zat pencernaan di sebelah kiri dengan fungsi fisiologis spesifiknya di kanan secara tepat.</p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="match-board"></div> <p id="match-feedback" class="text-center font-bold text-xs hidden mt-4"></p> </section>  <section class="slide flex-col gap-4 min-h-[65vh]" data-slide="8"> <h2 class="heading-font text-2xl font-bold text-slate-900 text-center">🎮 Kompetensi 3: Pilihan Ganda Kompleks</h2> <div class="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm max-w-2xl mx-auto w-full space-y-4"> <p class="font-bold text-sm text-slate-800 text-center bg-slate-50 p-3 rounded-xl border">Manakah pernyataan di bawah ini yang paling TEPAT menjelaskan proses penyerapan dan metabolisme zat makanan di Intestinum Tenue? (Pilih dua atau lebih jawaban benar!)</p> <div class="space-y-3"> <label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition"> <input type="checkbox" name="pk" value="A" class="mt-1 w-4 h-4 accent-emerald-600"> <span class="text-xs font-semibold text-slate-700">A. Glukosa dan asam amino diserap jonjot vili usus halus lalu dibawa langsung masuk pembuluh darah kapiler menuju hati.</span> </label> <label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition"> <input type="checkbox" name="pk" value="B" class="mt-1 w-4 h-4 accent-emerald-600"> <span class="text-xs font-semibold text-slate-700">B. Getah usus tidak memerlukan sinyal kimia/hormon kolesistokinin dalam proses absorbsi molekul pati.</span> </label> <label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition"> <input type="checkbox" name="pk" value="C" class="mt-1 w-4 h-4 accent-emerald-600"> <span class="text-xs font-semibold text-slate-700">C. Asam lemak dan gliserol diabsorbsi masuk ke dalam pembuluh kil (pembuluh limfa/getah bening) di tengah vili sebelum masuk sirkulasi darah besar.</span> </label> </div> <button onclick="cekKompleks()" class="w-full py-3 bg-slate-900 text-white font-bold text-xs rounded-xl hover:bg-slate-800 transition shadow">Kunci Analisis Pilihan 🔒</button> <div id="pk-feedback" class="hidden p-3 rounded-xl text-center font-bold text-xs"></div> </div> </section>  <section class="slide flex-col gap-6 min-h-[65vh]" data-slide="9"> <h2 class="heading-font text-2xl font-bold text-center text-slate-900">📌 Jurnal Refleksi Fisiologi</h2> <p class="text-center text-xs text-slate-500">Tuliskan kesimpulan kritis ilmiah mengenai perbedaan mendasar peran pencernaan kimiawi lambung versus usus dua belas jari!</p> <div class="flex gap-2"> <input type="text" id="sticky-input" class="flex-1 p-3 border border-slate-300 rounded-xl text-xs focus:outline-emerald-500 bg-white" placeholder="Ketik simpulan analitismu di sini..."> <button class="px-5 py-2 bg-emerald-600 text-white rounded-xl font-bold text-xs hover:bg-emerald-700 shadow transition" onclick="addSticky()">Sematkan</button> </div> <div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[100px] bg-slate-100 p-4 rounded-2xl border-2 border-dashed border-slate-200 shadow-inner"></div> </section>  <section class="slide flex-col gap-6 items-center justify-center min-h-[65vh]" data-slide="10"> <h2 class="heading-font text-2xl font-bold text-center text-slate-900">💌 Umpan Balik Kualitas Modul</h2> <p class="text-center text-xs text-slate-500 max-w-md">Berikan masukan objektif Anda terkait kualitas rancangan presentasi, penyajian teks materi biokimia, serta fungsi simulasi interaktif game di atas.</p> <textarea id="feedback-text" class="w-full max-w-lg p-4 border border-slate-300 rounded-xl h-24 text-xs focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white" placeholder="Tulis catatan umpan balik di sini..."></textarea> <button class="px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold text-xs hover:bg-indigo-700 transition shadow" onclick="submitFeedback()">Kirim Umpan Balik</button> <p id="feedback-thanks" class="hidden text-emerald-600 font-bold text-sm animate-pulse">Umpan balik saintifik Anda berhasil disimpan dalam basis data kelas! 🎉</p> </section> </main> <script> // DATA KONTEN OTOMATIS AWAL document.addEventListener("DOMContentLoaded", () => { document.querySelector('[data-template-id="welcome-title"]').innerHTML = "Bioreaktor Tubuh:<br><span class='text-emerald-600'>Fisiologi Pencernaan</span>"; document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Analisis Konversi Makromolekul Nutrisi Berbasis Saluran Gastrointestinal Manusia."; document.querySelector('[data-template-id="start-btn"]').innerHTML = "Buka Modul Eksplorasi <i class='inline-block ml-1' data-lucide='play' style='width:14px;height:14px'></i>"; lucide.createIcons(); }); // Logika Inti Manajemen Navigasi Slide let current = 1; const total = 10; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const counter = document.getElementById('slide-counter'); function showSlide(n) { document.querySelectorAll('.slide').forEach(s => s.classList.remove('active')); document.querySelector(`[data-slide="${n}"]`).classList.add('active'); counter.textContent = `${n} / ${total}`; prevBtn.disabled = n === 1; nextBtn.disabled = n === total; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 1) showSlide(--current); }); nextBtn.addEventListener('click', () => { if (current < total) showSlide(++current); }); document.getElementById('start-btn').addEventListener('click', () => showSlide(++current)); // Game 1: Pilihan Ganda (PG) Fisiologi function cekPG(btn, isCorrect) { const fb = document.getElementById('pg-feedback'); fb.classList.remove('hidden'); document.querySelectorAll('#pg-area button').forEach(b => b.style.pointerEvents = 'none'); if (isCorrect) { btn.className = "w-full py-3.5 px-4 bg-emerald-50 border-2 border-emerald-500 rounded-xl font-bold text-xs text-left text-emerald-700 shadow-sm"; fb.textContent = "🎉 ANALISIS BENAR! Pankreas mensekresikan enzim lipase untuk memecah lemak serta ion bikarbonat pencegah asidosis."; fb.className = "mt-4 font-bold text-center text-xs text-emerald-700 bg-emerald-50 p-2.5 rounded-xl border border-emerald-200 animate-bounce"; } else { btn.className = "w-full py-3.5 px-4 bg-rose-50 border-2 border-rose-500 rounded-xl font-bold text-xs text-left text-rose-700 shadow-sm"; fb.textContent = "❌ Analisis Kurang Tepat! Organ yang mensekresikan penetral kimus dan lipase utama adalah Kelenjar Pankreas."; fb.className = "mt-4 font-bold text-center text-xs text-rose-600 bg-rose-50 p-2.5 rounded-xl border border-rose-200"; } } // Game 2: Mencocokkan Pasangan Unik/Acak Per Perangkat Siswa let matchPairs = []; let selected = null; let matchCount = 0; let gameRound = 1; const bankSoalMatch = [ { text: "HCl Lambung", category: "Mengaktifkan pepsinogen & bunuh kuman" }, { text: "Cairan Empedu", category: "Mengemulsikan lemak secara mekanis" }, { text: "Enzim Ptialin", category: "Menghidrolisis amilum menjadi maltosa" }, { text: "Vili Usus Halus", category: "Memperluas permukaan absorbsi nutrisi" }, { text: "Kolon (Usus Besar)", category: "Reabsorbsi air & pembusukan feses" } ]; function generateMatchPairs() { let kocok = [...bankSoalMatch].sort(() => Math.random() - 0.5); let dataPilihan = kocok.slice(0, 3); const newPairs = []; dataPilihan.forEach((item, idx) => { const leftId = String.fromCharCode(97 + idx); const rightId = String.fromCharCode(65 + idx); newPairs.push( { id: leftId, text: item.text, match: rightId }, { id: rightId, text: item.category, match: leftId } ); }); return newPairs; } function initMatch() { matchPairs = generateMatchPairs(); const board = document.getElementById('match-board'); board.innerHTML = ''; matchCount = 0; selected = null; const shuffled = matchPairs.sort(() => Math.random() - 0.5); shuffled.forEach(p => { const card = document.createElement('button'); card.className = 'match-card p-4 bg-white border border-slate-200 rounded-xl font-semibold text-xs text-center shadow-sm hover:border-emerald-400 text-slate-700'; card.textContent = p.text; card.dataset.id = p.id; card.dataset.match = p.match; card.addEventListener('click', () => selectCard(card)); board.appendChild(card); }); document.querySelector('[data-template-id="match-title"]').textContent = `🎮 Kompetensi 2: Hubungan Fungsi Organ (Ronde ${gameRound})`; } function selectCard(card) { if (card.classList.contains('matched')) return; if (selected && selected === card) { selected.classList.remove('selected'); selected = null; return; } if (!selected) { card.classList.add('selected'); selected = card; return; } if (selected.dataset.match === card.dataset.id) { selected.classList.remove('selected'); selected.classList.add('matched'); card.classList.add('matched'); matchCount++; if (matchCount === 3) { const fb = document.getElementById('match-feedback'); fb.textContent = `🏆 Luar biasa! Ronde ${gameRound} terlewati. Memetakan kombinasi fungsional baru...`; fb.className = 'text-center font-bold text-xs text-emerald-700 bg-emerald-50 p-2 rounded-xl mt-4 border border-emerald-200'; fb.classList.remove('hidden'); setTimeout(() => { gameRound++; document.getElementById('match-feedback').classList.add('hidden'); initMatch(); }, 2200); } } else { selected.classList.remove('selected'); card.classList.add('selected'); } selected = card.classList.contains('matched') ? null : card; } initMatch(); // Game 3: Pilihan Ganda Kompleks (PK) function cekKompleks() { const checkboxes = document.querySelectorAll('input[name="pk"]'); const fb = document.getElementById('pk-feedback'); fb.classList.remove('hidden'); let dipilih = []; checkboxes.forEach(cb => { if (cb.checked) dipilih.push(cb.value); }); // Jawaban benar adalah A dan C (B salah karena getah usus diatur hormon sekretin dan kolesistokinin) const benar = dipilih.includes('A') && dipilih.includes('C') && !dipilih.includes('B') && dipilih.length === 2; if (benar) { fb.textContent = "✅ VALID! Glukosa/asam amino masuk ke kapiler darah menuju hati, sementara asam lemak melewati pembuluh limfa lakteal di dalam vili."; fb.className = "p-3 rounded-xl text-center font-bold text-xs text-emerald-700 bg-emerald-50 mt-4 border border-emerald-200 shadow-sm"; } else { fb.textContent = "❌ Analisis Meloset! Kunci jawaban valid mencakup kombinasi opsi A dan C. Pelajari kembali rute mikro-transportasi limfa."; fb.className = "p-3 rounded-xl text-center font-bold text-xs text-rose-600 bg-rose-50 mt-4 border border-rose-200 shadow-sm"; } } // Papan Interaktif Catatan Refleksi Mading const colors = ['bg-amber-100','bg-emerald-100','bg-sky-100','bg-indigo-100']; function addSticky() { const input = document.getElementById('sticky-input'); if (!input.value.trim()) return; const note = document.createElement('div'); note.className = `sticky-note p-4 rounded-xl shadow-sm text-xs font-bold text-slate-700 border border-slate-200/40 ${colors[Math.floor(Math.random()*colors.length)]}`; note.textContent = input.value.trim(); document.getElementById('sticky-board').appendChild(note); input.value = ''; } // Submit Form Masukan function submitFeedback() { const text = document.getElementById('feedback-text').value.trim(); if (text) { document.getElementById('feedback-thanks').classList.remove('hidden'); document.getElementById('feedback-text').value = ''; } } </script> </body> </html>

Kelas 8 IPA

Reproduksi

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Eksplorasi Sistem Reproduksi Manusia</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=DM+Sans:wght@400;500;700&family=Fraunces:wght@700;900&display=swap" rel="stylesheet"> <style> body { font-family: 'DM Sans', sans-serif; background-color: #fcfbf9; } .heading-font { font-family: 'Fraunces', serif; } .slide { display: none; } .slide.active { display: flex; } .match-card { transition: all 0.2s; cursor: pointer; } .match-card.selected { transform: scale(1.03); box-shadow: 0 0 0 3px #ec4899; } .match-card.matched { opacity: 0.5; pointer-events: none; background: #d1fae5 !important; border-color: #34d399 !important; } .nav-btn:disabled { opacity: 0.3; pointer-events: none; } .sticky-note { animation: popIn 0.3s ease; } @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> </head> <body class="w-full min-h-screen flex flex-col pb-12">  <nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-white/90 backdrop-blur shadow-sm"> <button class="nav-btn p-2 text-sm font-bold text-rose-600 hover:bg-gray-100 rounded-lg" id="prev-btn" disabled>Kembali</button> <span class="text-sm font-medium text-gray-600" id="slide-counter">1 / 10</span> <button class="nav-btn p-2 text-sm font-bold text-rose-600 hover:bg-gray-100 rounded-lg" id="next-btn">Lanjut</button> </nav> <main class="flex-1 pt-20 pb-4 px-4 w-full max-w-3xl mx-auto">  <section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[70vh]" data-slide="1"> <img data-template-id="hero-img" class="w-full max-w-md h-48 object-cover rounded-2xl shadow-lg" loading="lazy"> <h1 data-template-id="welcome-title" class="heading-font text-3xl md:text-5xl font-bold mt-4 text-slate-800"></h1> <p data-template-id="welcome-subtitle" class="text-lg md:text-xl mt-2 opacity-80 text-slate-600"></p> <button data-template-id="start-btn" class="mt-6 px-8 py-3 bg-rose-500 text-white rounded-full text-lg font-bold shadow-lg hover:scale-105 transition-transform" id="start-btn"></button> </section>  <section class="slide flex-col gap-4 min-h-[70vh]" data-slide="2"> <h2 class="heading-font text-2xl font-bold text-slate-800 border-b pb-2">🎯 Capaian & Tujuan Pembelajaran</h2> <div class="bg-rose-50 border-l-4 border-rose-500 p-4 rounded-r-xl"> <h3 class="font-bold text-rose-900 text-sm uppercase tracking-wider mb-1">Capaian Pembelajaran (CP)</h3> <p class="text-rose-950 text-sm leading-relaxed">Siswa dapat mendeskripsikan struktur dan fungsi sistem reproduksi manusia, memahami gangguan/penyakit yang berhubungan, serta pentingnya menjaga kesehatan diri sebagai perwujudan profil pelajar pancasila.</p> </div> <div class="bg-white border p-5 rounded-xl shadow-sm space-y-3"> <h3 class="font-bold text-slate-800 text-sm uppercase tracking-wider">Tujuan Pembelajaran (TP)</h3> <ul class="list-disc pl-5 text-sm text-slate-600 space-y-2"> <li>Mengidentifikasi organ reproduksi pria dan wanita beserta fungsinya dengan tepat.</li> <li>Menjelaskan tahapan siklus menstruasi pada wanita dan proses fertilisasi.</li> <li>Menganalisis berbagai upaya preventif dalam menjaga kesehatan organ reproduksi.</li> </ul> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="3"> <h2 class="heading-font text-2xl font-bold text-slate-800">🎬 Video Stimulus Pembelajaran</h2> <div class="w-full aspect-video bg-gray-900 rounded-xl overflow-hidden shadow"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/g6j3F7GZ474" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-xl"> <p class="font-bold text-amber-800 mb-1">💡 Pertanyaan Pemantik</p> <p class="text-amber-900 text-sm mb-2">Mengapa makhluk hidup perlu bereproduksi dan bagaimana jadinya jika sistem organ tersebut mengalami kerusakan fatal?</p> <textarea id="checkpoint-answer" class="w-full p-3 border border-amber-200 rounded-lg resize-none h-20 text-sm focus:ring-2 focus:ring-amber-400 focus:outline-none" placeholder="Tuliskan gagasan awalmu di sini..."></textarea> <button class="mt-2 px-4 py-2 bg-amber-500 text-white text-xs font-bold rounded-lg hover:bg-amber-600 transition" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Argumen</button> <p id="checkpoint-feedback" class="hidden mt-2 text-green-700 font-medium text-xs">✅ Bagus! Pemikiran yang kritis. Reproduksi menjamin kelangsungan spesies dari kepunahan.</p> </div> </section>  <section class="slide flex-col gap-4 min-h-[70vh]" data-slide="4"> <h2 class="heading-font text-2xl font-bold text-slate-800 border-b pb-1">📖 Materi 1: Organ Reproduksi Pria</h2> <p class="text-sm text-slate-600 leading-relaxed">Sistem reproduksi pria bertugas memproduksi, memelihara, dan menyalurkan sperma (sel kelamin jantan).</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm"> <div class="bg-blue-50/70 p-4 border border-blue-200 rounded-xl"> <h4 class="font-bold text-blue-800 mb-1">Organ Eksternal (Luar)</h4> <ul class="list-disc pl-4 space-y-1 text-slate-700"> <li><b>Penis:</b> Alat kopulasi untuk menyalurkan sperma ke saluran kelamin wanita.</li> <li><b>Skrotum:</b> Kantong pembungkus testis yang menjaga suhu sperma agar tetap ideal ($\pm 2^\circ\text{C}$ di bawah suhu tubuh).</li> </ul> </div> <div class="bg-indigo-50/70 p-4 border border-indigo-200 rounded-xl"> <h4 class="font-bold text-indigo-800 mb-1">Organ Internal (Dalam)</h4> <ul class="list-disc pl-4 space-y-1 text-slate-700"> <li><b>Testis:</b> Tempat produksi sel sperma dan hormon testosteron.</li> <li><b>Epididimis:</b> Tempat penyimpanan sperma sementara hingga matang.</li> <li><b>Vas Deferens:</b> Saluran panjang penghubung epididimis ke uretra.</li> </ul> </div> </div> </section>  <section class="slide flex-col gap-4 min-h-[70vh]" data-slide="5"> <h2 class="heading-font text-2xl font-bold text-slate-800 border-b pb-1">📖 Materi 2: Organ Wanita & Siklus</h2> <p class="text-sm text-slate-600 leading-relaxed">Sistem reproduksi wanita berfungsi memproduksi sel telur (ovum), sebagai tempat fertilisasi, dan memelihara janin.</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm"> <div class="bg-pink-50/70 p-4 border border-pink-200 rounded-xl"> <h4 class="font-bold text-pink-800 mb-1">Struktur Utama</h4> <ul class="list-disc pl-4 space-y-1 text-slate-700"> <li><b>Ovarium:</b> Kelenjar utama penghasil sel telur (ovum) dan hormon estrogen/progesteron.</li> <li><b>Tuba Fallopi (Oviduk):</b> Saluran tempat terjadinya pembuahan (fertilisasi).</li> <li><b>Uterus (Rahim):</b> Tempat menempel dan berkembangnya janin selama kehamilan.</li> </ul> </div> <div class="bg-rose-50/70 p-4 border border-rose-200 rounded-xl"> <h4 class="font-bold text-rose-800 mb-1">Siklus Menstruasi</h4> <p class="text-slate-700 leading-relaxed text-xs">Apabila ovum tidak dibuahi sperma, korpus luteum berhenti memproduksi estrogen & progesteron. Penurunan drastis hormon ini memicu dinding rahim (endometrium) meluruh bersama darah.</p> </div> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="6"> <h2 class="heading-font text-2xl font-bold text-slate-800 text-center">🎮 Game 1: Pilihan Ganda (Asah Konsep)</h2> <div class="bg-white border p-5 rounded-2xl shadow-sm"> <p class="font-bold text-lg text-slate-800 mb-4 text-center">Dimanakah tempat pematangan sperma sementara pada organ reproduksi pria?</p> <div class="flex flex-col gap-3" id="pg-area"> <button class="w-full py-3 px-4 bg-slate-50 border rounded-xl font-medium text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">A. Testis</button> <button class="w-full py-3 px-4 bg-slate-50 border rounded-xl font-medium text-left hover:bg-slate-100 transition" onclick="cekPG(this, true)">B. Epididimis</button> <button class="w-full py-3 px-4 bg-slate-50 border rounded-xl font-medium text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">C. Vas Deferens</button> </div> <p id="pg-feedback" class="hidden mt-4 font-bold text-center text-sm"></p> </div> </section>  <section class="slide flex-col gap-4 min-h-[70vh]" data-slide="7"> <h2 data-template-id="match-title" class="heading-font text-2xl font-bold text-center text-slate-800"></h2> <p class="text-center text-sm text-gray-600">Jodohkan nama organ dengan fungsinya yang benar secara acak!</p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="match-board"></div> <p id="match-feedback" class="text-center font-bold text-sm hidden mt-4"></p> </section>  <section class="slide flex-col gap-4 min-h-[70vh]" data-slide="8"> <h2 class="heading-font text-2xl font-bold text-slate-800 text-center">🎮 Game 3: Pilihan Ganda Kompleks</h2> <div class="bg-white border p-5 rounded-2xl shadow-sm space-y-4"> <p class="font-bold text-base text-slate-800 text-center bg-amber-50 p-2 rounded-lg border border-amber-200">Manakah dari pernyataan berikut yang BENAR mengenai fungsi hormonal dan organ wanita? (Pilih LEBIH DARI 1 jawaban!)</p> <div class="space-y-3"> <label class="flex items-start gap-3 p-3 border rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100"> <input type="checkbox" name="pk" value="A" class="mt-1 w-4 h-4 accent-rose-500"> <span class="text-sm font-medium text-slate-700">A. Tuba Fallopi merupakan jalur utama bertemunya ovum dan sel sperma (Fertilisasi).</span> </label> <label class="flex items-start gap-3 p-3 border rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100"> <input type="checkbox" name="pk" value="B" class="mt-1 w-4 h-4 accent-rose-500"> <span class="text-sm font-medium text-slate-700">B. Estrogen berfungsi memicu peluruhan dinding rahim saat fase menstruasi.</span> </label> <label class="flex items-start gap-3 p-3 border rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100"> <input type="checkbox" name="pk" value="C" class="mt-1 w-4 h-4 accent-rose-500"> <span class="text-sm font-medium text-slate-700">C. Rahim (Uterus) memiliki lapisan endometrium untuk tempat implantasi janin.</span> </label> </div> <button onclick="cekKompleks()" class="w-full py-3 bg-rose-600 text-white font-bold rounded-xl hover:bg-rose-700 transition shadow">Kunci Jawaban Siswa 🔒</button> <div id="pk-feedback" class="hidden p-3 rounded-lg text-center font-bold text-sm"></div> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="9"> <h2 class="heading-font text-2xl font-bold text-center text-slate-800">📌 Kotak Refleksi Siswa</h2> <p class="text-center text-sm text-gray-600">Tempelkan catatan tentang satu pemahaman penting yang kamu peroleh hari ini!</p> <div class="flex gap-2"> <input type="text" id="sticky-input" class="flex-1 p-3 border rounded-lg text-sm focus:outline-rose-500 bg-white" placeholder="Ketik refleksimu..."> <button class="px-5 py-2 bg-rose-500 text-white rounded-lg font-bold text-sm hover:bg-rose-600 shadow" onclick="addSticky()">Tempel</button> </div> <div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[100px] bg-slate-100 p-4 rounded-xl border border-dashed"></div> </section>  <section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="10"> <h2 class="heading-font text-2xl font-bold text-center text-slate-800">💌 Suara & Masukan Siswa</h2> <p class="text-center text-sm text-gray-600 max-w-md">Apakah pembelajaran materi sistem reproduksi hari ini menarik? Berikan saran atau kritik membangun untuk gurumu.</p> <textarea id="feedback-text" class="w-full max-w-lg p-4 border-2 border-dashed border-rose-300 rounded-xl h-24 text-sm focus:ring-2 focus:ring-rose-400 focus:outline-none bg-white" placeholder="Tulis masukan di sini..."></textarea> <button class="px-6 py-3 bg-rose-500 text-white rounded-lg font-bold text-sm hover:bg-rose-600 transition shadow" onclick="submitFeedback()">Kirim Umpan Balik</button> <p id="feedback-thanks" class="hidden text-green-600 font-bold text-base">Terima kasih banyak, masukannya telah terekam! 🎉</p> </section> </main> <script> // DATA KONTEN OTOMATIS AWAL document.addEventListener("DOMContentLoaded", () => { document.querySelector('[data-template-id="hero-img"]').src = "https://images.unsplash.com/photo-1576086213369-97a306d36557?w=600&q=80"; document.querySelector('[data-template-id="welcome-title"]').textContent = "Eksplorasi Sistem Reproduksi"; document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Memahami Struktur Organ Kehidupan dan Pentingnya Menjaga Kesehatan Diri"; document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Belajar Interaktif! 🚀"; }); // Navigasi Antar Halaman Slide let current = 1; const total = 10; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const counter = document.getElementById('slide-counter'); function showSlide(n) { document.querySelectorAll('.slide').forEach(s => s.classList.remove('active')); document.querySelector(`[data-slide="${n}"]`).classList.add('active'); counter.textContent = `${n} / ${total}`; prevBtn.disabled = n === 1; nextBtn.disabled = n === total; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 1) showSlide(--current); }); nextBtn.addEventListener('click', () => { if (current < total) showSlide(++current); }); document.getElementById('start-btn').addEventListener('click', () => showSlide(++current)); // Game 1: Pilihan Ganda (PG) function cekPG(btn, isCorrect) { const fb = document.getElementById('pg-feedback'); fb.classList.remove('hidden'); document.querySelectorAll('#pg-area button').forEach(b => b.style.pointerEvents = 'none'); if (isCorrect) { btn.className = "w-full py-3 px-4 bg-green-100 border-2 border-green-500 rounded-xl font-bold text-left text-green-700"; fb.textContent = "🎉 LUAR BIASA BENAR! Epididimis berfungsi menyimpan sperma hingga matang."; fb.className = "mt-4 font-bold text-center text-sm text-green-600 bg-green-50 p-2 rounded-lg"; } else { btn.className = "w-full py-3 px-4 bg-red-100 border-2 border-red-500 rounded-xl font-bold text-left text-red-700"; fb.textContent = "❌ Masih Salah! Tempat pematangan sperma adalah Epididimis. Testis memproduksi, Vas Deferens menyalurkan."; fb.className = "mt-4 font-bold text-center text-sm text-red-600 bg-red-50 p-2 rounded-lg"; } } // Game 2: Mencocokkan Pasangan Unik/Acak Per Siswa let matchPairs = []; let selected = null; let matchCount = 0; let gameRound = 1; const bankSoalMatch = [ { text: "Testis", category: "Produksi sperma & testosteron" }, { text: "Ovarium", category: "Penghasil ovum & estrogen" }, { text: "Tuba Fallopi", category: "Tempat terjadinya fertilisasi" }, { text: "Rahim (Uterus)", category: "Tempat berkembangnya janin" }, { text: "Skrotum", category: "Mengatur suhu organ testis" } ]; function generateMatchPairs() { let kocok = [...bankSoalMatch].sort(() => Math.random() - 0.5); let dataPilihan = kocok.slice(0, 3); const newPairs = []; dataPilihan.forEach((item, idx) => { const leftId = String.fromCharCode(97 + idx); const rightId = String.fromCharCode(65 + idx); newPairs.push( { id: leftId, text: item.text, match: rightId }, { id: rightId, text: item.category, match: leftId } ); }); return newPairs; } function initMatch() { matchPairs = generateMatchPairs(); const board = document.getElementById('match-board'); board.innerHTML = ''; matchCount = 0; selected = null; const shuffled = matchPairs.sort(() => Math.random() - 0.5); shuffled.forEach(p => { const card = document.createElement('button'); card.className = 'match-card p-3 bg-white border-2 border-gray-200 rounded-xl font-bold text-xs text-center shadow-sm hover:border-rose-400'; card.textContent = p.text; card.dataset.id = p.id; card.dataset.match = p.match; card.addEventListener('click', () => selectCard(card)); board.appendChild(card); }); document.querySelector('[data-template-id="match-title"]').textContent = `🎮 Game 2: Jodohkan Organ (Ronde ${gameRound})`; } function selectCard(card) { if (card.classList.contains('matched')) return; if (selected && selected === card) { selected.classList.remove('selected'); selected = null; return; } if (!selected) { card.classList.add('selected'); selected = card; return; } if (selected.dataset.match === card.dataset.id) { selected.classList.remove('selected'); selected.classList.add('matched'); card.classList.add('matched'); matchCount++; if (matchCount === 3) { const fb = document.getElementById('match-feedback'); fb.textContent = `🏆 Sempurna! Ronde ${gameRound} Selesai. Memuat tantangan organ berikutnya...`; fb.className = 'text-center font-bold text-sm text-green-700 bg-green-50 p-2 rounded-lg mt-4'; fb.classList.remove('hidden'); setTimeout(() => { gameRound++; document.getElementById('match-feedback').classList.add('hidden'); initMatch(); }, 2500); } } else { selected.classList.remove('selected'); card.classList.add('selected'); } selected = card.classList.contains('matched') ? null : card; } initMatch(); // Game 3: Pilihan Ganda Kompleks function cekKompleks() { const checkboxes = document.querySelectorAll('input[name="pk"]'); const fb = document.getElementById('pk-feedback'); fb.classList.remove('hidden'); let dipilih = []; checkboxes.forEach(cb => { if (cb.checked) dipilih.push(cb.value); }); // Jawaban benar adalah A dan C (B salah karena peluruhan dipicu PENURUNAN hormon) const benar = dipilih.includes('A') && dipilih.includes('C') && !dipilihanTerbanyak(dipilih, 'B') && dipilih.length === 2; function dipilihanTerbanyak(arr, val) { return arr.indexOf(val) !== -1; } if (benar) { fb.textContent = "✅ TEPAT SEKALI! Pernyataan A dan C adalah fakta ilmiah yang benar. Pernyataan B salah karena menstruasi terjadi akibat penurunan drastis hormon estrogen & progesteron."; fb.className = "p-3 rounded-lg text-center font-bold text-xs text-green-700 bg-green-50 mt-4 border border-green-200"; } else { fb.textContent = "❌ Jawabanmu Kurang Tepat! Kunci jawaban yang benar adalah A dan C. Coba analisis lagi teori peluruhan dinding endometrium."; fb.className = "p-3 rounded-lg text-center font-bold text-xs text-red-600 bg-red-50 mt-4 border border-red-200"; } } // Papan Sticky Notes Refleksi const colors = ['bg-yellow-100','bg-pink-100','bg-blue-100','bg-green-100']; function addSticky() { const input = document.getElementById('sticky-input'); if (!input.value.trim()) return; const note = document.createElement('div'); note.className = `sticky-note p-3 rounded-xl shadow-sm text-xs font-bold text-slate-800 border ${colors[Math.floor(Math.random()*colors.length)]}`; note.textContent = input.value.trim(); document.getElementById('sticky-board').appendChild(note); input.value = ''; } // Fitur Submit Umpan Balik Guru function submitFeedback() { const text = document.getElementById('feedback-text').value.trim(); if (text) { document.getElementById('feedback-thanks').classList.remove('hidden'); document.getElementById('feedback-text').value = ''; } } </script> </body> </html>

Kelas 8 Matematika

Relasi dan Fungsi

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Petualangan Relasi dan Fungsi</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=DM+Sans:wght@400;500;700&family=Fraunces:wght@700;900&display=swap" rel="stylesheet"> <style> body { font-family: 'DM Sans', sans-serif; background-color: #faf9f6; } .heading-font { font-family: 'Fraunces', serif; } .slide { display: none; } .slide.active { display: flex; } .match-card { transition: all 0.2s; cursor: pointer; } .match-card.selected { transform: scale(1.05); box-shadow: 0 0 0 3px #f59e0b; } .match-card.matched { opacity: 0.5; pointer-events: none; background: #d1fae5 !important; border-color: #34d399 !important; } .sticky-note { animation: popIn 0.3s ease; } @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .nav-btn:disabled { opacity: 0.3; pointer-events: none; } </style> </head> <body class="w-full min-h-screen flex flex-col pb-12">  <nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-white/90 backdrop-blur shadow-sm"> <button class="nav-btn p-2 text-md font-bold text-indigo-600 hover:bg-gray-100 rounded-lg" id="prev-btn" disabled>Kembali</button> <span class="text-sm font-medium text-gray-600" id="slide-counter">1 / 10</span> <button class="nav-btn p-2 text-md font-bold text-indigo-600 hover:bg-gray-100 rounded-lg" id="next-btn">Lanjut</button> </nav> <main class="flex-1 pt-20 pb-4 px-4 w-full max-w-3xl mx-auto">  <section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[70vh]" data-slide="1"> <img data-template-id="hero-img" class="canva-image w-full max-w-md h-48 object-cover rounded-2xl shadow-lg" loading="lazy"> <h1 data-template-id="welcome-title" class="canva-text heading-font text-3xl md:text-5xl font-bold mt-4 text-slate-800"></h1> <p data-template-id="welcome-subtitle" class="canva-text text-lg md:text-xl mt-2 opacity-80 text-slate-600"></p> <button data-template-id="start-btn" class="canva-button mt-6 px-8 py-3 bg-indigo-600 text-white rounded-full text-lg font-bold shadow-lg hover:scale-105 transition-transform" id="start-btn"></button> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="2"> <h2 data-template-id="video-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <div class="w-full aspect-video bg-gray-900 rounded-xl overflow-hidden flex items-center justify-center">  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/Pj1Gg0b0P_Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe> </div> <div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-xl"> <p data-template-id="checkpoint-label" class="canva-text font-bold text-amber-800 mb-2"></p> <p data-template-id="checkpoint-question" class="canva-text text-amber-900 mb-2"></p> <textarea id="checkpoint-answer" class="w-full p-3 border border-amber-200 rounded-lg resize-none h-20 focus:ring-2 focus:ring-amber-400 focus:outline-none bg-white" placeholder="Tulis jawabanmu di sini..."></textarea> <button class="mt-2 px-4 py-2 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Jawaban</button> <p id="checkpoint-feedback" class="hidden mt-2 text-green-700 font-medium">✅ Keren! Hubungan antara kegemaran dan anak itulah yang menjadi jembatan menuju konsep Relasi.</p> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="3"> <h2 data-template-id="fold-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <img data-template-id="fold-img" class="canva-image w-full max-w-sm h-40 object-cover rounded-xl mx-auto shadow-sm" loading="lazy"> <div class="bg-indigo-50 p-4 rounded-xl"> <p data-template-id="fold-instruction" class="canva-text text-indigo-900"></p> </div> <div class="bg-white p-4 rounded-xl border border-slate-200 text-center font-medium"> Contoh Aturan: <span class="text-indigo-600 font-bold">"Golongan Darah Dari"</span><br> Andi → O | Budi → A | Citra → B </div> <label data-template-id="fold-canvas-label" class="canva-text font-medium text-slate-700" for="fold-canvas"></label> <textarea id="fold-canvas" class="w-full p-4 border-2 border-dashed border-indigo-300 rounded-xl h-24 resize-none focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-white" placeholder="Tulis pendapatmu di sini..."></textarea> </section>  <section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="4"> <h2 data-template-id="goals-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <div class="space-y-4 w-full max-w-lg"> <div data-template-id="goal-1" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100"> <span class="text-2xl">🎯</span> <p data-template-id="goal-1-text" class="canva-text text-slate-700"></p> </div> <div data-template-id="goal-2" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100"> <span class="text-2xl">🤝</span> <p data-template-id="goal-2-text" class="canva-text text-slate-700"></p> </div> <div data-template-id="goal-3" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100"> <span class="text-2xl">🧮</span> <p data-template-id="goal-3-text" class="canva-text text-slate-700"></p> </div> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="5"> <h2 data-template-id="concept-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <div class="bg-white p-6 rounded-2xl shadow-md border"> <p class="text-3xl font-bold heading-font mb-2 text-center text-indigo-600">Syarat Penting Kategori Fungsi</p> <p data-template-id="concept-desc" class="canva-text text-gray-600 leading-relaxed"></p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="bg-blue-50 p-4 rounded-xl border border-blue-200"> <p class="font-bold text-lg text-slate-800">Domain (Daerah Asal)</p> <p class="text-sm text-gray-600 mt-1">Himpunan pertama yang anggotanya harus dipasangkan ke daerah kawan.</p> </div> <div class="bg-emerald-50 p-4 rounded-xl border border-emerald-200"> <p class="font-bold text-lg text-slate-800">Kodomain (Daerah Kawan)</p> <p class="text-sm text-gray-600 mt-1">Himpunan kedua yang menjadi tujuan pasangan dari daerah asal.</p> </div> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="6"> <h2 data-template-id="trap-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="bg-red-50 border-2 border-red-200 p-4 rounded-xl text-center"> <p class="text-3xl mb-1">❌ Bukan Fungsi (Hanya Relasi)</p> <p class="font-bold text-red-700 text-sm">Siswa A punya dua makanan favorit, atau Siswa B tidak memilih makanan apapun.</p> <p data-template-id="trap-wrong-label" class="canva-text text-xs text-red-500 mt-1"></p> </div> <div class="bg-green-50 border-2 border-green-200 p-4 rounded-xl text-center"> <p class="text-3xl mb-1">✅ Merupakan Fungsi (Pemetaan)</p> <p class="font-bold text-green-700 text-sm">Semua siswa memilih tepat SATU makanan favorit. Tidak mendua & tidak jomblo.</p> <p data-template-id="trap-right-label" class="canva-text text-xs text-green-500 mt-1"></p> </div> </div> <div class="bg-purple-50 border border-purple-200 p-5 rounded-xl mt-2"> <p data-template-id="poll-question" class="canva-text font-bold text-purple-900 mb-3 text-center"></p> <div class="flex gap-3" id="poll-area"> <button class="flex-1 py-3 bg-white rounded-lg font-bold text-lg border-2 border-purple-300 hover:bg-purple-100 text-purple-700 transition shadow-sm" onclick="answerPoll(true)">A. Fungsi</button> <button class="flex-1 py-3 bg-white rounded-lg font-bold text-lg border-2 border-purple-300 hover:bg-purple-100 text-purple-700 transition shadow-sm" onclick="answerPoll(false)">B. Hanya Relasi</button> </div> <p id="poll-feedback" class="hidden mt-3 font-bold text-center text-lg"></p> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="7"> <h2 data-template-id="match-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <p data-template-id="match-instruction" class="canva-text text-center text-gray-600"></p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="match-board"></div> <p id="match-feedback" class="text-center font-bold text-lg hidden mt-4"></p> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="8"> <h2 data-template-id="quiz-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <div class="space-y-4"> <div class="bg-white p-4 rounded-xl shadow-sm border"> <p class="font-bold text-md mb-2 text-slate-700">1. Diketahui himpunan pasangan berurutan: {(1,a), (2,a), (3,b)}. Apakah ini fungsi? (Ketik: Fungsi / Bukan)</p> <input type="text" id="q1" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-slate-50" placeholder="Jawabanmu..."> </div> <div class="bg-white p-4 rounded-xl shadow-sm border"> <p class="font-bold text-md mb-2 text-slate-700">2. Diketahui himpunan pasangan berurutan: {(1,a), (1,b), (2,c)}. Apakah ini fungsi? (Ketik: Fungsi / Bukan)</p> <input type="text" id="q2" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-slate-50" placeholder="Jawabanmu..."> </div> </div> <button class="mx-auto px-6 py-3 bg-indigo-600 text-white rounded-lg font-bold hover:bg-indigo-700 shadow transition" onclick="checkQuiz()">Periksa Jawaban 🧮</button> <div id="quiz-results" class="hidden space-y-2"></div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="9"> <h2 data-template-id="reflect-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <p data-template-id="reflect-prompt" class="canva-text text-center text-gray-600"></p> <div class="flex gap-2"> <input type="text" id="sticky-input" class="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none bg-white" placeholder="Ketik apa yang kamu pahami hari ini..."> <button class="px-5 py-2 bg-yellow-400 text-yellow-900 rounded-lg font-bold hover:bg-yellow-500 transition shadow-sm" onclick="addSticky()">Tempel 📌</button> </div> <div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[120px] bg-slate-100/60 p-4 rounded-xl border-2 border-dashed border-slate-200"></div> </section>  <section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="10"> <img data-template-id="celebrate-img" class="canva-image w-full max-w-sm h-40 object-cover rounded-xl shadow-sm" loading="lazy"> <h2 data-template-id="feedback-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <p data-template-id="feedback-prompt" class="canva-text text-center text-gray-600"></p> <textarea id="feedback-text" class="w-full max-w-lg p-4 border-2 border-dashed border-pink-300 rounded-xl h-24 resize-none focus:ring-2 focus:ring-pink-400 focus:outline-none bg-white" placeholder="Tulis kritik atau pesan seru untuk gurumu..."></textarea> <button class="px-6 py-3 bg-pink-500 text-white rounded-lg font-bold hover:bg-pink-600 transition shadow animate-pulse" onclick="submitFeedback()">Kirim Masukan 💌</button> <p id="feedback-thanks" class="hidden text-green-600 font-bold text-lg animate-bounce">Terima kasih banyak atas masukan jujurmu! 🎉</p> </section> </main> <script> // DATA TEKS KONTEN MATERI RELASI DAN FUNGSI document.addEventListener("DOMContentLoaded", () => { document.querySelector('[data-template-id="hero-img"]').src = "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=600&q=80"; document.querySelector('[data-template-id="welcome-title"]').textContent = "Petualangan Relasi dan Fungsi"; document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Mari Belajar Membedakan Hubungan Biasa dan Pasangan Setia Matematika!"; document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Petualangan! 🚀"; document.querySelector('[data-template-id="video-title"]').textContent = "1. Tonton Video Relasi Kehidupan Sehari-hari"; document.querySelector('[data-template-id="checkpoint-label"]').textContent = "💡 CHECKPOINT UTAMA"; document.querySelector('[data-template-id="checkpoint-question"]').textContent = "Misalkan ada sekelompok anak dan sekelompok warna. Hubungan 'warna favorit' dari anak ke warna disebut apa?"; document.querySelector('[data-template-id="fold-title"]').textContent = "2. Aturan Menghubungkan Dua Kelompok"; document.querySelector('[data-template-id="fold-img"]').src = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=500&q=80"; document.querySelector('[data-template-id="fold-instruction"]').textContent = "Relasi adalah aturan yang menghubungkan anggota himpunan A ke himpunan B. Aturannya bisa bebas!"; document.querySelector('[data-template-id="fold-canvas-label"]').textContent = "Jika ada anak bernama Dedi yang tidak punya golongan darah (mustahil), apakah aturan itu sah disebut relasi manusia?"; document.querySelector('[data-template-id="goals-title"]').textContent = "Misi Belajar Kita Hari Ini 🎯"; document.querySelector('[data-template-id="goal-1-text"]').textContent = "Memahami pengertian relasi (hubungan) antara dua kelompok berbeda."; document.querySelector('[data-template-id="goal-2-text"]').textContent = "Mengetahui syarat mutlak suatu aturan hubungan bisa naik tingkat menjadi Fungsi."; document.querySelector('[data-template-id="goal-3-text"]').textContent = "Mampu membedakan relasi biasa dan fungsi lewat bentuk pasangan berurutan."; document.querySelector('[data-template-id="concept-title"]').textContent = "3. Apa Syarat Aturan Fungsi?"; document.querySelector('[data-template-id="concept-desc"]').innerHTML = "Fungsi (Pemetaan) adalah relasi khusus yang mensyaratkan **setiap anggota daerah asal (Domain) harus memilih tepat SATU pasangan** di daerah kawan. Anggota Domain TIDAK BOLEH jomblo dan TIDAK BOLEH mendua!"; document.querySelector('[data-template-id="trap-title"]').textContent = "⚠️ Jebakan Domain Mendua atau Jomblo! ⚠️"; document.querySelector('[data-template-id="trap-wrong-label"]').textContent = "Aturannya gagal jadi Fungsi jika ada anggota Domain yang selingkuh/tidak memilih."; document.querySelector('[data-template-id="trap-right-label"]').textContent = "Setia! Semua anggota asal memiliki satu pasangan. Daerah kawan bebas dicabangkan."; document.querySelector('[data-template-id="poll-question"]').textContent = "Kuis Kilat: Jika relasi menghubungkan 'Negara dengan Ibukotanya', apakah aturan ini termasuk fungsi?"; document.querySelector('[data-template-id="match-instruction"]').textContent = "Klik satu kotak diagram relasi, lalu pasangkan dengan jenis kategori yang tepat! (Fungsi atau Hanya Relasi)"; document.querySelector('[data-template-id="quiz-title"]').textContent = "5. Uji Kemampuan Pasangan Berurutan"; document.querySelector('[data-template-id="reflect-title"]').textContent = "6. Mading Refleksi Kelas 📌"; document.querySelector('[data-template-id="reflect-prompt"]').textContent = "Tuliskan satu kata kunci rahasia untuk mengingat syarat sebuah Fungsi agar tidak tertukar lagi dengan relasi biasa!"; document.querySelector('[data-template-id="celebrate-img"]').src = "https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=500&q=80"; document.querySelector('[data-template-id="feedback-title"]').textContent = "Selamat! Semua Misi Pasangan Berhasil Diselesaikan 🎉"; document.querySelector('[data-template-id="feedback-prompt"]').textContent = "Beri tahu gurumu: Apakah konsep Domain, Kodomain, dan Fungsi hari ini sudah jelas dipahami?"; }); // Logika Navigasi Slide let current = 1; const total = 10; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const counter = document.getElementById('slide-counter'); function showSlide(n) { document.querySelectorAll('.slide').forEach(s => s.classList.remove('active')); document.querySelector(`[data-slide="${n}"]`).classList.add('active'); counter.textContent = `${n} / ${total}`; prevBtn.disabled = n === 1; nextBtn.disabled = n === total; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 1) showSlide(--current); }); nextBtn.addEventListener('click', () => { if (current < total) showSlide(++current); }); document.getElementById('start-btn').addEventListener('click', () => showSlide(++current)); // Logika Kuis Pilihan Ganda (Poll) function answerPoll(correct) { const fb = document.getElementById('poll-feedback'); fb.classList.remove('hidden'); if (correct) { fb.textContent = '🎉 BENAR! Karena setiap negara hanya punya tepat SATU ibukota (Setia & Tidak Jomblo).'; fb.className = 'mt-3 font-bold text-center text-lg text-green-700 bg-green-50 p-2 rounded-lg'; } else { fb.textContent = '❌ Masih Salah! Ingat, satu negara tidak mungkin punya 2 ibukota resmi sekaligus. Jadi ini Fungsi.'; fb.className = 'mt-3 font-bold text-center text-lg text-red-600 bg-red-50 p-2 rounded-lg'; } document.getElementById('poll-area').style.pointerEvents = 'none'; } // ==================================================================== // LOGIKA GAME MENCATATAN ACAK: RELASI VS FUNGSI (PER SISWA) // ==================================================================== let matchPairs = []; let selected = null; let matchCount = 0; let gameRound = 1; // Bank data relasi berpasangan unik const bankSoalGame = [ { text: "{(1,x), (2,x), (3,x)}", category: "FUNGSI" }, { text: "{(1,x), (2,y), (3,z)}", category: "FUNGSI" }, { text: "{(A,1), (B,2), (C,3)}", category: "FUNGSI" }, { text: "{(1,x), (1,y), (2,z)}", category: "HANYA RELASI" }, // Angka 1 mendua { text: "{(A,1), (A,2), (B,3)}", category: "HANYA RELASI" }, // Huruf A mendua { text: "{(1,x), (2,y)}", category: "HANYA RELASI" } // Angka 3 jomblo (jika domain 1,2,3) ]; function generateMatchPairs() { // Mengacak bank soal let kocokSoal = [...bankSoalGame].sort(() => Math.random() - 0.5); // Ambil 2 soal berjenis FUNGSI dan 1 HANYA RELASI (atau sebaliknya) let dipilih = kocokSoal.slice(0, 2); const newPairs = []; dipilih.forEach((item, idx) => { const letterLeft = String.fromCharCode(97 + idx); // a, b const letterRight = String.fromCharCode(65 + idx); // A, B newPairs.push( { id: letterLeft, text: item.text, match: letterRight }, { id: letterRight, text: `Tipe: ${item.category}`, match: letterLeft } ); }); return newPairs; } function initMatch() { matchPairs = generateMatchPairs(); const board = document.getElementById('match-board'); board.innerHTML = ''; const shuffled = matchPairs.sort(() => Math.random() - 0.5); shuffled.forEach(p => { const card = document.createElement('button'); card.className = 'match-card p-4 bg-white border-2 border-gray-200 rounded-xl font-bold text-sm text-center shadow-sm hover:border-indigo-400'; card.textContent = p.text; card.dataset.id = p.id; card.dataset.match = p.match; card.addEventListener('click', () => selectCard(card)); board.appendChild(card); }); document.querySelector('[data-template-id="match-title"]').textContent = `4. Game Pasangan Kilat ⚡ (Tantangan Ke-${gameRound})`; } function selectCard(card) { if (card.classList.contains('matched')) return; if (selected && selected === card) { selected.classList.remove('selected'); selected = null; return; } if (!selected) { card.classList.add('selected'); selected = card; return; } if (selected.dataset.match === card.dataset.id) { selected.classList.remove('selected'); selected.classList.add('matched'); card.classList.add('matched'); matchCount++; // Karena kita hanya memunculkan 2 pasang soal per ronde agar ruang muat seimbang if (matchCount === 2) { const fb = document.getElementById('match-feedback'); fb.textContent = `🏆 Keren! Kamu berhasil melewati Tantangan Ke-${gameRound}! Mengacak relasi baru...`; fb.className = 'text-center font-bold text-md text-green-700 mt-4 bg-green-50 p-2 rounded-lg'; fb.classList.remove('hidden'); setTimeout(() => { gameRound++; resetMatch(); }, 2000); } } else { selected.classList.remove('selected'); card.classList.add('selected'); } selected = card.classList.contains('matched') ? null : card; } function resetMatch() { selected = null; matchCount = 0; document.getElementById('match-feedback').classList.add('hidden'); initMatch(); } initMatch(); // Logika Evaluasi Hasil Kuis Isian Singkat function checkQuiz() { const r = document.getElementById('quiz-results'); r.innerHTML = ''; r.classList.remove('hidden'); const a1 = document.getElementById('q1').value.trim().toLowerCase(); const a2 = document.getElementById('q2').value.trim().toLowerCase(); const cek1 = (a1 === 'fungsi'); const cek2 = (a2 === 'bukan' || a2 === 'bukan fungsi'); r.innerHTML = ` <div class="p-4 bg-slate-50 rounded-xl space-y-2 border mt-4 text-sm"> <p class="${cek1?'text-green-700':'text-red-600'} font-bold">${cek1?'✅ Benar!':'❌ Kurang Tepat!'} Soal 1 adalah FUNGSI karena daerah depan (1, 2, 3) tidak mendua.</p> <p class="${cek2?'text-green-700':'text-red-600'} font-bold">${cek2?'✅ Benar!':'❌ Kurang Tepat!'} Soal 2 BUKAN fungsi karena angka 1 selingkuh/muncul dua kali.</p> </div> `; } // Logika Menempel Sticky Notes di Mading const colors = ['bg-yellow-200','bg-pink-200','bg-blue-200','bg-green-200','bg-purple-200']; function addSticky() { const input = document.getElementById('sticky-input'); if (!input.value.trim()) return; const note = document.createElement('div'); note.className = `sticky-note p-4 rounded-xl shadow border border-black/5 text-sm font-bold text-slate-800 ${colors[Math.floor(Math.random()*colors.length)]}`; note.textContent = input.value.trim(); document.getElementById('sticky-board').appendChild(note); input.value = ''; } // Logika Kirim Feedback Evaluasi Masukan Guru function submitFeedback() { const text = document.getElementById('feedback-text').value.trim(); if (text) { document.getElementById('feedback-thanks').classList.remove('hidden'); document.getElementById('feedback-text').value = ''; } } </script> </body> </html>

Kelas 8 Matematika

Bilangan Berpangkat

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Petualangan Bilangan Berpangkat</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=DM+Sans:wght@400;500;700&family=Fraunces:wght@700;900&display=swap" rel="stylesheet"> <style> body { font-family: 'DM Sans', sans-serif; background-color: #faf9f6; } .heading-font { font-family: 'Fraunces', serif; } .slide { display: none; } .slide.active { display: flex; } .match-card { transition: all 0.2s; cursor: pointer; } .match-card.selected { transform: scale(1.05); box-shadow: 0 0 0 3px #f59e0b; } .match-card.matched { opacity: 0.5; pointer-events: none; background: #d1fae5 !important; border-color: #34d399 !important; } .sticky-note { animation: popIn 0.3s ease; } @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .nav-btn:disabled { opacity: 0.3; pointer-events: none; } </style> </head> <body class="w-full min-h-screen flex flex-col pb-12">  <nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-white/90 backdrop-blur shadow-sm"> <button class="nav-btn p-2 rounded-full hover:bg-gray-100" id="prev-btn" disabled> <i data-lucide="chevron-left" style="width:24px;height:24px"></i> </button> <span class="text-sm font-medium text-gray-600" id="slide-counter">1 / 10</span> <button class="nav-btn p-2 rounded-full hover:bg-gray-100" id="next-btn"> <i data-lucide="chevron-right" style="width:24px;height:24px"></i> </button> </nav> <main class="flex-1 pt-20 pb-4 px-4 w-full max-w-3xl mx-auto">  <section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[70vh]" data-slide="1"> <img data-template-id="hero-img" class="canva-image w-full max-w-md h-48 object-cover rounded-2xl shadow-lg" loading="lazy"> <h1 data-template-id="welcome-title" class="canva-text heading-font text-3xl md:text-5xl font-bold mt-4 text-slate-800"></h1> <p data-template-id="welcome-subtitle" class="canva-text text-lg md:text-xl mt-2 opacity-80 text-slate-600"></p> <button data-template-id="start-btn" class="canva-button mt-6 px-8 py-3 bg-amber-500 text-white rounded-full text-lg font-bold shadow-lg hover:scale-105 transition-transform" id="start-btn"></button> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="2"> <h2 data-template-id="video-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <div class="w-full aspect-video bg-gray-900 rounded-xl overflow-hidden flex items-center justify-center"> <iframe width="100%" height="100%" src="http://192.168.1.100//filesharing///////////////////elearning/media/2026/0000183.C__Users_soumena_AppData_Local_edu.ruang.murid_decrypted_9272b5ef9510c946_b8f68198-714e-404f-8aec-38957fffaf6c.mp4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe> </div> <div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-xl"> <p data-template-id="checkpoint-label" class="canva-text font-bold text-amber-800 mb-2"></p> <p data-template-id="checkpoint-question" class="canva-text text-amber-900 mb-2"></p> <textarea id="checkpoint-answer" class="w-full p-3 border border-amber-200 rounded-lg resize-none h-20 focus:ring-2 focus:ring-amber-400 focus:outline-none bg-white" placeholder="Tulis jawabanmu di sini..."></textarea> <button class="mt-2 px-4 py-2 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Jawaban</button> <p id="checkpoint-feedback" class="hidden mt-2 text-green-700 font-medium">✅ Hebat! Perkalian berulang itulah yang disebut bilangan berpangkat!</p> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="3"> <h2 data-template-id="fold-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <img data-template-id="fold-img" class="canva-image w-full max-w-sm h-40 object-cover rounded-xl mx-auto shadow-sm" loading="lazy"> <div class="bg-indigo-50 p-4 rounded-xl"> <p data-template-id="fold-instruction" class="canva-text text-indigo-900"></p> </div> <div class="flex items-center gap-3 text-xl font-bold text-center justify-center flex-wrap text-indigo-950"> <span class="bg-white px-4 py-2 rounded-lg shadow-sm border border-indigo-100">1 lipat → 2</span> <span class="bg-white px-4 py-2 rounded-lg shadow-sm border border-indigo-100">2 lipat → 4</span> <span class="bg-white px-4 py-2 rounded-lg shadow-sm border border-indigo-100">3 lipat → 8</span> <span class="bg-white px-4 py-2 rounded-lg shadow-sm border border-indigo-100 bg-amber-50 border-amber-200">4 lipat → ?</span> </div> <label data-template-id="fold-canvas-label" class="canva-text font-medium text-slate-700" for="fold-canvas"></label> <textarea id="fold-canvas" class="w-full p-4 border-2 border-dashed border-indigo-300 rounded-xl h-24 resize-none focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-white" placeholder="Tulis pengamatanmu di sini..."></textarea> </section>  <section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="4"> <h2 data-template-id="goals-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <div class="space-y-4 w-full max-w-lg"> <div data-template-id="goal-1" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100"> <span class="text-2xl">🎯</span> <p data-template-id="goal-1-text" class="canva-text text-slate-700"></p> </div> <div data-template-id="goal-2" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100"> <span class="text-2xl">✍️</span> <p data-template-id="goal-2-text" class="canva-text text-slate-700"></p> </div> <div data-template-id="goal-3" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100"> <span class="text-2xl">🧮</span> <p data-template-id="goal-3-text" class="canva-text text-slate-700"></p> </div> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="5"> <h2 data-template-id="concept-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <div class="bg-white p-6 rounded-2xl shadow-md border text-center"> <p class="text-6xl font-bold heading-font mb-2 text-indigo-600">a<sup>n</sup></p> <p data-template-id="concept-desc" class="canva-text text-gray-600 leading-relaxed"></p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="bg-emerald-50 p-4 rounded-xl border border-emerald-200"> <p class="font-bold text-lg text-slate-800">4² = 4 × 4 = <span class="text-emerald-700 text-2xl font-extrabold">16</span></p> <p class="text-sm text-gray-500 mt-1">→ perkalian angka 4 sebanyak 2 kali</p> </div> <div class="bg-blue-50 p-4 rounded-xl border border-blue-200"> <p class="font-bold text-lg text-slate-800">2³ = 2 × 2 × 2 = <span class="text-blue-700 text-2xl font-extrabold">8</span></p> <p class="text-sm text-gray-500 mt-1">→ perkalian angka 2 sebanyak 3 kali</p> </div> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="6"> <h2 data-template-id="trap-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="bg-red-50 border-2 border-red-200 p-4 rounded-xl text-center"> <p class="text-3xl mb-1">❌</p> <p class="font-bold text-red-700 text-xl">3² = 3 × 2 = 6</p> <p data-template-id="trap-wrong-label" class="canva-text text-sm text-red-500 mt-1"></p> </div> <div class="bg-green-50 border-2 border-green-200 p-4 rounded-xl text-center"> <p class="text-3xl mb-1">✅</p> <p class="font-bold text-green-700 text-xl">3² = 3 × 3 = 9</p> <p data-template-id="trap-right-label" class="canva-text text-sm text-green-500 mt-1"></p> </div> </div> <div class="bg-purple-50 border border-purple-200 p-5 rounded-xl mt-2"> <p data-template-id="poll-question" class="canva-text font-bold text-purple-900 mb-3 text-center"></p> <div class="flex gap-3" id="poll-area"> <button class="flex-1 py-3 bg-white rounded-lg font-bold text-lg border-2 border-purple-300 hover:bg-purple-100 text-purple-700 transition shadow-sm" onclick="answerPoll(false)">A. 10</button> <button class="flex-1 py-3 bg-white rounded-lg font-bold text-lg border-2 border-purple-300 hover:bg-purple-100 text-purple-700 transition shadow-sm" onclick="answerPoll(true)">B. 25</button> </div> <p id="poll-feedback" class="hidden mt-3 font-bold text-center text-lg"></p> </div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="7"> <h2 data-template-id="match-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <p data-template-id="match-instruction" class="canva-text text-center text-gray-600"></p> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3" id="match-board"></div> <p id="match-feedback" class="text-center font-bold text-lg hidden mt-4"></p> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="8"> <h2 data-template-id="quiz-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2> <div class="space-y-4"> <div class="bg-white p-4 rounded-xl shadow-sm border"> <p class="font-bold text-lg mb-2 text-slate-700">1. Berapa hasil akhir dari 6² ?</p> <input type="number" id="q1" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-slate-50" placeholder="Tulis jawaban angka"> </div> <div class="bg-white p-4 rounded-xl shadow-sm border"> <p class="font-bold text-lg mb-2 text-slate-700">2. Berapa hasil akhir dari 2⁵ ?</p> <input type="number" id="q2" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-slate-50" placeholder="Tulis jawaban angka"> </div> </div> <button class="mx-auto px-6 py-3 bg-indigo-600 text-white rounded-lg font-bold hover:bg-indigo-700 shadow transition" onclick="checkQuiz()">Periksa Jawaban 🧮</button> <div id="quiz-results" class="hidden space-y-2"></div> </section>  <section class="slide flex-col gap-6 min-h-[70vh]" data-slide="9"> <h2 data-template-id="reflect-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <p data-template-id="reflect-prompt" class="canva-text text-center text-gray-600"></p> <div class="flex gap-2"> <input type="text" id="sticky-input" class="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none bg-white" placeholder="Ketik apa yang kamu pahami hari ini..."> <button class="px-5 py-2 bg-yellow-400 text-yellow-900 rounded-lg font-bold hover:bg-yellow-500 transition shadow-sm" onclick="addSticky()">Tempel 📌</button> </div> <div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[120px] bg-slate-100/60 p-4 rounded-xl border-2 border-dashed border-slate-200"></div> </section>  <section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="10"> <img data-template-id="celebrate-img" class="canva-image w-full max-w-sm h-40 object-cover rounded-xl shadow-sm" loading="lazy"> <h2 data-template-id="feedback-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2> <p data-template-id="feedback-prompt" class="canva-text text-center text-gray-600"></p> <textarea id="feedback-text" class="w-full max-w-lg p-4 border-2 border-dashed border-pink-300 rounded-xl h-24 resize-none focus:ring-2 focus:ring-pink-400 focus:outline-none bg-white" placeholder="Tulis kritik atau pesan seru untuk gurumu..."></textarea> <button class="px-6 py-3 bg-pink-500 text-white rounded-lg font-bold hover:bg-pink-600 transition shadow animate-pulse" onclick="submitFeedback()">Kirim Masukan 💌</button> <p id="feedback-thanks" class="hidden text-green-600 font-bold text-lg animate-bounce">Terima kasih banyak atas masukan jujurmu! 🎉</p> </section> </main> <script> // DATA TEKS KONTEN OTOMATIS document.addEventListener("DOMContentLoaded", () => { document.querySelector('[data-template-id="hero-img"]').src = "https://images.unsplash.com/photo-1509228468518-180dd4864904?w=600&q=80"; document.querySelector('[data-template-id="welcome-title"]').textContent = "Petualangan Bilangan Berpangkat"; document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Siap Menghancurkan Miskonsepsi Perkalian Berulang Bersama-sama?"; document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Petualangan! 🚀"; document.querySelector('[data-template-id="video-title"]').textContent = "1. Tonton Video Pengantar Ini"; document.querySelector('[data-template-id="checkpoint-label"]').textContent = "💡 CHECKPOINT UTAMA"; document.querySelector('[data-template-id="checkpoint-question"]').textContent = "Jika penjumlahan berulang menghasilkan perkalian biasa (2+2+2 = 3×2), menurutmu apakah yang dimaksud perkalian berulang (2×2×2)?"; document.querySelector('[data-template-id="fold-title"]').textContent = "2. Eksperimen Kertas Nyata"; document.querySelector('[data-template-id="fold-img"]').src = "https://images.unsplash.com/photo-1518895949257-7621c3c786d7?w=500&q=80"; document.querySelector('[data-template-id="fold-instruction"]').textContent = "Ambil kertas di mejamu lalu lipat dua secara terus-menerus. Perhatikan jumlah kotak terkecil yang terbentuk!"; document.querySelector('[data-template-id="fold-canvas-label"]').textContent = "Apakah jumlah luas kotaknya bertambah sedikit demi sedikit atau melompat berlipat ganda?"; document.querySelector('[data-template-id="goals-title"]').textContent = "Misi Belajar Kita Hari Ini 🎯"; document.querySelector('[data-template-id="goal-1-text"]').textContent = "Menemukan arti asli bilangan berpangkat lewat pembuktian kotak lipat kertas."; document.querySelector('[data-template-id="goal-2-text"]').textContent = "Mahir meringkas deretan perkalian yang panjang menjadi simbol matematika singkat."; document.querySelector('[data-template-id="goal-3-text"]').textContent = "Mampu menghitung hasil kuadrat tanpa terkecoh mengalikannya dengan angka basis pangkat."; document.querySelector('[data-template-id="concept-title"]').textContent = "3. Pahami Simbol Dasar Ini"; document.querySelector('[data-template-id="concept-desc"]').innerHTML = "Dalam simbol di atas, huruf <b>a</b> melambangkan <b>Bilangan Pokok</b> (angka dasar), sedangkan huruf <b>n</b> melambangkan <b>Eksponen</b> (jumlah berapa kali angka tersebut dikalikan berulang)."; document.querySelector('[data-template-id="trap-title"]').textContent = "⚠️ Awas Terjebak Miskonsepsi Rumah! ⚠️"; document.querySelector('[data-template-id="trap-wrong-label"]').textContent = "Kesalahan Fatal! Jangan pernah mengalikan langsung angka besar dengan pangkat kecilnya."; document.querySelector('[data-template-id="trap-right-label"]').textContent = "Konsep Tepat! Angka dikalikan berulang secara mandiri dengan dirinya sendiri."; document.querySelector('[data-template-id="poll-question"]').textContent = "Kuis Kilat: Menurut pemahaman barumu, berapakah nilai dari 5²?"; document.querySelector('[data-template-id="match-instruction"]').textContent = "Klik satu kotak bentuk panjang lalu segera cari kotak bentuk pangkat ringkasnya yang sesuai!"; document.querySelector('[data-template-id="quiz-title"]').textContent = "5. Uji Kemampuan Mandiri"; document.querySelector('[data-template-id="reflect-title"]').textContent = "6. Mading Refleksi Kelas 📌"; document.querySelector('[data-template-id="reflect-prompt"]').textContent = "Tuliskan satu pemahaman penting atau trik menghindari salah hitung pangkat yang kamu dapatkan hari ini!"; document.querySelector('[data-template-id="celebrate-img"]').src = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=500&q=80"; document.querySelector('[data-template-id="feedback-title"]').textContent = "Selamat! Semua Misi Selesai Telah Dilewati 🎉"; document.querySelector('[data-template-id="feedback-prompt"]').textContent = "Beri tahu gurumu: Apakah pembelajaran hari ini seru? Bagian mana yang perlu diulang pelan-pelan?"; }); // Logika Navigasi Slide let current = 1; const total = 10; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const counter = document.getElementById('slide-counter'); function showSlide(n) { document.querySelectorAll('.slide').forEach(s => s.classList.remove('active')); document.querySelector(`[data-slide="${n}"]`).classList.add('active'); counter.textContent = `${n} / ${total}`; prevBtn.disabled = n === 1; nextBtn.disabled = n === total; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 1) showSlide(--current); }); nextBtn.addEventListener('click', () => { if (current < total) showSlide(++current); }); document.getElementById('start-btn').addEventListener('click', () => showSlide(++current)); // Logika Kuis Pilihan Ganda (Poll) function answerPoll(correct) { const fb = document.getElementById('poll-feedback'); fb.classList.remove('hidden'); if (correct) { fb.textContent = '🎉 BENAR LUAR BIASA! 5² = 5 × 5 = 25'; fb.className = 'mt-3 font-bold text-center text-lg text-green-700 bg-green-50 p-2 rounded-lg'; } else { fb.textContent = '❌ Masih Kurang Tepat! Ingat, 5² = 5 × 5, bukan 5 × 2. Jawaban asli yang benar adalah 25!'; fb.className = 'mt-3 font-bold text-center text-lg text-red-600 bg-red-50 p-2 rounded-lg'; } document.getElementById('poll-area').style.pointerEvents = 'none'; } // ==================================================================== // LOGIKA GAME MENCATATAN ACAK PER SISWA & LANJUT OTOMATIS // ==================================================================== let matchPairs = []; let selected = null; let matchCount = 0; let gameRound = 1; const poolAngkaDasar = [2, 3, 4, 5, 6, 7, 8, 9]; function generateMatchPairs() { let kocokAngka = [...poolAngkaDasar].sort(() => Math.random() - 0.5); const bases = kocokAngka.slice(0, 3); const newPairs = []; bases.forEach((base, idx) => { const exp = Math.floor(Math.random() * 3) + 2; const letter = String.fromCharCode(97 + idx); const letterUpper = letter.toUpperCase(); let expanded = ''; for (let i = 0; i < exp; i++) { if (i > 0) expanded += ' × '; expanded += base; } const exponentForm = base + exp.toString().split('').map(d => '⁰¹²³⁴⁵⁶⁷⁸⁹'[d]).join(''); newPairs.push( { id: letter, text: expanded, match: letterUpper }, { id: letterUpper, text: exponentForm, match: letter } ); }); return newPairs; } function initMatch() { matchPairs = generateMatchPairs(); const board = document.getElementById('match-board'); board.innerHTML = ''; const shuffled = matchPairs.sort(() => Math.random() - 0.5); shuffled.forEach(p => { const card = document.createElement('button'); card.className = 'match-card p-4 bg-white border-2 border-gray-200 rounded-xl font-bold text-lg text-center shadow-sm hover:border-indigo-400'; card.textContent = p.text; card.dataset.id = p.id; card.dataset.match = p.match; card.addEventListener('click', () => selectCard(card)); board.appendChild(card); }); document.querySelector('[data-template-id="match-title"]').textContent = `4. Game Pasangan Kilat ⚡ (Tantangan Ke-${gameRound})`; } function selectCard(card) { if (card.classList.contains('matched')) return; if (selected && selected === card) { selected.classList.remove('selected'); selected = null; return; } if (!selected) { card.classList.add('selected'); selected = card; return; } if (selected.dataset.match === card.dataset.id) { selected.classList.remove('selected'); selected.classList.add('matched'); card.classList.add('matched'); matchCount++; if (matchCount === 3) { const fb = document.getElementById('match-feedback'); fb.textContent = `🏆 Hebat! Kamu menyelesaikan Tantangan Ke-${gameRound}! Mengacak soal berikutnya...`; fb.className = 'text-center font-bold text-lg text-green-700 mt-4 bg-green-50 p-2 rounded-lg'; fb.classList.remove('hidden'); setTimeout(() => { gameRound++; resetMatch(); }, 2000); } } else { selected.classList.remove('selected'); card.classList.add('selected'); } selected = card.classList.contains('matched') ? null : card; } function resetMatch() { selected = null; matchCount = 0; document.getElementById('match-feedback').classList.add('hidden'); initMatch(); } initMatch(); // Logika Evaluasi Hasil Jawaban Singkat function checkQuiz() { const r = document.getElementById('quiz-results'); r.innerHTML = ''; r.classList.remove('hidden'); const a1 = document.getElementById('q1').value.trim(); const a2 = document.getElementById('q2').value.trim(); r.innerHTML = ` <div class="p-4 bg-slate-50 rounded-xl space-y-2 border mt-4"> <p class="${a1==='36'?'text-green-700':'text-red-600'} font-bold text-lg">${a1==='36'?'✅ Benar!':'❌ Kurang Tepat!'} 6² = 36 ${a1!=='36'?'(Jawabanmu: '+a1+')':''}</p> <p class="${a2==='32'?'text-green-700':'text-red-600'} font-bold text-lg">${a2==='32'?'✅ Benar!':'❌ Kurang Tepat!'} 2⁵ = 32 ${a2!=='32'?'(Jawabanmu: '+a2+')':''}</p> </div> `; } // Logika Menempel Sticky Notes di Mading const colors = ['bg-yellow-200','bg-pink-200','bg-blue-200','bg-green-200','bg-purple-200']; function addSticky() { const input = document.getElementById('sticky-input'); if (!input.value.trim()) return; const note = document.createElement('div'); note.className = `sticky-note p-4 rounded-xl shadow border border-black/5 text-sm font-bold text-slate-800 ${colors[Math.floor(Math.random()*colors.length)]}`; note.textContent = input.value.trim(); document.getElementById('sticky-board').appendChild(note); input.value = ''; } // Logika Kirim Feedback Evaluasi Masukan Guru function submitFeedback() { const text = document.getElementById('feedback-text').value.trim(); if (text) { document.getElementById('feedback-thanks').classList.remove('hidden'); document.getElementById('feedback-text').value = ''; } } lucide.createIcons(); </script> </body> </html>

1 2 3 4 5 6 7 8

📊 Papan Nilai & Aktivitas Kelas

Nama Siswa	Materi Pelajaran	Hasil Skor	Tingkat Paham	Hambatan Belajar	Strategi Tindakan
Rifka Tunnisa Tunny	Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8	100	100%	Refleksi Penyebaran Data: Misi Selesai!	Evaluasi: Ukuran Penyebaran & Perubahan Data
Rifka Tunnisa Tunny	Statistika : Misi Statistika Part1 Matematika — Kelas 8	100	100%	Refleksi Statistika: Misi Selesai!	Evaluasi Individu: Statistika Dasar
Rifka Tunnisa Tunny	Teorema Pythagoras : Jenis Segitiga & Pythagoras Matematika — Kelas 8	100	100%	Refleksi Jenis Segitiga: Misi Selesai!	Evaluasi: Jenis Sudut pada Segitiga
Rifka Tunnisa Tunny	Teorema Pythagoras : Misteri Teorema Pythagoras 📐 Matematika — Kelas 8	100	100%	Refleksi Pythagoras: Misi Pythagoras Selesai!	Evaluasi: Pembuktian & Tripel Pythagoras
alfiansyah mahulauw	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
jidan wabula	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
indri selly	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	75%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
asi komala tunny	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
JENITA	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	60	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
PUTRI MAHULAUW	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
JAHIRA SOUMENA	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
ilham fajar sely	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	0	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
ABDUL ISHAK MARASABESSY	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
PUTRI MAHULAUW	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
maulana salong	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	75%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
jidan wabula	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
TIARA wally	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
DINIARTY KHAILA ANG	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
syafril umar dani wael	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
PANDI AZIZ SOUMENA	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	60	75%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
FAJRUL AUFAR MAASILY	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
rahmat salong	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
alda risma rering	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
fadlan soulisa	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
muhammad barru soulisa	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	75%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
refan mahulauw	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	60	75%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
muhamad baru soulisa	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	40	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
syafril uamr dani wael	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	40	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
alfiansyah mahulauw	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	60	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
mega desfiona	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
hawa nurfa dila kiat	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	60	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
julia ramadany pirasou	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
rahima soumena	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
madania mana anu	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	60	75%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
fadil tomia	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	60	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
ilham ulukapy	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
syarlan soumena	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
Jelita Apriliani Soulisa	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
Rifka Tunnisa Tunny	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
ismail assel	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
asirnats	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	0	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
sry yulianty pirasou	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
Muhammad Adlan Salaputa	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
wa putri	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
rafa mahulauw	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
alpian marinda	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	40	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
irwan pawae	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
syahad jumu	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	100	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
banni syafira assel	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	80	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual
niki mauluda	Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8	20	100%	Refleksi Misi Puncak: Misi Puncak Selesai!	Evaluasi Part 3: Operasi Akar & Masalah Kontekstual