Kelas 7
IPA
Suhu, Pemuaian dan Kalor 2 : Mengkonversi skala termometer Celsius ke Reamur, Fahrenheit, dan Kelvin
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 2 - Konversi Skala Termometer</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #1e1b4b 0%, #311b92 50%, #0f172a 100%);
--card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #38bdf8, #fbbf24); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #fbbf24, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #38bdf8, #fbbf24); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; }
th, td { border: 1px solid var(--card-border); padding: 8px; text-align: center; }
th { background: rgba(56, 189, 248, 0.25); }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 2</span>
<h1>KONVERSI SKALA TERMOMETER</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 3: Suhu, Pemuaian dan Kalor</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran (TP 2):</b></p>
<p>Siswa mampu mengonversikan angka suhu dari skala Celsius ke skala Reamur, Fahrenheit, dan Kelvin menggunakan perbandingan titik tetap termometer.</p>
</div>
<p style="color: var(--primary);">Klik 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Perbedaan Skala Negara</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🇺🇸</span>
<p><b>Laporan Cuaca di Amerika</b></p>
<button class="interactive-btn" onclick="alert('Suhu udara tercatat 77 °F! Di Indonesia skala ini terasa hangat biasa setara 25 °C.')">Cek Skala Fahrenheit</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🔬</span>
<p><b>Laporan Ilmiah Internasional</b></p>
<button class="interactive-btn" onclick="alert('Suhu es mencair ditulis 273 K. Skala Kelvin adalah skala resmi SI tanpa tanda derajat!')">Cek Skala Kelvin</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Sama-Sama Dingin, Angkanya Beda?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa saat es membeku, termometer Celsius menunjukkan $0^{\circ}\text{C}$, Reamur $0^{\circ}\text{R}$, Fahrenheit $32^{\circ}\text{F}$, dan Kelvin $273\text{ K}$?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">🌡️ $0^{\circ}\text{C} = 32^{\circ}\text{F} = 273\text{ K}$</p>
<p>Bagaimana rumusan matematika untuk mengubah satu skala ke skala lainnya?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Aplikasi Konversi dalam Penerbangan & Sains</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Dunia Penerbangan:</b> Pilot membaca suhu luar pesawat dalam Fahrenheit dan mengubahnya ke Celsius untuk sistem kontrol mesin.</li>
<li style="margin-bottom: 10px;"><b>Fisika Antariksa:</b> Suhu permukaan planet luar angkasa selalu dinyatakan dalam skala mutlak Kelvin.</li>
<li><b>Eksportir Makanan:</b> Pengiriman daging beku antarnegara mewajibkan penulisan rentang suhu dalam Celsius dan Fahrenheit.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 2 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 2</span>
<h2>2. Perbandingan Titik Tetap Termometer</h2>
<table>
<tr><th>Skala</th><th>Titik Bawah (Es)</th><th>Titik Atas (Mendidih)</th><th>Rentang Skala</th></tr>
<tr><td><b>Celsius</b></td><td>$0^{\circ}\text{C}$</td><td>$100^{\circ}\text{C}$</td><td>100</td></tr>
<tr><td><b>Reamur</b></td><td>$0^{\circ}\text{R}$</td><td>$80^{\circ}\text{R}$</td><td>80</td></tr>
<tr><td><b>Fahrenheit</b></td><td>$32^{\circ}\text{F}$</td><td>$212^{\circ}\text{F}$</td><td>180</td></tr>
<tr><td><b>Kelvin</b></td><td>$273\text{ K}$</td><td>$373\text{ K}$</td><td>100</td></tr>
</table>
<div class="glass-card" style="margin-top: 10px; text-align: center;">
<p style="color: var(--yellow); font-weight: bold;">Rasio Perbandingan: $t_C : t_R : (t_F - 32) = 5 : 4 : 9$</p>
<p style="font-size: 0.95rem; margin-top: 4px;">• $t_R = \frac{4}{5} t_C$ | • $t_F = \left(\frac{9}{5} t_C\right) + 32$ | • $T = t_C + 273$</p>
</div>
</div>
<!-- SLIDE 6: KUIS TP 2 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 2</span>
<h2>Uji Konversi Skala (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: BATTLE KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Celsius-Reamur)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Celsius-Kelvin)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Fahrenheit)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Titik Tetap)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 8: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji pemahamanmu untuk konversi skala:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Perhitungan konversi sangat lancar! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Terus berlatih soal hitungan ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Tetap semangat, mari kita ulangi perbandingan 5:4:9! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 10: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option><option value="7-B">7-B ⚡</option><option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 3! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 10</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
const q1Data = [
{ q: "1. Suhu $40^{\\circ}\\text{C}$ jika diukur dengan termometer Reamur bernilai...", opts: ["32 °R", "50 °R", "80 °R"], ans: 0 },
{ q: "2. Suhu $100^{\\circ}\\text{C}$ setara dengan titik didih Fahrenheit yaitu...", opts: ["180 °F", "212 °F", "273 °F"], ans: 1 },
{ q: "3. Konversi suhu $27^{\\circ}\\text{C}$ ke skala Kelvin adalah...", opts: ["300 K", "273 K", "310 K"], ans: 0 },
{ q: "4. Angka perbandingan skala $t_C : t_R : (t_F - 32)$ yang benar adalah...", opts: ["5 : 4 : 9", "4 : 5 : 9", "9 : 4 : 5"], ans: 0 },
{ q: "5. Pada suhu $0^{\\circ}\\text{C}$, skala Fahrenheit menunjukkan angka...", opts: ["0 °F", "32 °F", "100 °F"], ans: 1 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 2 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Kurang Tepat!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
const teamData = {
t1: [
{ q: "50 °C = ... °R", opts: ["40 °R", "80 °R"], ans: 0 },
{ q: "20 °C = ... °R", opts: ["16 °R", "25 °R"], ans: 0 },
{ q: "80 °C = ... °R", opts: ["64 °R", "100 °R"], ans: 0 },
{ q: "Rasio Reamur ke Celsius...", opts: ["4/5", "5/4"], ans: 0 },
{ q: "0 °C setara dengan...", opts: ["0 °R", "32 °R"], ans: 0 }
],
t2: [
{ q: "0 °C = ... K", opts: ["273 K", "0 K"], ans: 0 },
{ q: "100 °C = ... K", opts: ["373 K", "273 K"], ans: 0 },
{ q: "Suhu 300 K = ... °C", opts: ["27 °C", "37 °C"], ans: 0 },
{ q: "Suhu mutlak pakai skala...", opts: ["Kelvin", "Fahrenheit"], ans: 0 },
{ q: "37 °C tubuh manusia = ... K", opts: ["310 K", "300 K"], ans: 0 }
],
t3: [
{ q: "100 °C = ... °F", opts: ["212 °F", "180 °F"], ans: 0 },
{ q: "0 °C = ... °F", opts: ["32 °F", "0 °F"], ans: 0 },
{ q: "Pengurang skala Fahrenheit...", opts: ["32", "273"], ans: 0 },
{ q: "Perbandingan Fahrenheit...", opts: ["9", "5"], ans: 0 },
{ q: "50 °C = ... °F", opts: ["122 °F", "90 °F"], ans: 0 }
],
t4: [
{ q: "Titik es mendidih Celsius...", opts: ["100 °C", "212 °C"], ans: 0 },
{ q: "Selisih skala Reamur...", opts: ["80", "100"], ans: 0 },
{ q: "Titik bekunya 273 adalah...", opts: ["Kelvin", "Fahrenheit"], ans: 0 },
{ q: "Selisih skala Fahrenheit...", opts: ["180", "100"], ans: 0 },
{ q: "Titik beku Celsius...", opts: ["0 °C", "32 °C"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
let rawExamData = [
{ q: "1. Jika suhu kamar $25^{\\circ}\\text{C}$, maka pada skala Reamur besarnya adalah...", opts: ["20 °R", "30 °R", "45 °R"], ans: 0 },
{ q: "2. Suhu $77^{\\circ}\\text{F}$ setara dengan suhu Celsius sebesar...", opts: ["25 °C", "30 °C", "45 °C"], ans: 0 },
{ q: "3. Titik didih air pada skala Kelvin adalah...", opts: ["100 K", "273 K", "373 K"], ans: 2 },
{ q: "4. Termometer Reamur memiliki rentang jumlah skala dari titik es ke titik didih sebesar...", opts: ["80", "100", "180"], ans: 0 },
{ q: "5. Suhu $-40^{\\circ}\\text{C}$ akan menunjukkan angka yang SAMA pada skala...", opts: ["Fahrenheit", "Reamur", "Kelvin"], ans: 0 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 2 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawaban Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 1 : Pengukuran Suhu, Prinsip Termometrik, & Jenis-Jenis Termometer (Raksa vs Alkohol)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 1 - Pengukuran Suhu & Termometer</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311b92 100%);
--card-bg: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #f43f5e, #fbbf24); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #f43f5e, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #f43f5e, #fbbf24); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; }
th, td { border: 1px solid var(--card-border); padding: 8px; text-align: left; }
th { background: rgba(56, 189, 248, 0.25); text-align: center; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 1</span>
<h1>SUHU & PENGUKURANNYA</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 3: Suhu, Pemuaian dan Kalor</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran (TP 1):</b></p>
<p>Siswa mampu mengukur suhu zat menggunakan termometer dengan tepat, memahami prinsip kerja sifat termometrik, serta menganalisis kelebihan dan kekurangan bahan cair pengisi termometer.</p>
</div>
<p style="color: var(--primary);">Klik 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Suhu Diri & Benda</h2>
<p>Klik tombol di bawah untuk mengamati hasil pengukuran suhu:</p>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🤒</span>
<p><b>Meraba Dahi Teman saat Demam</b></p>
<button class="interactive-btn" onclick="alert('Tangan hanya merasakan terasa panas/hangat secara relatif, namun TIDAK BISA memberikan angka suhu yang pasti!')">Uji Indra Peraba</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🌡️</span>
<p><b>Pemeriksaan Termometer Klinis</b></p>
<button class="interactive-btn" onclick="alert('Termometer mengukur dengan pasti: Suhu badan = 38,5 °C. Angka pasti ini menunjukkan derajat panas benda!')">Gunakan Termometer</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Mengapa Kulit Kita Bisa Menipu?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">
"Jika kamu celupkan tangan kanan ke air es dan tangan kiri ke air hangat, lalu keduanya ditaruh ke air biasa, mengapa sensasi rasa panas di kedua tanganmu berbeda?"
</p>
<p style="font-size: 3.8rem; margin: 15px 0;">🧊 🖐️ ♨️</p>
<p>Mengapa sains membutuhkan **Termometer** sebagai alat ukur suhu yang baku dan objektif?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Penggunaan Termometer dalam Kehidupan</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Dunia Medis:</b> Termometer inframerah (thermogun) mengukur suhu tubuh tanpa kontak fisik langsung.</li>
<li style="margin-bottom: 10px;"><b>Kandang Peternakan:</b> Termometer Six-Bellani mencatat suhu maksimum dan minimum harian ruang untuk menjaga kesehatan hewan.</li>
<li><b>Laboratorium IPA:</b> Termometer raksa/alkohol dipakai mengamati titik didih air secara presisi.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 1 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 1</span>
<h2>1. Definisi Suhu & Sifat Termometrik</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Suhu:</b> Ukuran derajat panas atau dinginnya suatu benda. Alat ukur resminya adalah <b>Termometer</b>.</p>
<p style="margin-top: 4px;">• <b>Sifat Termometrik:</b> Perubahan sifat zat (seperti volume zat cair) akibat perubahan suhu. Jika dipanaskan volume zat cair memuai (naik), dan jika didinginkan menyusut (turun).</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--accent);">🔴 Air Raksa ($\text{Hg}$)</h4>
<p style="font-size: 0.9rem;">• <b>Kelebihan:</b> Mengkilap (mudah dilihat), pemuaian teratur, tidak membasahi dinding kaca, jangkauan $-39^{\circ}\text{C}$ s.d. $357^{\circ}\text{C}$.</p>
<p style="font-size: 0.9rem; color: var(--yellow); margin-top: 4px;">• <b>Kekurangan:</b> Mahal, beracun, tidak bisa mengukur suhu $< -39^{\circ}\text{C}$.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--primary);">🔵 Alkohol</h4>
<p style="font-size: 0.9rem;">• <b>Kelebihan:</b> Murah, sangat teliti untuk perubahan kecil, titik beku rendah ($-112^{\circ}\text{C}$).</p>
<p style="font-size: 0.9rem; color: var(--yellow); margin-top: 4px;">• <b>Kekurangan:</b> Titik didih rendah ($78^{\circ}\text{C}$), bening (harus diberi pewarna), membasahi dinding.</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 1 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 1</span>
<h2>Uji Pemahaman Suhu & Termometer (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: BATTLE KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Indra Peraba)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Raksa)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Alkohol)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Jenis Termometer)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 8: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji yang menggambarkan pemahamanmu:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Konsep termometer sudah kamu kuasai! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Pertahankan semangat belajar ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan khawatir, mari pelajari lagi bersama guru! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 10: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option><option value="7-B">7-B ⚡</option><option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 2! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 10</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
// Kuis Individual TP 1
const q1Data = [
{ q: "1. Ukuran derajat panas atau dinginnya suatu benda dinamakan...", opts: ["Kalor", "Suhu", "Pemuaian"], ans: 1 },
{ q: "2. Mengapa kulit/tangan tidak bisa dijadikan alat ukur suhu yang tepat?", opts: ["Karena kulit terasa sakit", "Karena tidak memberikan angka pasti (fleksibel)", "Karena kulit bisa terbakar"], ans: 1 },
{ q: "3. Salah satu kelebihan utama air raksa sebagai pengisi termometer adalah...", opts: ["Harganya sangat murah", "Pemuaiannya teratur dan mengkilap", "Titik bekunya sangat rendah"], ans: 1 },
{ q: "4. Cairan alkohol dipilih untuk mengukur suhu daerah sangat dingin karena...", opts: ["Memiliki titik beku rendah (-112 °C)", "Memiliki titik didih tinggi", "Warnanya bening"], ans: 0 },
{ q: "5. Termometer yang digunakan khusus untuk mengukur suhu maksimum dan minimum harian adalah...", opts: ["Termometer Klinis", "Termometer Six-Bellani", "Termometer Gas"], ans: 1 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 1 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Kurang Tepat!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
// Multi User Engine (5 Soal per Tim)
const teamData = {
t1: [
{ q: "Suhu menyatakan derajat... benda.", opts: ["Panaskan", "Panas/dingin"], ans: 1 },
{ q: "Alat baku pengukur suhu adalah...", opts: ["Termometer", "Tangan"], ans: 0 },
{ q: "Indra peraba bersifat...", opts: ["Objektif", "Subjektif"], ans: 1 },
{ q: "Zat cair memuai jika...", opts: ["Dipanaskan", "Didinginkan"], ans: 0 },
{ q: "Zat cair menyusut jika...", opts: ["Didinginkan", "Dipanaskan"], ans: 0 }
],
t2: [
{ q: "Air raksa berwarna...", opts: ["Mengkilap", "Bening"], ans: 0 },
{ q: "Air raksa ... membasahi dinding kaca.", opts: ["Tidak", "Selalu"], ans: 0 },
{ q: "Sifat raksa yang berbahaya adalah...", opts: ["Beracun", "Murah"], ans: 0 },
{ q: "Titik didih air raksa mencapai...", opts: ["357 °C", "78 °C"], ans: 0 },
{ q: "Raksa tidak bisa mengukur suhu di bawah...", opts: ["-39 °C", "0 °C"], ans: 0 }
],
t3: [
{ q: "Titik beku alkohol sangat rendah yaitu...", opts: ["-112 °C", "0 °C"], ans: 0 },
{ q: "Harga alkohol relatif lebih...", opts: ["Murah", "Mahal"], ans: 0 },
{ q: "Kelemahan alkohol titik didihnya rendah yaitu...", opts: ["78 °C", "100 °C"], ans: 0 },
{ q: "Alkohol di termometer harus diberi...", opts: ["Pewarna", "Air"], ans: 0 },
{ q: "Alkohol ... dinding kaca.", opts: ["Membasahi", "Tidak membasahi"], ans: 0 }
],
t4: [
{ q: "Termometer tanpa sentuh dinamakan...", opts: ["Inframerah", "Gas"], ans: 0 },
{ q: "Termometer untuk mengukur demam adalah...", opts: ["Klinis", "Six-Bellani"], ans: 0 },
{ q: "Termometer Six-Bellani mengukur suhu...", opts: ["Max & Min harian", "Mendidih"], ans: 0 },
{ q: "Sifat termometrik memanfaatkan perubahan...", opts: ["Volume cair", "Warna kaca"], ans: 0 },
{ q: "Satuan SI resmi untuk suhu adalah...", opts: ["Kelvin", "Celsius"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
// Ujian Akhir Individu
let rawExamData = [
{ q: "1. Termometer bekerja dengan memanfaatkan sifat termometrik berupa...", opts: ["Perubahan warna wadah", "Pemuaian dan penyusutan zat cair", "Perubahan berat jenis zat"], ans: 1 },
{ q: "2. Pernyataan yang BENAR mengenai kelemahan zat cair alkohol adalah...", opts: ["Harganya sangat mahal", "Titik didihnya rendah sehingga tidak bisa mengukur air mendidih", "Sangat beracun jika pecah"], ans: 1 },
{ q: "3. Titik didih raksa mencapai $357^{\\circ}\\text{C}$, hal ini membuat raksa cocok untuk...", opts: ["Mengukur suhu udara kutub", "Mengukur suhu benda yang cukup tinggi", "Mengukur suhu es krim"], ans: 1 },
{ q: "4. Thermogun bekerja mengukur suhu tubuh berdasarkan radiasi...", opts: ["Inframerah", "Ultraviolet", "Sinar-X"], ans: 0 },
{ q: "5. Rasa hangat yang dirasakan tangan saat menyentuh dahi termasuk penilaian yang bersifat...", opts: ["Kuantitatif", "Subjektif", "Baku"], ans: 1 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 1 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawaban Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
ZAT, WUJUD ZAT, DAN PERUBAHANNYA 3 : Unsur, Senyawa, Campuran, Ciri Asam & Basa, serta Pengujian Indikator Kertas Lakmus
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 3 - Klasifikasi Materi & Asam-Basa</title>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #4c1d95 0%, #0284c7 50%, #0f172a 100%);
--card-bg: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8;
--accent: #f43f5e;
--yellow: #fbbf24;
--success: #10b981;
--purple: #c084fc;
--text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #c084fc, #38bdf8); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #c084fc, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #c084fc, #f43f5e); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #c084fc, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1: JUDUL UTAMA -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 3</span>
<h1>KLASIFIKASI MATERI & ASAM-BASA</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 2: Zat, Wujud Zat, dan Perubahannya</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran Pertemuan Ini:</b></p>
<p>8. Menjelaskan konsep Unsur, Senyawa, dan Campuran.</p>
<p style="margin-top: 4px;">9. Menyebutkan ciri-ciri larutan Asam dan Basa.</p>
<p style="margin-top: 4px;">10. Membedakan larutan Asam dan Basa menggunakan indikator kertas lakmus.</p>
</div>
<p style="color: var(--primary);">Klik tombol 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Uji Lakmus pada Larutan</h2>
<p>Klik tombol untuk mengamati reaksi kertas lakmus pada larutan berikut:</p>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🍋</span>
<p><b>Air Perasan Lemon</b></p>
<button class="interactive-btn" onclick="alert('Bersifat ASAM: Mengubah Kertas Lakmus Biru menjadi MERAH!')">Uji Lakmus</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🧼</span>
<p><b>Air Sabun Mandi</b></p>
<button class="interactive-btn" onclick="alert('Bersifat BASA: Mengubah Kertas Lakmus Merah menjadi BIRU!')">Uji Lakmus</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Asam vs Basa di Dapur Kita</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa rasa cuka dapur sangat masam dan bisa mengikis cangkang telur, sedangkan air sabun terasa licin di tangan dan pahit?"
</p>
<p style="font-size: 3.8rem; margin: 15px 0;">🍋 vs 🧼</p>
<p>Bagaimana cara mengidentifikasi asam dan basa secara aman tanpa harus mencicipinya?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Penerapan Dalam Kehidupan Sehari-hari</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 8px;"><b>Industri Otomotif:</b> Penggunaan Asam Sulfat ($\text{H}_2\text{SO}_4$) pada cairan akumulator (aki) kendaraan.</li>
<li style="margin-bottom: 8px;"><b>Kesehatan:</b> Obat maag mengandung larutan Basa ($\text{Mg(OH)}_2$) untuk menetralkan kadar asam lambung yang berlebih.</li>
<li><b>Dapur & Masakan:</b> Garam dapur ($\text{NaCl}$) merupakan senyawa netral hasil penggabungan unsur Natrium dan Klorin.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 8 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 8</span>
<h2>5. Unsur, Senyawa, dan Campuran</h2>
<div class="grid-2">
<div class="glass-card">
<h3 style="color: var(--primary); margin-bottom: 4px;">1. Unsur</h3>
<p>Zat tunggal yang <b>tidak dapat diuraikan lagi</b> menjadi zat lain yang lebih sederhana secara reaksi kimia biasa.</p>
<p style="font-size: 0.9rem; color: var(--yellow); margin-top: 4px;"><b>Contoh:</b> Emas ($\text{Au}$), Besi ($\text{Fe}$), Oksigen ($\text{O}_2$).</p>
</div>
<div class="glass-card">
<h3 style="color: var(--yellow); margin-bottom: 4px;">2. Senyawa</h3>
<p>Zat tunggal yang terbentuk dari <b>gabungan dua/lebih unsur</b> berbeda secara kimia dengan perbandingan tetap.</p>
<p style="font-size: 0.9rem; color: var(--primary); margin-top: 4px;"><b>Contoh:</b> Air ($\text{H}_2\text{O}$), Garam ($\text{NaCl}$).</p>
</div>
</div>
<div class="glass-card" style="margin-top: 10px;">
<h3 style="color: var(--accent); margin-bottom: 4px;">3. Campuran</h3>
<p>Materi yang tersusun atas dua/lebih zat tanpa reaksi kimia, di mana sifat zat penyusunnya masih tetap ada (Contoh: air teh, udara, larutan gula).</p>
</div>
</div>
<!-- SLIDE 6: KUIS TP 8 (5 SOAL) -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 8</span>
<h2>Klasifikasi Materi (5 Soal)</h2>
<div class="glass-card">
<h3 id="q8-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q8-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q8-opts"></div>
<p id="q8-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q8-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ8()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: MATERI PADAT TP 9 & 10 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 9 & 10</span>
<h2>6. Larutan Asam, Basa & Indikator Lakmus</h2>
<div class="grid-2">
<div class="glass-card">
<h3 style="color: var(--accent); margin-bottom: 4px;">🍋 Larutan Asam</h3>
<p>• Rasa masam dan bersifat korosif (merusak logam).</p>
<p>• Dalam air melepaskan ion hidrogen ($\text{H}^+$).</p>
<p>• <b>Uji Lakmus:</b> Lakmus biru berubah jadi <b>MERAH</b> (lakmus merah tetap merah).</p>
</div>
<div class="glass-card">
<h3 style="color: var(--primary); margin-bottom: 4px;">🧼 Larutan Basa</h3>
<p>• Rasa pahit dan terasa licin di kulit.</p>
<p>• Dalam air melepaskan ion hidroksida ($\text{OH}^-$).</p>
<p>• <b>Uji Lakmus:</b> Lakmus merah berubah jadi <b>BIRU</b> (lakmus biru tetap biru).</p>
</div>
</div>
</div>
<!-- SLIDE 8: KUIS TP 9 & 10 (5 SOAL) -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 9 & 10</span>
<h2>Uji Asam & Basa (5 Soal)</h2>
<div class="glass-card">
<h3 id="q9-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q9-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q9-opts"></div>
<p id="q9-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q9-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ9()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: BATTLE KELOMPOK MULTI-USER (5 SOAL PER TIM) -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<!-- Tim 1 -->
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Unsur)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<!-- Tim 2 -->
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Senyawa)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<!-- Tim 3 -->
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Asam)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<!-- Tim 4 -->
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Basa)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 10: UJIAN AKHIR INDIVIDU (ACAK) -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex3-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex3-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex3-opts"></div>
<p id="ex3-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex3-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam3()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 11: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji yang menggambarkan pemahamanmu pada Pertemuan 3:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Hebat sekali! Materi Asam-Basa tuntas kamu kuasai! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Keren! Terus eksplorasi ilmu IPA ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan risau, latihan terus pasti membuatmu paham! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 12: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option>
<option value="7-B">7-B ⚡</option>
<option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Selamat, kamu telah menyelesaikan seluruh materi Bab 2! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 12</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
// Kuis TP 8 (5 Soal)
const q8Data = [
{ q: "1. Zat tunggal yang tidak dapat diuraikan lagi secara kimia dinamakan...", opts: ["Unsur", "Senyawa", "Campuran"], ans: 0 },
{ q: "2. Zat tunggal yang terbentuk dari gabungan dua/lebih unsur secara kimia adalah...", opts: ["Unsur", "Senyawa", "Larutan"], ans: 1 },
{ q: "3. Manakah di bawah ini yang merupakan contoh dari unsur?", opts: ["Air (H2O)", "Emas (Au)", "Garam Dapur (NaCl)"], ans: 1 },
{ q: "4. Materi yang tersusun atas dua atau lebih zat tanpa reaksi kimia disebut...", opts: ["Senyawa", "Campuran", "Unsur"], ans: 1 },
{ q: "5. Garam dapur (NaCl) dikategorikan ke dalam bentuk...", opts: ["Unsur", "Senyawa", "Campuran"], ans: 1 }
];
let q8Idx = 0;
function renderQ8() {
if(q8Idx >= q8Data.length) { document.getElementById('q8-text').innerText = "🎉 Tuntas! Kuis TP 8 Selesai!"; document.getElementById('q8-opts').innerHTML = ""; document.getElementById('q8-next-btn').style.display = "none"; return; }
let d = q8Data[q8Idx];
document.getElementById('q8-num').innerText = `Soal ${q8Idx + 1} dari 5`;
document.getElementById('q8-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ8(${i})">${o}</button>`; });
document.getElementById('q8-opts').innerHTML = html;
document.getElementById('q8-feedback').innerText = "";
document.getElementById('q8-next-btn').style.display = "none";
reRenderMath();
}
function checkQ8(i) {
if(i === q8Data[q8Idx].ans) { document.getElementById('q8-feedback').innerText = "🎉 Benar!"; document.getElementById('q8-feedback').style.color = "var(--success)"; }
else { document.getElementById('q8-feedback').innerText = "❌ Masih Salah!"; document.getElementById('q8-feedback').style.color = "var(--accent)"; }
document.getElementById('q8-next-btn').style.display = "inline-block";
}
function nextQ8() { q8Idx++; renderQ8(); }
// Kuis TP 9 & 10 (5 Soal)
const q9Data = [
{ q: "1. Larutan yang rasanya masam dan bersifat korosif tergolong larutan...", opts: ["Asam", "Basa", "Netral"], ans: 0 },
{ q: "2. Larutan basa jika diuji dengan kertas lakmus merah akan mengubah warna lakmus menjadi...", opts: ["Merah", "Biru", "Kuning"], ans: 1 },
{ q: "3. Larutan asam jika dicelupkan kertas lakmus biru akan berubah warna menjadi...", opts: ["Merah", "Biru", "Hijau"], ans: 0 },
{ q: "4. Salah satu ciri fisik utama dari larutan basa adalah...", opts: ["Terasa licin di kulit dan pahit", "Bersifat korosif dan masam", "Tidak berwarna"], ans: 0 },
{ q: "5. Obat maag bekerja menetralkan asam lambung karena bersifat...", opts: ["Asam", "Basa", "Garam"], ans: 1 }
];
let q9Idx = 0;
function renderQ9() {
if(q9Idx >= q9Data.length) { document.getElementById('q9-text').innerText = "🎉 Tuntas! Kuis TP 9 & 10 Selesai!"; document.getElementById('q9-opts').innerHTML = ""; document.getElementById('q9-next-btn').style.display = "none"; return; }
let d = q9Data[q9Idx];
document.getElementById('q9-num').innerText = `Soal ${q9Idx + 1} dari 5`;
document.getElementById('q9-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ9(${i})">${o}</button>`; });
document.getElementById('q9-opts').innerHTML = html;
document.getElementById('q9-feedback').innerText = "";
document.getElementById('q9-next-btn').style.display = "none";
reRenderMath();
}
function checkQ9(i) {
if(i === q9Data[q9Idx].ans) { document.getElementById('q9-feedback').innerText = "🎉 Hebat!"; document.getElementById('q9-feedback').style.color = "var(--success)"; }
else { document.getElementById('q9-feedback').innerText = "❌ Coba Lagi!"; document.getElementById('q9-feedback').style.color = "var(--accent)"; }
document.getElementById('q9-next-btn').style.display = "inline-block";
}
function nextQ9() { q9Idx++; renderQ9(); }
// Multi User Engine (5 Soal per Tim)
const teamData3 = {
t1: [
{ q: "Zat tunggal tak dapat diuraikan...", opts: ["Unsur", "Senyawa"], ans: 0 },
{ q: "Emas murni (Au) tergolong...", opts: ["Unsur", "Campuran"], ans: 0 },
{ q: "Besi (Fe) merupakan contoh...", opts: ["Unsur", "Senyawa"], ans: 0 },
{ q: "Simbol unsur Oksigen adalah...", opts: ["O", "H"], ans: 0 },
{ q: "Simbol unsur Natrium adalah...", opts: ["Na", "N"], ans: 0 }
],
t2: [
{ q: "Gabungan unsur secara kimia...", opts: ["Senyawa", "Campuran"], ans: 0 },
{ q: "Air (H2O) tergolong...", opts: ["Senyawa", "Unsur"], ans: 0 },
{ q: "Garam dapur (NaCl) adalah...", opts: ["Senyawa", "Campuran"], ans: 0 },
{ q: "Udara di sekitar kita adalah...", opts: ["Campuran", "Senyawa"], ans: 0 },
{ q: "Larutan gula di air tergolong...", opts: ["Campuran", "Unsur"], ans: 0 }
],
t3: [
{ q: "Larutan masam melepaskan ion...", opts: ["H+", "OH-"], ans: 0 },
{ q: "Asam ubah lakmus biru jadi...", opts: ["Merah", "Biru"], ans: 0 },
{ q: "Air jeruk lemon bersifat...", opts: ["Asam", "Basa"], ans: 0 },
{ q: "Cuka dapur tergolong larutan...", opts: ["Asam", "Basa"], ans: 0 },
{ q: "Sifat merusak logam dinamakan...", opts: ["Korosif", "Kelarutan"], ans: 0 }
],
t4: [
{ q: "Larutan basa melepaskan ion...", opts: ["OH-", "H+"], ans: 0 },
{ q: "Basa ubah lakmus merah jadi...", opts: ["Biru", "Merah"], ans: 0 },
{ q: "Air sabun terasa...", opts: ["Licin", "Kasar"], ans: 0 },
{ q: "Obat maag bersifat...", opts: ["Basa", "Asam"], ans: 0 },
{ q: "Rasa larutan basa umumnya...", opts: ["Pahit", "Masam"], ans: 0 }
]
};
let tIdx3 = { t1:0, t2:0, t3:0, t4:0 };
let tScore3 = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam3(teamKey) {
let idx = tIdx3[teamKey];
let list = teamData3[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore3[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal3();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam3('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam3(teamKey, optIdx) {
if(optIdx === teamData3[teamKey][tIdx3[teamKey]].ans) tScore3[teamKey]++;
tIdx3[teamKey]++;
renderTeam3(teamKey);
}
function updateGroupTotal3() {
let total = tScore3.t1 + tScore3.t2 + tScore3.t3 + tScore3.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
// Ujian Akhir Individu (Acak)
let rawExamData3 = [
{ q: "1. Udara di sekeliling kita tergolong ke dalam bentuk...", opts: ["Campuran", "Unsur", "Senyawa"], ans: 0 },
{ q: "2. Larutan yang menghasilkan ion $\\text{H}^+$ dalam air adalah...", opts: ["Asam", "Basa", "Garam"], ans: 0 },
{ q: "3. Kertas lakmus merah dimasukkan ke dalam air jeruk akan berwarna...", opts: ["Merah", "Biru", "Kuning"], ans: 0 },
{ q: "4. Besi (Fe) merupakan zat tunggal yang tergolong...", opts: ["Unsur", "Senyawa", "Campuran"], ans: 0 },
{ q: "5. Sabun mandi bersifat basa, maka dalam air akan menghasilkan ion...", opts: ["$\\text{OH}^-$", "$\\text{H}^+$", "$\\text{Cl}^-$"], ans: 0 }
];
let exData3 = rawExamData3.sort(() => Math.random() - 0.5);
let exIdx3 = 0;
function renderExam3() {
if(exIdx3 >= exData3.length) { document.getElementById('ex3-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 3 Selesai!"; document.getElementById('ex3-opts').innerHTML = ""; document.getElementById('ex3-next-btn').style.display = "none"; return; }
let d = exData3[exIdx3];
document.getElementById('ex3-num').innerText = `Soal ${exIdx3 + 1} dari 5`;
document.getElementById('ex3-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam3(${i})">${o}</button>`; });
document.getElementById('ex3-opts').innerHTML = html;
document.getElementById('ex3-feedback').innerText = "";
document.getElementById('ex3-next-btn').style.display = "none";
reRenderMath();
}
function checkExam3(i) {
document.getElementById('ex3-feedback').innerText = "👍 Jawabanmu Terekam!";
document.getElementById('ex3-feedback').style.color = "var(--success)";
document.getElementById('ex3-next-btn').style.display = "inline-block";
}
function nextExam3() { exIdx3++; renderExam3(); }
renderQ8(); renderQ9();
renderTeam3('t1'); renderTeam3('t2'); renderTeam3('t3'); renderTeam3('t4');
renderExam3(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
ZAT, WUJUD ZAT, DAN PERUBAHANNYA 2 : Susunan Partikel Padat/Cair/Gas, Adhesi vs Kohesi, Meniskus Cekung/Cembung, Kapilaritas, dan Formula Massa Jenis
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 2 - Partikel & Massa Jenis</title>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0284c7 0%, #064e3b 50%, #0f172a 100%);
--card-bg: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8;
--accent: #f43f5e;
--yellow: #fbbf24;
--success: #10b981;
--purple: #c084fc;
--text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #10b981, #38bdf8); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #10b981, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #10b981, #38bdf8); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #10b981, #0284c7); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; }
th, td { border: 1px solid var(--card-border); padding: 8px; text-align: center; }
th { background: rgba(16, 185, 129, 0.3); }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1: JUDUL UTAMA -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 2</span>
<h1>PARTIKEL ZAT & MASSA JENIS</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 2: Zat, Wujud Zat, dan Perubahannya</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran Pertemuan Ini:</b></p>
<p>3. Susunan partikel wujud zat. | 4. Membedakan Adhesi & Kohesi.</p>
<p style="margin-top: 4px;">5. Fenomena Kapilaritas. | 6 & 7. Konsep & Aplikasi Massa Jenis ($\rho$).</p>
</div>
<p style="color: var(--primary);">Klik tombol 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Gaya Tarik & Kapilaritas</h2>
<p>Klik tombol untuk mengamati fenomena gaya antarpartikel berikut:</p>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">✍️</span>
<p><b>Tinta Menempel di Kertas</b></p>
<button class="interactive-btn" onclick="alert('Terjadi ADHESI: Gaya tarik antarpartikel tidak sejenis (tinta dengan kertas)!')">Amati Reaksi</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🧻</span>
<p><b>Tisu Menyerap Air</b></p>
<button class="interactive-btn" onclick="alert('Terjadi KAPILARITAS: Air meresap naik melalui pori-pori sempit kertas tisu!')">Amati Reaksi</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Mengapa Raksa Membentuk Bola?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa tetesan raksa di atas kaca membentuk bangun bola dan tidak membasahi kaca, sedangkan air menyebar membasahi kaca?"
</p>
<p style="font-size: 3.8rem; margin: 15px 0;">💧 vs ⚪</p>
<p>Mengapa balok kayu yang besar mengapung di air, sedangkan paku besi yang kecil langsung tenggelam?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Penerapan Dalam Kehidupan Sehari-hari</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 8px;"><b>Tumbuhan:</b> Air tanah merambat naik ke daun melalui pembuluh kayu akibat fenomena kapilaritas.</li>
<li style="margin-bottom: 8px;"><b>Kompor Minyak:</b> Minyak tanah naik ke atas meresap melalui sumbu kompor.</li>
<li><b>Kapal Laut:</b> Kapal laut dari besi dapat mengapung karena dirancang memiliki rongga udara sehingga massa jenis rata-ratanya lebih kecil dari air.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 3, 4, 5 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 3, 4, 5</span>
<h2>3. Partikel Zat, Adhesi-Kohesi & Kapilaritas</h2>
<table>
<tr><th>Jenis Zat</th><th>Letak Partikel</th><th>Susunan</th><th>Gaya Tarik</th><th>Gerak Partikel</th></tr>
<tr><td><b>Padat</b></td><td>Sangat berdekatan</td><td>Sangat teratur</td><td>Sangat kuat</td><td>Sangat tidak bebas</td></tr>
<tr><td><b>Cair</b></td><td>Berdekatan</td><td>Kurang teratur</td><td>Kurang kuat</td><td>Kurang bebas</td></tr>
<tr><td><b>Gas</b></td><td>Sangat berjauhan</td><td>Sangat tidak teratur</td><td>Sangat lemah</td><td>Sangat bebas</td></tr>
</table>
<div class="grid-2" style="margin-top: 10px;">
<div class="glass-card">
<p>• <b>Adhesi:</b> Tarik-menarik partikel **tidak sejenis** (meniskus cekung air-kaca).</p>
<p>• <b>Kohesi:</b> Tarik-menarik partikel **sejenis** (meniskus cembung raksa-kaca).</p>
</div>
<div class="glass-card">
<p>• <b>Kapilaritas:</b> Peristiwa naiknya zat cair melalui pipa kapiler/pori sempit (misal: air diserap kain pel/kaos/tisu).</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 3, 4, 5 (5 SOAL) -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 3, 4, 5</span>
<h2>Gaya Partikel & Kapilaritas (5 Soal)</h2>
<div class="glass-card">
<h3 id="q3-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q3-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q3-opts"></div>
<p id="q3-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q3-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ3()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: MATERI PADAT TP 6 & 7 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 6 & 7</span>
<h2>4. Konsep & Aplikasi Massa Jenis ($\rho$)</h2>
<div class="glass-card" style="text-align: center;">
<p><b>Massa Jenis ($\rho$):</b> Perbandingan antara massa dengan volume benda. Merupakan ciri khas unik suatu zat!</p>
<p style="font-size: 1.35rem; color: var(--yellow); margin-top: 8px;">$$\rho = \frac{m}{V}$$</p>
<p style="font-size: 0.95rem;">$\rho = \text{massa jenis }(\text{kg/m}^3\text{ atau }\text{g/cm}^3)$ | $m = \text{massa }(\text{kg})$ | $V = \text{volume }(\text{m}^3)$</p>
</div>
<div class="glass-card" style="margin-top: 10px;">
<p>• Benda sejenis memiliki $\rho$ sama besar. Posisi benda di air:</p>
<p>1. <b>Terapung:</b> $\rho_{\text{benda}} < \rho_{\text{cair}}$ | 2. <b>Melayang:</b> $\rho_{\text{benda}} = \rho_{\text{cair}}$ | 3. <b>Tenggelam:</b> $\rho_{\text{benda}} > \rho_{\text{cair}}$</p>
</div>
</div>
<!-- SLIDE 8: KUIS TP 6 & 7 (5 SOAL) -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 6 & 7</span>
<h2>Uji Massa Jenis (5 Soal)</h2>
<div class="glass-card">
<h3 id="q6-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q6-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q6-opts"></div>
<p id="q6-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q6-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ6()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: BATTLE KELOMPOK MULTI-USER (5 SOAL PER TIM) -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<!-- Tim 1 -->
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Partikel)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<!-- Tim 2 -->
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Gaya Tarik)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<!-- Tim 3 -->
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Kapilaritas)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<!-- Tim 4 -->
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Massa Jenis)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 10: UJIAN AKHIR INDIVIDU (ACAK) -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex2-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex2-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex2-opts"></div>
<p id="ex2-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex2-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam2()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 11: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji yang menggambarkan pemahamanmu pada Pertemuan 2:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Konsep partikel sudah kamu kuasai! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Tingkatkan terus kemampuan hitunganmu! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Tetap semangat, mari kita diskusikan bagian rumitnya! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 12: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option>
<option value="7-B">7-B ⚡</option>
<option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 3! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 12</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
// Kuis TP 3,4,5 (5 Soal)
const q3Data = [
{ q: "1. Gaya tarik antarpartikel pada zat padat bersifat...", opts: ["Sangat kuat", "Sangat lemah", "Kurang kuat"], ans: 0 },
{ q: "2. Adhesi adalah gaya tarik-menarik antara partikel yang...", opts: ["Sejenis", "Tidak sejenis", "Sangat jauh"], ans: 1 },
{ q: "3. Meniskus cekung pada permukaan air terjadi karena...", opts: ["Adhesi > Kohesi", "Kohesi > Adhesi", "Kohesi = Adhesi"], ans: 0 },
{ q: "4. Peristiwa naiknya air tanah pada pembuluh kayu dinamakan...", opts: ["Kapilaritas", "Meniskus", "Konveksi"], ans: 0 },
{ q: "5. Gaya tarik antarpartikel zat gas bersifat...", opts: ["Sangat kuat", "Sangat lemah", "Sedang"], ans: 1 }
];
let q3Idx = 0;
function renderQ3() {
if(q3Idx >= q3Data.length) { document.getElementById('q3-text').innerText = "🎉 Tuntas! Kuis TP 3,4,5 Selesai!"; document.getElementById('q3-opts').innerHTML = ""; document.getElementById('q3-next-btn').style.display = "none"; return; }
let d = q3Data[q3Idx];
document.getElementById('q3-num').innerText = `Soal ${q3Idx + 1} dari 5`;
document.getElementById('q3-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ3(${i})">${o}</button>`; });
document.getElementById('q3-opts').innerHTML = html;
document.getElementById('q3-feedback').innerText = "";
document.getElementById('q3-next-btn').style.display = "none";
reRenderMath();
}
function checkQ3(i) {
if(i === q3Data[q3Idx].ans) { document.getElementById('q3-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q3-feedback').style.color = "var(--success)"; }
else { document.getElementById('q3-feedback').innerText = "❌ Masih Salah!"; document.getElementById('q3-feedback').style.color = "var(--accent)"; }
document.getElementById('q3-next-btn').style.display = "inline-block";
}
function nextQ3() { q3Idx++; renderQ3(); }
// Kuis TP 6 & 7 (5 Soal)
const q6Data = [
{ q: "1. Massa jenis adalah perbandingan antara massa benda dengan...", opts: ["Luas", "Volume", "Berat"], ans: 1 },
{ q: "2. Satuan SI resmi untuk massa jenis (\\rho) adalah...", opts: ["g/cm³", "kg/m³", "kg/cm³"], ans: 1 },
{ q: "3. Benda akan tenggelam dalam air jika massa jenis benda...", opts: ["Lebih kecil dari air", "Lebih besar dari air", "Sama dengan air"], ans: 1 },
{ q: "4. Sebuah benda massanya $10\\text{ kg}$ dan volumenya $2\\text{ m}^3$. Massa jenisnya adalah...", opts: ["5 kg/m³", "20 kg/m³", "0.2 kg/m³"], ans: 0 },
{ q: "5. Benda-benda sejenis akan memiliki massa jenis yang...", opts: ["Sama besar", "Berbeda-beda", "Berubah-ubah"], ans: 0 }
];
let q6Idx = 0;
function renderQ6() {
if(q6Idx >= q6Data.length) { document.getElementById('q6-text').innerText = "🎉 Tuntas! Kuis TP 6 & 7 Selesai!"; document.getElementById('q6-opts').innerHTML = ""; document.getElementById('q6-next-btn').style.display = "none"; return; }
let d = q6Data[q6Idx];
document.getElementById('q6-num').innerText = `Soal ${q6Idx + 1} dari 5`;
document.getElementById('q6-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ6(${i})">${o}</button>`; });
document.getElementById('q6-opts').innerHTML = html;
document.getElementById('q6-feedback').innerText = "";
document.getElementById('q6-next-btn').style.display = "none";
reRenderMath();
}
function checkQ6(i) {
if(i === q6Data[q6Idx].ans) { document.getElementById('q6-feedback').innerText = "🎉 Benar!"; document.getElementById('q6-feedback').style.color = "var(--success)"; }
else { document.getElementById('q6-feedback').innerText = "❌ Coba Lagi!"; document.getElementById('q6-feedback').style.color = "var(--accent)"; }
document.getElementById('q6-next-btn').style.display = "inline-block";
}
function nextQ6() { q6Idx++; renderQ6(); }
// Multi User Engine (5 Soal per Tim)
const teamData2 = {
t1: [
{ q: "Partikel zat padat susunannya...", opts: ["Sangat teratur", "Tidak teratur"], ans: 0 },
{ q: "Partikel zat gas letaknya...", opts: ["Sangat berdekatan", "Sangat berjauhan"], ans: 1 },
{ q: "Benda padat bentuknya...", opts: ["Tetap", "Berubah"], ans: 0 },
{ q: "Partikel zat cair geraknya...", opts: ["Sangat bebas", "Kurang bebas"], ans: 1 },
{ q: "Zat cair volumenya...", opts: ["Tetap", "Berubah"], ans: 0 }
],
t2: [
{ q: "Gaya tarik partikel sejenis...", opts: ["Kohesi", "Adhesi"], ans: 0 },
{ q: "Tarik-menarik partikel tak sejenis...", opts: ["Adhesi", "Kohesi"], ans: 0 },
{ q: "Air membasahi kaca karena...", opts: ["Adhesi > Kohesi", "Kohesi > Adhesi"], ans: 0 },
{ q: "Raksa membulat di kaca karena...", opts: ["Kohesi > Adhesi", "Adhesi > Kohesi"], ans: 0 },
{ q: "Meniskus cembung terjadi pada...", opts: ["Raksa di tabung", "Air di tabung"], ans: 0 }
],
t3: [
{ q: "Air meresap di kain pel adalah...", opts: ["Kapilaritas", "Meniskus"], ans: 0 },
{ q: "Minyak naik di sumbu kompor...", opts: ["Kapilaritas", "Konveksi"], ans: 0 },
{ q: "Keringat diserap kaos adalah...", opts: ["Kapilaritas", "Evaporasi"], ans: 0 },
{ q: "Batas permukaan zat cair di tabung...", opts: ["Meniskus", "Kapiler"], ans: 0 },
{ q: "Air tanah naik ke daun lewat...", opts: ["Pembuluh kayu", "Pembuluh tapis"], ans: 0 }
],
t4: [
{ q: "Rumus Massa Jenis adalah...", opts: ["\\rho = m / V", "\\rho = m \\times V"], ans: 0 },
{ q: "Satuan SI Massa Jenis...", opts: ["kg/m³", "g/cm³"], ans: 0 },
{ q: "Benda tenggelam jika \\rho benda...", opts: ["> \\rho air", "< \\rho air"], ans: 0 },
{ q: "Benda melayang jika \\rho benda...", opts: ["= \\rho air", "> \\rho air"], ans: 0 },
{ q: "Ciri khas zat ditentukan oleh...", opts: ["Massa jenisnya", "Ukurannya"], ans: 0 }
]
};
let tIdx2 = { t1:0, t2:0, t3:0, t4:0 };
let tScore2 = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam2(teamKey) {
let idx = tIdx2[teamKey];
let list = teamData2[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore2[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal2();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam2('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam2(teamKey, optIdx) {
if(optIdx === teamData2[teamKey][tIdx2[teamKey]].ans) tScore2[teamKey]++;
tIdx2[teamKey]++;
renderTeam2(teamKey);
}
function updateGroupTotal2() {
let total = tScore2.t1 + tScore2.t2 + tScore2.t3 + tScore2.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
// Ujian Akhir Individu (Acak)
let rawExamData2 = [
{ q: "1. Terserapnya keringat oleh kaos merupakan contoh fenomena...", opts: ["Kapilaritas", "Kohesi", "Meniskus"], ans: 0 },
{ q: "2. Gerak partikel pada zat gas bersifat...", opts: ["Sangat bebas", "Sangat terbatas", "Tidak bergerak"], ans: 0 },
{ q: "3. Raksa tidak membasahi dinding kaca karena...", opts: ["Kohesi raksa > Adhesi raksa-kaca", "Adhesi raksa-kaca > Kohesi raksa", "Massa jenis raksa kecil"], ans: 0 },
{ q: "4. Ciri khas unik suatu zat ditentukan oleh...", opts: ["Ukurannya", "Massa jenisnya", "Warnanya"], ans: 1 },
{ q: "5. Benda yang melayang di dalam air memiliki massa jenis yang...", opts: ["Sama dengan air", "Lebih besar dari air", "Sangat kecil"], ans: 0 }
];
let exData2 = rawExamData2.sort(() => Math.random() - 0.5);
let exIdx2 = 0;
function renderExam2() {
if(exIdx2 >= exData2.length) { document.getElementById('ex2-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 2 Selesai!"; document.getElementById('ex2-opts').innerHTML = ""; document.getElementById('ex2-next-btn').style.display = "none"; return; }
let d = exData2[exIdx2];
document.getElementById('ex2-num').innerText = `Soal ${exIdx2 + 1} dari 5`;
document.getElementById('ex2-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam2(${i})">${o}</button>`; });
document.getElementById('ex2-opts').innerHTML = html;
document.getElementById('ex2-feedback').innerText = "";
document.getElementById('ex2-next-btn').style.display = "none";
reRenderMath();
}
function checkExam2(i) {
document.getElementById('ex2-feedback').innerText = "👍 Jawabanmu Terekam!";
document.getElementById('ex2-feedback').style.color = "var(--success)";
document.getElementById('ex2-next-btn').style.display = "inline-block";
}
function nextExam2() { exIdx2++; renderExam2(); }
renderQ3(); renderQ6();
renderTeam2('t1'); renderTeam2('t2'); renderTeam2('t3'); renderTeam2('t4');
renderExam2(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
ZAT, WUJUD ZAT, DAN PERUBAHANNYA 1 : Pengertian Materi, Sifat Ekstensif/Intensif, Sifat Fisis/Kimia, serta Perubahan Fisis & Perubahan Kimia
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 1 - Sifat & Perubahan Zat</title>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311b92 100%);
--card-bg: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8;
--accent: #f43f5e;
--yellow: #fbbf24;
--success: #10b981;
--purple: #c084fc;
--text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #f43f5e, #fbbf24); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #f43f5e, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
/* Variasi Visual 4 Tim Multi-User */
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #f43f5e, #fbbf24); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; }
th, td { border: 1px solid var(--card-border); padding: 8px; text-align: left; }
th { background: rgba(56, 189, 248, 0.25); text-align: center; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1: JUDUL UTAMA -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 1</span>
<h1>MATERI, SIFAT & PERUBAHAN ZAT</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 2: Zat, Wujud Zat, dan Perubahannya</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran Pertemuan Ini:</b></p>
<p>1. Mengidentifikasi sifat-sifat berbagai jenis zat melalui pengamatan dan percobaan.</p>
<p style="margin-top: 6px;">2. Menyelidiki jenis-jenis perubahan wujud dan perubahan zat (fisis vs kimia).</p>
</div>
<p style="color: var(--primary);">Klik tombol 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Perubahan Zat di Sekitar</h2>
<p>Klik setiap kartu untuk mengamati dan mendeteksi sifat serta perubahan zat:</p>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🕯️</span>
<p><b>Lilin Menyala</b></p>
<button class="interactive-btn" onclick="alert('Pelelehan lilin = Perubahan Fisis (wujud padat ke cair).\nPembakaran sumbu = Perubahan Kimia (menghasilkan asap & zat baru)!')">Amati Reaksi</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🍅</span>
<p><b>Tomat Memasak</b></p>
<button class="interactive-btn" onclick="alert('Tomat mentah (hijau) menjadi matang (merah) terjadi karena perubahan komposisi zat kimia di dalam buah!')">Amati Reaksi</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Bisakah Kembali ke Bentuk Semula?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">
"Mengapa es batu yang meleleh menjadi air dapat dibekukan kembali, sedangkan kayu yang dibakar menjadi abu tidak dapat dikembalikan lagi menjadi kayu?"
</p>
<p style="font-size: 3.8rem; margin: 15px 0;">🧊 🔄 🪵🔥</p>
<p>Apakah perbedaan utama antara perubahan bentuk biasa dengan perubahan yang menghasilkan zat jenis baru?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Penerapan Dalam Kehidupan Sehari-hari</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Pengolahan Bahan Pangan:</b> Penumbukan beras menjadi tepung beras merupakan perubahan fisis karena molekul kimianya tetap sama.</li>
<li style="margin-bottom: 10px;"><b>Fenomena Korosi Besi:</b> Pagar besi rumah yang berkarat akibat bereaksi dengan air dan oksigen merupakan contoh perubahan kimia yang merusak.</li>
<li><b>Proses Pembuatan Minuman:</b> Menyeduh teh dengan air panas menghasilkan campuran zat cair dan ekstrak daun teh.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI TERPERINCI TP 1 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 1</span>
<h2>1. Pengertian Materi & Sifat-Sifat Zat</h2>
<div class="glass-card" style="margin-bottom: 12px;">
<p><b>Materi:</b> Segala sesuatu yang memiliki massa, menempati ruang (memiliki volume), dan memiliki sifat-sifat tertentu.</p>
<p style="margin-top: 4px;">• <b>Zat Murni:</b> Materi yang hanya tersusun dari satu jenis zat baku.<br>• <b>Campuran:</b> Materi yang tersusun dari dua atau lebih zat berbeda (contoh: air teh).</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h3 style="color: var(--primary); margin-bottom: 6px;">A. Sifat Ekstensif</h3>
<p>Sifat zat yang <b>tergantung pada jumlah atau ukuran</b> materi.</p>
<p style="font-size: 0.95rem; color: var(--yellow); margin-top: 4px;"><b>Contoh:</b> Massa, volume, dan panjang benda.</p>
</div>
<div class="glass-card">
<h3 style="color: var(--accent); margin-bottom: 6px;">B. Sifat Intensif</h3>
<p>Sifat zat yang <b>TIDAK tergantung pada jumlah/ukuran</b> materi.</p>
<p style="font-size: 0.95rem; margin-top: 4px;">• <b>Sifat Fisis:</b> Warna, bau, rasa, kerapatan, titik didih, titik lebur, kelarutan, kekerasan.<br>• <b>Sifat Kimia:</b> Keterbakaran, perkaratan, kestabilan, dan kereaktifan.</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 1 (5 SOAL) -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 1</span>
<h2>Uji Pemahaman Sifat Zat (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: MATERI TERPERINCI TP 2 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 2</span>
<h2>2. Perubahan Fisis vs Perubahan Kimia</h2>
<div class="grid-2">
<div class="glass-card">
<h3 style="color: var(--success); margin-bottom: 6px;">🧊 Perubahan Fisis</h3>
<p>Perubahan zat yang <b>tidak disertai terbentuknya zat baru</b> dan bersifat sementara (reversibel).</p>
<p style="font-size: 0.95rem; margin-top: 6px;">• <b>Perubahan Bentuk:</b> Beras ditumbuk menjadi tepung.<br>• <b>Perubahan Wujud:</b> Air membeku menjadi es, mencair, atau menguap.</p>
</div>
<div class="glass-card">
<h3 style="color: var(--accent); margin-bottom: 6px;">🔥 Perubahan Kimia</h3>
<p>Perubahan zat yang <b>menghasilkan zat jenis baru</b> dan bersifat kekal (ireversibel).</p>
<p style="font-size: 0.95rem; margin-top: 6px;">Hukum Kekekalan Massa: Massa zat sebelum dan sesudah reaksi kimia adalah sama besar.</p>
</div>
</div>
<div class="glass-card" style="margin-top: 10px;">
<h4 style="color: var(--yellow); margin-bottom: 4px;">⚡ 4 Ciri Utama Reaksi Kimia:</h4>
<p style="font-size: 0.95rem;">1. <b>Perubahan Warna:</b> Buah mentah menjadi matang.<br>2. <b>Perubahan Suhu:</b> Reaksi $\text{HCl} + \text{NaOH}$ menghasilkan tabung hangat.<br>3. <b>Timbulnya Gas:</b> Telur direndam cuka menghasilkan gelembung gas.<br>4. <b>Terbentuk Endapan:</b> Reaksi Timbel(II) sulfat dengan Kalium Iodida menghasilkan endapan kuning.</p>
</div>
</div>
<!-- SLIDE 8: KUIS TP 2 (5 SOAL) -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 2</span>
<h2>Uji Pemahaman Perubahan Zat (5 Soal)</h2>
<div class="glass-card">
<h3 id="q2-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q2-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q2-opts"></div>
<p id="q2-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q2-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ2()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: BATTLE KELOMPOK MULTI-USER (5 SOAL PER TIM) -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<!-- Tim 1 -->
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Wujud)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<!-- Tim 2 -->
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Sifat)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<!-- Tim 3 -->
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Fisis)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<!-- Tim 4 -->
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Kimia)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 10: UJIAN AKHIR INDIVIDU (ACAK) -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 11: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji yang menggambarkan pemahamanmu pada Pertemuan 1:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Pemahamanmu sangat tajam! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Mantap! Pertahankan semangatmu! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan menyerah, kamu pasti bisa! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 12: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option>
<option value="7-B">7-B ⚡</option>
<option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 2! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 12</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
// Kuis TP 1 (5 Soal)
const q1Data = [
{ q: "1. Segala sesuatu yang mempunyai massa dan menempati ruang dinamakan...", opts: ["Materi", "Energi", "Gaya"], ans: 0 },
{ q: "2. Sifat zat yang bergantung pada jumlah atau ukuran materi adalah...", opts: ["Sifat Intensif", "Sifat Ekstensif", "Sifat Kimia"], ans: 1 },
{ q: "3. Manakah yang tergolong ke dalam sifat fisika zat?", opts: ["Keterbakaran", "Titik didih", "Perkaratan"], ans: 1 },
{ q: "4. Sifat yang menunjukkan kemampuan suatu zat untuk melakukan reaksi kimia dinamakan...", opts: ["Sifat Fisis", "Sifat Kimia", "Sifat Ekstensif"], ans: 1 },
{ q: "5. Teh manis dalam gelas merupakan contoh bentuk dari...", opts: ["Zat Murni", "Campuran", "Unsur"], ans: 1 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 1 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Masih Salah!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
// Kuis TP 2 (5 Soal)
const q2Data = [
{ q: "1. Perubahan zat yang tidak disertai terbentuknya zat baru dinamakan...", opts: ["Perubahan Kimia", "Perubahan Fisis", "Reaksi Kimia"], ans: 1 },
{ q: "2. Ciri utama dari perubahan kimia adalah...", opts: ["Dapat kembali ke bentuk semula", "Terbentuk zat jenis baru", "Hanya terjadi perubahan wujud"], ans: 1 },
{ q: "3. Beras ditumbuk menjadi tepung halus merupakan contoh perubahan...", opts: ["Fisis", "Kimia", "Biologi"], ans: 0 },
{ q: "4. Reaksi perkaratan besi pada pagar rumah termasuk contoh perubahan...", opts: ["Fisis", "Kimia", "Suhu"], ans: 1 },
{ q: "5. Ketika sebutir telur direndam dalam cuka, timbul gelembung gas. Ini membuktikan adanya perubahan...", opts: ["Fisis", "Kimia", "Wujud"], ans: 1 }
];
let q2Idx = 0;
function renderQ2() {
if(q2Idx >= q2Data.length) { document.getElementById('q2-text').innerText = "🎉 Tuntas! Kuis TP 2 Selesai!"; document.getElementById('q2-opts').innerHTML = ""; document.getElementById('q2-next-btn').style.display = "none"; return; }
let d = q2Data[q2Idx];
document.getElementById('q2-num').innerText = `Soal ${q2Idx + 1} dari 5`;
document.getElementById('q2-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ2(${i})">${o}</button>`; });
document.getElementById('q2-opts').innerHTML = html;
document.getElementById('q2-feedback').innerText = "";
document.getElementById('q2-next-btn').style.display = "none";
reRenderMath();
}
function checkQ2(i) {
if(i === q2Data[q2Idx].ans) { document.getElementById('q2-feedback').innerText = "🎉 Benar!"; document.getElementById('q2-feedback').style.color = "var(--success)"; }
else { document.getElementById('q2-feedback').innerText = "❌ Coba Lagi!"; document.getElementById('q2-feedback').style.color = "var(--accent)"; }
document.getElementById('q2-next-btn').style.display = "inline-block";
}
function nextQ2() { q2Idx++; renderQ2(); }
// Multi User Engine (5 Soal per Tim)
const teamData = {
t1: [
{ q: "Satu jenis zat murni disebut...", opts: ["Zat Murni", "Campuran"], ans: 0 },
{ q: "Air menjadi es termasuk perubahan...", opts: ["Fisis", "Kimia"], ans: 0 },
{ q: "Massa dan volume tergolong sifat...", opts: ["Ekstensif", "Intensif"], ans: 0 },
{ q: "Kayu terbakar jadi abu adalah perubahan...", opts: ["Fisis", "Kimia"], ans: 1 },
{ q: "Pelelehan lilin tergolong perubahan...", opts: ["Fisis", "Kimia"], ans: 0 }
],
t2: [
{ q: "Perkaratan besi termasuk sifat...", opts: ["Fisis", "Kimia"], ans: 1 },
{ q: "Warna dan titik didih tergolong sifat...", opts: ["Fisis", "Kimia"], ans: 0 },
{ q: "Besi berkarat tergolong perubahan...", opts: ["Fisis", "Kimia"], ans: 1 },
{ q: "Dua zat atau lebih bercampur disebut...", opts: ["Unsur", "Campuran"], ans: 1 },
{ q: "Sifat yang tidak tergantung ukuran dinamakan...", opts: ["Ekstensif", "Intensif"], ans: 1 }
],
t3: [
{ q: "Sifat bergantung ukuran zat dinamakan...", opts: ["Ekstensif", "Intensif"], ans: 0 },
{ q: "Beras ditumbuk jadi tepung adalah perubahan...", opts: ["Fisis", "Kimia"], ans: 0 },
{ q: "Penguapan air laut tergolong perubahan...", opts: ["Fisis", "Kimia"], ans: 0 },
{ q: "Reaksi yang menghasilkan endapan adalah ciri...", opts: ["Perubahan Kimia", "Perubahan Fisis"], ans: 0 },
{ q: "Kelarutan gula dalam air tergolong sifat...", opts: ["Fisis", "Kimia"], ans: 0 }
],
t4: [
{ q: "Telur + cuka menghasilkan gelembung gas...", opts: ["Perubahan Kimia", "Perubahan Fisis"], ans: 0 },
{ q: "Sumbu lilin terbakar termasuk perubahan...", opts: ["Fisis", "Kimia"], ans: 1 },
{ q: "Massa sebelum & sesudah reaksi kimia bernilai...", opts: ["Sama besar", "Berbeda"], ans: 0 },
{ q: "Tomat hijau menjadi merah adalah ciri perubahan...", opts: ["Warna (Kimia)", "Bentuk (Fisis)"], ans: 0 },
{ q: "Kestabilan zat tergolong ke dalam sifat...", opts: ["Kimia", "Fisis"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
// Ujian Akhir Individu (Acak)
let rawExamData = [
{ q: "1. Larutan HCl ditambah NaOH menghasilkan kenaikan suhu. Ini membuktikan terjadinya...", opts: ["Perubahan Kimia", "Perubahan Fisis", "Perubahan Bentuk"], ans: 0 },
{ q: "2. Kerapatan, kelarutan, dan titik didih tergolong ke dalam sifat...", opts: ["Kimia", "Fisis", "Ekstensif"], ans: 1 },
{ q: "3. Perubahan kimia bersifat kekal, artinya zat hasil perubahan...", opts: ["Bisa kembali seperti semula", "Tidak dapat kembali ke bentuk semula", "Selalu berwujud gas"], ans: 1 },
{ q: "4. Massa zat sebelum dan sesudah reaksi pada perubahan kimia adalah...", opts: ["Meningkat", "Sama besar", "Mengecil"], ans: 1 },
{ q: "5. Materi yang hanya tersusun dari satu jenis zat murni dinamakan...", opts: ["Zat Murni", "Campuran", "Larutan"], ans: 0 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 1 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawabanmu Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderQ2();
renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4');
renderExam(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Besaran Pokok dan Besaran Turunan 2
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Pembelajaran IPA - Konversi & Pengukuran Alat Ukur</title>
<!-- MathJax Library untuk Rendering Simbol Matematika/Fisika -->
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #311b92 50%, #1e1b4b 100%);
--card-bg: rgba(255, 255, 255, 0.1);
--card-border: rgba(255, 255, 255, 0.25);
--primary: #38bdf8;
--accent: #f43f5e;
--yellow: #fbbf24;
--success: #10b981;
--text: #ffffff;
--text-muted: #cbd5e1;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', sans-serif;
user-select: none;
}
body {
background: var(--bg-gradient);
color: var(--text);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.deck-container {
width: 92vw;
height: 82vh;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(20px);
border: 3px solid rgba(255, 255, 255, 0.2);
border-radius: 28px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(56, 189, 248, 0.2);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.slide {
display: none;
padding: 35px;
height: 100%;
flex-direction: column;
justify-content: flex-start;
overflow-y: auto;
animation: bounceIn 0.5s ease;
}
.slide.active {
display: flex;
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.95); }
60% { transform: scale(1.02); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 10px #38bdf8); } 50% { filter: drop-shadow(0 0 25px #f43f5e); } }
.float-anim { animation: float 3s ease-in-out infinite; }
.glow-anim { animation: pulse-glow 2s infinite; }
.slide-tag {
display: inline-block;
padding: 6px 16px;
background: linear-gradient(90deg, #f43f5e, #fbbf24);
color: #fff;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
width: fit-content;
box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
}
h1 {
font-size: 2.8rem;
background: linear-gradient(to right, #38bdf8, #f43f5e, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
h2 {
font-size: 2rem;
color: var(--yellow);
margin-bottom: 15px;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
p, li {
font-size: 1.15rem;
line-height: 1.6;
color: #f1f5f9;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 15px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 15px;
}
.glass-card {
background: var(--card-bg);
border: 2px solid var(--card-border);
border-radius: 20px;
padding: 22px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
}
.svg-box {
background: rgba(0, 0, 0, 0.35);
border-radius: 16px;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
margin: 15px 0;
border: 1px dashed var(--primary);
}
.interactive-btn {
background: linear-gradient(135deg, #f43f5e, #fbbf24);
color: white;
border: none;
padding: 12px 20px;
border-radius: 14px;
font-size: 1.05rem;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
margin: 6px;
box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4);
}
.interactive-btn:hover {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 10px 25px rgba(251, 191, 36, 0.6);
}
.opt-btn {
width: 100%;
text-align: left;
background: rgba(255,255,255,0.08);
border: 2px solid var(--card-border);
color: white;
padding: 12px 18px;
border-radius: 12px;
margin-top: 10px;
font-size: 1.05rem;
cursor: pointer;
transition: 0.2s;
font-weight: 600;
}
.opt-btn:hover {
background: rgba(56, 189, 248, 0.3);
border-color: var(--primary);
transform: translateX(6px);
}
.multi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.user-zone {
background: rgba(0,0,0,0.4);
border: 2px dashed var(--yellow);
border-radius: 16px;
padding: 15px;
}
.controls {
margin-top: 15px;
display: flex;
gap: 20px;
align-items: center;
}
.nav-control-btn {
background: linear-gradient(135deg, #38bdf8, #3b82f6);
color: white;
border: none;
padding: 12px 32px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4);
}
.nav-control-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(56, 189, 248, 0.7);
}
.nav-control-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
box-shadow: none;
}
.slide-counter {
font-size: 1.15rem;
font-weight: bold;
color: var(--yellow);
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
input, select {
width: 100%;
padding: 12px;
background: rgba(0,0,0,0.5);
border: 2px solid var(--primary);
border-radius: 12px;
color: white;
font-size: 1.05rem;
margin-top: 6px;
}
.tool-card {
background: rgba(0, 0, 0, 0.3);
border-radius: 16px;
padding: 15px;
text-align: center;
border: 1px solid var(--card-border);
}
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1: JUDUL MODUL -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Petualangan Sains IPA - Bagian 2</span>
<h1 class="glow-anim">KONVERSI SATUAN & ALAT UKUR</h1>
<p style="font-size: 1.3rem; color: var(--yellow); font-weight: bold;">Menguasai Konversi Satuan dan Penggunaan Alat Ukur Presisi! 📏⚖️⏱️</p>
<div class="svg-box float-anim" style="border: none; background: transparent; margin: 25px 0;">
<svg width="240" height="120" viewBox="0 0 240 120">
<rect x="20" y="40" width="200" height="40" rx="8" fill="#38bdf8" opacity="0.3" stroke="#38bdf8" stroke-width="2"/>
<line x1="40" y1="40" x2="40" y2="60" stroke="#fff" stroke-width="2"/>
<line x1="60" y1="40" x2="60" y2="52" stroke="#fff" stroke-width="1.5"/>
<line x1="80" y1="40" x2="80" y2="52" stroke="#fff" stroke-width="1.5"/>
<line x1="100" y1="40" x2="100" y2="60" stroke="#fff" stroke-width="2"/>
<line x1="120" y1="40" x2="120" y2="52" stroke="#fff" stroke-width="1.5"/>
<line x1="140" y1="40" x2="140" y2="52" stroke="#fff" stroke-width="1.5"/>
<line x1="160" y1="40" x2="160" y2="60" stroke="#fff" stroke-width="2"/>
<line x1="180" y1="40" x2="180" y2="52" stroke="#fff" stroke-width="1.5"/>
<line x1="200" y1="40" x2="200" y2="60" stroke="#fff" stroke-width="2"/>
<text x="36" y="75" fill="#fbbf24" font-size="12" font-weight="bold">0</text>
<text x="96" y="75" fill="#fbbf24" font-size="12" font-weight="bold">1</text>
<text x="156" y="75" fill="#fbbf24" font-size="12" font-weight="bold">2</text>
<text x="196" y="75" fill="#fbbf24" font-size="12" font-weight="bold">cm</text>
</svg>
</div>
<p style="color: var(--primary); font-size: 1.1rem;">Tekan tombol <b>'Selanjutnya ➔'</b> untuk memulai!</p>
</div>
<!-- SLIDE 2: CAPAIAN & TUJUAN PEMBELAJARAN MODUL 2 -->
<div class="slide">
<span class="slide-tag">🎯 Target Pembelajaran</span>
<h2>Tujuan Pembelajaran Hari Ini</h2>
<div class="glass-card">
<ul style="list-style-type: '⚡ '; padding-left: 20px;">
<li style="margin-bottom: 12px;"><b>TP 3:</b> Mengonversikan satuan **panjang**, **massa**, dan **waktu** dengan tepat.</li>
<li style="margin-bottom: 12px;"><b>TP 4:</b> Mengukur besaran dengan **satuan baku** dan **tak baku** secara baik dan benar.</li>
<li style="margin-bottom: 12px;"><b>TP 5:</b> Mengukur besaran menggunakan **alat ukur yang sesuai** secara baik dan benar.</li>
</ul>
</div>
</div>
<!-- SLIDE 3: MATERI TP 3 - KONVERSI PANJANG, MASSA, WAKTU -->
<div class="slide">
<span class="slide-tag">📖 Materi TP 3</span>
<h2>Konversi Satuan (Panjang, Massa, Waktu)</h2>
<div class="grid-3">
<div class="glass-card" style="padding: 15px;">
<h3 style="color: var(--primary); text-align: center;">📏 Panjang</h3>
<p style="font-size: 0.95rem; margin-top: 8px;">Tangga Satuan: $\text{km}, \text{hm}, \text{dam}, \text{m}, \text{dm}, \text{cm}, \text{mm}$.</p>
<p style="font-size: 0.95rem; color: var(--yellow); margin-top: 5px;">• Turun 1 tangga: $\times 10$<br>• Naik 1 tangga: $\div 10$</p>
<p style="font-size: 0.9rem; margin-top: 8px;"><b>Contoh:</b> $1\text{ m} = 100\text{ cm}$</p>
</div>
<div class="glass-card" style="padding: 15px;">
<h3 style="color: var(--yellow); text-align: center;">⚖️ Massa</h3>
<p style="font-size: 0.95rem; margin-top: 8px;">Tangga Satuan: $\text{kg}, \text{hg}(\text{ons}), \text{dag}, \text{g}, \text{dg}, \text{cg}, \text{mg}$.</p>
<p style="font-size: 0.95rem; color: var(--primary); margin-top: 5px;">• Turun 1 tangga: $\times 10$<br>• Naik 1 tangga: $\div 10$</p>
<p style="font-size: 0.9rem; margin-top: 8px;"><b>Contoh:</b> $1\text{ kg} = 1.000\text{ g}$</p>
</div>
<div class="glass-card" style="padding: 15px;">
<h3 style="color: var(--accent); text-align: center;">⏱️ Waktu</h3>
<p style="font-size: 0.95rem; margin-top: 8px;">Sistem Konversi Waktu:</p>
<p style="font-size: 0.95rem; color: var(--yellow); margin-top: 5px;">• $1\text{ jam} = 60\text{ menit}$<br>• $1\text{ menit} = 60\text{ sekon}$<br>• $1\text{ jam} = 3.600\text{ sekon}$</p>
</div>
</div>
</div>
<!-- SLIDE 4: SIMULATOR KONVERSI INTERAKTIF -->
<div class="slide">
<span class="slide-tag">🧪 Lab Interaktif</span>
<h2>Kalkulator Konversi Satuan 🧮</h2>
<div class="glass-card">
<div class="grid-2">
<div>
<label style="font-weight: bold;">1. Konversi Panjang (Meter ke CM):</label>
<input type="number" id="val-m" placeholder="Masukkan meter (m)..." oninput="calcLength()">
<p id="res-cm" style="margin-top: 10px; color: var(--yellow); font-weight: bold;">Hasil: - cm</p>
</div>
<div>
<label style="font-weight: bold;">2. Konversi Massa (KG ke Gram):</label>
<input type="number" id="val-kg" placeholder="Masukkan kilogram (kg)..." oninput="calcMass()">
<p id="res-g" style="margin-top: 10px; color: var(--primary); font-weight: bold;">Hasil: - g</p>
</div>
</div>
<div style="margin-top: 20px;">
<label style="font-weight: bold;">3. Konversi Waktu (Jam ke Sekon/Detik):</label>
<input type="number" id="val-hr" placeholder="Masukkan jam..." oninput="calcTime()">
<p id="res-s" style="margin-top: 10px; color: var(--success); font-weight: bold;">Hasil: - sekon</p>
</div>
</div>
</div>
<!-- SLIDE 5: KUIS TP 3 (BERGANTIAN) -->
<div class="slide">
<span class="slide-tag">🎮 Game Kuis TP 3</span>
<h2>Latihan Konversi Satuan! ⚡</h2>
<div class="glass-card">
<h3 id="q3-num" style="color: var(--yellow);">Soal 1 dari 3</h3>
<p id="q3-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p>
<div id="q3-opts"></div>
<p id="q3-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p>
<button class="interactive-btn" id="q3-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ3()">Soal Berikutnya ➔</button>
</div>
</div>
<!-- SLIDE 6: MATERI TP 4 - SATUAN BAKU VS TAK BAKU -->
<div class="slide">
<span class="slide-tag">📖 Materi TP 4</span>
<h2>Satuan Baku vs Satuan Tak Baku 📏</h2>
<div class="grid-2">
<div class="glass-card">
<h3 style="color: var(--primary);">1. Satuan Baku 📐</h3>
<p>Satuan yang diakui secara internasional dan **hasil pengukurannya selalu sama** bagi siapa saja.</p>
<br>
<p style="color: var(--yellow); font-size: 1rem;"><b>Contoh:</b> Meter ($\text{m}$), Centimeter ($\text{cm}$), Kilogram ($\text{kg}$), Sekon ($\text{s}$).</p>
</div>
<div class="glass-card">
<h3 style="color: var(--accent);">2. Satuan Tak Baku 🖐️</h3>
<p>Satuan yang **hasil pengukurannya berbeda-beda** tergantung ukuran anggota tubuh pengukur.</p>
<br>
<p style="color: var(--primary); font-size: 1rem;"><b>Contoh:</b> Jengkal, Depa, Hasta, Langkah kaki, Cangkir.</p>
</div>
</div>
</div>
<!-- SLIDE 7: EXPERIENCING SATUAN TAK BAKU -->
<div class="slide">
<span class="slide-tag">🔬 Praktik Mandiri</span>
<h2>Eksperimen Satuan Tak Baku! ✋</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">Coba Ukur Panjang Meja/Bukumu Menggunakan Jengkal Tanganmu!</p>
<div class="svg-box float-anim" style="margin: 20px auto; width: fit-content; padding: 10px 30px;">
<span style="font-size: 3.5rem;">✋ 📏 📚</span>
</div>
<p style="font-size: 1.05rem;">Bandingkan hasil jengkalmu dengan teman sebangkumu. Apakah hasilnya sama? Mengapa bisa berbeda?</p>
<button class="interactive-btn" style="margin-top: 15px;" onclick="alert('Hasil jengkal berbeda karena ukuran tangan setiap manusia tidak sama! Makanya sains butuh Satuan Baku seperti Meter.')">💡 Mengapa Hasilnya Beda?</button>
</div>
</div>
<!-- SLIDE 8: MATERI TP 5 - MENGGUNAKAN ALAT UKUR SEBANYAK-BANYAKNYA -->
<div class="slide">
<span class="slide-tag">📖 Materi TP 5</span>
<h2>Mengenal Alat Ukur Sesuai Fungsinya 🛠️</h2>
<div class="grid-2">
<div class="tool-card">
<h3 style="color: var(--primary);"> Penggaris & Meteran</h3>
<p style="font-size: 0.95rem;">Mengukur panjang/tinggi benda biasa.</p>
<p style="color: var(--yellow); font-size: 0.9rem;">Ketelitian: $1\text{ mm}$ ($0,1\text{ cm}$)</p>
</div>
<div class="tool-card">
<h3 style="color: var(--yellow);"> Jangka Sorong</h3>
<p style="font-size: 0.95rem;">Mengukur diameter dalam/luar botol & kedalaman tabung.</p>
<p style="color: var(--primary); font-size: 0.9rem;">Ketelitian: $0,1\text{ mm}$ ($0,01\text{ cm}$)</p>
</div>
<div class="tool-card">
<h3 style="color: var(--accent);"> Neraca / Timbangan</h3>
<p style="font-size: 0.95rem;">Mengukur massa benda (Neraca Sama Lengan, Ohaus, Digital).</p>
</div>
<div class="tool-card">
<h3 style="color: var(--success);"> Stopwatch</h3>
<p style="font-size: 0.95rem;">Mengukur selang waktu dengan presisi tinggi.</p>
</div>
</div>
</div>
<!-- SLIDE 9: KUIS PEMBACAAN ALAT UKUR (TP 5) -->
<div class="slide">
<span class="slide-tag">🎯 Tantangan Detektif</span>
<h2>Membaca Hasil Alat Ukur 🔍</h2>
<div class="glass-card">
<h3 id="q5-num" style="color: var(--yellow);">Soal 1 dari 3</h3>
<p id="q5-text" style="font-size: 1.2rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q5-opts"></div>
<p id="q5-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p>
<button class="interactive-btn" id="q5-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ5()">Soal Berikutnya ➔</button>
</div>
</div>
<!-- SLIDE 10: BATTLE KELOMPOK (MODUL 2) -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok</span>
<h2>Adu Cepat Alat Ukur & Konversi! ⚔️</h2>
<div class="multi-grid">
<div class="user-zone">
<h4 style="color: var(--primary);">🔴 Tim 1 (Panjang)</h4>
<p>$2,5\text{ m} = ...\text{ cm}$</p>
<button class="opt-btn" onclick="groupAns2(1, true)">A. $250\text{ cm}$</button>
<button class="opt-btn" onclick="groupAns2(1, false)">B. $25\text{ cm}$</button>
</div>
<div class="user-zone">
<h4 style="color: var(--yellow);">🟡 Tim 2 (Massa)</h4>
<p>$500\text{ g} = ...\text{ kg}$</p>
<button class="opt-btn" onclick="groupAns2(2, false)">A. $5\text{ kg}$</button>
<button class="opt-btn" onclick="groupAns2(2, true)">B. $0,5\text{ kg}$</button>
</div>
<div class="user-zone">
<h4 style="color: var(--success);">🟢 Tim 3 (Satuan)</h4>
<p>Satu 'Depa' termasuk satuan...?</p>
<button class="opt-btn" onclick="groupAns2(3, false)">A. Baku</button>
<button class="opt-btn" onclick="groupAns2(3, true)">B. Tak Baku</button>
</div>
<div class="user-zone">
<h4 style="color: #c084fc;">🟣 Tim 4 (Alat Ukur)</h4>
<p>Alat paling tepat ukur diameter dalam pipa:</p>
<button class="opt-btn" onclick="groupAns2(4, true)">A. Jangka Sorong</button>
<button class="opt-btn" onclick="groupAns2(4, false)">B. Meteran Roll</button>
</div>
</div>
<p id="group-score-display-2" style="text-align: center; margin-top: 10px; font-weight: bold; font-size: 1.3rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 11: UJIAN AKHIR EVALUASI DIRI -->
<div class="slide">
<span class="slide-tag">🏆 Evaluasi Akhir</span>
<h2>Ujian Akhir (5 Soal Integrasi)</h2>
<div class="glass-card">
<h3 id="ex2-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex2-text" style="font-size: 1.2rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex2-opts"></div>
<p id="ex2-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p>
<button class="interactive-btn" id="ex2-next-btn" style="display: none; margin-top: 12px;" onclick="nextExam2()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 12: IDENTITAS SISWA -->
<div class="slide">
<span class="slide-tag">✍️ Data Diri</span>
<h2>Lengkapi Data Pengukuranmu</h2>
<div class="glass-card">
<p style="margin-bottom: 12px;">Isi identitas untuk menyimpan rekap hasil belajar:</p>
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" id="stu-name-2" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select id="stu-class-2">
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option>
<option value="7-B">7-B ⚡</option>
<option value="7-C">7-C 🔥</option>
</select>
</div>
</div>
<!-- SLIDE 13: REFLEKSI BELAJAR -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Akhir</span>
<h2>Hebat! Kamu Sudah Menyelesaikan Semua TP 🎉</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.25rem; font-weight: bold; color: var(--yellow);">Bagaimana pengalamanmu mengonversi satuan & membaca alat ukur?</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Kamu sudah paham layaknya ilmuwan sejati! 🎯')">🤩 Sangat Paham!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Tingkatkan terus latihannya ya! 💪')">🙂 Paham</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Tidak apa-apa, kamu bisa ulangi slide simulator konversi ya! 👍')">🤔 Masih Perlu Latihan</button>
</div>
<p style="color: var(--primary); font-size: 1.15rem; font-weight: bold;">"Ketelitian dalam mengukur adalah kunci utama penemuan ilmu fisika dan sains!" 🔬✨</p>
</div>
</div>
</div>
<!-- Controls Navigasi Bawah -->
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span class="slide-counter" id="slideCounter">Slide 1 dari 13</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() {
if (window.MathJax && window.MathJax.typesetPromise) {
window.MathJax.typesetPromise();
}
}
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) changeSlide(1);
if (e.key === 'ArrowLeft' && currentSlide > 0) changeSlide(-1);
});
// Interactive Conversion Logic
function calcLength() {
let v = document.getElementById('val-m').value;
document.getElementById('res-cm').innerText = v ? `Hasil: ${v * 100} cm` : "Hasil: - cm";
}
function calcMass() {
let v = document.getElementById('val-kg').value;
document.getElementById('res-g').innerText = v ? `Hasil: ${v * 1000} g` : "Hasil: - g";
}
function calcTime() {
let v = document.getElementById('val-hr').value;
document.getElementById('res-s').innerText = v ? `Hasil: ${v * 3600} sekon` : "Hasil: - sekon";
}
// Bank Soal TP 3 (Konversi)
const q3Data = [
{ q: "Panjang papan tulis adalah $2\\text{ m}$. Jika diubah ke centimeter (\\text{cm}), hasilnya adalah...", opts: ["$20\\text{ cm}$", "$200\\text{ cm}$ 📏", "$2.000\\text{ cm}$"], ans: 1 },
{ q: "Massa gula pasir $1,5\\text{ kg}$ setara dengan...", opts: ["$150\\text{ g}$", "$1.500\\text{ g}$ ⚖️", "$15.000\\text{ g}$"], ans: 1 },
{ q: "Lari maraton ditempuh dalam waktu $0,5\\text{ jam}$. Berapa sekon (detik) waktu tersebut?", opts: ["$1.800\\text{ sekon}$ ⏱️", "$300\\text{ sekon}$", "$3.600\\text{ sekon}$"], ans: 0 }
];
let q3Idx = 0;
function renderQ3() {
if(q3Idx >= q3Data.length) {
document.getElementById('q3-text').innerText = "🎉 Sukses! Kamu hebat mengonversi satuan!";
document.getElementById('q3-opts').innerHTML = "";
document.getElementById('q3-next-btn').style.display = "none";
return;
}
let d = q3Data[q3Idx];
document.getElementById('q3-num').innerText = `Soal ${q3Idx + 1} dari ${q3Data.length}`;
document.getElementById('q3-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="checkQ3(${i})">${o}</button>`;
});
document.getElementById('q3-opts').innerHTML = html;
document.getElementById('q3-feedback').innerText = "";
document.getElementById('q3-next-btn').style.display = "none";
reRenderMath();
}
function checkQ3(i) {
if(i === q3Data[q3Idx].ans) {
document.getElementById('q3-feedback').innerText = "🎉 Tepat Sekali!";
document.getElementById('q3-feedback').style.color = "var(--success)";
} else {
document.getElementById('q3-feedback').innerText = "❌ Coba hitung lagi tangga konversinya!";
document.getElementById('q3-feedback').style.color = "var(--accent)";
}
document.getElementById('q3-next-btn').style.display = "inline-block";
}
function nextQ3() { q3Idx++; renderQ3(); }
// Bank Soal TP 5 (Alat Ukur)
const q5Data = [
{ q: "Alat ukur yang paling tepat untuk mengukur diameter kelereng secara sangat teliti adalah...", opts: ["Penggaris Kayu", "Jangka Sorong 🔍", "Meteran Pita"], ans: 1 },
{ q: "Untuk mengukur massa batu saat praktikum IPA, alat yang digunakan adalah...", opts: ["Neraca / Timbangan ⚖️", "Stopwatch", "Thermometer"], ans: 0 },
{ q: "Pelari 100 meter diukur waktu tempuhnya menggunakan...", opts: ["Jam Dinding", "Stopwatch ⏱️", "Kalender"], ans: 1 }
];
let q5Idx = 0;
function renderQ5() {
if(q5Idx >= q5Data.length) {
document.getElementById('q5-text').innerText = "🎉 Luar Biasa! Kamu makin paham alat ukur!";
document.getElementById('q5-opts').innerHTML = "";
document.getElementById('q5-next-btn').style.display = "none";
return;
}
let d = q5Data[q5Idx];
document.getElementById('q5-num').innerText = `Soal ${q5Idx + 1} dari ${q5Data.length}`;
document.getElementById('q5-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="checkQ5(${i})">${o}</button>`;
});
document.getElementById('q5-opts').innerHTML = html;
document.getElementById('q5-feedback').innerText = "";
document.getElementById('q5-next-btn').style.display = "none";
reRenderMath();
}
function checkQ5(i) {
if(i === q5Data[q5Idx].ans) {
document.getElementById('q5-feedback').innerText = "🎉 Pintar! Alat ukur tepat!";
document.getElementById('q5-feedback').style.color = "var(--success)";
} else {
document.getElementById('q5-feedback').innerText = "❌ Kurang tepat, coba cek fungsi alatnya!";
document.getElementById('q5-feedback').style.color = "var(--accent)";
}
document.getElementById('q5-next-btn').style.display = "inline-block";
}
function nextQ5() { q5Idx++; renderQ5(); }
// Multi User Score Modul 2
let groupScore2 = [false, false, false, false];
function groupAns2(user, isTrue) {
if(isTrue) groupScore2[user-1] = true;
let total = groupScore2.filter(Boolean).length;
document.getElementById('group-score-display-2').innerText = `🔥 Total Skor Kelompok: ${total * 25} / 100`;
}
// Ujian Akhir Modul 2
const ex2Data = [
{ q: "1. Mengubah $300\\text{ cm}$ menjadi meter menghasilkan...", opts: ["$30\\text{ m}$", "$3\\text{ m}$ 📏", "$0,3\\text{ m}$"], ans: 1 },
{ q: "2. Satuan seperti 'Depa' dan 'Jengkal' dinamakan satuan...", opts: ["Baku", "Tak Baku 🖐️", "Internasional"], ans: 1 },
{ q: "3. Ketelitian skala penggaris biasa umumnya sebesar...", opts: ["$1\\text{ mm}$ ($0,1\\text{ cm}$) 📏", "$1\\text{ m}$", "$1\\text{ micro}$"], ans: 0 },
{ q: "4. Waktu $2\\text{ menit}$ setara dengan berapa sekon?", opts: ["$60\\text{ s}$", "$120\\text{ s}$ ⏱️", "$200\\text{ s}$"], ans: 1 },
{ q: "5. Mengapa hasil ukur dengan meteran selalu sama untuk semua orang?", opts: ["Karena meteran terbuat dari plastik", "Karena meteran adalah alat ukur satuan baku 📐", "Karena ukurannya berubah-ubah"], ans: 1 }
];
let ex2Idx = 0;
function renderExam2() {
if(ex2Idx >= ex2Data.length) {
document.getElementById('ex2-text').innerText = "🎉 Tuntas! Seluruh soal evaluasi telah diselesaikan!";
document.getElementById('ex2-opts').innerHTML = "";
document.getElementById('ex2-next-btn').style.display = "none";
return;
}
let d = ex2Data[ex2Idx];
document.getElementById('ex2-num').innerText = `Soal ${ex2Idx + 1} dari ${ex2Data.length}`;
document.getElementById('ex2-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="checkExam2(${i})">${o}</button>`;
});
document.getElementById('ex2-opts').innerHTML = html;
document.getElementById('ex2-feedback').innerText = "";
document.getElementById('ex2-next-btn').style.display = "none";
reRenderMath();
}
function checkExam2(i) {
document.getElementById('ex2-feedback').innerText = "👍 Jawaban Tersimpan!";
document.getElementById('ex2-feedback').style.color = "var(--success)";
document.getElementById('ex2-next-btn').style.display = "inline-block";
}
function nextExam2() { ex2Idx++; renderExam2(); }
// Init Engine Modul 2
renderQ3();
renderQ5();
renderExam2();
updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Besan Pokok dan Besaran Turunan 1 : Mengidentifikasi besaran dalam kehidupan sehari-hari
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Pembelajaran IPA - Besaran & Pengukuran</title>
<!-- MathJax Library untuk Rendering Simbol Matematika/Fisika Sempurna -->
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #311b92 50%, #1e1b4b 100%);
--card-bg: rgba(255, 255, 255, 0.1);
--card-border: rgba(255, 255, 255, 0.25);
--primary: #38bdf8;
--accent: #f43f5e;
--yellow: #fbbf24;
--success: #10b981;
--text: #ffffff;
--text-muted: #cbd5e1;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', sans-serif;
user-select: none;
}
body {
background: var(--bg-gradient);
color: var(--text);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.deck-container {
width: 92vw;
height: 82vh;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(20px);
border: 3px solid rgba(255, 255, 255, 0.2);
border-radius: 28px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(56, 189, 248, 0.2);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.slide {
display: none;
padding: 35px;
height: 100%;
flex-direction: column;
justify-content: flex-start;
overflow-y: auto;
animation: bounceIn 0.5s ease;
}
.slide.active {
display: flex;
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.95); }
60% { transform: scale(1.02); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
@keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 10px #38bdf8); } 50% { filter: drop-shadow(0 0 25px #f43f5e); } }
.float-anim { animation: float 3s ease-in-out infinite; }
.spin-anim { animation: spin 8s linear infinite; }
.glow-anim { animation: pulse-glow 2s infinite; }
.slide-tag {
display: inline-block;
padding: 6px 16px;
background: linear-gradient(90deg, #f43f5e, #fbbf24);
color: #fff;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
width: fit-content;
box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
}
h1 {
font-size: 2.8rem;
background: linear-gradient(to right, #38bdf8, #f43f5e, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
h2 {
font-size: 2.1rem;
color: var(--yellow);
margin-bottom: 15px;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
p, li {
font-size: 1.2rem;
line-height: 1.6;
color: #f1f5f9;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 15px;
}
.glass-card {
background: var(--card-bg);
border: 2px solid var(--card-border);
border-radius: 20px;
padding: 22px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
}
.svg-box {
background: rgba(0, 0, 0, 0.35);
border-radius: 16px;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
margin: 15px 0;
border: 1px dashed var(--primary);
}
.interactive-btn {
background: linear-gradient(135deg, #f43f5e, #fbbf24);
color: white;
border: none;
padding: 14px 24px;
border-radius: 14px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
margin: 6px;
box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4);
}
.interactive-btn:hover {
transform: scale(1.06) translateY(-2px);
box-shadow: 0 10px 25px rgba(251, 191, 36, 0.6);
}
.opt-btn {
width: 100%;
text-align: left;
background: rgba(255,255,255,0.08);
border: 2px solid var(--card-border);
color: white;
padding: 14px 20px;
border-radius: 12px;
margin-top: 10px;
font-size: 1.1rem;
cursor: pointer;
transition: 0.2s;
font-weight: 600;
}
.opt-btn:hover {
background: rgba(56, 189, 248, 0.3);
border-color: var(--primary);
transform: translateX(6px);
}
.multi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.user-zone {
background: rgba(0,0,0,0.4);
border: 2px dashed var(--yellow);
border-radius: 16px;
padding: 15px;
}
.controls {
margin-top: 15px;
display: flex;
gap: 20px;
align-items: center;
}
.nav-control-btn {
background: linear-gradient(135deg, #38bdf8, #3b82f6);
color: white;
border: none;
padding: 12px 32px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4);
}
.nav-control-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(56, 189, 248, 0.7);
}
.nav-control-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
box-shadow: none;
}
.slide-counter {
font-size: 1.15rem;
font-weight: bold;
color: var(--yellow);
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
input, select {
width: 100%;
padding: 14px;
background: rgba(0,0,0,0.5);
border: 2px solid var(--primary);
border-radius: 12px;
color: white;
font-size: 1.1rem;
margin-top: 8px;
}
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1: JUDUL UTAMA -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Petualangan Sains IPA</span>
<h1 class="glow-anim">BESARAN & PENGUKURAN</h1>
<p style="font-size: 1.4rem; color: var(--yellow); font-weight: bold;">Mari Menjadi Ilmuwan Muda Yang Teliti! 🔬✨</p>
<div class="svg-box float-anim" style="border: none; background: transparent; margin: 20px 0;">
<svg width="220" height="140" viewBox="0 0 220 140">
<g class="spin-anim" transform-origin="110 70">
<ellipse cx="110" cy="70" rx="60" ry="20" fill="none" stroke="#38bdf8" stroke-width="4"/>
<ellipse cx="110" cy="70" rx="20" ry="60" fill="none" stroke="#f43f5e" stroke-width="4"/>
</g>
<circle cx="110" cy="70" r="16" fill="#fbbf24"/>
<text x="103" y="75" fill="#000" font-weight="bold" font-size="14">IPA</text>
</svg>
</div>
<p style="color: var(--primary); font-size: 1.2rem;">Tekan tombol <b>'Selanjutnya ➔'</b> atau Tombol Panah Kanan di Keyboard!</p>
</div>
<!-- SLIDE 2: CAPAIAN & TUJUAN PEMBELAJARAN -->
<div class="slide">
<span class="slide-tag">🎯 Target Hari Ini</span>
<h2>Capaian & Tujuan Pembelajaran</h2>
<div class="grid-2">
<div class="glass-card">
<h3 style="color: var(--primary); margin-bottom: 10px;">📌 Capaian Pembelajaran (CP)</h3>
<p>Kalian akan mampu melakukan pengukuran benda & makhluk hidup serta menggunakan besaran dan satuan secara tepat dan kritis!</p>
</div>
<div class="glass-card">
<h3 style="color: var(--yellow); margin-bottom: 10px;">🌟 Tujuan Pembelajaran (TP)</h3>
<p><b>TP 1:</b> Mampu membedakan mana <b>Besaran Pokok</b> dan mana <b>Besaran Turunan</b> di sekitarmu.</p>
<p style="margin-top: 10px;"><b>TP 2:</b> Mampu menyebutkan hasil ukur dengan <b>Satuan Internasional (SI)</b> yang standar.</p>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pikirkan Ini!</span>
<h2>Beli Baju Pakai Ukuran Jengkal? 📏</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.30rem; color: var(--yellow); font-weight: bold;">
"Bagaimana kalau kamu beli baju online, tapi penjualnya mengukur kain pakai JENGKAL TANGAN dia sendiri?" 😂
</p>
<div class="float-anim" style="margin: 20px 0;">
<span style="font-size: 4rem;">✋ 📐 👕</span>
</div>
<p>Apakah ukuran bajunya bakal pas di badanmu? Mengapa sains butuh **Satuan Baku Internasional (SI)**?</p>
</div>
</div>
<!-- SLIDE 4: OBSERVASI INTERAKTIF -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Detektif Sains</span>
<h2>Observasi Objek Di Sekitarmu!</h2>
<p>Klik tombol di bawah untuk mendeteksi besaran pada objek berikut:</p>
<div class="svg-box" style="gap: 30px;">
<div class="float-anim" style="text-align: center;">
<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdWJnOHkya3BjcHprZnc3Ynl2bnVzOW8zcDV2OGd2MnZwNG8yZWp0byZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/BzyTuYCmvSORqs1ABM/giphy.gif" alt="Cat GIF" style="width:100px; height:100px; border-radius: 12px; object-fit: cover;">
<p style="font-size: 0.9rem; color: var(--yellow);">Kucing Lucu</p>
</div>
<div class="float-anim" style="text-align: center; animation-delay: 1s;">
<span style="font-size: 4rem;">🪴</span>
<p style="font-size: 0.9rem; color: var(--primary);">Tanaman Pot</p>
</div>
</div>
<div style="text-align: center;">
<button class="interactive-btn" onclick="alert('🌱 Tinggi Tanaman = 25 cm (Besaran Pokok Panjang)')">📏 Ukur Tinggi Tanaman</button>
<button class="interactive-btn" onclick="alert('🐱 Massa Kucing = 3,5 kg (Besaran Pokok Massa)')">⚖️ Timbang Massa Kucing</button>
<button class="interactive-btn" onclick="alert('🍃 Luas Daun = 12 cm² (Besaran Turunan Luas)')">📐 Hitung Luas Daun</button>
</div>
</div>
<!-- SLIDE 5: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Sains Di Dunia Nyata</span>
<h2>Pengukuran Dalam Kehidupan Sehari-hari</h2>
<div class="glass-card">
<ul style="list-style-type: '🚀 '; padding-left: 20px;">
<li><b>Kesehatan & Dokter:</b> Mengukur Suhu Badan dalam Kelvin ($\text{K}$) atau Celsius ($^{\circ}\text{C}$) & Timbangan Massa Badan dalam Kilogram ($\text{kg}$).</li>
<li><b>Dunia Olahraga:</b> Mengukur Waktu Tempuh Lari dalam Sekon/Detik ($\text{s}$) menggunakan *stopwatch*.</li>
<li><b>Jual Beli Supermarket:</b> Membeli buah & beras ditimbang dengan satuan resmi Kilogram ($\text{kg}$).</li>
</ul>
</div>
</div>
<!-- SLIDE 6: MATERI TP 1 -->
<div class="slide">
<span class="slide-tag">📖 Materi TP 1</span>
<h2>Besaran Pokok vs Besaran Turunan</h2>
<div class="grid-2">
<div class="glass-card">
<h3 style="color: var(--primary);">1. Besaran Pokok 🥇</h3>
<p>Besaran utama yang satuannya sudah ditetapkan secara internasional terlebih dahulu.</p>
<br>
<p style="color: var(--yellow); font-size: 1rem;">✨ <b>7 Besaran Pokok:</b> Panjang, Massa, Waktu, Suhu, Kuat Arus, Intensitas Cahaya, Jumlah Zat.</p>
</div>
<div class="glass-card">
<h3 style="color: var(--accent);">2. Besaran Turunan 🥈</h3>
<p>Besaran yang merupakan gabungan/turunan dari dua atau lebih besaran pokok.</p>
<br>
<p style="color: var(--primary); font-size: 1rem;">⚡ <b>Contoh:</b> Luas ($\text{m}^2$), Kecepatan ($\text{m/s}$), Volume ($\text{m}^3$).</p>
</div>
</div>
</div>
<!-- SLIDE 7: KUIS TP 1 (BERGANTIAN) -->
<div class="slide">
<span class="slide-tag">🎮 Game Kuis TP 1</span>
<h2>Uji Pemahaman Besaran! ⚡</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 3</h3>
<p id="q1-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ1()">Soal Berikutnya ➔</button>
</div>
</div>
<!-- SLIDE 8: MATERI TP 2 -->
<div class="slide">
<span class="slide-tag">📖 Materi TP 2</span>
<h2>Satuan Sistem Internasional (SI) 🌍</h2>
<div class="glass-card">
<p>Supaya hasil ukur di Indonesia sama persis dengan di Jepang atau Amerika, ilmuwan sepakat pakai **Satuan SI**!</p>
<table border="1" style="width:100%; margin-top: 15px; border-collapse: collapse; border-color: var(--card-border); text-align: center; font-size: 1.1rem;">
<tr style="background: linear-gradient(90deg, #f43f5e, #38bdf8); color: white;">
<th>Besaran Pokok</th>
<th>Satuan SI</th>
<th>Simbol Matematika</th>
</tr>
<tr><td>Panjang 📏</td><td>Meter</td><td>$\text{m}$</td></tr>
<tr><td>Massa ⚖️</td><td>Kilogram</td><td>$\text{kg}$</td></tr>
<tr><td>Waktu ⏱️</td><td>Sekon (Detik)</td><td>$\text{s}$</td></tr>
<tr><td>Suhu 🌡️</td><td>Kelvin</td><td>$\text{K}$</td></tr>
</table>
</div>
</div>
<!-- SLIDE 9: KUIS TP 2 (BERGANTIAN) -->
<div class="slide">
<span class="slide-tag">🎮 Game Kuis TP 2</span>
<h2>Tebak Satuan SI! 🎯</h2>
<div class="glass-card">
<h3 id="q2-num" style="color: var(--yellow);">Soal 1 dari 3</h3>
<p id="q2-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p>
<div id="q2-opts"></div>
<p id="q2-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p>
<button class="interactive-btn" id="q2-next-btn" style="display: none; margin-top: 12px;" onclick="nextQ2()">Soal Berikutnya ➔</button>
</div>
</div>
<!-- SLIDE 10: KUIS KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok</span>
<h2>Adu Cepat 4 Tim! ⚔️</h2>
<div class="multi-grid">
<div class="user-zone">
<h4 style="color: var(--primary);">🔴 Tim 1 (Massa)</h4>
<p>Massa kucing = $3{,}5\text{ kg}$. 'Massa' adalah besaran...?</p>
<button class="opt-btn" onclick="groupAns(1, true)">A. Pokok</button>
<button class="opt-btn" onclick="groupAns(1, false)">B. Turunan</button>
</div>
<div class="user-zone">
<h4 style="color: var(--yellow);">🟡 Tim 2 (Luas)</h4>
<p>Luas daun ($12\text{ cm}^2$) termasuk besaran...?</p>
<button class="opt-btn" onclick="groupAns(2, false)">A. Pokok</button>
<button class="opt-btn" onclick="groupAns(2, true)">B. Turunan</button>
</div>
<div class="user-zone">
<h4 style="color: var(--success);">🟢 Tim 3 (Panjang)</h4>
<p>Satuan SI resmi untuk Panjang adalah...?</p>
<button class="opt-btn" onclick="groupAns(3, true)">A. Meter ($\text{m}$)</button>
<button class="opt-btn" onclick="groupAns(3, false)">B. Centimeter ($\text{cm}$)</button>
</div>
<div class="user-zone">
<h4 style="color: #c084fc;">🟣 Tim 4 (Suhu)</h4>
<p>Satuan SI resmi untuk Suhu adalah...?</p>
<button class="opt-btn" onclick="groupAns(4, true)">A. Kelvin ($\text{K}$)</button>
<button class="opt-btn" onclick="groupAns(4, false)">B. Celsius ($^{\circ}\text{C}$)</button>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 10px; font-weight: bold; font-size: 1.3rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 11: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.3rem; margin: 12px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 15px; font-size: 1.2rem;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 12px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 12: IDENTITAS SISWA -->
<div class="slide">
<span class="slide-tag">✍️ Data Diri</span>
<h2>Isi Identitas Dulu Yuk!</h2>
<div class="glass-card">
<p style="margin-bottom: 15px;">Lengkapi data dirimu sebelum menuju refleksi kelas:</p>
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" id="stu-name" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 15px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select id="stu-class">
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option>
<option value="7-B">7-B ⚡</option>
<option value="7-C">7-C 🔥</option>
</select>
</div>
</div>
<!-- SLIDE 13: REFLEKSI BELAJAR -->
<div class="slide">
<span class="slide-tag">🌈 Suasana Hati</span>
<h2>Refleksi Belajar Hari Ini</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.3rem; font-weight: bold; color: var(--yellow);">Bagaimana perasaanmu belajar IPA hari ini?</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Terima Kasih! Senang sekali kamu gembira hari ini! 😄🎉')">😄 Senang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Mantap! Semangat terus ya! 👍')">😐 Seru Aja</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan menyerah! Besok kita belajar lebih seru lagi! 💪')">😕 Agak Bingung</button>
</div>
<p style="color: var(--primary); font-size: 1.2rem; font-weight: bold;">"Terima kasih atas partisipasi aktif kalian hari ini! Sampai jumpa di petualangan sains berikutnya!" 🎉✨</p>
</div>
</div>
</div>
<!-- Controls Navigasi Bawah -->
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span class="slide-counter" id="slideCounter">Slide 1 dari 13</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() {
if (window.MathJax && window.MathJax.typesetPromise) {
window.MathJax.typesetPromise();
}
}
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) changeSlide(1);
if (e.key === 'ArrowLeft' && currentSlide > 0) changeSlide(-1);
});
// Bank Soal TP 1 (Simbol dihapus)
const q1Data = [
{ q: "Besaran yang satuannya sudah ditetapkan secara internasional terlebih dahulu adalah...", opts: ["Besaran Turunan", "Besaran Pokok", "Satuan Tak Baku"], ans: 1 },
{ q: "Manakah di bawah ini yang merupakan contoh Besaran Pokok?", opts: ["Kecepatan Lari", "Massa Kucing ($3{,}5\\text{ kg}$)", "Luas Daun"], ans: 1 },
{ q: "Luas Daun ($12\\text{ cm}^2$) dikategorikan ke dalam...", opts: ["Besaran Pokok", "Besaran Turunan", "Satuan Tradisional"], ans: 1 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) {
document.getElementById('q1-text').innerText = "🎉 Hore! Kuis TP 1 Selesai dengan Sukses!";
document.getElementById('q1-opts').innerHTML = "";
document.getElementById('q1-next-btn').style.display = "none";
return;
}
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari ${q1Data.length}`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`;
});
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) {
document.getElementById('q1-feedback').innerText = "🎉 Keren Sekali! Jawabanmu Tepat!";
document.getElementById('q1-feedback').style.color = "var(--success)";
} else {
document.getElementById('q1-feedback').innerText = "❌ Ups! Ayo coba lagi di soal berikutnya!";
document.getElementById('q1-feedback').style.color = "var(--accent)";
}
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
// Bank Soal TP 2 (Simbol dihapus)
const q2Data = [
{ q: "Satuan Internasional (SI) untuk mengukur Panjang Kain adalah...", opts: ["Centimeter (\\text{cm})", "Meter (\\text{m})", "Kilometer (\\text{km})"], ans: 1 },
{ q: "Satuan SI resmi untuk mengukur Suhu adalah...", opts: ["Celsius (^{\\circ}\\text{C})", "Fahrenheit (^{\\circ}\\text{F})", "Kelvin (\\text{K})"], ans: 2 },
{ q: "Satuan SI resmi untuk Besaran Massa benda adalah...", opts: ["Gram (\\text{g})", "Kilogram (\\text{kg})", "Ton"], ans: 1 }
];
let q2Idx = 0;
function renderQ2() {
if(q2Idx >= q2Data.length) {
document.getElementById('q2-text').innerText = "🎉 Luar Biasa! Kuis TP 2 Tuntas!";
document.getElementById('q2-opts').innerHTML = "";
document.getElementById('q2-next-btn').style.display = "none";
return;
}
let d = q2Data[q2Idx];
document.getElementById('q2-num').innerText = `Soal ${q2Idx + 1} dari ${q2Data.length}`;
document.getElementById('q2-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="checkQ2(${i})">${o}</button>`;
});
document.getElementById('q2-opts').innerHTML = html;
document.getElementById('q2-feedback').innerText = "";
document.getElementById('q2-next-btn').style.display = "none";
reRenderMath();
}
function checkQ2(i) {
if(i === q2Data[q2Idx].ans) {
document.getElementById('q2-feedback').innerText = "🎉 Hebat! Kamu makin paham SI!";
document.getElementById('q2-feedback').style.color = "var(--success)";
} else {
document.getElementById('q2-feedback').innerText = "❌ Hampir benar, yuk lanjut!";
document.getElementById('q2-feedback').style.color = "var(--accent)";
}
document.getElementById('q2-next-btn').style.display = "inline-block";
}
function nextQ2() { q2Idx++; renderQ2(); }
// Multi User Score
let groupScore = [false, false, false, false];
function groupAns(user, isTrue) {
if(isTrue) groupScore[user-1] = true;
let total = groupScore.filter(Boolean).length;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Kelompok: ${total * 25} / 100`;
}
// Ujian Akhir (Simbol dihapus)
const exData = [
{ q: "1. Besaran yang diturunkan dari besaran pokok dinamakan...", opts: ["Besaran Pokok", "Besaran Turunan", "Besaran Utama"], ans: 1 },
{ q: "2. Suhu tubuh adik saat demam adalah $310\\text{ K}$. Suhu adalah besaran...", opts: ["Pokok", "Turunan", "Lokal"], ans: 0 },
{ q: "3. Satuan SI untuk Timbangan Massa Beras adalah...", opts: ["Gram (\\text{g})", "Kilogram (\\text{kg})", "Kuintal"], ans: 1 },
{ q: "4. Mengapa jengkal dinamakan satuan tidak baku?", opts: ["Karena berlaku internasional", "Karena ukuran tangan tiap orang beda-beda", "Karena ukurannya pasti sama"], ans: 1 },
{ q: "5. Kecepatan sepeda dinyatakan dalam $\\text{m/s}$. Kecepatan adalah besaran...", opts: ["Pokok", "Turunan", "Tradisional"], ans: 1 }
];
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) {
document.getElementById('ex-text').innerText = "🎉 Selamat! Kamu telah menyelesaikan Ujian Akhir!";
document.getElementById('ex-opts').innerHTML = "";
document.getElementById('ex-next-btn').style.display = "none";
return;
}
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari ${exData.length}`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`;
});
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawabanmu Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
// Init Engine
renderQ1();
renderQ2();
renderExam();
updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Sel dan Perkembangannya 1 : Struktur Sel dan Perbedaan
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPA Kelas 8: Struktur & Perbedaan Sel (TP 1 & 2) 🧬</title>
<!-- Tailwind CSS & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="dna" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">IPA Kelas 8 - Fokus TP 1 & TP 2</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Kelas 8
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-2">
Struktur Sel & Perbedaan <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Sel Hewan vs Tumbuhan</span> 🔬
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Fokus Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-sm font-bold text-slate-700 list-decimal list-inside pl-2">
<li>Peserta didik dapat <span class="text-emerald-700">menjelaskan struktur dan fungsi sel organisme</span> secara mendetail.</li>
<li>Peserta didik dapat <span class="text-emerald-700">membedakan sel hewan dengan sel tumbuhan</span> berdasarkan organel penyusunnya.</li>
</ol>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Siap memperdalam pengetahuan biologismu? Mari mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Identitas Siswa -->
<div class="slide flex-col p-8 gap-6 max-w-lg mx-auto w-full min-h-[75vh] justify-center">
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-xl text-center">
<span class="text-4xl block mb-2">👤</span>
<h2 class="text-2xl font-black text-slate-900 mb-1">Identitas Siswa</h2>
<p class="text-slate-500 text-xs mb-6">Masukkan data diri sebelum memulai eksplorasi materi.</p>
<div class="space-y-4 text-left">
<div>
<label class="block text-xs font-bold text-slate-700 uppercase mb-1">Nama Lengkap</label>
<input type="text" id="input-nama" placeholder="Contoh: Budi Santoso" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold text-sm bg-slate-50 focus:outline-emerald-500">
</div>
<div>
<label class="block text-xs font-bold text-slate-700 uppercase mb-1">Kelas / Kelompok</label>
<input type="text" id="input-kelas" placeholder="Contoh: 8B / Kelompok 3" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold text-sm bg-slate-50 focus:outline-emerald-500">
</div>
</div>
</div>
</div>
<!-- Slide 3: TP 1 (Bagian A) - Pengertian & Sejarah Sel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 1 (Bagian A)</span>
<h2 class="text-3xl font-black text-emerald-900 mt-2">Apa Itu Sel? (Unit Terkecil Kehidupan) 🧫</h2>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-lg space-y-4 text-sm">
<p class="text-slate-700 leading-relaxed font-medium">
Semua makhluk hidup di bumi tersusun atas sel. Kata "sel" pertama kali dicetuskan oleh <b>Robert Hooke</b> pada tahun 1665 saat mengamati sayatan gabus di bawah mikroskop sederhana.
</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-sm">🧩 Satuan Struktural</h4>
<p class="text-xs text-slate-600 leading-relaxed">Berarti sel adalah blok penyusun dasar yang membentuk seluruh tubuh makhluk hidup (baik uniseluler seperti bakteri maupun multiseluler seperti manusia).</p>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-sm">⚙️ Satuan Fungsional</h4>
<p class="text-xs text-slate-600 leading-relaxed">Berarti seluruh proses kehidupan (metabolisme, respirasi, ekskresi, reproduksi) terjadi di dalam tingkat seluler.</p>
</div>
</div>
</div>
</div>
<!-- Slide 4: TP 1 (Bagian B) - Struktur & Fungsi Organel Sel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 1 (Bagian B)</span>
<h2 class="text-3xl font-black text-emerald-900 mt-2">Struktur dan Fungsi Organel Sel 🔬</h2>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-lg space-y-4 text-sm">
<p class="text-slate-700 font-medium">Di dalam sel terdapat berbagai bagian kecil bernama <b>organel sel</b> yang memiliki tugas spesifik:</p>
<div class="grid md:grid-cols-2 gap-3">
<div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200">
<h4 class="font-bold text-emerald-800 text-xs">1. Membran Sel</h4>
<p class="text-xs text-slate-600 mt-0.5">Berperan sebagai penjaga gerbang yang mengatur keluar masuknya zat ke dalam dan ke luar sel.</p>
</div>
<div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200">
<h4 class="font-bold text-emerald-800 text-xs">2. Nukleus (Inti Sel)</h4>
<p class="text-xs text-slate-600 mt-0.5">Otak atau pusat pengendali seluruh aktivitas sel serta penyimpan materi genetik (DNA).</p>
</div>
<div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200">
<h4 class="font-bold text-emerald-800 text-xs">3. Sitoplasma</h4>
<p class="text-xs text-slate-600 mt-0.5">Cairan agar-agar tempat organel sel berada dan tempat terjadinya reaksi kimia metabolisme.</p>
</div>
<div class="bg-slate-50 p-3.5 rounded-xl border border-slate-200">
<h4 class="font-bold text-emerald-800 text-xs">4. Mitokondria</h4>
<p class="text-xs text-slate-600 mt-0.5">Pabrik tenaga sel yang menghasilkan energi melalui proses respirasi seluler.</p>
</div>
</div>
</div>
</div>
<!-- Slide 5: TP 1 (Bagian C) - Organel Pendukung Lainnya -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 1 (Bagian C)</span>
<h2 class="text-3xl font-black text-emerald-900 mt-2">Organel Pendukung Sel Lainnya ⚙️</h2>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-lg space-y-4 text-sm">
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<h4 class="font-bold text-teal-900 text-xs">Ribosom</h4>
<p class="text-xs text-slate-600">Tempat sintesis (pembentukan) protein di dalam sel.</p>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<h4 class="font-bold text-teal-900 text-xs">Retikulum Endoplasma (RE)</h4>
<p class="text-xs text-slate-600">Saluran pengangkut zat di dalam sel (ada RE kasar dan halus).</p>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<h4 class="font-bold text-teal-900 text-xs">Badan Golgi</h4>
<p class="text-xs text-slate-600">Memproses dan mengeksport protein ke luar sel.</p>
</div>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200">
<p class="text-xs font-bold text-amber-900">💡 Catatan Penting Struktur Sel:</p>
<p class="text-xs text-amber-800 mt-1">Setiap organel saling bekerja sama secara harmonis ibarat sebuah pabrik industri yang terkoordinasi dengan sangat rapi.</p>
</div>
</div>
</div>
<!-- Slide 6: TP 2 (Bagian A) - Pengantar Sel Hewan & Tumbuhan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="bg-teal-100 text-teal-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 2 (Bagian A)</span>
<h2 class="text-3xl font-black text-teal-900 mt-2">Mengenal Tipe Sel Eukariotik: Hewan & Tumbuhan 🌿🐾</h2>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-4 text-sm">
<p class="text-slate-700 leading-relaxed font-medium">
Meskipun sel hewan dan sel tumbuhan sama-sama memiliki inti sel dan organel dasar (seperti mitokondria dan ribosom), keduanya memiliki perbedaan struktur yang mencolok karena perbedaan cara hidup dan kebutuhan biologis mereka.
</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<h4 class="font-bold text-emerald-900 text-xs mb-1">🌿 Mengapa Tumbuhan Butuh Struktur Kaku?</h4>
<p class="text-xs text-slate-600">Tumbuhan tidak memiliki rangka tulang seperti hewan, sehingga sel tumbuhan memerlukan dinding sel yang kokoh agar tubuhnya bisa berdiri tegak melawan gravitasi.</p>
</div>
<div class="bg-sky-50 p-4 rounded-2xl border border-sky-200">
<h4 class="font-bold text-sky-900 text-xs mb-1">🐾 Mengapa Hewan Bisa Bergerak Bebas?</h4>
<p class="text-xs text-slate-600">Sel hewan tidak memiliki dinding sel yang kaku, sehingga membran selnya lebih fleksibel dan memungkinkan sel hewan memiliki berbagai bentuk serta mudah bergerak.</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: TP 2 (Bagian B) - Tabel Perbandingan Detail Sel Hewan & Tumbuhan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="bg-teal-100 text-teal-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Tujuan 2 (Bagian B)</span>
<h2 class="text-3xl font-black text-teal-900 mt-2">Tabel Perbandingan: Sel Hewan vs Sel Tumbuhan 📊</h2>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg overflow-x-auto">
<table class="w-full text-left text-xs border-collapse">
<thead>
<tr class="bg-teal-600 text-white">
<th class="p-3 border">Perbedaan Organel</th>
<th class="p-3 border">Sel Tumbuhan</th>
<th class="p-3 border">Sel Hewan</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 font-medium text-slate-700">
<tr>
<td class="p-3 font-bold bg-slate-50">Dinding Sel</td>
<td class="p-3 text-emerald-700 font-bold">Ada (Kaku dari selulosa)</td>
<td class="p-3 text-rose-600 font-bold">Tidak Ada</td>
</tr>
<tr>
<td class="p-3 font-bold bg-slate-50">Kloroplas (Plastida)</td>
<td class="p-3 text-emerald-700 font-bold">Ada (Untuk fotosintesis)</td>
<td class="p-3 text-rose-600 font-bold">Tidak Ada</td>
</tr>
<tr>
<td class="p-3 font-bold bg-slate-50">Vakuola</td>
<td class="p-3">Ada, ukuran <b>sangat besar</b></td>
<td class="p-3">Ada, ukuran kecil / tidak permanen</td>
</tr>
<tr>
<td class="p-3 font-bold bg-slate-50">Sentriol</td>
<td class="p-3 text-rose-600">Tidak ada (umumnya)</td>
<td class="p-3 text-emerald-700 font-bold">Ada (Berperan saat pembelahan sel)</td>
</tr>
<tr>
<td class="p-3 font-bold bg-slate-50">Bentuk Sel</td>
<td class="p-3">Tetap / Beraturan</td>
<td class="p-3">Berubah-ubah / Fleksibel</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Slide 8: Kuis Interaktif Kelompok (Multi-User Battle) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<span class="bg-amber-100 text-amber-800 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Evaluasi Kelompok</span>
<h2 class="text-3xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase mt-1">⚡ BATTLE KELOMPOK MULTI-USER (TP 1 & 2) ⚡</h2>
<p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke depan! Jawab 5 soal struktur & perbedaan sel secara bergantian.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🟢 Kelompok 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-base font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🔵 Kelompok 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-base font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🟡 Kelompok 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-base font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-8xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-400 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#065f46] transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Ujian Akhir Individu & Pelaporan Guru -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Mandiri (Fokus TP 1 & 2)</h2>
<p class="text-base font-bold text-slate-500 mb-6">Uji pemahaman individumu melalui 5 soal pilihan ganda berikut.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Mandiri: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<p class="font-bold text-slate-500 text-center mb-4">Kirim laporan nilai hasil belajarmu ke guru.</p>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama & Kelas</label>
<input type="text" id="input-nama-lapor" placeholder="Contoh: Budi (8A)" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50 text-sm">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all">
Kirim Laporan ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 10: Refleksi Perasaan Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Pembelajaran 💭</h2>
<p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari struktur dan perbedaan sel hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center cursor-pointer">
<div class="text-5xl mb-2">😎</div>
<h3 class="font-black text-lg text-slate-700">Senang & Paham</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center cursor-pointer">
<div class="text-5xl mb-2">🤔</div>
<h3 class="font-black text-lg text-slate-700">Cukup Mengerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center cursor-pointer">
<div class="text-5xl mb-2">🤯</div>
<h3 class="font-black text-lg text-slate-700">Perlu Bimbingan</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2 text-sm">Tuliskan kesan atau bagian paling menarik hari ini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium text-sm" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300">
<i data-lucide="chevron-left" class="w-5 h-5"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
// Sinkronisasi nama siswa ke form akhir
if (current === 9) {
let n = document.getElementById('input-nama').value;
let k = document.getElementById('input-kelas').value;
if(n) document.getElementById('input-nama-lapor').value = n + (k ? " (" + k + ")" : "");
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// ==========================================
// MULTI-USER KELOMPOK GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Pusat pengendali seluruh aktivitas sel dan pembawa materi genetik adalah...", opts: ["Nukleus", "Mitokondria", "Membran Sel"], ans: 0 },
{ q: "Organel sel yang berfungsi menghasilkan energi melalui respirasi sel adalah...", opts: ["Mitokondria", "Ribosom", "Vakuola"], ans: 0 },
{ q: "Manakah struktur yang hanya dijumpai pada sel tumbuhan?", opts: ["Dinding sel & Kloroplas", "Lisosom & Sentriol", "Membran sel"], ans: 0 },
{ q: "Bagian sel yang berfungsi mengatur keluar masuknya zat adalah...", opts: ["Membran sel", "Nukleus", "Sitoplasma"], ans: 0 },
{ q: "Organel yang berperan dalam pembentukan protein adalah...", opts: ["Ribosom", "Mitokondria", "Badan Golgi"], ans: 0 },
{ q: "Manakah ciri khas yang hanya dimiliki oleh sel hewan?", opts: ["Memiliki sentriol", "Memiliki dinding sel", "Memiliki kloroplas"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Senang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Cukup')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Latihan Mandiri Individu (Ujian Akhir TP 1 & 2)
const evaluasiBank = [
{
q: "Bagian sel yang berfungsi sebagai pengendali seluruh aktivitas sel dan pembawa informasi genetik (DNA) adalah...",
options: ["Nukleus", "Mitokondria", "Membran sel", "Ribosom"],
a: 0,
exp: "Nukleus atau inti sel bertindak sebagai pusat pengendali sel."
},
{
q: "Organel sel yang berfungsi sebagai tempat pembentukan energi (respirasi sel) adalah...",
options: ["Mitokondria", "Badan Golgi", "Vakuola", "Sitoplasma"],
a: 0,
exp: "Mitokondria dikenal sebagai pabrik energi sel."
},
{
q: "Manakah di bawah ini yang merupakan organel yang HANYA terdapat pada sel tumbuhan?",
options: ["Dinding sel dan kloroplas", "Mitokondria dan nukleus", "Membran sel dan ribosom", "Retikulum endoplasma"],
a: 0,
exp: "Dinding sel dan kloroplas merupakan ciri khas eksklusif pada sel tumbuhan."
},
{
q: "Mengapa sel tumbuhan memiliki bentuk yang kaku dan teratur?",
options: ["Karena memiliki dinding sel dari selulosa", "Karena tidak memiliki inti sel", "Karena vakuolanya sangat kecil", "Karena dikelilingi oleh lisosom"],
a: 0,
exp: "Dinding sel yang keras memberikan bentuk kaku pada sel tumbuhan."
},
{
q: "Fungsi utama dari kloroplas pada sel tumbuhan adalah...",
options: ["Tempat berlangsungnya fotosintesis", "Penyimpan cadangan air", "Pemberi energi gerak", "Pengatur keluar masuk zat"],
a: 0,
exp: "Kloroplas mengandung zat hijau daun (klorofil) untuk fotosintesis."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-base hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-base font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-base font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama-lapor').value.trim();
if(!nama) {
alert("Silakan masukkan nama & kelas terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Selesai belajar!";
alert(`Laporan Berhasil Terkirim ke Guru! 🎉\n\nNama: ${nama}\nSkor Ujian: ${evalSkor}\nPemahaman: ${baterai}%\nCatatan: ${refleksi}`);
}
</script>
</body>
</html>
Kelas 8
Matematika
Relasi dan Fungsi : Konsep Dasar Himpunan 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>Matematika Kelas 8: Himpunan, Relasi, dan Fungsi 🌀</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #faf5ff;
background-image: radial-gradient(#e9d5ff 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-purple-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="layers" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Matematika Kelas 8 - Himpunan, Relasi, & Fungsi</span>
<span id="progress-text" class="text-xs font-black text-white bg-purple-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-purple-400 via-fuchsia-500 to-indigo-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka (Usia 13-15 Tahun)
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Mengenal <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600">Himpunan, Relasi, dan Fungsi</span> 🌀
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-purple-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-base md:text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-purple-600">mengidentifikasi konsep himpunan, relasi, dan fungsi</span> dalam matematika.</li>
<li>Peserta didik dapat <span class="text-purple-600">menjelaskan relasi dan fungsi</span> secara tuntas (<span class="text-indigo-600">domain, kodomain, range</span>).</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menaklukkan konsep dasar matematika ini? Ayo mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Identitas / Registrasi Siswa -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="bg-white p-8 md:p-12 rounded-[2.5rem] border-4 border-purple-200 shadow-xl max-w-lg w-full text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div>
<div class="text-center mb-6">
<span class="text-4xl">👋</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Identitas Siswa</h2>
<p class="text-sm font-bold text-slate-500">Isi data dirimu sebelum memulai pembelajaran dan kuis.</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama-reg" placeholder="Contoh: Salsabila Putri" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Kelas / Kelompok</label>
<input type="text" id="input-kelas-reg" placeholder="Contoh: 8B / Kelompok 2" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<button onclick="simpanRegistrasi()" class="w-full py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-lg rounded-2xl shadow-lg transition">Simpan & Lanjut 🚀</button>
</div>
</div>
</div>
<!-- Slide 3: Observasi & Pertanyaan Pemantik -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Observasi & Pertanyaan Pemantik 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati pengelompokan benda di sekitarmu.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-sm space-y-3">
<span class="text-4xl">📦</span>
<h4 class="font-black text-xl text-purple-800">Observasi Pengelompokan</h4>
<p class="text-slate-600 font-bold text-sm">Jika kamu mengumpulkan semua alat tulis ke dalam satu kotak pensil, kumpulan objek terdefinisi jelas ini disebut <strong>Himpunan</strong>.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<span class="text-4xl">🤔</span>
<h4 class="font-black text-xl text-amber-800">Pertanyaan Pemantik</h4>
<p class="text-slate-600 font-bold text-sm">"Mengapa tidak semua relasi antarkelompok bisa disebut sebagai fungsi? Apa bedanya daerah kawan (kodomain) dengan daerah hasil (range)?"</p>
</div>
</div>
</div>
<!-- Slide 4: Materi Inti 1 - Konsep Himpunan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Konsep Himpunan 📦</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Himpunan adalah kumpulan objek atau benda yang terdefinisi dengan jelas (dapat ditentukan dengan pasti anggota atau bukan anggotanya).<br>
<b>Contoh:</b> Himpunan hewan berkaki empat = {kucing, sapi, kambing}. (Sangat jelas anggotanya).
</p>
<!-- Latihan Mandiri 1 -->
<div class="bg-purple-50 p-6 rounded-2xl border-2 border-purple-200 space-y-4 mt-6">
<h4 class="font-black text-purple-900 text-lg">Latihan Mandiri 1 (Himpunan):</h4>
<div id="m1-soal-box" class="space-y-4">
<p class="font-bold text-slate-700 text-sm">1. Manakah di bawah ini yang merupakan contoh sebuah himpunan?</p>
<div class="grid grid-cols-2 gap-2" id="m1-opts">
<button onclick="cekLatihan(this, true, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">A. Kumpulan bilangan prima kurang dari 10</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">B. Kumpulan lukisan yang indah</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">C. Kumpulan anak yang pandai</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">D. Kumpulan makanan yang enak</button>
</div>
<div id="m1-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti 2 - Konsep Relasi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-fuchsia-900 bg-fuchsia-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Konsep Relasi 🔗</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-fuchsia-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Relasi adalah aturan yang memasangkan anggota suatu himpunan ke himpunan lainnya tanpa syarat khusus (bebas menghubungkan berapa pun pasangan).<br>
<b>Contoh:</b> Himpunan Anak {Ani, Boni} dihubungkan ke Himpunan Warna {Merah, Biru, Hijau} dengan relasi "menyukai warna". Satu anak boleh suka lebih dari satu warna.
</p>
<div class="bg-fuchsia-50 p-6 rounded-2xl border-2 border-fuchsia-200 space-y-4 mt-6">
<h4 class="font-black text-fuchsia-900 text-lg">Latihan Mandiri 2 (Relasi):</h4>
<p class="font-bold text-slate-700 text-sm">Apa arti utama dari sebuah "Relasi" dalam matematika?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">A. Aturan pemasangan antaranggota dua himpunan</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">B. Hanya boleh tepat satu pasangan</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">C. Kumpulan angka acak</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">D. Rumus perkalian kuadrat</button>
</div>
<div id="m2-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti 3 - Konsep Fungsi (Pemetaan) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Materi 3: Konsep Fungsi (Pemetaan) 🎯</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Aturan Khusus:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Fungsi adalah relasi khusus yang memasangkan setiap anggota himpunan asal (domain) dengan <strong>tepat satu</strong> anggota himpunan kawan (kodomain).<br>
Tidak boleh ada anggota domain yang jomblo (tidak punya pasangan) atau mendua (punya lebih dari satu pasangan).
</p>
<div class="bg-indigo-50 p-6 rounded-2xl border-2 border-indigo-200 space-y-4 mt-6">
<h4 class="font-black text-indigo-900 text-lg">Latihan Mandiri 3 (Fungsi):</h4>
<p class="font-bold text-slate-700 text-sm">Manakah syarat mutlak agar suatu relasi bisa disebut sebagai fungsi?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="cekLatihan(this, true, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100 text-left">A. Setiap anggota domain memiliki tepat satu pasangan di kodomain</button>
<button onclick="cekLatihan(this, false, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100 text-left">B. Anggota domain bebas memiliki berapa pun pasangan</button>
</div>
<div id="m3-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 7: Materi Inti 4 - Domain, Kodomain, dan Range -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-violet-900 bg-violet-100 inline-block px-6 py-2 rounded-2xl">Materi 4: Domain, Kodomain, & Range 🔍</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-violet-200 shadow-md space-y-4">
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-purple-50 p-4 rounded-2xl border border-purple-200 text-center">
<h4 class="font-black text-purple-900 mb-1">1. Domain (Daerah Asal)</h4>
<p class="text-xs font-semibold text-slate-700">Seluruh anggota himpunan sebelah kiri yang memetakan.</p>
</div>
<div class="bg-fuchsia-50 p-4 rounded-2xl border border-fuchsia-200 text-center">
<h4 class="font-black text-fuchsia-900 mb-1">2. Kodomain (Daerah Kawan)</h4>
<p class="text-xs font-semibold text-slate-700">Seluruh anggota himpunan sebelah kanan (tujuan).</p>
</div>
<div class="bg-indigo-50 p-4 rounded-2xl border border-indigo-200 text-center">
<h4 class="font-black text-indigo-900 mb-1">3. Range (Daerah Hasil)</h4>
<p class="text-xs font-semibold text-slate-700">Hanya anggota kodomain yang benar-benar <strong>tertulis panah/pasangan</strong>.</p>
</div>
</div>
<div class="bg-violet-50 p-6 rounded-2xl border-2 border-violet-200 space-y-4 mt-4">
<h4 class="font-black text-violet-900 text-lg">Latihan Mandiri 4 (Domain, Kodomain, Range):</h4>
<p class="font-bold text-slate-700 text-sm">Bagian kodomain yang hanya berisi anggota yang menerima pasangan dari domain disebut...</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-violet-100">A. Range (Daerah Hasil)</button>
<button onclick="cekLatihan(this, false, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-violet-100">B. Domain</button>
</div>
<div id="m4-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 8: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-3xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 tracking-wide uppercase">⚡ BATTLE PANEL KELOMPOK MULTI-USER ⚡</h2>
<p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke depan! Selesaikan 5 soal himpunan, relasi, dan fungsi secara serentak.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-purple-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-purple-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🏎️ Kelompok 1</span>
<span id="ifp-score-1" class="bg-purple-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-purple-50 p-4 rounded-2xl border border-purple-100 text-center">
<p id="ifp-q-1" class="text-base font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-fuchsia-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-fuchsia-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🚓 Kelompok 2</span>
<span id="ifp-score-2" class="bg-fuchsia-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-fuchsia-50 p-4 rounded-2xl border border-fuchsia-100 text-center">
<p id="ifp-q-2" class="text-base font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-indigo-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-indigo-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🚙 Kelompok 3</span>
<span id="ifp-score-3" class="bg-indigo-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-indigo-50 p-4 rounded-2xl border border-indigo-100 text-center">
<p id="ifp-q-3" class="text-base font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-8xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-purple-400 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#581c87] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Mandiri & Pelaporan ke Guru</h2>
<p class="text-base font-bold text-slate-500 mb-6">Uji kemampuan individumu dengan mengerjakan 5 soal pilihan ganda berikut.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-purple-800 bg-purple-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-purple-900 mb-2">Latihan Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Mandiri: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-purple-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai hasil latihanmu ke guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-purple-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 10: Refleksi Perasaan Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari konsep himpunan, relasi, dan fungsi hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-5xl mb-2">😎</div>
<h3 class="font-black text-lg text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-5xl mb-2">🤔</div>
<h3 class="font-black text-lg text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-5xl mb-2">🤯</div>
<h3 class="font-black text-lg text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pesan atau bagian paling menarik hari ini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-purple-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-5 h-5"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-purple-600 text-white font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-700 shadow-[0_4px_0px_#6b21a8]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Simpan Registrasi Identitas
function simpanRegistrasi() {
let nama = document.getElementById('input-nama-reg').value.trim();
let kelas = document.getElementById('input-kelas-reg').value.trim();
if(!nama || !kelas) {
alert("Silakan isi nama dan kelas terlebih dahulu!");
return;
}
document.getElementById('input-nama').value = nama + " (" + kelas + ")";
nextSlide();
}
// Latihan Mandiri di Setiap Slide Materi
function cekLatihan(btn, isTrue, mId) {
let parent = btn.parentElement;
let btns = parent.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(mId + '-feedback');
fb.classList.remove('hidden');
if(isTrue) {
btn.className = "p-3 bg-green-500 text-white font-bold rounded-xl text-sm border-2 border-green-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Pemahamanmu luar biasa.";
} else {
btn.className = "p-3 bg-rose-500 text-white font-bold rounded-xl text-sm border-2 border-rose-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat. Coba tinjau kembali materinya.";
}
}
// ==========================================
// MULTI-USER KELOMPOK GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Kumpulan objek yang terdefinisi dengan jelas dinamakan...", opts: ["Himpunan", "Relasi", "Fungsi", "Range"], ans: 0 },
{ q: "Seluruh anggota himpunan sebelah kiri pada pemetaan disebut...", opts: ["Domain (Asal)", "Kodomain", "Range", "Konstanta"], ans: 0 },
{ q: "Anggota kodomain yang benar-benar menerima pasangan dari domain disebut...", opts: ["Range (Hasil)", "Domain", "Himpunan Kosong", "Variabel"], ans: 0 },
{ q: "Relasi khusus yang memasangkan setiap domain dengan tepat satu kodomain adalah...", opts: ["Fungsi", "Relasi Bebas", "Himpunan Bagian", "Semua salah"], ans: 0 },
{ q: "Manakah di bawah ini yang bukan merupakan fungsi?", opts: ["Satu domain memiliki 2 pasangan", "Setiap domain punya 1 pasangan", "Domain terpetakan sempurna", "Domain tepat 1 bayangan"], ans: 0 },
{ q: "Daerah kawan dalam istilah matematika dinamakan...", opts: ["Kodomain", "Domain", "Range", "Universal"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu Akhir
const evaluasiBank = [
{
q: "Kumpulan objek yang dapat didefinisikan dengan jelas anggotanya disebut...",
options: ["Himpunan", "Relasi", "Fungsi", "Range"],
a: 0,
exp: "Definisi baku dari himpunan adalah kumpulan objek yang anggotanya dapat ditentukan dengan jelas dan pasti."
},
{
q: "Aturan yang memasangkan anggota suatu himpunan ke himpunan lainnya secara bebas disebut...",
options: ["Relasi", "Fungsi", "Domain", "Kodomain"],
a: 0,
exp: "Relasi adalah aturan pemasangan umum tanpa syarat harus tepat satu."
},
{
q: "Relasi khusus yang memasangkan setiap domain dengan tepat satu kodomain dinamakan...",
options: ["Fungsi (Pemetaan)", "Himpunan Bagian", "Range", "Variabel"],
a: 0,
exp: "Fungsi adalah bentuk khusus relasi di mana setiap elemen domain memiliki tepat satu pasangan."
},
{
q: "Dalam suatu pemetaan dari himpunan A ke B, himpunan A disebut sebagai...",
options: ["Domain (Daerah Asal)", "Kodomain (Daerah Kawan)", "Range (Hasil)", "Konstanta"],
a: 0,
exp: "Himpunan asal tempat elemen dipetakan dinamakan domain."
},
{
q: "Dari diagram panah fungsi, himpunan bagian dari kodomain yang menerima panah dari domain disebut...",
options: ["Range (Daerah Hasil)", "Domain", "Himpunan Semesta", "Kodomain utuh"],
a: 0,
exp: "Range adalah seluruh anggota daerah kawan yang benar-benar memiliki pasangan."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-purple-50 hover:border-purple-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan identitas nama terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Himpunan, Relasi, dan Fungsi: " + refleksi,
strategi: "Evaluasi: Himpunan, Relasi, dan Fungsi Kelas 8"
}, "*");
} else {
alert(`Laporan Misi Berhasil Terkirim ke Guru! 🎉\n\nIdentitas: ${nama}\nSkor Mandiri: ${evalSkor}\nTingkat Pemahaman: ${baterai}%`);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Relasi dan Fungsi : Penyajian konsep dan Analisis Grafik
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Relasi dan Fungsi 📐</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #ecfeff;
background-image: radial-gradient(#cffafe 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #0284c7 !important; color: white !important; border-bottom-color: #0369a1 !important; pointer-events: none; }
.btn-wrong { background-color: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
.ifp-col { border-right: 3px dashed #cbd5e1; }
.ifp-col:last-child { border-right: none; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-cyan-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-cyan-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="compass" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-cyan-800 uppercase tracking-widest">Matematika Kelas 8 - Relasi dan Fungsi</span>
<span id="progress-text" class="text-xs font-black text-white bg-cyan-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-cyan-400 via-sky-500 to-blue-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-cyan-100 text-cyan-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka (Usia 13-15 Tahun)
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Menjelajah Dunia <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600">Relasi dan Fungsi</span> 📐
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-cyan-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-cyan-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-base md:text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-cyan-600">menerapkan konsep relasi dan fungsi</span> dalam bentuk diagram panah, tabel, himpunan pasangan berurutan, dan grafik.</li>
<li>Peserta didik dapat <span class="text-cyan-600">menganalisis perbedaan antara fungsi linear dan fungsi non-linear</span> secara grafik.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap belajar dengan seru? Ayo mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Identitas / Registrasi Siswa -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="bg-white p-8 md:p-12 rounded-[2.5rem] border-4 border-cyan-200 shadow-xl max-w-lg w-full text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-cyan-100 rounded-bl-full -z-10"></div>
<div class="text-center mb-6">
<span class="text-4xl">👋</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Identitas Siswa</h2>
<p class="text-sm font-bold text-slate-500">Isi data dirimu sebelum kuis & pelaporan dimulai.</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama-reg" placeholder="Contoh: Budi Santoso" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-cyan-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Kelas / Kelompok</label>
<input type="text" id="input-kelas-reg" placeholder="Contoh: 8A / Kelompok 1" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-cyan-500 bg-slate-50">
</div>
<button onclick="simpanRegistrasi()" class="w-full py-4 bg-cyan-600 hover:bg-cyan-500 text-white font-black text-lg rounded-2xl shadow-lg transition">Simpan & Lanjut 🚀</button>
</div>
</div>
</div>
<!-- Slide 3: Observasi & Pertanyaan Pemantik -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-cyan-900 bg-cyan-100 inline-block px-6 py-2 rounded-2xl">Observasi & Pertanyaan Pemantik 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati hubungan di sekitar kita sebelum masuk ke materi inti.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-sm space-y-3">
<span class="text-4xl">🍎</span>
<h4 class="font-black text-xl text-cyan-800">Observasi Hubungan</h4>
<p class="text-slate-600 font-bold text-sm">Setiap anak di kelas memiliki tepat satu makanan kesukaan utama. Hubungan antara "Anak" dan "Makanan" adalah contoh nyata relasi & fungsi.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<span class="text-4xl">🤔</span>
<h4 class="font-black text-xl text-amber-800">Pertanyaan Pemantik</h4>
<p class="text-slate-600 font-bold text-sm">"Pernahkah kamu memesan ojek online di mana 1 jarak tempuh tertentu pasti menghasilkan tepat 1 harga total? Bagaimana aturan pemasangan tersebut dalam matematika?"</p>
</div>
</div>
</div>
<!-- Slide 4: Materi Inti 1 - Diagram Panah -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-cyan-900 bg-cyan-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Diagram Panah 🎯</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-cyan-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Diagram panah menyajikan relasi dengan menghubungkan anggota himpunan A (Domain) ke himpunan B (Kodomain) menggunakan anak panah.<br>
<b>Contoh:</b> Himpunan A = {1, 2, 3} dihubungkan ke B = {2, 4, 6} dengan aturan relasi <em>"setengah dari"</em>. Maka 1 dipanah ke 2, 2 dipanah ke 4, dan 3 dipanah ke 6.
</p>
<!-- Latihan Mandiri 5 Soal Pilihan Ganda -->
<div class="bg-cyan-50 p-6 rounded-2xl border-2 border-cyan-200 space-y-4 mt-6">
<h4 class="font-black text-cyan-900 text-lg">Latihan Mandiri 1 (Diagram Panah):</h4>
<div id="m1-soal-box" class="space-y-4">
<p class="font-bold text-slate-700 text-sm">1. Relasi khusus yang memasangkan setiap anggota domain dengan tepat satu kodomain pada diagram panah disebut...</p>
<div class="grid grid-cols-2 gap-2" id="m1-opts">
<button onclick="cekLatihan(this, true, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">A. Fungsi (Pemetaan)</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">B. Relasi Bebas</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">C. Kodomain</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">D. Range</button>
</div>
<div id="m1-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti 2 - Tabel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Tabel 📊</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-sky-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Tabel menyajikan nilai variabel input (\(x\)) pada baris/kolom pertama dan nilai output (\(y\)) pada baris/kolom kedua.<br>
<b>Contoh:</b> Jika fungsi \(f(x) = 2x + 1\), maka untuk \(x = \{1, 2, 3\}\) dibentuk tabel dengan hasil \(f(1)=3, f(2)=5, f(3)=7\).
</p>
<div class="bg-sky-50 p-6 rounded-2xl border-2 border-sky-200 space-y-4 mt-6">
<h4 class="font-black text-sky-900 text-lg">Latihan Mandiri 2 (Tabel):</h4>
<p class="font-bold text-slate-700 text-sm">Jika tabel fungsi menunjukkan \(x = 2\) berpasangan dengan \(f(2) = 7\) pada rumus \(f(x) = 3x + c\), berapakah nilai \(c\)?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">A. 1</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">B. 3</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">C. 5</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">D. 7</button>
</div>
<div id="m2-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti 3 - Himpunan Pasangan Berurutan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Materi 3: Himpunan Pasangan Berurutan 🔗</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-blue-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Menyatakan relasi atau fungsi dengan menuliskan elemen domain dan kodomain berpasangan dalam kurung kurawal bernotasi \((x, y)\).<br>
<b>Contoh:</b> \(\{(1, 2), (2, 4), (3, 6)\}\) menyatakatan relasi "dua kali dari".
</p>
<div class="bg-blue-50 p-6 rounded-2xl border-2 border-blue-200 space-y-4 mt-6">
<h4 class="font-black text-blue-900 text-lg">Latihan Mandiri 3 (Himpunan Pasangan Berurutan):</h4>
<p class="font-bold text-slate-700 text-sm">Manakah di bawah ini yang merupakan himpunan pasangan berurutan suatu fungsi?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="cekLatihan(this, true, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-blue-100 text-left">A. \(\{(1, 2), (2, 3), (3, 4)\}\)</button>
<button onclick="cekLatihan(this, false, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-blue-100 text-left">B. \(\{(1, 2), (1, 3), (2, 4)\}\)</button>
</div>
<div id="m3-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 7: Materi Inti 4 - Grafik dan Koordinat -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Materi 4: Grafik dan Koordinat 📈</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Menyajikan titik koordinat (\(x, y\)) pada bidang Kartesius. Sumbu horizontal adalah sumbu \(x\) (domain) dan sumbu vertikal adalah sumbu \(y\) (kodomain).
</p>
<div class="bg-indigo-50 p-6 rounded-2xl border-2 border-indigo-200 space-y-4 mt-6">
<h4 class="font-black text-indigo-900 text-lg">Latihan Mandiri 4 (Grafik Koordinat):</h4>
<p class="font-bold text-slate-700 text-sm">Jika fungsi \(f(x) = x + 3\) digambarkan pada bidang koordinat, titik manakah yang dilalui garis tersebut?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100">A. (2, 5)</button>
<button onclick="cekLatihan(this, false, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100">B. (2, 3)</button>
</div>
<div id="m4-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 8: Materi Inti 5 - Fungsi Linear vs Non-Linear Secara Grafik -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Materi 5: Fungsi Linear vs Non-Linear ⚖️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-md space-y-4">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-teal-50 p-5 rounded-2xl border border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-lg">Fungsi Linear</h4>
<p class="text-xs font-bold text-slate-700">Persamaan berderajat satu (\(f(x) = ax + b\)). Grafiknya berupa <b>garis lurus sempurna</b>.</p>
</div>
<div class="bg-emerald-50 p-5 rounded-2xl border border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-lg">Fungsi Non-Linear</h4>
<p class="text-xs font-bold text-slate-700">Persamaan berderajat dua atau lebih (\(f(x) = x^2\)). Grafiknya berupa <b>kurva melengkung / parabola</b>.</p>
</div>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 space-y-4 mt-4">
<h4 class="font-black text-slate-900 text-lg">Latihan Mandiri 5 (Linear & Non-Linear):</h4>
<p class="font-bold text-slate-700 text-sm">Manakah di bawah ini yang grafiknya berupa garis lengkung/parabola?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm5')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-teal-100">A. \(f(x) = x^2 - 4\)</button>
<button onclick="cekLatihan(this, false, 'm5')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-teal-100">B. \(f(x) = 3x + 2\)</button>
</div>
<div id="m5-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 9: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-3xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600 tracking-wide uppercase">⚡ BATTLE PANEL KELOMPOK MULTI-USER ⚡</h2>
<p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke depan! Selesaikan 5 soal relasi dan fungsi secara serentak.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-cyan-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-cyan-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🏎️ Kelompok 1</span>
<span id="ifp-score-1" class="bg-cyan-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-cyan-50 p-4 rounded-2xl border border-cyan-100 text-center">
<p id="ifp-q-1" class="text-base font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-sky-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-sky-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🚓 Kelompok 2</span>
<span id="ifp-score-2" class="bg-sky-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-sky-50 p-4 rounded-2xl border border-sky-100 text-center">
<p id="ifp-q-2" class="text-base font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-blue-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🚙 Kelompok 3</span>
<span id="ifp-score-3" class="bg-blue-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-blue-50 p-4 rounded-2xl border border-blue-100 text-center">
<p id="ifp-q-3" class="text-base font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2.5 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-8xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-cyan-400 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-cyan-600 hover:bg-cyan-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#0e7490] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 10: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Mandiri & Pelaporan ke Guru</h2>
<p class="text-base font-bold text-slate-500 mb-6">Uji kemampuan individumu dengan mengerjakan 5 soal pilihan ganda berikut.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-cyan-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-cyan-800 bg-cyan-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-cyan-900 mb-2">Latihan Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Mandiri: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-cyan-600 to-blue-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-cyan-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-cyan-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai hasil latihanmu ke guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-cyan-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-cyan-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-cyan-600 to-blue-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 11: Refleksi Perasaan Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari bab Relasi dan Fungsi hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-5xl mb-2">😎</div>
<h3 class="font-black text-lg text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-5xl mb-2">🤔</div>
<h3 class="font-black text-lg text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-5xl mb-2">🤯</div>
<h3 class="font-black text-lg text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pesan atau bagian paling menarik hari ini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-cyan-50 border-2 border-cyan-200 focus:border-cyan-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-5 h-5"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-cyan-600 text-white font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-cyan-700 shadow-[0_4px_0px_#0891b2]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Simpan Registrasi Identitas
function simpanRegistrasi() {
let nama = document.getElementById('input-nama-reg').value.trim();
let kelas = document.getElementById('input-kelas-reg').value.trim();
if(!nama || !kelas) {
alert("Silakan isi nama dan kelas terlebih dahulu!");
return;
}
document.getElementById('input-nama').value = nama + " (" + kelas + ")";
nextSlide();
}
// Latihan Mandiri di Setiap Slide Materi
function cekLatihan(btn, isTrue, mId) {
let parent = btn.parentElement;
let btns = parent.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(mId + '-feedback');
fb.classList.remove('hidden');
if(isTrue) {
btn.className = "p-3 bg-green-500 text-white font-bold rounded-xl text-sm border-2 border-green-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Pemahamanmu luar biasa.";
} else {
btn.className = "p-3 bg-rose-500 text-white font-bold rounded-xl text-sm border-2 border-rose-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat. Coba tinjau kembali materinya.";
}
}
// ==========================================
// MULTI-USER KELOMPOK GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Relasi khusus yang memasangkan setiap domain dengan tepat satu kodomain dinamakan...", opts: ["Fungsi (Pemetaan)", "Range", "Kodomain", "Variabel"], ans: 0 },
{ q: "Manakah cara penyajian relasi yang menggunakan titik pada bidang Kartesius?", opts: ["Grafik", "Diagram Panah", "Tabel", "Himpunan Pasangan Berurutan"], ans: 0 },
{ q: "Grafik fungsi linear pada koordinat Kartesius selalu berbentuk...", opts: ["Garis Lurus", "Kurva Parabola", "Lingkaran", "Titik Acak"], ans: 0 },
{ q: "Fungsi kuadrat seperti \(f(x) = x^2\) termasuk jenis fungsi...", opts: ["Non-Linear", "Linear", "Konstan", "Identitas"], ans: 0 },
{ q: "Jika \(f(x) = 3x - 1\), maka nilai dari \(f(3)\) adalah...", opts: ["8", "6", "9", "7"], ans: 0 },
{ q: "Himpunan daerah asal disebut juga dengan istilah...", opts: ["Domain", "Kodomain", "Range", "Variabel"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu Akhir
const evaluasiBank = [
{
q: "Relasi khusus yang memasangkan setiap anggota himpunan asal (domain) dengan tepat satu anggota kawan (kodomain) dinamakan...",
options: ["Fungsi", "Range", "Kodomain", "Konstanta"],
a: 0,
exp: "Definisi mutlak dari sebuah fungsi atau pemetaan adalah relasi yang memasangkan domain dengan tepat satu kodomain."
},
{
q: "Jika diketahui fungsi \(f(x) = 4x - 3\), maka nilai dari \(f(2)\) adalah...",
options: ["3", "5", "8", "6"],
a: 1,
exp: "Substitusikan \(x = 2\) ke rumus: \(f(2) = 4(2) - 3 = 8 - 3 = 5\)."
},
{
q: "Manakah di antara bentuk berikut yang menyatakan grafik fungsi linear?",
options: ["Garis lurus", "Kurva melengkung / parabola", "Lingkaran penuh", "Titik-titik acak"],
a: 0,
exp: "Grafik fungsi linear berderajat satu selalu digambarkan berupa garis lurus."
},
{
q: "Diketahui himpunan pasangan berurutan \(\{(1, 2), (2, 4), (3, 6)\}\). Rumus fungsi yang tepat untuk pasangan tersebut adalah...",
options: ["\(f(x) = x + 1\)", "\(f(x) = 2x\)", "\(f(x) = x^2\)", "\(f(x) = 3x - 1\)"],
a: 1,
exp: "Setiap nilai \(x\) dikalikan dengan 2 menghasilkan nilai \(y\) (\(1\times2=2, 2\times2=4, 3\times2=6\)). Jadi rumusnya \(f(x) = 2x\)."
},
{
q: "Manakah fungsi di bawah ini yang tergolong sebagai fungsi non-linear?",
options: ["\(f(x) = 2x + 5\)", "\(f(x) = -3x + 1\)", "\(f(x) = x^2 - 3x + 2\)", "\(f(x) = 7x\)"],
a: 2,
exp: "Persamaan \(f(x) = x^2 - 3x + 2\) memiliki variabel berpangkat 2 (kuadrat), sehingga termasuk fungsi non-linear."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-cyan-50 hover:border-cyan-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan identitas nama terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Relasi dan Fungsi: " + refleksi,
strategi: "Evaluasi: Relasi dan Fungsi Kelas 8"
}, "*");
} else {
alert(`Laporan Misi Berhasil Terkirim ke Guru! 🎉\n\nIdentitas: ${nama}\nSkor Mandiri: ${evalSkor}\nTingkat Pemahaman: ${baterai}%`);
}
}
</script>
</body>
</html>