Ruang Belajar Siswa - SMPN 72 MALUKU TENGAH

Pilih Berdasarkan Kelas:

Semua Kelas Kelas 7 Kelas 8 Kelas 9

Pilih Berdasarkan Mata Pelajaran:

Semua Mapel Bahasa Indonesia Games IPA Matematika MPLS PPKN SSK

📂 Pilih Materi Pelajaran Belajar

Kelas 8 Bahasa Indonesia

Mengolah Teks Laporan Hasil Observasi

Kelas 8 Matematika

Persamaan dan Pertidaksamaan Linear Satu Variabel

<!doctype html> <html lang="id"> <head> <script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script> <script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media Pembelajaran PLSV dan PtLSV</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;900&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <style> * { font-family: 'DM Sans', sans-serif; } body { background-color: #111827; color: #f9fafb; } .slide { display: none; } .slide.active { display: flex; } .quiz-option { transition: all 0.3s; cursor: pointer; } .quiz-option.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; } .quiz-option.wrong { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; } .quiz-option.show-correct { border: 3px solid #22c55e !important; background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; } .quiz-option:disabled { cursor: not-allowed; opacity: 0.8; } .num-circle { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; } .feedback-box { padding: 12px 16px; border-radius: 8px; margin-top: 12px; font-weight: 500; display: none; } .feedback-box.show { display: block; } input[type="number"], textarea { color: white; background-color: #374151; } </style> </head> <body data-template-id="__page-root" class="min-h-screen flex flex-col bg-gray-900 text-white"> <header data-template-id="header-bg" class="canva-header px-4 py-3 flex items-center justify-between shadow-lg bg-gray-800"> <div class="flex items-center gap-3"> <span class="text-2xl">⚖️</span> <h1 data-template-id="app-title" class="canva-text text-lg font-bold text-white">PLSV & PtLSV</h1> </div> <div class="flex items-center gap-2"> <span id="slide-counter" class="text-gray-300 text-sm font-medium">1 / 24</span> </div> </header> <div class="w-full h-1.5 bg-gray-700"> <div id="progress-bar" class="h-full bg-yellow-400 transition-all duration-300" style="width:4%"></div> </div> <main class="flex-1 overflow-y-auto" id="slides-container">  <div class="slide active flex-col items-center justify-center text-center p-6 gap-4" data-slide="1"> <div class="text-7xl mb-2">⚖️</div> <h2 data-template-id="cover-title" class="canva-text text-3xl font-black text-white">Persamaan & Pertidaksamaan</h2> <p data-template-id="cover-subtitle" class="canva-text text-lg text-gray-300">Linear Satu Variabel</p> <p data-template-id="cover-class" class="canva-text text-sm text-gray-400">Matematika SMP</p> </div>  <div class="slide flex-col p-5 gap-3" data-slide="2"> <h2 data-template-id="tp-title" class="canva-text text-xl font-bold mb-2 text-white">Tujuan Pembelajaran</h2> <div class="space-y-3"> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">1</span> <p data-template-id="tp-1" class="canva-text text-sm text-gray-200 mt-1">Membedakan kalimat terbuka dan tertutup.</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">2</span> <p data-template-id="tp-2" class="canva-text text-sm text-gray-200 mt-1">Membuat model matematika dari masalah kontekstual.</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">3</span> <p data-template-id="tp-3" class="canva-text text-sm text-gray-200 mt-1">Menyelesaikan Persamaan Linear Satu Variabel (PLSV).</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">4</span> <p data-template-id="tp-4" class="canva-text text-sm text-gray-200 mt-1">Menyelesaikan Pertidaksamaan Linear Satu Variabel (PtLSV).</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">5</span> <p data-template-id="tp-5" class="canva-text text-sm text-gray-200 mt-1">Memecahkan masalah sehari-hari menggunakan PLSV dan PtLSV.</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="3"> <h2 data-template-id="aper-title" class="canva-text text-xl font-bold text-white">Apersepsi</h2> <img data-template-id="aper-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy"> <p data-template-id="aper-question" class="canva-text text-base leading-relaxed text-gray-200"></p> <div class="bg-gray-800 p-4 rounded-xl border border-gray-700"> <p data-template-id="aper-hint" class="canva-text text-sm italic text-gray-300"></p> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="4"> <h2 data-template-id="aper2-title" class="canva-text text-lg font-bold text-white"></h2> <img data-template-id="aper2-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy"> <p data-template-id="aper2-question" class="canva-text text-base text-gray-200"></p> </div>  <div class="slide flex-col p-5 gap-4" data-slide="5"> <h2 data-template-id="pretest-title" class="canva-text text-xl font-bold text-white">Asesmen Awal</h2> <p data-template-id="pretest-desc" class="canva-text text-sm text-gray-400">Mari kita uji pengetahuan awalmu!</p> <div class="space-y-3" id="pretest-q1"> <p class="font-medium text-white text-sm">1. Manakah yang termasuk kalimat terbuka?</p> <div class="grid grid-cols-1 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','a',true)">x + 3 = 7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','b',false)">2 + 3 = 5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','c',false)">4 > 2</button> </div> <div class="feedback-box" id="pretest-q1-feedback"></div> </div> <div class="space-y-3" id="pretest-q2"> <p class="font-medium text-white text-sm">2. Nilai x dari x + 5 = 8 adalah... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','2',false)">2</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','3',true)">3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','5',false)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','13',false)">13</button> </div> <div class="feedback-box" id="pretest-q2-feedback"></div> </div> <div class="space-y-3" id="pretest-q3"> <p class="font-medium text-white text-sm">3. Tanda yang tepat untuk pertidaksamaan: x ... 5</p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','=',false)">=</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','<',true)"><, >, ≤, ≥</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','+',false)">+</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','×',false)">×</button> </div> <div class="feedback-box" id="pretest-q3-feedback"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="6"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1</div> <h2 data-template-id="tp1-title" class="canva-text text-xl font-bold text-white">Kalimat Terbuka & Tertutup</h2> <p data-template-id="tp1-intro" class="canva-text text-base leading-relaxed text-gray-300"></p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <div class="bg-blue-900/30 border border-blue-700/50 p-3 rounded-lg"> <p class="font-bold text-blue-300 text-sm">Kalimat Terbuka</p> <p class="text-blue-100 text-xs mt-1">Kalimat yang memuat variabel dan belum diketahui nilai kebenarannya.</p> <p class="text-blue-400 text-xs mt-1">Contoh: x + 2 = 5, y > 3</p> </div> <div class="bg-green-900/30 border border-green-700/50 p-3 rounded-lg"> <p class="font-bold text-green-300 text-sm">Kalimat Tertutup</p> <p class="text-green-100 text-xs mt-1">Kalimat yang sudah jelas benar atau salah.</p> <p class="text-green-400 text-xs mt-1">Contoh: 3 + 4 = 7 (benar), 5 > 8 (salah)</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="7"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1 - Aktivitas</div> <h2 data-template-id="tp1-act-title" class="canva-text text-lg font-bold text-white">Latihan Mandiri</h2> <p data-template-id="tp1-act-desc" class="canva-text text-sm text-gray-300"></p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Kelompokkan kalimat berikut! Ketuk T (Terbuka) atau U (Tertutup)</p> <div class="space-y-2" id="tp1-activity"> <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="terbuka"> <span class="font-bold text-gray-100 text-sm">2x - 1 = 9</span> <div class="flex gap-2"> <button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button> <button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button> </div> </div> <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="tertutup"> <span class="font-bold text-gray-100 text-sm">8 + 2 = 10</span> <div class="flex gap-2"> <button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button> <button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button> </div> </div> <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="terbuka"> <span class="font-bold text-gray-100 text-sm">y + 4 > 10</span> <div class="flex gap-2"> <button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button> <button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button> </div> </div> <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="tertutup"> <span class="font-bold text-gray-100 text-sm">7 - 3 = 5</span> <div class="flex gap-2"> <button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button> <button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button> </div> </div> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="8"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 1</div> <h2 data-template-id="quiz1-title" class="canva-text text-lg font-bold text-white">Kuis Kalimat Terbuka</h2> <div id="quiz1-container"> <div class="space-y-3" id="quiz1-q1"> <p class="font-medium text-white text-sm">1. Manakah kalimat terbuka?</p> <div class="grid grid-cols-1 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','a',false)">3 + 5 = 8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','b',true)">3x + 1 = 7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','c',false)">10 > 9</button> </div> <div class="feedback-box" id="quiz1-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz1-q2"> <p class="font-medium text-white text-sm">2. "4 + 6 = 10" termasuk kalimat... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q2','terbuka',false)">Terbuka</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q2','tertutup',true)">Tertutup</button> </div> <div class="feedback-box" id="quiz1-q2-feedback"></div> </div> </div> <div id="quiz1-random" class="mt-4"></div> <button id="quiz1-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz1')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="9"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2</div> <h2 data-template-id="tp2-title" class="canva-text text-xl font-bold text-white">Memodelkan Masalah</h2> <p data-template-id="tp2-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 font-bold text-sm">Contoh:</p> <div class="bg-yellow-900/30 border border-yellow-700/50 p-3 rounded-lg"> <p class="text-gray-200 text-sm">"Rina membeli 3 buku dengan harga yang sama. Total Rp45.000." </p> <p class="text-yellow-400 text-xs mt-1">→ Model: <strong>3x = 45.000</strong></p> </div> <div class="bg-orange-900/30 border border-orange-700/50 p-3 rounded-lg"> <p class="text-gray-200 text-sm">"Uang Budi ditambah Rp5.000 menjadi lebih dari Rp20.000." </p> <p class="text-orange-400 text-xs mt-1">→ Model: <strong>x + 5.000 > 20.000</strong></p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="10"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2 - Aktivitas</div> <h2 data-template-id="tp2-act-title" class="canva-text text-lg font-bold text-white">Susun Model</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Cocokkan cerita dengan model matematikanya!</p> <div class="space-y-2" id="tp2-activity"> <div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="model-q1"> <p class="text-gray-100 text-sm mb-2">"Umur Ani 5 tahun lebih tua dari Budi. Umur Ani 17 tahun." </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q1','a',true)">x + 5 = 17</button> <button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q1','b',false)">x - 5 = 17</button> </div> <div class="feedback-box text-xs" id="model-q1-feedback"></div> </div> <div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="model-q2"> <p class="text-gray-100 text-sm mb-2">"Dua kali uang saku Doni kurang dari Rp30.000"</p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q2','a',false)">2x = 30.000</button> <button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q2','b',true)">2x < 30.000</button> </div> <div class="feedback-box text-xs" id="model-q2-feedback"></div> </div> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="11"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 2</div> <h2 data-template-id="quiz2-title" class="canva-text text-lg font-bold text-white">Kuis Model Matematika</h2> <div id="quiz2-container"> <div class="space-y-3" id="quiz2-q1"> <p class="font-medium text-white text-sm">1. "Harga 4 pensil sama dengan Rp12.000" → Model?</p> <div class="grid grid-cols-1 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','a',true)">4x = 12.000</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','b',false)">x + 4 = 12.000</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','c',false)">4 + x = 12.000</button> </div> <div class="feedback-box" id="quiz2-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz2-q2"> <p class="font-medium text-white text-sm">2. "Uang Sari ditambah Rp10.000 paling banyak Rp50.000" → Model?</p> <div class="grid grid-cols-1 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','a',false)">x + 10.000 > 50.000</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','b',true)">x + 10.000 ≤ 50.000</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','c',false)">x + 10.000 = 50.000</button> </div> <div class="feedback-box" id="quiz2-q2-feedback"></div> </div> </div> <div id="quiz2-random" class="mt-4"></div> <button id="quiz2-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz2')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="12"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3</div> <h2 data-template-id="tp3-title" class="canva-text text-xl font-bold text-white">Penyelesaian PLSV</h2> <p data-template-id="tp3-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 font-bold text-sm">Langkah Penyelesaian:</p> <div class="space-y-2 text-sm text-gray-400"> <p>Selesaikan: <strong>2x + 3 = 11</strong></p> <p>1️⃣ 2x + 3 - 3 = 11 - 3</p> <p>2️⃣ 2x = 8</p> <p>3️⃣ x = 8 ÷ 2 = <strong class="text-white">4</strong> ✓</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="13"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3 - Aktivitas</div> <h2 data-template-id="tp3-act-title" class="canva-text text-lg font-bold text-white">Latihan PLSV</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Selesaikan: 3x - 6 = 12</p> <div class="space-y-2"> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>3x = 12 + 6 =</span> <input type="number" id="plsv-step1" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?"> </div> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>x = 18 ÷ 3 =</span> <input type="number" id="plsv-step2" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?"> </div> </div> <button onclick="checkPLSV()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button> <div id="plsv-feedback" class="feedback-box"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="14"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 3</div> <h2 data-template-id="quiz3-title" class="canva-text text-lg font-bold text-white">Kuis PLSV</h2> <div id="quiz3-container"> <div class="space-y-3" id="quiz3-q1"> <p class="font-medium text-white text-sm">1. Penyelesaian dari 4x + 2 = 18 adalah... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','3',false)">x = 3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','4',true)">x = 4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','5',false)">x = 5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','6',false)">x = 6</button> </div> <div class="feedback-box" id="quiz3-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz3-q2"> <p class="font-medium text-white text-sm">2. Penyelesaian dari 5x - 10 = 25 adalah... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','5',false)">x = 5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','7',true)">x = 7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','3',false)">x = 3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','8',false)">x = 8</button> </div> <div class="feedback-box" id="quiz3-q2-feedback"></div> </div> </div> <div id="quiz3-random" class="mt-4"></div> <button id="quiz3-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz3')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="15"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4</div> <h2 data-template-id="tp4-title" class="canva-text text-xl font-bold text-white">Penyelesaian PtLSV</h2> <p data-template-id="tp4-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 font-bold text-sm">Langkah Penyelesaian:</p> <div class="space-y-2 text-sm text-gray-400"> <p>Selesaikan: <strong class="text-white">2x + 1 < 9</strong></p> <p>1️⃣ 2x < 9 - 1</p> <p>2️⃣ 2x < 8</p> <p>3️⃣ x < 4</p> <p class="text-xs text-gray-500">Himpunan penyelesaian: {x | x < 4, x ∈ R}</p> </div> <div class="bg-red-900/30 border border-red-700/50 p-3 rounded-lg mt-2"> <p class="text-red-400 text-xs font-bold">⚠️ Aturan penting:</p> <p class="text-red-200 text-xs">Jika dikali/dibagi bilangan negatif, tanda pertidaksamaan DIBALIK!</p> <p class="text-red-300 text-xs">-2x > 6 → x < -3</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="16"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4 - Aktivitas</div> <h2 data-template-id="tp4-act-title" class="canva-text text-lg font-bold text-white">Latihan PtLSV</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Selesaikan: x + 7 ≤ 12</p> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>x ≤ 12 - 7 → x ≤</span> <input type="number" id="ptlsv-ans" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?"> </div> <button onclick="checkPtLSV()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button> <div id="ptlsv-feedback" class="feedback-box"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="17"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 4</div> <h2 data-template-id="quiz4-title" class="canva-text text-lg font-bold text-white">Kuis PtLSV</h2> <div id="quiz4-container"> <div class="space-y-3" id="quiz4-q1"> <p class="font-medium text-white text-sm">1. Penyelesaian dari 3x - 6 > 9 adalah... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>5',true)">x > 5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>3',false)">x > 3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x<5',false)">x < 5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>1',false)">x > 1</button> </div> <div class="feedback-box" id="quiz4-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz4-q2"> <p class="font-medium text-white text-sm">2. Penyelesaian dari -2x ≥ 8 adalah... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≥4',false)">x ≥ 4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≤-4',true)">x ≤ -4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≥-4',false)">x ≥ -4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≤4',false)">x ≤ 4</button> </div> <div class="feedback-box" id="quiz4-q2-feedback"></div> </div> </div> <div id="quiz4-random" class="mt-4"></div> <button id="quiz4-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz4')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="18"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5</div> <h2 data-template-id="tp5-title" class="canva-text text-xl font-bold text-white">Memecahkan Masalah</h2> <img data-template-id="tp5-image" class="canva-image w-full h-32 object-cover rounded-xl bg-gray-700" loading="lazy"> <p data-template-id="tp5-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 font-bold text-sm">Contoh Soal Cerita:</p> <div class="bg-indigo-900/30 border border-indigo-700/50 p-3 rounded-lg text-sm text-gray-200"> <p>"Seorang penjual memiliki uang Rp50.000. Ia membeli x buah jeruk seharga Rp5.000/buah. Sisa uangnya tidak kurang dari Rp20.000. Berapa paling banyak jeruk yang bisa dibeli?" </p> <p class="mt-2 text-xs text-indigo-300">Model: 50.000 - 5.000x ≥ 20.000</p> <p class="text-xs text-indigo-300">-5.000x ≥ -30.000 → x ≤ 6</p> <p class="text-xs text-indigo-400 font-bold">Jawab: Paling banyak 6 jeruk</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="19"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5 - Aktivitas</div> <h2 data-template-id="tp5-act-title" class="canva-text text-lg font-bold text-white">Studi Kasus</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Andi memiliki uang Rp80.000. Harga satu buku Rp12.000. Berapa buku paling banyak yang bisa dibeli Andi?</p> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>12.000x ≤ 80.000 → x ≤</span> <input type="number" id="context-ans" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?"> <span>buku</span> </div> <button onclick="checkContext()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button> <div id="context-feedback" class="feedback-box"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="20"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 5</div> <h2 data-template-id="quiz5-title" class="canva-text text-lg font-bold text-white">Kuis Pemecahan Masalah</h2> <div id="quiz5-container"> <div class="space-y-3" id="quiz5-q1"> <p class="font-medium text-white text-sm">1. Harga 5 buku dan 1 tas = Rp85.000. Harga tas Rp35.000. Harga 1 buku?</p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','8000',false)">Rp8.000</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','10000',true)">Rp10.000</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','12000',false)">Rp12.000</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','15000',false)">Rp15.000</button> </div> <div class="feedback-box" id="quiz5-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz5-q2"> <p class="font-medium text-white text-sm">2. Umur Andi 3 tahun lagi menjadi lebih dari 15. Umur Andi sekarang paling sedikit... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','12',false)">12 tahun</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','13',true)">13 tahun</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','14',false)">14 tahun</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','15',false)">15 tahun</button> </div> <div class="feedback-box" id="quiz5-q2-feedback"></div> </div> </div> <div id="quiz5-random" class="mt-4"></div> <button id="quiz5-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz5')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="21"> <h2 data-template-id="summary-title" class="canva-text text-xl font-bold text-white">Rangkuman</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3 text-sm"> <div class="bg-blue-900/30 border border-blue-700/50 p-3 rounded-lg"> <p class="font-bold text-blue-300">📌 Kalimat Terbuka vs Tertutup</p> <p class="text-blue-100 text-xs">Terbuka = ada variabel, Tertutup = sudah pasti benar/salah</p> </div> <div class="bg-yellow-900/30 border border-yellow-700/50 p-3 rounded-lg"> <p class="font-bold text-yellow-300">📌 PLSV: ax + b = c</p> <p class="text-yellow-100 text-xs">Penyelesaian tunggal, gunakan operasi invers</p> </div> <div class="bg-orange-900/30 border border-orange-700/50 p-3 rounded-lg"> <p class="font-bold text-orange-300">📌 PtLSV: ax + b < c (atau >, ≤, ≥)</p> <p class="text-orange-100 text-xs">Penyelesaian berupa himpunan. Kali/bagi negatif → tanda balik!</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="22"> <h2 data-template-id="final-title" class="canva-text text-xl font-bold text-white">Asesmen Akhir</h2> <p data-template-id="final-desc" class="canva-text text-sm text-gray-400">Uji Pemahaman Total!</p> <div class="space-y-3" id="final-q1"> <p class="font-medium text-white text-sm">1. Penyelesaian 7x - 14 = 21 adalah... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','5',true)">x = 5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','3',false)">x = 3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','7',false)">x = 7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','1',false)">x = 1</button> </div> <div class="feedback-box" id="final-q1-feedback"></div> </div> <div class="space-y-3" id="final-q2"> <p class="font-medium text-white text-sm">2. Penyelesaian 2x + 4 ≤ 16 adalah... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≤6',true)">x ≤ 6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≤8',false)">x ≤ 8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≥6',false)">x ≥ 6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x<6',false)">x < 6</button> </div> <div class="feedback-box" id="final-q2-feedback"></div> </div> <div class="space-y-3" id="final-q3"> <p class="font-medium text-white text-sm">3. Model dari "Tiga kali bilangan ditambah 5 sama dengan 20" adalah... </p> <div class="grid grid-cols-1 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','a',true)">3x + 5 = 20</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','b',false)">3(x + 5) = 20</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','c',false)">x + 3 + 5 = 20</button> </div> <div class="feedback-box" id="final-q3-feedback"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="23"> <h2 data-template-id="final2-title" class="canva-text text-lg font-bold text-white">Lanjutan Asesmen</h2> <div class="space-y-3" id="final-q4"> <p class="font-medium text-white text-sm">4. "2x + 1 = 9" termasuk kalimat... </p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q4','terbuka',true)">Terbuka</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q4','tertutup',false)">Tertutup</button> </div> <div class="feedback-box" id="final-q4-feedback"></div> </div> <div class="space-y-3" id="final-q5"> <p class="font-medium text-white text-sm">5. Ibu membeli x kg beras @ Rp15.000. Total tidak lebih dari Rp90.000. Paling banyak berapa kg?</p> <div class="grid grid-cols-2 gap-2"> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','5',false)">5 kg</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','6',true)">6 kg</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','7',false)">7 kg</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','8',false)">8 kg</button> </div> <div class="feedback-box" id="final-q5-feedback"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="24"> <h2 data-template-id="reflect-title" class="canva-text text-xl font-bold text-white">Refleksi Belajar</h2> <p data-template-id="reflect-desc" class="canva-text text-sm text-gray-400">Bagaimana pembelajaranmu hari ini?</p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <div> <label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-emoji">Bagaimana perasaanmu setelah belajar?</label> <div class="flex gap-3 text-3xl" id="emoji-picker"> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😊</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🤔</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😎</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😅</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🎉</button> </div> </div> <div> <label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-text">Apa yang paling menarik dari materi hari ini?</label> <textarea id="reflect-text" rows="3" class="w-full bg-gray-700 border-2 border-purple-500 rounded-lg p-2 text-sm text-white resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea> </div> <div> <label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-difficult">Bagian mana yang masih sulit?</label> <textarea id="reflect-difficult" rows="2" class="w-full bg-gray-700 border-2 border-purple-500 rounded-lg p-2 text-sm text-white resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea> </div> <button onclick="submitReflection()" class="w-full bg-purple-600 text-white py-2 rounded-lg font-bold hover:bg-purple-700">Kirim Refleksi ✨</button> <div id="reflect-success" class="hidden bg-green-900/50 text-green-400 p-3 rounded-lg text-center font-medium text-sm border border-green-700/50"> Terima kasih! Refleksimu sudah tercatat 🎉 </div> </div> </div> </main>  <footer class="px-4 py-3 flex items-center justify-between bg-gray-900/90 backdrop-blur border-t border-gray-800"> <button id="prev-btn" onclick="navigate(-1)" class="flex items-center gap-1 bg-gray-800 text-white px-4 py-2 rounded-lg font-medium text-sm hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed" disabled> <i data-lucide="chevron-left" style="width:16px; height:16px"></i> Kembali </button> <button id="next-btn" onclick="navigate(1)" class="flex items-center gap-1 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300"> Lanjut <i data-lucide="chevron-right" style="width:16px; height:16px"></i> </button> </footer> <script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script> <script> let currentSlide = 1; const totalSlides = 24; function navigate(dir) { const next = currentSlide + dir; if (next < 1 || next > totalSlides) return; document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.remove('active'); currentSlide = next; document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.add('active'); document.getElementById('slide-counter').textContent = `${currentSlide} / ${totalSlides}`; document.getElementById('progress-bar').style.width = `${(currentSlide/totalSlides)*100}%`; document.getElementById('prev-btn').disabled = currentSlide === 1; document.getElementById('next-btn').style.display = currentSlide === totalSlides ? 'none' : 'flex'; window.scrollTo(0, 0); } const quizAnswered = { quiz1: 0, quiz2: 0, quiz3: 0, quiz4: 0, quiz5: 0 }; const quizTotal = { quiz1: 2, quiz2: 2, quiz3: 2, quiz4: 2, quiz5: 2 }; function checkQuiz(btn, containerId, value, isCorrect) { const container = document.getElementById(containerId); const buttons = container.querySelectorAll('.quiz-option'); buttons.forEach(b => { b.disabled = true; }); if (isCorrect) { btn.classList.add('correct'); showFeedback(containerId + '-feedback', '✅ Benar! Hebat!', true); } else { btn.classList.add('wrong'); buttons.forEach(b => { if (b.getAttribute('onclick') && b.getAttribute('onclick').includes(',true)')) b.classList.add('show-correct'); }); showFeedback(containerId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false); } for (const qz of ['quiz1','quiz2','quiz3','quiz4','quiz5']) { if (containerId.startsWith(qz)) { quizAnswered[qz]++; if (quizAnswered[qz] >= quizTotal[qz]) { document.getElementById(qz + '-gen-btn').classList.remove('hidden'); } break; } } } function showFeedback(id, msg, success) { const el = document.getElementById(id); if (!el) return; el.textContent = msg; el.className = `feedback-box show ${success ? 'bg-green-900/50 text-green-400 border border-green-700/50' : 'bg-red-900/50 text-red-400 border border-red-700/50'}`; } function checkType(btn, isTerbuka) { const row = btn.closest('[data-type]'); const type = row.dataset.type; const correct = (isTerbuka && type === 'terbuka') || (!isTerbuka && type === 'tertutup'); row.style.background = correct ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)'; row.style.borderColor = correct ? 'rgba(34, 197, 94, 0.5)' : 'rgba(239, 68, 68, 0.5)'; row.querySelectorAll('button').forEach(b => b.disabled = true); } function checkPLSV() { const s1 = document.getElementById('plsv-step1').value; const s2 = document.getElementById('plsv-step2').value; if (s1 == '18' && s2 == '6') { showFeedback('plsv-feedback', '✅ Benar! 3x = 18, x = 6', true); } else { showFeedback('plsv-feedback', '❌ Coba lagi: 12+6=18, 18÷3=6', false); } } function checkPtLSV() { const ans = document.getElementById('ptlsv-ans').value; if (ans == '5') { showFeedback('ptlsv-feedback', '✅ Benar! x ≤ 5', true); } else { showFeedback('ptlsv-feedback', '❌ 12 - 7 = 5, jadi x ≤ 5', false); } } function checkContext() { const ans = document.getElementById('context-ans').value; if (ans == '6') { showFeedback('context-feedback', '✅ Benar! 80.000 ÷ 12.000 = 6,67 → paling banyak 6 buku', true); } else { showFeedback('context-feedback', '❌ 80.000 ÷ 12.000 ≈ 6,67 → paling banyak 6 buku', false); } } function selectEmoji(btn) { document.querySelectorAll('#emoji-picker button').forEach(b => b.style.transform = ''); btn.style.transform = 'scale(1.4)'; } function submitReflection() { document.getElementById('reflect-success').classList.remove('hidden'); } // Generator pertanyaan acak let randomCounter = 0; function generateRandom(quizId) { randomCounter++; const container = document.getElementById(quizId + '-random'); container.innerHTML = ''; let q; switch(quizId) { case 'quiz1': q = genTP1(); break; case 'quiz2': q = genTP2(); break; case 'quiz3': q = genTP3(); break; case 'quiz4': q = genTP4(); break; case 'quiz5': q = genTP5(); break; } const qId = `${quizId}-rand-${randomCounter}`; let html = `<div class="space-y-3" id="${qId}"><p class="font-medium text-white text-sm">${q.question}</p><div class="grid grid-cols-2 gap-2">`; q.options.forEach(opt => { html += `<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkRandom(this,'${qId}',${opt.correct})">${opt.text}</button>`; }); html += `</div><div class="feedback-box" id="${qId}-feedback"></div></div>`; container.innerHTML = html; container.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } function checkRandom(btn, qId, isCorrect) { const container = document.getElementById(qId); const buttons = container.querySelectorAll('.quiz-option'); buttons.forEach(b => b.disabled = true); if (isCorrect) { btn.classList.add('correct'); showFeedback(qId + '-feedback', '✅ Benar! Hebat!', true); } else { btn.classList.add('wrong'); buttons.forEach(b => { if (b.getAttribute('onclick').includes('true)')) b.classList.add('show-correct'); }); showFeedback(qId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false); } } function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); } function genTP1() { const vars = ['x','y','n','m','p']; const v = vars[randInt(0,4)]; const a = randInt(2,9), b = randInt(1,9), c = randInt(10,30); const openSentence = `${a}${v} + ${b} = ${c}`; const c1 = randInt(1,20), c2 = randInt(1,20); const closed1 = `${c1} + ${c2} = ${c1+c2}`; const closed2 = `${c1} × 2 = ${c1*2}`; const options = shuffle([ { text: openSentence, correct: true }, { text: closed1, correct: false }, { text: closed2, correct: false }, { text: `${randInt(1,10)} > ${randInt(11,20)}`, correct: false } ]); return { question: 'Manakah yang merupakan kalimat terbuka?', options }; } function genTP2() { const scenarios = [ () => { const a=randInt(2,8),c=a*randInt(2,10); return { q:`"Harga ${a} buah kue = Rp${c.toLocaleString('id')}." Model?`, ans:`${a}x = ${c}`, wrong:[`x + ${a} = ${c}`,`${a} + x = ${c}`,`x - ${a} = ${c}`]}; }, () => { const b=randInt(3,15)*1000,c=randInt(20,80)*1000; return { q:`"Uang Sari ditambah Rp${b.toLocaleString('id')} kurang dari Rp${c.toLocaleString('id')}." Model?`, ans:`x + ${b.toLocaleString('id')} < ${c.toLocaleString('id')}`, wrong:[`x + ${b.toLocaleString('id')} = ${c.toLocaleString('id')}`,`x - ${b.toLocaleString('id')} < ${c.toLocaleString('id')}`,`x + ${b.toLocaleString('id')} > ${c.toLocaleString('id')}`]}; } ]; const s = scenarios[randInt(0,1)](); const options = shuffle([ { text: s.ans, correct: true }, ...s.wrong.slice(0,3).map(w => ({ text: w, correct: false })) ]); return { question: s.q, options }; } function genTP3() { const a = randInt(2,8), b = randInt(1,15), x = randInt(1,10); const c = a * x + b; const wrong1 = x + randInt(1,3); const wrong2 = x - randInt(1,2) > 0 ? x - randInt(1,2) : x + 4; const wrong3 = c - b; const options = shuffle([ { text: `x = ${x}`, correct: true }, { text: `x = ${wrong1}`, correct: false }, { text: `x = ${wrong2}`, correct: false }, { text: `x = ${wrong3}`, correct: false } ]); return { question: `Penyelesaian dari ${a}x + ${b} = ${c} adalah...`, options }; } function genTP4() { const a = randInt(2,6), b = randInt(1,10), x = randInt(2,10); const c = a * x + b; const signs = ['<','>','≤','≥']; const sign = signs[randInt(0,3)]; const oppSign = sign === '<' ? '>' : sign === '>' ? '<' : sign === '≤' ? '≥' : '≤'; const options = shuffle([ { text: `x ${sign} ${x}`, correct: true }, { text: `x ${oppSign} ${x}`, correct: false }, { text: `x ${sign} ${x+2}`, correct: false }, { text: `x ${oppSign} ${x-1}`, correct: false } ]); return { question: `Penyelesaian dari ${a}x + ${b} ${sign} ${c} adalah...`, options }; } function genTP5() { const price = randInt(2,15) * 1000; const total = price * randInt(3,10); const maxItems = Math.floor(total / price); const options = shuffle([ { text: `${maxItems}`, correct: true }, { text: `${maxItems+1}`, correct: false }, { text: `${maxItems-1}`, correct: false }, { text: `${maxItems+2}`, correct: false } ]); return { question: `Harga barang Rp${price.toLocaleString('id')}/buah. Uang = Rp${total.toLocaleString('id')}. Paling banyak beli berapa?`, options }; } lucide.createIcons(); </script> </body> </html>

Kelas 8 Matematika

Teorema Pythagoras

<!doctype html> <html lang="id"> <head> <script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script> <script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media Pembelajaran Teorema Pythagoras</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;900&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <style> * { font-family: 'DM Sans', sans-serif; } body { background-color: #111827; color: #f9fafb; } .slide { display: none; } .slide.active { display: flex; } .quiz-option { transition: all 0.3s; cursor: pointer; } .quiz-option.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; } .quiz-option.wrong { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; } .quiz-option.show-correct { border: 3px solid #22c55e !important; background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important;} .quiz-option:disabled { cursor: not-allowed; opacity: 0.8; } .num-circle { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; } .feedback-box { padding: 12px 16px; border-radius: 8px; margin-top: 12px; font-weight: 500; display: none; } .feedback-box.show { display: block; } input[type="number"], textarea { color: white; background-color: #374151; } </style> <script src="/_sdk/e3937a0574eb2d69.data_sdk.js" type="text/javascript" integrity="sha512-xbp/ACqEQy1aDxYMtXTrR3y5MUbzxuggRR/9sD48Gl4VhLMMCiAHsxMaFV6DTdeBpR6ymF+t2zhPKYkWM3+Jfw=="></script> <script src="/_sdk/9432170dbd2ae0df.resizing_sdk.js" type="text/javascript" integrity="sha512-FeT+58sb1f9ejWPWFjCbJvTT+SDwGV+ngrHUnlO7TWEOoqwOLj6p256kO3vOL7DIWl1cIgrobiof8v2bOigwPg=="></script> </head> <body data-template-id="__page-root" class="min-h-screen flex flex-col bg-gray-900 text-white"> <header data-template-id="header-bg" class="canva-header px-4 py-3 flex items-center justify-between shadow-lg bg-gray-800"> <div class="flex items-center gap-3"> <span class="text-2xl">📐</span> <h1 data-template-id="app-title" class="canva-text text-lg font-bold text-white">Teorema Pythagoras</h1> </div> <div class="flex items-center gap-2"> <span id="slide-counter" class="text-gray-300 text-sm font-medium">1 / 24</span> </div> </header> <div class="w-full h-1.5 bg-gray-700"> <div id="progress-bar" class="h-full bg-yellow-400 transition-all duration-300" style="width:4%"></div> </div> <main class="flex-1 overflow-y-auto" id="slides-container">  <div class="slide active flex-col items-center justify-center text-center p-6 gap-4" data-slide="1"> <div class="text-7xl mb-2">📐</div> <h2 data-template-id="cover-title" class="canva-text text-3xl font-black text-white">Teorema Pythagoras</h2> <p data-template-id="cover-subtitle" class="canva-text text-lg text-gray-300">Media Pembelajaran Interaktif</p> <p data-template-id="cover-class" class="canva-text text-sm text-gray-400">Matematika SMP</p> </div>  <div class="slide flex-col p-5 gap-3" data-slide="2"> <h2 data-template-id="tp-title" class="canva-text text-xl font-bold mb-4 text-white">Tujuan Pembelajaran</h2> <div class="space-y-3"> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">1</span> <p data-template-id="tp-1" class="canva-text text-sm text-gray-200 mt-1">Menjelaskan pembuktian teorema Pythagoras.</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">2</span> <p data-template-id="tp-2" class="canva-text text-sm text-gray-200 mt-1">Mengidentifikasi tripel Pythagoras.</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">3</span> <p data-template-id="tp-3" class="canva-text text-sm text-gray-200 mt-1">Membedakan jenis sudut pada segitiga menggunakan teorema Pythagoras atau kebalikan teorema Pythagoras.</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">4</span> <p data-template-id="tp-4" class="canva-text text-sm text-gray-200 mt-1">Membandingkan sisi pada segitiga siku-siku istimewa.</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">5</span> <p data-template-id="tp-5" class="canva-text text-sm text-gray-200 mt-1">Menentukan jarak antara dua titik pada bidang koordinat Cartesius.</p> </div> <div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">6</span> <p data-template-id="tp-6" class="canva-text text-sm text-gray-200 mt-1">Memecahkan masalah terkait teorema Pythagoras.</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="3"> <h2 data-template-id="aper-title" class="canva-text text-xl font-bold text-white">Apersepsi</h2> <img data-template-id="aper-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy"> <p data-template-id="aper-question" class="canva-text text-base leading-relaxed text-gray-200"></p> <div class="bg-gray-800 p-4 rounded-xl"> <p data-template-id="aper-hint" class="canva-text text-sm italic text-gray-300"></p> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="4"> <h2 data-template-id="aper2-title" class="canva-text text-lg font-bold text-white"></h2> <img data-template-id="aper2-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy"> <p data-template-id="aper2-question" class="canva-text text-base text-gray-200"></p> </div>  <div class="slide flex-col p-5 gap-4" data-slide="5"> <h2 data-template-id="pretest-title" class="canva-text text-xl font-bold text-white">Asesmen Awal</h2> <p data-template-id="pretest-desc" class="canva-text text-sm text-gray-400">Mari kita uji pengetahuan awalmu!</p> <div class="space-y-3" id="pretest-q1"> <p class="font-medium text-white">1. Berapa hasil dari 5² ?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','10',false)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','25',true)">25</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','15',false)">15</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','50',false)">50</button> </div> <div class="feedback-box" id="pretest-q1-feedback"></div> </div> <div class="space-y-3" id="pretest-q2"> <p class="font-medium text-white">2. Segitiga siku-siku memiliki sudut berapa derajat?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','45°',false)">45°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','90°',true)">90°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','180°',false)">180°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','60°',false)">60°</button> </div> <div class="feedback-box" id="pretest-q2-feedback"></div> </div> <div class="space-y-3" id="pretest-q3"> <p class="font-medium text-white">3. √49 = ?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','6',false)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','7',true)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','8',false)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','9',false)">9</button> </div> <div class="feedback-box" id="pretest-q3-feedback"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="6"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1</div> <h2 data-template-id="tp1-title" class="canva-text text-xl font-bold text-white">Pembuktian Teorema Pythagoras</h2> <p data-template-id="tp1-intro" class="canva-text text-base leading-relaxed text-gray-300">Luas persegi pada sisi miring (hipotenusa) sama dengan jumlah luas persegi pada kedua sisi tegaknya.</p> <div class="bg-gray-800 rounded-xl p-4 text-center"> <svg viewbox="0 0 300 200" class="w-full max-w-xs mx-auto"> <rect x="60" y="100" width="60" height="60" fill="#fbbf24" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" /> <rect x="120" y="20" width="80" height="80" fill="#60a5fa" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" /> <rect x="120" y="100" width="80" height="80" fill="#f87171" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" /> <polygon points="120,100 120,160 60,160" fill="#1e293b" stroke="#e5e7eb" stroke-width="2" /> <text x="85" y="145" fill="white" font-size="12" font-weight="bold">a</text> <text x="155" y="145" fill="white" font-size="12" font-weight="bold">b</text> <text x="115" y="135" fill="white" font-size="12" font-weight="bold">c</text> <text x="75" y="90" fill="#e5e7eb" font-size="11" font-weight="bold">a²=9</text> <text x="140" y="15" fill="#e5e7eb" font-size="11" font-weight="bold">c²=25</text> <text x="140" y="190" fill="#e5e7eb" font-size="11" font-weight="bold">b²=16</text> </svg> <p class="text-gray-200 font-bold mt-2 text-lg">a² + b² = c²</p> <p class="text-gray-400 text-sm">3² + 4² = 5² → 9 + 16 = 25 ✓</p> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="7"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1 - Aktivitas</div> <h2 data-template-id="tp1-act-title" class="canva-text text-lg font-bold text-white">Latihan Mandiri</h2> <p data-template-id="tp1-act-desc" class="canva-text text-sm text-gray-300"></p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 font-medium text-sm">Segitiga dengan sisi: a = 3, b = 4. Hitung c!</p> <div class="flex items-center gap-2"> <span class="text-gray-300 text-sm">a² + b² = 9 + 16 =</span> <input type="number" id="proof-input" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?"> <span class="text-gray-300 text-sm">= c²</span> </div> <div class="flex items-center gap-2"> <span class="text-gray-300 text-sm">c = √</span> <input type="number" id="proof-input2" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?"> <span class="text-gray-300 text-sm">=</span> <input type="number" id="proof-input3" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?"> </div> <button onclick="checkProof()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button> <div id="proof-feedback" class="feedback-box"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="8"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 1</div> <h2 data-template-id="quiz1-title" class="canva-text text-lg font-bold text-white">Kuis Pembuktian</h2> <div id="quiz1-container"> <div class="space-y-3" id="quiz1-q1"> <p class="font-medium text-white text-sm">1. Jika a=6, b=8, berapakah c?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','12',false)">12</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','10',true)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','14',false)">14</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','9',false)">9</button> </div> <div class="feedback-box" id="quiz1-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz1-q2"> <p class="font-medium text-white text-sm">2. Teorema Pythagoras berlaku pada segitiga...</p> <div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','sama sisi',false)">Sama sisi</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','sembarang',false)">Sembarang</button> </div> <div class="feedback-box" id="quiz1-q2-feedback"></div> </div> </div> <div id="quiz1-random" class="mt-4"></div> <button id="quiz1-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz1')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="9"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2</div> <h2 data-template-id="tp2-title" class="canva-text text-xl font-bold text-white">Tripel Pythagoras</h2> <p data-template-id="tp2-desc" class="canva-text text-sm leading-relaxed text-gray-300">Tiga bilangan bulat positif yang memenuhi persamaan a² + b² = c² disebut tripel Pythagoras.</p> <div class="bg-gray-800 rounded-xl p-4 space-y-2"> <p class="text-gray-200 font-bold text-sm">Contoh Tripel Pythagoras:</p> <div class="grid grid-cols-3 gap-2 text-center"> <div class="bg-purple-900/30 border border-purple-500/30 rounded-lg p-2"> <p class="font-bold text-purple-300">3, 4, 5</p> </div> <div class="bg-blue-900/30 border border-blue-500/30 rounded-lg p-2"> <p class="font-bold text-blue-300">5, 12, 13</p> </div> <div class="bg-green-900/30 border border-green-500/30 rounded-lg p-2"> <p class="font-bold text-green-300">8, 15, 17</p> </div> </div> <p class="text-gray-400 text-xs mt-2">Kelipatan juga tripel: 6,8,10 (2× dari 3,4,5)</p> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="10"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2 - Aktivitas</div> <h2 data-template-id="tp2-act-title" class="canva-text text-lg font-bold text-white">Cek Tripel</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Apakah bilangan berikut tripel Pythagoras? Ketuk ✓ atau ✗</p> <div id="tripel-activity" class="space-y-2"> <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="true"> <span class="font-bold text-gray-100">7, 24, 25</span> <div class="flex gap-2"> <button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button> <button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button> </div> </div> <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="false"> <span class="font-bold text-gray-100">4, 5, 6</span> <div class="flex gap-2"> <button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button> <button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button> </div> </div> <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="true"> <span class="font-bold text-gray-100">9, 40, 41</span> <div class="flex gap-2"> <button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button> <button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button> </div> </div> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="11"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 2</div> <h2 data-template-id="quiz2-title" class="canva-text text-lg font-bold text-white">Kuis Tripel Pythagoras</h2> <div id="quiz2-container"> <div class="space-y-3" id="quiz2-q1"> <p class="font-medium text-white text-sm">1. Manakah yang merupakan tripel Pythagoras?</p> <div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','5,11,13',false)">5, 11, 13</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','5,12,13',true)">5, 12, 13</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','6,7,8',false)">6, 7, 8</button> </div> <div class="feedback-box" id="quiz2-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz2-q2"> <p class="font-medium text-white text-sm">2. Tripel 3,4,5 jika dikalikan 3 menjadi...</p> <div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','9,12,15',true)">9, 12, 15</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','6,8,10',false)">6, 8, 10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','12,16,20',false)">12, 16, 20</button> </div> <div class="feedback-box" id="quiz2-q2-feedback"></div> </div> </div> <div id="quiz2-random" class="mt-4"></div><button id="quiz2-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz2')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="12"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3</div> <h2 data-template-id="tp3-title" class="canva-text text-xl font-bold text-white">Jenis Segitiga</h2> <p data-template-id="tp3-desc" class="canva-text text-sm leading-relaxed text-gray-300">Kita bisa menentukan jenis segitiga (siku-siku, lancip, tumpul) dengan memeriksa kuadrat sisi terpanjang (c) terhadap jumlah kuadrat sisi lainnya.</p> <div class="bg-gray-800 rounded-xl p-4 space-y-2 text-sm border border-gray-700"> <div class="flex items-center gap-2"> <span class="w-3 h-3 bg-blue-500 rounded-full"></span> <p class="text-gray-200"><strong>c² = a² + b²</strong> → Siku-siku (90°)</p> </div> <div class="flex items-center gap-2"> <span class="w-3 h-3 bg-red-500 rounded-full"></span> <p class="text-gray-200"><strong>c² > a² + b²</strong> → Tumpul (>90°)</p> </div> <div class="flex items-center gap-2"> <span class="w-3 h-3 bg-green-500 rounded-full"></span> <p class="text-gray-200"><strong>c² < a² + b²</strong> → Lancip (<90°)</p> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="13"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3 - Aktivitas</div> <h2 data-template-id="tp3-act-title" class="canva-text text-lg font-bold text-white">Tebak Segitiga</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Tentukan jenis segitiga (sisi terpanjang = c):</p> <div class="space-y-2"> <div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="tp3-q1"> <p class="font-bold text-gray-100 text-sm mb-2">Sisi: 5, 7, 9</p> <div class="flex gap-2"> <button onclick="checkAngle(this,'tp3-q1','lancip')" class="bg-green-900/50 text-green-400 border border-green-700/50 hover:bg-green-800 px-3 py-1 rounded text-xs font-bold">Lancip</button> <button onclick="checkAngle(this,'tp3-q1','siku')" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 hover:bg-blue-800 px-3 py-1 rounded text-xs font-bold">Siku-siku</button> <button onclick="checkAngle(this,'tp3-q1','tumpul')" class="bg-red-900/50 text-red-400 border border-red-700/50 hover:bg-red-800 px-3 py-1 rounded text-xs font-bold">Tumpul</button> </div> <div class="feedback-box text-xs mt-1" id="tp3-q1-feedback"></div> </div> <div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="tp3-q2"> <p class="font-bold text-gray-100 text-sm mb-2">Sisi: 6, 8, 11</p> <div class="flex gap-2"> <button onclick="checkAngle(this,'tp3-q2','lancip')" class="bg-green-900/50 text-green-400 border border-green-700/50 hover:bg-green-800 px-3 py-1 rounded text-xs font-bold">Lancip</button> <button onclick="checkAngle(this,'tp3-q2','siku')" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 hover:bg-blue-800 px-3 py-1 rounded text-xs font-bold">Siku-siku</button> <button onclick="checkAngle(this,'tp3-q2','tumpul')" class="bg-red-900/50 text-red-400 border border-red-700/50 hover:bg-red-800 px-3 py-1 rounded text-xs font-bold">Tumpul</button> </div> <div class="feedback-box text-xs mt-1" id="tp3-q2-feedback"></div> </div> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="14"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 3</div> <h2 data-template-id="quiz3-title" class="canva-text text-lg font-bold text-white">Kuis Jenis Segitiga</h2> <div id="quiz3-container"> <div class="space-y-3" id="quiz3-q1"> <p class="font-medium text-white text-sm">1. Segitiga dengan sisi 3, 4, 6 termasuk segitiga...</p> <div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','lancip',false)">Lancip</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','siku-siku',false)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','tumpul',true)">Tumpul</button> </div> <div class="feedback-box" id="quiz3-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz3-q2"> <p class="font-medium text-white text-sm">2. Segitiga dengan sisi 5, 12, 13 adalah...</p> <div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','lancip',false)">Lancip</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','tumpul',false)">Tumpul</button> </div> <div class="feedback-box" id="quiz3-q2-feedback"></div> </div> </div> <div id="quiz3-random" class="mt-4"></div><button id="quiz3-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz3')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="15"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4</div> <h2 data-template-id="tp4-title" class="canva-text text-xl font-bold text-white">Segitiga Istimewa</h2> <p data-template-id="tp4-desc" class="canva-text text-sm text-gray-300">Segitiga siku-siku dengan sudut tertentu memiliki rasio sisi yang selalu tetap.</p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <div class="grid grid-cols-2 gap-3"> <div class="bg-indigo-900/30 border border-indigo-700/30 p-3 rounded-lg text-center"> <p class="font-bold text-indigo-300 text-sm">45°-45°-90°</p> <p class="text-indigo-400 text-xs mt-1">Perbandingan sisi:</p> <p class="font-bold text-indigo-200">1 : 1 : √2</p> </div> <div class="bg-orange-900/30 border border-orange-700/30 p-3 rounded-lg text-center"> <p class="font-bold text-orange-300 text-sm">30°-60°-90°</p> <p class="text-orange-400 text-xs mt-1">Perbandingan sisi:</p> <p class="font-bold text-orange-200">1 : √3 : 2</p> </div> </div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="16"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 4</div> <h2 data-template-id="quiz4-title" class="canva-text text-lg font-bold text-white">Kuis Sudut Istimewa</h2> <div id="quiz4-container"> <div class="space-y-3" id="quiz4-q1"> <p class="font-medium text-white text-sm">1. Segitiga 45°-45°-90° dengan kaki = 5. Hipotenusa?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5',false)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5√2',true)">5√2</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','10',false)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5√3',false)">5√3</button> </div> <div class="feedback-box" id="quiz4-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz4-q2"> <p class="font-medium text-white text-sm">2. Segitiga 30°-60°-90° dengan sisi terpendek = 3. Hipotenusa?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','3',false)">3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','6',true)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','3√3',false)">3√3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','9',false)">9</button> </div> <div class="feedback-box" id="quiz4-q2-feedback"></div> </div> </div> <div id="quiz4-random" class="mt-4"></div><button id="quiz4-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz4')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="17"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5</div> <h2 data-template-id="tp5-title" class="canva-text text-xl font-bold text-white">Jarak Dua Titik Koordinat</h2> <p data-template-id="tp5-desc" class="canva-text text-sm leading-relaxed text-gray-300">Teorema Pythagoras juga bisa diaplikasikan untuk menghitung jarak antara dua titik pada bidang kartesius.</p> <div class="bg-gray-800 rounded-xl p-4 border border-gray-700"> <svg viewbox="0 0 280 200" class="w-full max-w-xs mx-auto"> <defs> <pattern id="grid" width="28" height="28" patternunits="userSpaceOnUse"> <path d="M 28 0 L 0 0 0 28" fill="none" stroke="#374151" stroke-width="0.5" /> </pattern> </defs> <rect width="280" height="200" fill="url(#grid)" /> <line x1="0" y1="168" x2="280" y2="168" stroke="#9ca3af" stroke-width="1.5" /> <line x1="28" y1="0" x2="28" y2="200" stroke="#9ca3af" stroke-width="1.5" /> <circle cx="56" cy="140" r="5" fill="#ef4444" /> <text x="60" y="135" font-size="10" fill="#f87171" font-weight="bold">A(1,1)</text> <circle cx="168" cy="56" r="5" fill="#3b82f6" /> <text x="172" y="51" font-size="10" fill="#60a5fa" font-weight="bold">B(5,4)</text> <line x1="56" y1="140" x2="168" y2="56" stroke="#a78bfa" stroke-width="2" stroke-dasharray="4" /> <line x1="56" y1="140" x2="168" y2="140" stroke="#fcd34d" stroke-width="1.5" /> <line x1="168" y1="140" x2="168" y2="56" stroke="#fcd34d" stroke-width="1.5" /> <text x="100" y="155" font-size="9" fill="#d1d5db">Δx = 4</text> <text x="175" y="100" font-size="9" fill="#d1d5db">Δy = 3</text> </svg> <p class="text-center text-gray-200 font-bold text-sm mt-2">d = √((x₂-x₁)² + (y₂-y₁)²)</p> <p class="text-center text-gray-400 text-xs">d = √(4² + 3²) = √25 = 5</p> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="18"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5 - Aktivitas</div> <h2 data-template-id="tp5-act-title" class="canva-text text-lg font-bold text-white">Latihan Jarak Titik</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">Hitung jarak titik P(2, 1) ke Q(5, 5)!</p> <div class="space-y-2"> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>Δx = 5 - 2 =</span> <input type="number" id="dist-dx" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?"> </div> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>Δy = 5 - 1 =</span> <input type="number" id="dist-dy" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?"> </div> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>d = √(3² + 4²) = √25 =</span> <input type="number" id="dist-ans" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?"> </div> </div> <button onclick="checkDistance()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button> <div id="dist-feedback" class="feedback-box"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="19"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 5</div> <h2 data-template-id="quiz5-title" class="canva-text text-lg font-bold text-white">Kuis Kartesius</h2> <div id="quiz5-container"> <div class="space-y-3" id="quiz5-q1"> <p class="font-medium text-white text-sm">1. Jarak titik (0,0) ke (6,8) adalah...</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','14',false)">14</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','10',true)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','8',false)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','12',false)">12</button> </div> <div class="feedback-box" id="quiz5-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz5-q2"> <p class="font-medium text-white text-sm">2. Jarak titik (1,2) ke (4,6) adalah...</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','7',false)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','5',true)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','4',false)">4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','6',false)">6</button> </div> <div class="feedback-box" id="quiz5-q2-feedback"></div> </div> </div> <div id="quiz5-random" class="mt-4"></div><button id="quiz5-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz5')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="20"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 6</div> <h2 data-template-id="tp6-title" class="canva-text text-xl font-bold text-white">Memecahkan Masalah</h2> <img data-template-id="tp6-image" class="canva-image w-full h-32 object-cover rounded-xl bg-gray-700" loading="lazy"> <p data-template-id="tp6-desc" class="canva-text text-sm leading-relaxed text-gray-300">Banyak masalah dalam kehidupan sehari-hari yang dapat diselesaikan dengan teorema Pythagoras.</p> <div class="bg-gray-800 rounded-xl p-4 space-y-2"> <p class="text-gray-200 text-sm font-medium">🏗️ Contoh: Tangga 10m disandarkan ke tembok. Jarak kaki tangga ke tembok 6m. Berapa tinggi tembok yang dicapai?</p> <p class="text-gray-400 text-xs">c²= a² + b² → 10² = 6² + b² → b² = 100-36 = 64 → b = 8m</p> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="21"> <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 6 - Aktivitas</div> <h2 data-template-id="tp6-act-title" class="canva-text text-lg font-bold text-white">Studi Kasus</h2> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <p class="text-gray-200 text-sm font-medium">🪁 Benang layang-layang panjangnya 13m. Jarak horizontal 5m. Berapa tinggi layang-layang?</p> <div class="flex items-center gap-2 text-sm text-gray-300"> <span>Tinggi =</span> <input type="number" id="context-ans" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-16 text-center font-bold" placeholder="?"> <span>meter</span> </div> <button onclick="checkContext()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button> <div id="context-feedback" class="feedback-box"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="22"> <div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 6</div> <h2 data-template-id="quiz6-title" class="canva-text text-lg font-bold text-white">Kuis Pemecahan Masalah</h2> <div id="quiz6-container"> <div class="space-y-3" id="quiz6-q1"> <p class="font-medium text-white text-sm">1. Tiang 12m, kawat dari puncak ke tanah sejauh 9m. Panjang kawat?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','21',false)">21 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','15',true)">15 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','13',false)">13 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','18',false)">18 m</button> </div> <div class="feedback-box" id="quiz6-q1-feedback"></div> </div> <div class="space-y-3 mt-4" id="quiz6-q2"> <p class="font-medium text-white text-sm">2. Tangga 5m, jarak kaki ke dinding 3m. Tinggi?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','4',true)">4 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','3',false)">3 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','2',false)">2 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','5',false)">5 m</button> </div> <div class="feedback-box" id="quiz6-q2-feedback"></div> </div> </div> <div id="quiz6-random" class="mt-4"></div><button id="quiz6-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz6')">🔄 Soal Baru</button> </div>  <div class="slide flex-col p-5 gap-4" data-slide="23"> <h2 data-template-id="final-title" class="canva-text text-xl font-bold text-white">Asesmen Akhir</h2> <p data-template-id="final-desc" class="canva-text text-sm text-gray-400">Kerjakan soal ini untuk mengukur pemahamanmu secara menyeluruh.</p> <div class="space-y-3" id="final-q1"> <p class="font-medium text-white text-sm">1. Segitiga sisi 8, 15, 17 termasuk...</p> <div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','tumpul',false)">Tumpul</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','lancip',false)">Lancip</button> </div> <div class="feedback-box" id="final-q1-feedback"></div> </div> <div class="space-y-3" id="final-q2"> <p class="font-medium text-white text-sm">2. Jarak (1,2) ke (4,6) = ?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','5',true)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','7',false)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','4',false)">4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','6',false)">6</button> </div> <div class="feedback-box" id="final-q2-feedback"></div> </div> <div class="space-y-3" id="final-q3"> <p class="font-medium text-white text-sm">3. Segitiga 30°-60°-90° sisi terpendek 4. Hipotenusa?</p> <div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','8',true)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','4√3',false)">4√3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','6',false)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','4√2',false)">4√2</button> </div> <div class="feedback-box" id="final-q3-feedback"></div> </div> </div>  <div class="slide flex-col p-5 gap-4" data-slide="24"> <h2 data-template-id="reflect-title" class="canva-text text-xl font-bold text-white">Refleksi Belajar</h2> <p data-template-id="reflect-desc" class="canva-text text-sm text-gray-400">Bagaimana pembelajaranmu hari ini?</p> <div class="bg-gray-800 rounded-xl p-4 space-y-3"> <div> <label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-emoji">Bagaimana perasaanmu setelah belajar?</label> <div class="flex gap-3 text-3xl" id="emoji-picker"><button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😊</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🤔</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😎</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😅</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🎉</button> </div> </div> <div> <label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-text">Apa yang paling menarik dari materi hari ini?</label> <textarea id="reflect-text" rows="3" class="w-full bg-gray-700 text-white border-2 border-purple-500 rounded-lg p-2 text-sm resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea> </div> <div> <label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-difficult">Bagian mana yang masih sulit?</label> <textarea id="reflect-difficult" rows="2" class="w-full bg-gray-700 text-white border-2 border-purple-500 rounded-lg p-2 text-sm resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea> </div> <button onclick="submitReflection()" class="w-full bg-purple-600 text-white py-2 rounded-lg font-bold hover:bg-purple-700">Kirim Refleksi ✨</button> <div id="reflect-success" class="hidden bg-green-900/50 text-green-400 p-3 rounded-lg text-center font-medium text-sm border border-green-700/50"> Terima kasih! Refleksimu sudah tercatat 🎉 </div> </div> </div> </main>  <footer class="px-4 py-3 flex items-center justify-between bg-gray-900/90 backdrop-blur border-t border-gray-800"> <button id="prev-btn" onclick="navigate(-1)" class="flex items-center gap-1 bg-gray-800 text-white px-4 py-2 rounded-lg font-medium text-sm hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed" disabled><i data-lucide="chevron-left" style="width:16px;height:16px"></i> Kembali</button> <button id="next-btn" onclick="navigate(1)" class="flex items-center gap-1 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300">Lanjut <i data-lucide="chevron-right" style="width:16px;height:16px"></i></button> </footer> <script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script> <script> let currentSlide = 1; const totalSlides = 24; function navigate(dir) { const next = currentSlide + dir; if (next < 1 || next > totalSlides) return; document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.remove('active'); currentSlide = next; document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.add('active'); document.getElementById('slide-counter').textContent = `${currentSlide} / ${totalSlides}`; document.getElementById('progress-bar').style.width = `${(currentSlide/totalSlides)*100}%`; document.getElementById('prev-btn').disabled = currentSlide === 1; document.getElementById('next-btn').style.display = currentSlide === totalSlides ? 'none' : 'flex'; window.scrollTo(0, 0); } const quizAnswered = { quiz1: 0, quiz2: 0, quiz3: 0, quiz4: 0, quiz5: 0, quiz6: 0 }; const quizTotal = { quiz1: 2, quiz2: 2, quiz3: 2, quiz4: 2, quiz5: 2, quiz6: 2 }; function checkQuiz(btn, containerId, value, isCorrect) { const container = document.getElementById(containerId); const buttons = container.querySelectorAll('.quiz-option'); buttons.forEach(b => { b.disabled = true; }); if (isCorrect) { btn.classList.add('correct'); showFeedback(containerId + '-feedback', '✅ Benar! Hebat!', true); } else { btn.classList.add('wrong'); buttons.forEach(b => { if (b.getAttribute('onclick') && b.getAttribute('onclick').includes(',true)')) b.classList.add('show-correct'); }); showFeedback(containerId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false); } for (const qz of ['quiz1','quiz2','quiz3','quiz4','quiz5','quiz6']) { if (containerId.startsWith(qz)) { quizAnswered[qz]++; if (quizAnswered[qz] >= quizTotal[qz]) { document.getElementById(qz + '-gen-btn').classList.remove('hidden'); } break; } } } function showFeedback(id, msg, success) { const el = document.getElementById(id); if (!el) return; el.textContent = msg; el.className = `feedback-box show ${success ? 'bg-green-900/50 text-green-400 border border-green-700/50' : 'bg-red-900/50 text-red-400 border border-red-700/50'}`; } function checkProof() { const v1 = document.getElementById('proof-input').value; const v2 = document.getElementById('proof-input2').value; const v3 = document.getElementById('proof-input3').value; if (v1 == '25' && v2 == '25' && v3 == '5') { showFeedback('proof-feedback', '✅ Benar! 3² + 4² = 25, dan √25 = 5', true); } else { showFeedback('proof-feedback', '❌ Coba lagi. Ingat: 9 + 16 = 25, √25 = 5', false); } } function checkTripel(btn, expectedTrue) { const row = btn.closest('[data-tripel]'); const isTriple = row.dataset.tripel === 'true'; const correct = (expectedTrue && isTriple) || (!expectedTrue && !isTriple); row.style.background = correct ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)'; row.style.borderColor = correct ? 'rgba(34, 197, 94, 0.5)' : 'rgba(239, 68, 68, 0.5)'; row.querySelectorAll('button').forEach(b => b.disabled = true); } function checkAngle(btn, containerId, answer) { const answers = { 'tp3-q1': 'lancip', 'tp3-q2': 'tumpul' }; const correct = answers[containerId] === answer; const container = document.getElementById(containerId); container.querySelectorAll('button').forEach(b => b.disabled = true); if (correct) { btn.style.background = '#22c55e'; btn.style.color = 'white'; showFeedback(containerId + '-feedback', '✅ Benar!', true); } else { btn.style.background = '#ef4444'; btn.style.color = 'white'; showFeedback(containerId + '-feedback', `❌ Jawaban: ${answers[containerId]}`, false); } } function checkDistance() { const dx = document.getElementById('dist-dx').value; const dy = document.getElementById('dist-dy').value; const ans = document.getElementById('dist-ans').value; if (dx == '3' && dy == '4' && ans == '5') { showFeedback('dist-feedback', '✅ Benar! Jarak = 5 satuan', true); } else { showFeedback('dist-feedback', '❌ Coba lagi: Δx=3, Δy=4, d=√25=5', false); } } function checkContext() { const ans = document.getElementById('context-ans').value; if (ans == '12') { showFeedback('context-feedback', '✅ Benar! √(13²-5²) = √144 = 12m', true); } else { showFeedback('context-feedback', '❌ Gunakan: √(13²-5²) = √144 = 12', false); } } function selectEmoji(btn) { document.querySelectorAll('#emoji-picker button').forEach(b => b.style.transform = ''); btn.style.transform = 'scale(1.4)'; } function submitReflection() { document.getElementById('reflect-success').classList.remove('hidden'); } let randomCounter = 0; function generateRandom(quizId) { randomCounter++; const container = document.getElementById(quizId + '-random'); container.innerHTML = ''; let q; switch(quizId) { case 'quiz1': q = genTP1(); break; case 'quiz2': q = genTP2(); break; case 'quiz3': q = genTP3(); break; case 'quiz4': q = genTP4(); break; case 'quiz5': q = genTP5(); break; case 'quiz6': q = genTP6(); break; } const qId = `${quizId}-rand-${randomCounter}`; let html = `<div class="space-y-3" id="${qId}"><p class="font-medium text-white text-sm">${q.question}</p><div class="grid grid-cols-2 gap-2">`; q.options.forEach(opt => { html += `<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkRandom(this,'${qId}',${opt.correct})">${opt.text}</button>`; }); html += `</div><div class="feedback-box" id="${qId}-feedback"></div></div>`; container.innerHTML = html; container.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } function checkRandom(btn, qId, isCorrect) { const container = document.getElementById(qId); const buttons = container.querySelectorAll('.quiz-option'); buttons.forEach(b => b.disabled = true); if (isCorrect) { btn.classList.add('correct'); showFeedback(qId + '-feedback', '✅ Benar! Hebat!', true); } else { btn.classList.add('wrong'); buttons.forEach(b => { if (b.getAttribute('onclick').includes('true)')) b.classList.add('show-correct'); }); showFeedback(qId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false); } } const triplets = [[3,4,5],[5,12,13],[8,15,17],[7,24,25],[9,40,41],[11,60,61],[20,21,29],[12,35,37],[6,8,10],[9,12,15],[15,20,25],[10,24,26]]; function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); } function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function genTP1() { const t = triplets[randInt(0, triplets.length-1)]; const a = t[0], b = t[1], c = t[2]; const wrong1 = c + randInt(1,3); const wrong2 = c - randInt(1,2) || c + 4; const wrong3 = a + b; const options = shuffle([ { text: String(c), correct: true }, { text: String(wrong1), correct: false }, { text: String(wrong2), correct: false }, { text: String(wrong3), correct: false } ]); return { question: `<span class="text-white">Jika a=${a}, b=${b}, berapakah c (hipotenusa)?</span>`, options }; } function genTP2() { const isTriple = Math.random() > 0.4; let a, b, c, text; if (isTriple) { const t = triplets[randInt(0, triplets.length-1)]; const k = randInt(1,3); a = t[0]*k; b = t[1]*k; c = t[2]*k; } else { a = randInt(3,10); b = randInt(a+1, a+8); c = b + randInt(1,3); while (a*a + b*b === c*c) { c++; } } text = `${a}, ${b}, ${c}`; const options = shuffle([ { text: 'Ya, tripel Pythagoras', correct: isTriple }, { text: 'Bukan tripel Pythagoras', correct: !isTriple } ]); return { question: `<span class="text-white">Apakah (${text}) tripel Pythagoras?<br><small class="opacity-70">Cek: ${a}² + ${b}² = ${a*a} + ${b*b} = ${a*a+b*b}, dan ${c}² = ${c*c}</small></span>`, options }; } function genTP3() { const type = randInt(0,2); let a, b, c; if (type === 1) { const t = triplets[randInt(0,5)]; a = t[0]; b = t[1]; c = t[2]; } else if (type === 0) { a = randInt(4,8); b = randInt(a, a+4); c = b + randInt(0,1); while (c*c >= a*a + b*b) { c--; } if (c <= b) c = b; if (c*c >= a*a+b*b) { a++; } } else { a = randInt(3,6); b = randInt(a, a+3); c = b + randInt(2,5); while (c*c <= a*a + b*b) { c++; } } const correctAns = (c*c === a*a+b*b) ? 'Siku-siku' : (c*c > a*a+b*b) ? 'Tumpul' : 'Lancip'; const options = shuffle([ { text: 'Lancip', correct: correctAns === 'Lancip' }, { text: 'Siku-siku', correct: correctAns === 'Siku-siku' }, { text: 'Tumpul', correct: correctAns === 'Tumpul' } ]); return { question: `<span class="text-white">Segitiga sisi ${a}, ${b}, ${c} termasuk...<br><small class="opacity-70">${a}²+${b}²=${a*a+b*b}, ${c}²=${c*c}</small></span>`, options }; } function genTP4() { const type45 = Math.random() > 0.5; if (type45) { const k = randInt(2,9); const ans = `${k}√2`; const options = shuffle([ { text: ans, correct: true }, { text: `${k*2}`, correct: false }, { text: `${k}√3`, correct: false }, { text: `${k}`, correct: false } ]); return { question: `<span class="text-white">Segitiga 45°-45°-90° dengan kaki = ${k}. Hipotenusa = ?</span>`, options }; } else { const k = randInt(2,8); const ans = `${k*2}`; const options = shuffle([ { text: ans, correct: true }, { text: `${k}√3`, correct: false }, { text: `${k}√2`, correct: false }, { text: `${k*3}`, correct: false } ]); return { question: `<span class="text-white">Segitiga 30°-60°-90° dengan sisi terpendek = ${k}. Hipotenusa = ?</span>`, options }; } } function genTP5() { const x1 = randInt(0,5), y1 = randInt(0,5); let dx, dy; const pairs = [[3,4],[6,8],[5,12],[8,6],[4,3],[9,12]]; const p = pairs[randInt(0, pairs.length-1)]; dx = p[0]; dy = p[1]; const x2 = x1 + dx, y2 = y1 + dy; const d = Math.round(Math.sqrt(dx*dx + dy*dy)); const options = shuffle([ { text: String(d), correct: true }, { text: String(d+2), correct: false }, { text: String(d-1 > 0 ? d-1 : d+3), correct: false }, { text: String(dx+dy), correct: false } ]); return { question: `<span class="text-white">Jarak titik (${x1},${y1}) ke (${x2},${y2}) = ?</span>`, options }; } function genTP6() { const scenarios = [ (t) => ({ q: `<span class="text-white">Tangga ${t[2]}m disandarkan ke dinding. Jarak kaki ke dinding ${t[0]}m. Tinggi dinding?</span>`, ans: t[1] }), (t) => ({ q: `<span class="text-white">Tiang ${t[1]}m, kawat dari puncak ke tanah sejauh ${t[0]}m. Panjang kawat?</span>`, ans: t[2] }), (t) => ({ q: `<span class="text-white">Benang layang-layang ${t[2]}m, jarak horizontal ${t[0]}m. Tinggi?</span>`, ans: t[1] }), ]; const t = triplets[randInt(0, triplets.length-1)]; const s = scenarios[randInt(0, scenarios.length-1)](t); const options = shuffle([ { text: `${s.ans} m`, correct: true }, { text: `${s.ans + randInt(1,3)} m`, correct: false }, { text: `${s.ans - randInt(1,2) > 0 ? s.ans - randInt(1,2) : s.ans + 4} m`, correct: false }, { text: `${t[0] + t[1]} m`, correct: false } ]); return { question: s.q, options }; } lucide.createIcons(); </script> </body> </html>

Kelas 8 Matematika

Bilangan Berpangkat

<!doctype html> <html lang="id"> <head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script><script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media Pembelajaran - Bilangan Berpangkat & Bentuk Akar</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@600;700;800&display=swap" rel="stylesheet"> <style> :root { --primary: #6366f1; --primary-dark: #4f46e5; --accent: #f59e0b; --success: #10b981; --error: #ef4444; } body { font-family: 'DM Sans', sans-serif; } h1, h2, h3, .heading-font { font-family: 'Fraunces', serif; } .nav-item.active { background: var(--primary); color: white; } .option-btn { transition: all 0.2s; } .option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); } .option-btn.correct { background: var(--success) !important; color: white !important; transform: scale(1.02); } .option-btn.incorrect { background: var(--error) !important; color: white !important; animation: shake 0.4s; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } @keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } .fade-in { animation: fadeInUp 0.5s ease-out; } .progress-fill { transition: width 0.5s ease; } @keyframes pop { 0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} } .emoji-pop { animation: pop 0.3s ease; } </style> <script src="/_sdk/e3937a0574eb2d69.data_sdk.js" type="text/javascript" integrity="sha512-xbp/ACqEQy1aDxYMtXTrR3y5MUbzxuggRR/9sD48Gl4VhLMMCiAHsxMaFV6DTdeBpR6ymF+t2zhPKYkWM3+Jfw=="></script> <script src="/_sdk/9432170dbd2ae0df.resizing_sdk.js" type="text/javascript" integrity="sha512-FeT+58sb1f9ejWPWFjCbJvTT+SDwGV+ngrHUnlO7TWEOoqwOLj6p256kO3vOL7DIWl1cIgrobiof8v2bOigwPg=="></script> </head> <body data-template-id="__page-root" class="min-h-screen text-white overflow-hidden"> <div class="flex h-screen" style="height: calc(100 * min(var(--vh, 1vh), 1vh))"> <aside class="w-64 bg-slate-900 border-r border-slate-700 flex-shrink-0 overflow-y-auto hidden md:block"> <div class="p-4"> <h1 data-template-id="app-title" class="canva-text heading-font text-lg font-bold text-indigo-300"></h1> </div> <nav id="sidebar-nav" class="px-2 space-y-1"></nav> </aside> <div class="flex-1 flex flex-col overflow-hidden"> <header class="bg-slate-900/80 backdrop-blur border-b border-slate-700 px-4 py-3 flex items-center gap-3"><button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-slate-700"><i data-lucide="menu" class="w-5 h-5"></i></button> <div class="flex-1"> <div class="h-2 bg-slate-700 rounded-full overflow-hidden"> <div id="progress-bar" class="progress-fill h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full" style="width:0%"></div> </div> </div><span id="progress-text" class="text-sm text-slate-400">0%</span> </header> <main id="content-area" class="flex-1 overflow-y-auto p-4 md:p-8"></main> <footer class="bg-slate-900/80 backdrop-blur border-t border-slate-700 px-4 py-3 flex justify-between items-center"><button id="prev-btn" data-template-id="prev-button" class="canva-button px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 flex items-center gap-2 disabled:opacity-40" disabled><i data-lucide="chevron-left" class="w-4 h-4"></i></button> <span id="slide-indicator" class="text-sm text-slate-400"></span> <button id="next-btn" data-template-id="next-button" class="canva-button px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 flex items-center gap-2"><i data-lucide="chevron-right" class="w-4 h-4"></i></button> </footer> </div> </div> <div id="mobile-overlay" class="fixed inset-0 bg-black/60 z-40 hidden"> <aside class="w-64 bg-slate-900 h-full overflow-y-auto p-4"> <div class="flex justify-between items-center mb-4"> <h2 class="heading-font text-indigo-300 font-bold">Menu</h2><button id="close-mobile" class="p-2 hover:bg-slate-700 rounded"><i data-lucide="x" class="w-5 h-5"></i></button> </div> <nav id="mobile-nav" class="space-y-1"></nav> </aside> </div> <script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script> <script> (function() { // Random number helpers function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffle(arr) { const a = [...arr]; for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];} return a; } // Infinite quiz generators per TP function generateTP1() { const base = randInt(2, 9); const exp = randInt(2, 5); const answer = Math.pow(base, exp); const wrong1 = base * exp; const wrong2 = Math.pow(base, exp - 1); return { question: `${base}<sup>${exp}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) }; } function generateTP2() { const base = randInt(2, 5); const m = randInt(2, 5); const n = randInt(1, 4); const answer = Math.pow(base, m + n); const wrong1 = Math.pow(base, m * n); const wrong2 = Math.pow(base * 2, m); return { question: `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) }; } function generateTP3() { const a = randInt(2, 5), ea = randInt(2, 3); const b = randInt(2, 4), eb = randInt(2, 3); const va = Math.pow(a, ea), vb = Math.pow(b, eb); const answer = va + vb; const wrong1 = va * vb; const wrong2 = va - vb; return { question: `${a}<sup>${ea}</sup> + ${b}<sup>${eb}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) }; } function generateTP4() { const a = randInt(1, 9); const exp = randInt(3, 8); const num = a * Math.pow(10, exp); const numStr = num.toLocaleString('id-ID'); const answer = `${a} × 10^${exp}`; const wrong1 = `${a*10} × 10^${exp-1}`; const wrong2 = `${a} × 10^${exp+1}`; return { question: `Ubah ke notasi ilmiah: ${numStr}`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true }; } function generateTP5() { const perfects = [4,9,16,25,36,49,64,81,100]; const nonPerfects = [2,3,5,6,7,8,10,11,12,13,14,15,17,19,20,21]; const correct = nonPerfects[randInt(0, nonPerfects.length-1)]; const w1 = perfects[randInt(0, perfects.length-1)]; const w2 = perfects[randInt(0, perfects.length-1)]; return { question: `Mana yang termasuk bentuk akar?`, correct: `√${correct}`, options: shuffle([`√${correct}`, `√${w1}`, `√${w2}`]), isText: true }; } function generateTP6() { const pairs = [[2,8],[3,12],[2,18],[5,20],[3,27],[2,32],[2,50],[3,48]]; const [f, n] = pairs[randInt(0, pairs.length-1)]; const sqrt = Math.sqrt(n / (f*f)); const inner = n / (f*f); const answer = `${f}√${inner}`; const wrong1 = `${inner}√${f}`; const wrong2 = `√${n}`; return { question: `Sederhanakan: √${n} = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true }; } function generateTP7() { const nums = [2,4,6,8,10,12]; const bases = [2,3,5,6,7]; const num = nums[randInt(0, nums.length-1)]; const base = bases[randInt(0, bases.length-1)]; const gcd = num / base; // Simplified: num/√base → (num√base)/base const answer = `${num}√${base}/${base}`; const wrong1 = `${num*base}`; const wrong2 = `√${num*base}`; return { question: `Rasionalkan: ${num}/√${base} = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true }; } function generateTP8() { const areas = [8,12,18,20,27,32,45,50,72,75,98]; const area = areas[randInt(0, areas.length-1)]; // find simplification let bestF = 1, bestR = area; for(let i = Math.floor(Math.sqrt(area)); i >= 2; i--) { if(area % (i*i) === 0) { bestF = i; bestR = area/(i*i); break; } } const answer = bestF > 1 ? `${bestF}√${bestR} cm` : `√${area} cm`; const wrong1 = `${area/2} cm`; const wrong2 = `√${area} cm`; return { question: `Luas persegi = ${area} cm². Panjang sisinya = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2 === answer ? `${bestF*2}√${bestR} cm` : wrong2]), isText: true }; } const generators = [generateTP1, generateTP2, generateTP3, generateTP4, generateTP5, generateTP6, generateTP7, generateTP8]; function buildInfiniteQuizHTML(tpIndex) { return ` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-6"> <span class="text-5xl">♾️</span> <h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Latihan Tak Terbatas - TP${tpIndex+1}</h2> <p class="text-slate-400">Soal otomatis! Terus berlatih sampai mahir.</p> <div class="mt-3 inline-flex items-center gap-2 bg-slate-800 px-4 py-2 rounded-full border border-slate-600"> <span class="text-green-400 font-bold" id="inf-correct-${tpIndex}">0</span> <span class="text-slate-500">/</span> <span class="text-slate-300" id="inf-total-${tpIndex}">0</span> <span class="text-slate-400 text-sm">benar</span> </div> </div> <div id="inf-question-${tpIndex}" class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"></div> <div id="inf-feedback-${tpIndex}" class="hidden rounded-xl p-4 mb-4"></div> <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-3 rounded-xl transition-all" onclick="nextInfQuestion(${tpIndex})">Soal Berikutnya →</button> </div>`; } function renderInfQuestion(tpIndex) { const q = generators[tpIndex](); const container = document.getElementById(`inf-question-${tpIndex}`); const fb = document.getElementById(`inf-feedback-${tpIndex}`); fb.classList.add('hidden'); let optionsHtml = q.options.map(opt => { const val = q.isText ? opt : opt; const display = q.isText ? opt : opt; return `<button class="option-btn bg-slate-700 hover:bg-slate-600 p-3 rounded-lg" data-value="${String(val).replace(/"/g, '"')}" onclick="checkInf(this,${tpIndex},'${String(q.correct).replace(/'/g,"\\'")}')">` + display + `</button>`; }).join(''); container.innerHTML = `<p class="font-medium text-lg mb-3">${q.question}</p><div class="grid grid-cols-3 gap-2">${optionsHtml}</div>`; } window.nextInfQuestion = function(tpIndex) { renderInfQuestion(tpIndex); }; window.checkInf = function(btn, tpIndex, correct) { const container = document.getElementById(`inf-question-${tpIndex}`); const allBtns = container.querySelectorAll('.option-btn'); const selected = btn.getAttribute('data-value'); allBtns.forEach(b => b.disabled = true); const totalEl = document.getElementById(`inf-total-${tpIndex}`); const correctEl = document.getElementById(`inf-correct-${tpIndex}`); totalEl.textContent = parseInt(totalEl.textContent) + 1; const fb = document.getElementById(`inf-feedback-${tpIndex}`); if(selected === correct) { btn.classList.add('correct'); correctEl.textContent = parseInt(correctEl.textContent) + 1; fb.className = 'rounded-xl p-4 mb-4 bg-green-900/30 border border-green-500 text-green-300'; fb.innerHTML = '✅ Benar! Klik "Soal Berikutnya" untuk lanjut.'; } else { btn.classList.add('incorrect'); allBtns.forEach(b => { if(b.getAttribute('data-value') === correct) { b.classList.add('correct'); } }); fb.className = 'rounded-xl p-4 mb-4 bg-red-900/30 border border-red-500 text-red-300'; fb.innerHTML = `❌ Kurang tepat. Jawaban yang benar: <strong>${correct}</strong>`; } fb.classList.remove('hidden'); setTimeout(() => { document.getElementById(`inf-question-${tpIndex}`).scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100); }; // Slides const slides = [ { section:'Apersepsi', icon:'🔥', title:'Ledakan Bakteri!', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-6"><span class="text-6xl emoji-pop inline-block">🦠</span><h2 class="heading-font text-3xl font-bold mt-4 text-indigo-200">Bayangkan Ini...</h2></div> <div class="bg-slate-800 rounded-2xl p-6 border border-slate-600 mb-6"> <img data-template-id="bacteria-img" class="canva-image w-full h-48 object-cover rounded-xl mb-4" loading="lazy"> <p class="text-lg text-slate-200 leading-relaxed">1 bakteri membelah diri jadi 2 setiap 20 menit. Setelah <strong class="text-amber-400">4 jam</strong>, kira-kira ada berapa bakteri?</p> </div> <div class="grid grid-cols-2 gap-3" id="apersepsi-q1"> <button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">24 bakteri</button> <button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">240 bakteri</button> <button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'correct')">4.096 bakteri</button> <button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">1 juta bakteri</button> </div> <div id="aper-feedback" class="mt-4 hidden bg-indigo-900/50 border border-indigo-500 rounded-xl p-4"><p class="text-indigo-200">🎯 <strong>Tepat!</strong> 2<sup>12</sup> = 4.096! Inilah kekuatan <em>bilangan berpangkat</em>.</p></div> </div>`}, { section:'Apersepsi', icon:'🔥', title:'Dunia Super Kecil & Besar', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-6"><h2 class="heading-font text-3xl font-bold text-indigo-200">Dari Atom ke Galaksi 🌌</h2></div> <div class="grid md:grid-cols-2 gap-4 mb-6"> <div class="bg-slate-800 rounded-2xl p-5 border border-slate-600"><p class="text-5xl text-center mb-3">🔬</p><p class="text-center text-slate-300">Ukuran virus: <strong class="text-cyan-400">0,000000001 m</strong></p></div> <div class="bg-slate-800 rounded-2xl p-5 border border-slate-600"><img data-template-id="galaxy-img" class="canva-image w-full h-32 object-cover rounded-xl mb-3" loading="lazy"><p class="text-center text-slate-300">Jarak Bumi-Matahari: <strong class="text-amber-400">150.000.000.000 m</strong></p></div> </div> <div class="bg-gradient-to-r from-indigo-900/50 to-purple-900/50 rounded-2xl p-6 border border-indigo-500/30 text-center"> <p class="text-xl text-indigo-100">💡 Bagaimana kalau ada cara <strong>lebih singkat</strong> untuk menulis angka-angka itu?</p> </div> </div>`}, { section:'Asesmen Awal', icon:'📋', title:'Cek Pemahaman Awal', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-6"><span class="text-5xl">🧠</span><h2 class="heading-font text-2xl font-bold mt-3 text-indigo-200">Cek Dulu!</h2><p class="text-slate-400 mt-1">Ini bukan nilai!</p></div> <div id="pretest" class="space-y-4"> <div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">1. 3 × 3 × 3 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'correct')">27</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'wrong')">9</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'wrong')">12</button></div></div> <div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">2. √9 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'correct')">3</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'wrong')">4.5</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'wrong')">81</button></div></div> <div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">3. 10×10×10 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'wrong')">30</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'correct')">10³</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'wrong')">3¹⁰</button></div></div> </div> <div id="pretest-result" class="mt-4 hidden bg-slate-800 rounded-xl p-5 border border-indigo-500 text-center"><p class="text-xl font-bold text-indigo-300" id="pretest-score"></p><p class="text-slate-400 mt-2">Apapun hasilnya, kita belajar bersama! 💪</p></div> </div>`}, // TP1 { section:'Materi', icon:'📚', title:'TP1: Bilangan Berpangkat', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="bg-gradient-to-br from-indigo-900/60 to-slate-800 rounded-2xl p-6 border border-indigo-500/30 mb-6"> <h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4">Bilangan Berpangkat Bulat</h2> <div class="bg-slate-900/50 rounded-xl p-4 mb-4 text-center"><p class="text-3xl font-bold">a<sup>n</sup> = a × a × ... × a</p><p class="text-slate-400 mt-2">sebanyak <strong class="text-amber-400">n</strong> kali</p></div> <div class="grid md:grid-cols-2 gap-4"> <div class="bg-slate-800 rounded-lg p-4"><p class="text-sm text-slate-400 mb-1">Contoh:</p><p class="text-xl">2<sup>5</sup> = 2×2×2×2×2 = <strong class="text-green-400">32</strong></p></div> <div class="bg-slate-800 rounded-lg p-4"><p class="text-sm text-slate-400 mb-1">Pangkat negatif:</p><p class="text-xl">2<sup>-3</sup> = 1/2³ = <strong class="text-green-400">1/8</strong></p></div> </div> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP1', content: '__INF_0__' }, // TP2 { section:'Materi', icon:'📚', title:'TP2: Sifat Bilangan Berpangkat', content:` <div class="max-w-3xl mx-auto fade-in"> <h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">5 Sifat Penting ⚡</h2> <div class="space-y-3 mb-6"> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">1</span><div><p class="font-medium">a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></p></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">2</span><div><p class="font-medium">a<sup>m</sup> ÷ a<sup>n</sup> = a<sup>m-n</sup></p></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">3</span><div><p class="font-medium">(a<sup>m</sup>)<sup>n</sup> = a<sup>m×n</sup></p></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">4</span><div><p class="font-medium">(a×b)<sup>n</sup> = a<sup>n</sup> × b<sup>n</sup></p></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">5</span><div><p class="font-medium">a<sup>0</sup> = 1 (a ≠ 0)</p></div></div> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP2', content: '__INF_1__' }, // TP3 { section:'Materi', icon:'📚', title:'TP3: Operasi Bilangan Berpangkat', content:` <div class="max-w-3xl mx-auto fade-in"> <h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Operasi Hitung 🔢</h2> <div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5"> <h3 class="font-bold text-lg text-amber-400 mb-3">Ingat!</h3> <ul class="space-y-2 text-slate-300"> <li>✅ Perkalian & Pembagian: pakai sifat pangkat</li> <li>✅ Penjumlahan & Pengurangan: hitung dulu nilainya!</li> <li class="text-red-400">❌ 2³ + 2⁴ ≠ 2⁷</li> <li class="text-green-400">✅ 2³ + 2⁴ = 8 + 16 = 24</li> </ul> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP3', content: '__INF_2__' }, // TP4 { section:'Materi', icon:'📚', title:'TP4: Notasi Ilmiah', content:` <div class="max-w-3xl mx-auto fade-in"> <h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Notasi Ilmiah 🚀</h2> <div class="bg-gradient-to-r from-cyan-900/40 to-indigo-900/40 rounded-2xl p-6 border border-cyan-500/30 mb-5"> <div class="text-center mb-4"><p class="text-2xl font-bold">a × 10<sup>n</sup></p><p class="text-slate-400">dimana 1 ≤ a < 10</p></div> <div class="grid md:grid-cols-2 gap-4"> <div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-cyan-400">🔬 Ukuran virus:</p><p>0,0000001 m = <strong>1 × 10<sup>-7</sup> m</strong></p></div> <div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-amber-400">🌍 Jarak Bumi-Matahari:</p><p>150.000.000 km = <strong>1,5 × 10<sup>8</sup> km</strong></p></div> </div> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP4', content: '__INF_3__' }, // TP5 { section:'Materi', icon:'📚', title:'TP5: Bentuk Akar', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-5"><span class="text-5xl">🌳</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-2">Bentuk Akar</h2></div> <div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5"> <img data-template-id="roots-img" class="canva-image w-full h-40 object-cover rounded-xl mb-4" loading="lazy"> <p class="text-slate-300 mb-3"><strong class="text-amber-400">Bentuk akar</strong> = akar yang hasilnya bilangan irasional.</p> <div class="grid grid-cols-2 gap-3"> <div class="bg-green-900/30 border border-green-500/30 rounded-lg p-3 text-center"><p class="text-sm text-green-400">✅ Bentuk Akar</p><p class="text-xl">√2, √3, √5</p></div> <div class="bg-red-900/30 border border-red-500/30 rounded-lg p-3 text-center"><p class="text-sm text-red-400">❌ Bukan</p><p class="text-xl">√4=2, √9=3</p></div> </div> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP5', content: '__INF_4__' }, // TP6 { section:'Materi', icon:'📚', title:'TP6: Operasi Bentuk Akar', content:` <div class="max-w-3xl mx-auto fade-in"> <h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Operasi Bentuk Akar ✂️</h2> <div class="space-y-3 mb-5"> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-amber-400 font-medium mb-1">Penjumlahan/Pengurangan:</p><p>a√c ± b√c = (a±b)√c</p></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-cyan-400 font-medium mb-1">Perkalian:</p><p>√a × √b = √(a×b)</p></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-purple-400 font-medium mb-1">Menyederhanakan:</p><p>√12 = √(4×3) = 2√3</p></div> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP6', content: '__INF_5__' }, // TP7 { section:'Materi', icon:'📚', title:'TP7: Rasionalisasi Penyebut', content:` <div class="max-w-3xl mx-auto fade-in"> <h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Rasionalisasi Penyebut 🎯</h2> <div class="bg-gradient-to-r from-purple-900/40 to-indigo-900/40 rounded-2xl p-6 border border-purple-500/30 mb-5"> <p class="text-slate-300 mb-4">Menghilangkan bentuk akar dari penyebut pecahan.</p> <div class="space-y-3"> <div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-purple-300 mb-1">Tipe 1:</p><p class="text-xl text-center">1/√3 × (√3/√3) = <strong>√3/3</strong></p></div> <div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-purple-300 mb-1">Tipe 2: Penyebut (a + √b)</p><p class="text-xl text-center">Kalikan dengan <strong class="text-amber-400">(a - √b)</strong></p></div> </div> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP7', content: '__INF_6__' }, // TP8 { section:'Materi', icon:'📚', title:'TP8: Masalah Kontekstual', content:` <div class="max-w-3xl mx-auto fade-in"> <h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Dunia Nyata! 🌍</h2> <div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5"> <img data-template-id="architect-img" class="canva-image w-full h-40 object-cover rounded-xl mb-4" loading="lazy"> <div class="bg-amber-900/30 border border-amber-500/30 rounded-lg p-4"> <p class="text-amber-300 font-medium mb-2">🏗️ Contoh:</p> <p class="text-slate-300">Luas taman persegi = 72 m². Sisi = √72 = √(36×2) = 6√2 m</p> </div> </div> </div>`}, { section:'Latihan', icon:'♾️', title:'Latihan TP8', content: '__INF_7__' }, // Kuis { section:'Kuis', icon:'🏆', title:'Kuis Penguatan', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-6"><span class="text-5xl">🏆</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Kuis Penguatan</h2><p class="text-slate-400">5 soal cepat!</p></div> <div id="quiz-container"> <div class="quiz-q" data-qi="0"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 1/5</p><p class="font-medium text-lg">(2³)² = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'wrong')">2⁵</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'correct')">2⁶ = 64</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'wrong')">4⁶</button></div></div></div> <div class="quiz-q hidden" data-qi="1"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 2/5</p><p class="font-medium text-lg">0,0067 dalam bentuk baku = ?</p><div class="grid grid-cols-2 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,1,'correct')">6,7 × 10⁻³</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,1,'wrong')">67 × 10⁻⁴</button></div></div></div> <div class="quiz-q hidden" data-qi="2"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 3/5</p><p class="font-medium text-lg">√18 + √2 = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'wrong')">√20</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'correct')">4√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'wrong')">3√2</button></div></div></div> <div class="quiz-q hidden" data-qi="3"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 4/5</p><p class="font-medium text-lg">4/√8 = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'correct')">√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'wrong')">2√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'wrong')">4√8/8</button></div></div></div> <div class="quiz-q hidden" data-qi="4"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 5/5</p><p class="font-medium text-lg">5⁰ + 2⁻¹ = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'correct')">1,5</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'wrong')">1</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'wrong')">0,5</button></div></div></div> </div> <div id="quiz-result" class="hidden text-center bg-gradient-to-r from-indigo-900/50 to-purple-900/50 rounded-2xl p-6 border border-indigo-500/30"><span class="text-5xl" id="quiz-emoji"></span><p class="text-2xl font-bold mt-3" id="quiz-score-text"></p></div> </div>`}, // Asesmen Akhir { section:'Asesmen Akhir', icon:'📝', title:'Evaluasi Akhir', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-6"><span class="text-5xl">📝</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Asesmen Akhir</h2><p class="text-slate-400">8 soal sesuai 8 TP</p></div> <div id="final-test" class="space-y-4"> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP1</p><p class="font-medium mb-2">1. 4⁴ = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'correct','4⁴ = 4×4×4×4 = 256')">256</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'wrong','4⁴ = 4×4×4×4 = 256')">64</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'wrong','4⁴ = 4×4×4×4 = 256')">16</button></div><div id="final-explain-0" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP2</p><p class="font-medium mb-2">2. 5³ ÷ 5¹ = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'correct','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">25</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'wrong','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'wrong','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">125</button></div><div id="final-explain-1" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP3</p><p class="font-medium mb-2">3. 2⁴ - 3² = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'correct','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">7</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'wrong','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'wrong','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">23</button></div><div id="final-explain-2" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP4</p><p class="font-medium mb-2">4. 45.000.000 = ?</p><div class="grid grid-cols-2 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,3,'correct','Geser desimal ke kiri hingga ada 1 digit, maka 4,5 × 10⁷')">4,5 × 10⁷</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,3,'wrong','Geser desimal ke kiri hingga ada 1 digit, maka 4,5 × 10⁷')">45 × 10⁶</button></div><div id="final-explain-3" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP5</p><p class="font-medium mb-2">5. Mana bentuk akar?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'wrong','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√49</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'correct','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√13</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'wrong','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√100</button></div><div id="final-explain-4" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP6</p><p class="font-medium mb-2">6. 2√3 × 3√3 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'correct','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">18</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'wrong','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">6√3</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'wrong','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">6√9</button></div><div id="final-explain-5" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP7</p><p class="font-medium mb-2">7. 10/√5 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'correct','10/√5 × √5/√5 = 10√5/5 = 2√5')">2√5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'wrong','10/√5 × √5/√5 = 10√5/5 = 2√5')">5√2</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'wrong','10/√5 × √5/√5 = 10√5/5 = 2√5')">10√5/5</button></div><div id="final-explain-6" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> <div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP8</p><p class="font-medium mb-2">8. Luas persegi = 200 cm². Sisi = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'correct','Sisi = √200 = √(100×2) = 10√2 cm')">10√2 cm</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'wrong','Sisi = √200 = √(100×2) = 10√2 cm')">100 cm</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'wrong','Sisi = √200 = √(100×2) = 10√2 cm')">√200 cm</button></div><div id="final-explain-7" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div> </div> <div id="final-result" class="hidden mt-6 text-center bg-gradient-to-r from-green-900/50 to-emerald-900/50 rounded-2xl p-6 border border-green-500/30"><span class="text-5xl" id="final-emoji"></span><p class="text-2xl font-bold mt-3" id="final-score-text"></p><p class="text-slate-400 mt-2" id="final-msg"></p></div> </div>`}, // Refleksi { section:'Refleksi', icon:'💭', title:'Refleksi Mandiri', content:` <div class="max-w-3xl mx-auto fade-in"> <div class="text-center mb-6"> <img data-template-id="celebrate-img" class="canva-image w-full h-40 object-cover rounded-2xl mb-4" loading="lazy"> <h2 class="heading-font text-2xl font-bold text-indigo-200">Refleksi Diri 💭</h2> </div> <div class="grid grid-cols-3 gap-4 mb-6" id="mood-select"> <button class="bg-slate-800 hover:bg-indigo-900/50 border border-slate-600 hover:border-indigo-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">😊</span><p class="text-sm">Paham banget!</p></button> <button class="bg-slate-800 hover:bg-amber-900/50 border border-slate-600 hover:border-amber-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">🤔</span><p class="text-sm">Lumayan</p></button> <button class="bg-slate-800 hover:bg-red-900/50 border border-slate-600 hover:border-red-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">😵</span><p class="text-sm">Masih bingung</p></button> </div> <div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"> <label for="reflection-text" class="block font-medium mb-2">Apa yang paling kamu ingat?</label> <textarea id="reflection-text" class="w-full bg-slate-900 border border-slate-600 rounded-lg p-3 text-white resize-none focus:border-indigo-500 focus:outline-none" rows="3" placeholder="Tulis di sini..."></textarea> </div> <div id="reflection-done" class="hidden mt-4 text-center bg-indigo-900/30 border border-indigo-500/30 rounded-xl p-6"><span class="text-5xl">🎉</span><p class="text-xl font-bold text-indigo-200 mt-3">Terima kasih!</p></div> <button id="submit-reflection" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-3 rounded-xl transition-all" onclick="submitReflection()">Kirim Refleksi ✨</button> </div>`} ]; let currentSlide = 0; let preScores = [null,null,null]; let quizScores = [null,null,null,null,null]; let finalScores = Array(8).fill(null); function init() { renderNav(); renderSlide(); lucide.createIcons(); document.getElementById('prev-btn').addEventListener('click', () => navigate(-1)); document.getElementById('next-btn').addEventListener('click', () => navigate(1)); document.getElementById('mobile-menu-btn').addEventListener('click', () => document.getElementById('mobile-overlay').classList.remove('hidden')); document.getElementById('close-mobile').addEventListener('click', () => document.getElementById('mobile-overlay').classList.add('hidden')); document.getElementById('mobile-overlay').addEventListener('click', (e) => { if(e.target===e.currentTarget) e.currentTarget.classList.add('hidden'); }); } function renderNav() { const navHtml = slides.map((s,i) => `<button class="nav-item w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2 hover:bg-slate-700 transition-colors ${i===currentSlide?'active':''}" onclick="goTo(${i})">${s.icon} <span class="truncate">${s.title}</span></button>`).join(''); document.getElementById('sidebar-nav').innerHTML = navHtml; document.getElementById('mobile-nav').innerHTML = navHtml; } function renderSlide() { const s = slides[currentSlide]; let content = s.content; // Check if infinite quiz slide const infMatch = content.match(/^__INF_(\d+)__$/); if (infMatch) { const tpIdx = parseInt(infMatch[1]); content = buildInfiniteQuizHTML(tpIdx); } document.getElementById('content-area').innerHTML = content; if (infMatch) { renderInfQuestion(parseInt(infMatch[1])); } document.getElementById('slide-indicator').textContent = `${currentSlide+1} / ${slides.length}`; document.getElementById('prev-btn').disabled = currentSlide === 0; const pct = Math.round(((currentSlide+1)/slides.length)*100); document.getElementById('progress-bar').style.width = pct+'%'; document.getElementById('progress-text').textContent = pct+'%'; renderNav(); lucide.createIcons(); } function navigate(dir) { const next = currentSlide + dir; if(next >= 0 && next < slides.length) { currentSlide = next; renderSlide(); document.getElementById('content-area').scrollTop = 0; } } window.goTo = function(i) { currentSlide = i; renderSlide(); document.getElementById('content-area').scrollTop = 0; document.getElementById('mobile-overlay').classList.add('hidden'); }; window.checkAper = function(btn, result) { const parent = btn.closest('#apersepsi-q1'); parent.querySelectorAll('button').forEach(b => b.disabled = true); btn.classList.add(result === 'correct' ? 'correct' : 'incorrect'); const fb = document.getElementById('aper-feedback'); if(result === 'correct') fb.classList.remove('hidden'); else { fb.innerHTML = '<p class="text-amber-300">Bukan itu! 2¹² = 4.096!</p>'; fb.classList.remove('hidden'); } }; window.preAnswer = function(btn, idx, result) { const parent = btn.closest('.bg-slate-800'); parent.querySelectorAll('button').forEach(b => b.disabled = true); btn.classList.add(result === 'correct' ? 'correct' : 'incorrect'); preScores[idx] = result === 'correct' ? 1 : 0; if(preScores.every(s => s !== null)) { const total = preScores.reduce((a,b)=>a+b,0); document.getElementById('pretest-score').textContent = `Skor: ${total}/3`; document.getElementById('pretest-result').classList.remove('hidden'); } }; window.quizAnswer = function(btn, idx, result) { const parent = btn.closest('.quiz-q'); parent.querySelectorAll('.option-btn').forEach(b => b.disabled = true); btn.classList.add(result === 'correct' ? 'correct' : 'incorrect'); quizScores[idx] = result === 'correct' ? 1 : 0; setTimeout(() => { const nextQ = document.querySelector(`.quiz-q[data-qi="${idx+1}"]`); if(nextQ) { parent.classList.add('hidden'); nextQ.classList.remove('hidden'); } else { const total = quizScores.reduce((a,b)=>a+b,0); document.getElementById('quiz-emoji').textContent = total >= 4 ? '🌟' : '👍'; document.getElementById('quiz-score-text').textContent = `Skor: ${total}/5`; document.getElementById('quiz-result').classList.remove('hidden'); } }, 800); }; window.finalAns = function(btn, idx, result, explanation) { const parent = btn.closest('.bg-slate-800'); parent.querySelectorAll('.option-btn').forEach(b => b.disabled = true); btn.classList.add(result === 'correct' ? 'correct' : 'incorrect'); finalScores[idx] = result === 'correct' ? 1 : 0; // Show explanation if answer is wrong if(result === 'wrong') { const explainEl = document.getElementById(`final-explain-${idx}`); explainEl.innerHTML = `<strong class="text-indigo-300">📖 Pembahasan:</strong> ${explanation}`; explainEl.classList.remove('hidden'); } if(finalScores.every(s => s !== null)) { const total = finalScores.reduce((a,b)=>a+b,0); document.getElementById('final-emoji').textContent = total >= 7 ? '🌟' : '👍'; document.getElementById('final-score-text').textContent = `Skor: ${total}/8`; document.getElementById('final-msg').textContent = total >= 7 ? 'Luar biasa!' : total >= 5 ? 'Bagus!' : 'Jangan menyerah!'; document.getElementById('final-result').classList.remove('hidden'); } }; window.selectMood = function(btn) { document.querySelectorAll('#mood-select button').forEach(b => { b.classList.remove('ring-2','ring-indigo-500','bg-indigo-900/50'); b.classList.add('bg-slate-800'); }); btn.classList.add('ring-2','ring-indigo-500','bg-indigo-900/50'); btn.classList.remove('bg-slate-800'); }; window.submitReflection = function() { document.getElementById('submit-reflection').classList.add('hidden'); document.getElementById('reflection-done').classList.remove('hidden'); }; document.addEventListener('DOMContentLoaded', init); })(); </script> </body> </html>

Kelas 7 Matematika

Bilangan Rasional - kuis kelompok

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

Kelas 7 Matematika

Bilangan Rasional

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>

1 2 3 4 5

📊 Papan Nilai & Aktivitas Kelas

Nama Siswa	Materi Pelajaran	Hasil Skor	Tingkat Paham	Hambatan Belajar	Strategi Tindakan
nofi yanti	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
wa putri	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fadil tomia	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
putri nuraini	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Adnan Dito Selly	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ilham ulukapy	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Sri Yulianti Pirasou	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
julia ramadany pirasou	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fikram bahtiar maasily	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ASIRNATA SOUMENA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
mega desfiona	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
wa putri	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fahdil tamrin	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
RAHIMA SOUMENA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ismail assel	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syarlan soumena	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
M.Adlan Salaputa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
alfian marinda	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jelita apriliani soulisa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Rifka Tunnisa Tunny	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
hawa nur fadila kiat	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
mega desfiona	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
madania mana anu	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	20	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
tiara wally	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	20	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syafril umar dani wael	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jidan wabula	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ILHAM FAJAR SELY	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
asti komala tunny	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
DINIARTY KHAILA ANG	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
PANDI AZIZ SOUMENA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	50%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jahira soumena	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
rindiani ai	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	50%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Fitra Soumena	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
JENITA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
indri selly	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	50%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ABDUL ISHAQ MARASABESSY	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
rahmat salong	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fadlan soulisa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
PUTRI SETIAWATI MAHULAUW	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
FAJRUL AUFAR MAASILY	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
KANIA KOMAIRA PANCAR	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
MEISYA FIRDA ASSEL	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
muhammad barru soulisa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syafril umar dani wael	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jidan wabula	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
asti komala tunny	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
alfiansyah mahulauw	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jidan wabula	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
refan mahulauw	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syafril umar dani waek	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar

📂 Pilih Materi Pelajaran Belajar

Mengolah Teks Laporan Hasil Observasi

Persamaan dan Pertidaksamaan Linear Satu Variabel

Teorema Pythagoras

Bilangan Berpangkat

Bilangan Rasional - kuis kelompok

Bilangan Rasional

Hak dan Kewajiban Warga Negara

Sistem Pencernaan Manusia

Reproduksi

Relasi dan Fungsi

📊 Papan Nilai & Aktivitas Kelas

Mode Belajar Interaktif