Kelas 7
Games
Program Kerja Sekolah
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PID Rencana Kerja Matching Board - Maluku Tengah</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* Sentuhan Kearifan Lokal (Pola Gelombang Laut Faint/Tipis) */
body {
font-family: 'Work Sans', sans-serif;
background-color: #f0f7f4;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.347-4.333 2.92-8.333 7.72-8.333 4.8 0 7.373 4 7.72 8.333H40.23c-.347-4.333-2.92-8.333-7.72-8.333-4.8 0-7.373 4-7.72 8.333h-3.606zM0 20c.347-4.333 2.92-8.333 7.72-8.333 4.8 0 7.373 4 7.72 8.333H11.83c-.347-4.333-2.92-8.333-7.72-8.333-4.8 0-7.373 4-7.72 8.333H0z' fill='%230f766e' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}
/* Desain Sticky Notes Realistis */
.task-card {
position: relative;
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
cursor: grab;
border-bottom-right-radius: 12px 2px;
}
/* Elemen Selotip Transparan */
.task-card::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 35px;
height: 14px;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
z-index: 10;
border-radius: 2px;
backdrop-filter: blur(2px);
}
.task-bank-container .task-card:hover {
transform: translateY(-3px) rotate(0deg) !important;
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
z-index: 20;
}
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.6; transform: scale(0.95) rotate(0deg) !important; z-index: 50; }
.slot-box { transition: all 0.3s ease; }
.slot-box.drag-over {
background-color: #f8fafc;
border-color: #0f766e;
transform: scale(1.02);
box-shadow: inset 0 0 15px rgba(15, 118, 110, 0.1);
}
.slot-box .task-card {
transform: none !important;
margin-top: 8px;
padding: 8px 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
font-size: 0.8em;
cursor: pointer;
width: 100%;
}
.slot-box .task-card p { font-size: 0.75rem; line-height: 1.25; }
.task-bank-container::-webkit-scrollbar { width: 8px; }
.task-bank-container::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 8px; }
.task-bank-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; }
.task-bank-container::-webkit-scrollbar-thumb:hover { background: #64748b; }
.correct-ans { border: 2px solid #22c55e !important; background-color: #dcfce7 !important; }
.wrong-ans { border: 2px solid #ef4444 !important; background-color: #fee2e2 !important; }
</style>
</head>
<body class="min-h-screen p-4 md:p-6 text-slate-800">
<main class="max-w-[1400px] mx-auto bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl p-6 md:p-8 border border-teal-100">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 leading-tight">
PID: RENCANA KERJA & TANGGUNG JAWAB UNIT
</h1>
<h2 class="text-lg md:text-xl font-semibold mt-1 text-teal-700">
SMP NEGERI 72 MALUKU TENGAH
</h2>
<div class="w-48 h-1.5 bg-gradient-to-r from-blue-700 via-teal-500 to-green-400 mx-auto mt-4 rounded-full"></div>
</header>
<!-- Main Layout -->
<div class="flex flex-col lg:flex-row gap-6 xl:gap-8">
<!-- SISI KIRI: DEPARTEMEN -->
<section class="w-full lg:w-3/5 bg-slate-50/80 p-5 rounded-2xl border border-slate-200 shadow-inner h-[800px] overflow-y-auto task-bank-container relative">
<div class="flex justify-between items-center mb-4 sticky top-0 bg-slate-50/95 backdrop-blur-md z-30 py-3 border-b border-slate-200 rounded-b-lg">
<h3 class="text-lg font-bold text-slate-700 flex items-center gap-2">
<span>šÆ</span> DEPARTEMEN & UNIT KERJA
</h3>
<span class="text-xs bg-teal-100 text-teal-800 px-3 py-1 rounded-full font-bold">3 Tugas per Departemen</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 pb-4 mt-2">
<div id="kurikulum" data-name="Kurikulum" class="slot-box drop-zone rounded-xl border-2 border-dashed border-blue-400 bg-blue-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š</span>
<p class="font-extrabold text-sm text-blue-900 uppercase tracking-wider">Kurikulum</p>
</div>
<div id="kesiswaan" data-name="Kesiswaan" class="slot-box drop-zone rounded-xl border-2 border-dashed border-teal-400 bg-teal-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š„</span>
<p class="font-extrabold text-sm text-teal-900 uppercase tracking-wider">Kesiswaan</p>
</div>
<div id="sarpras" data-name="Sarpras" class="slot-box drop-zone rounded-xl border-2 border-dashed border-indigo-400 bg-indigo-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">šļø</span>
<p class="font-extrabold text-sm text-indigo-900 uppercase tracking-wider">Sarpras</p>
</div>
<div id="humas" data-name="Humas" class="slot-box drop-zone rounded-xl border-2 border-dashed border-cyan-400 bg-cyan-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š¢</span>
<p class="font-extrabold text-sm text-cyan-900 uppercase tracking-wider">Humas</p>
</div>
<div id="tata-usaha" data-name="Tata Usaha" class="slot-box drop-zone rounded-xl border-2 border-dashed border-slate-400 bg-slate-100/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">šļø</span>
<p class="font-extrabold text-sm text-slate-800 uppercase tracking-wider">Tata Usaha</p>
</div>
<div id="uks" data-name="UKS" class="slot-box drop-zone rounded-xl border-2 border-dashed border-green-400 bg-green-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š„</span>
<p class="font-extrabold text-sm text-green-900 uppercase tracking-wider">UKS</p>
</div>
<div id="lab-ipa" data-name="Lab IPA" class="slot-box drop-zone rounded-xl border-2 border-dashed border-purple-400 bg-purple-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š¬</span>
<p class="font-extrabold text-sm text-purple-900 uppercase tracking-wider">Lab IPA</p>
</div>
<div id="piket" data-name="Piket" class="slot-box drop-zone rounded-xl border-2 border-dashed border-orange-400 bg-orange-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š</span>
<p class="font-extrabold text-sm text-orange-900 uppercase tracking-wider">Piket</p>
</div>
<div id="wali-kelas" data-name="Wali Kelas" class="slot-box drop-zone rounded-xl border-2 border-dashed border-rose-400 bg-rose-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š§āš«</span>
<p class="font-extrabold text-sm text-rose-900 uppercase tracking-wider">Wali Kelas</p>
</div>
<div id="guru-wali" data-name="Guru Wali (BK)" class="slot-box drop-zone rounded-xl border-2 border-dashed border-amber-400 bg-amber-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š¤</span>
<p class="font-extrabold text-sm text-amber-900 uppercase tracking-wider">Guru Wali</p>
</div>
</div>
</section>
<!-- SISI KANAN: BANK TUGAS (30 Tugas) -->
<section class="w-full lg:w-2/5 flex flex-col">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-slate-700 flex items-center gap-2">
<span>šļø</span> TUGAS & SOLUSI
</h3>
<div class="flex gap-2">
<button id="checkBtn" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-bold transition shadow-md flex items-center gap-1">
āļø Periksa
</button>
<button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-bold transition shadow-md">
š
</button>
</div>
</div>
<div id="bankTugas" class="task-bank-container drop-zone bg-[url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Ccircle cx=\'2\' cy=\'2\' r=\'1\' fill=\'%23cbd5e1\' fill-opacity=\'0.5\'/%3E%3C/svg%3E')] bg-slate-50 rounded-2xl p-5 h-[750px] overflow-y-auto border-2 border-slate-200">
<div class="grid grid-cols-2 gap-4 pt-2" id="bankGrid">
<!-- KURIKULUM (1-3) -->
<div class="task-card bg-amber-100 rounded-lg p-4 shadow border border-amber-200" draggable="true" id="task-1" data-target="kurikulum" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan In-House Training (IHT) penyusunan modul ajar & supervisi klinis.</p>
</div>
<div class="task-card bg-blue-100 rounded-lg p-4 shadow border border-blue-200" draggable="true" id="task-2" data-target="kurikulum" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Memanfaatkan aplikasi penyusun jadwal otomatis & validasi jadwal KBM.</p>
</div>
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-3" data-target="kurikulum" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melaksanakan klinik akademik intensif & analisis butir soal secara berkala.</p>
</div>
<!-- KESISWAAN (4-6) -->
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-4" data-target="kesiswaan" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Mengaktifkan sistem buku kendali poin pelanggaran & kordinasi rutin dengan BK.</p>
</div>
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-5" data-target="kesiswaan" style="transform: rotate(1.5deg);">
<p class="text-xs font-semibold text-slate-800">Membentuk klub pembinaan prestasi olahraga/seni sejak awal semester.</p>
</div>
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-6" data-target="kesiswaan" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengoptimalkan kegiatan pembiasaan harian/mingguan (upacara, literasi, doa).</p>
</div>
<!-- SARPRAS (7-9) -->
<div class="task-card bg-indigo-100 rounded-lg p-4 shadow border border-indigo-200" draggable="true" id="task-7" data-target="sarpras" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan digitalisasi buku inventaris & pelabelan ulang aset sekolah.</p>
</div>
<div class="task-card bg-red-100 rounded-lg p-4 shadow border border-red-200" draggable="true" id="task-8" data-target="sarpras" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Menyediakan buku kendali/laporan kerusakan sarpras harian di ruang piket.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-9" data-target="sarpras" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Menyusun jadwal piket pemeliharaan taman & toilet untuk tenaga kebersihan.</p>
</div>
<!-- HUMAS (10-12) -->
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-10" data-target="humas" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengelola media sosial sekolah & mendokumentasikan setiap prestasi siswa/guru.</p>
</div>
<div class="task-card bg-lime-100 rounded-lg p-4 shadow border border-lime-200" draggable="true" id="task-11" data-target="humas" style="transform: rotate(1.8deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan pertemuan paguyuban orang tua/wali murid secara berkala.</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-12" data-target="humas" style="transform: rotate(-2.5deg);">
<p class="text-xs font-semibold text-slate-800">Menjalin kerja sama (MoU) dengan puskesmas, polsek, dan tokoh masyarakat.</p>
</div>
<!-- TATA USAHA (13-15) -->
<div class="task-card bg-slate-200 rounded-lg p-4 shadow border border-slate-300" draggable="true" id="task-13" data-target="tata-usaha" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Mengelola administrasi persuratan masuk/keluar dan kearsipan sekolah.</p>
</div>
<div class="task-card bg-gray-200 rounded-lg p-4 shadow border border-gray-300" draggable="true" id="task-14" data-target="tata-usaha" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Memproses pembaruan data pokok pendidikan (Dapodik) siswa dan guru.</p>
</div>
<div class="task-card bg-stone-200 rounded-lg p-4 shadow border border-stone-300" draggable="true" id="task-15" data-target="tata-usaha" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Melayani legalisir ijazah, mutasi siswa, & pembuatan surat keterangan aktif.</p>
</div>
<!-- UKS (16-18) -->
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-16" data-target="uks" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melengkapi kotak P3K secara berkala & menyusun SOP penanganan siswa sakit.</p>
</div>
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-17" data-target="uks" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Melatih ulang dan menjadwalkan piket harian Kader Kesehatan Remaja (PMR).</p>
</div>
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-18" data-target="uks" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan kampanye kesehatan rutin (cuci tangan, gizi, bahaya merokok).</p>
</div>
<!-- LAB IPA (19-21) -->
<div class="task-card bg-green-100 rounded-lg p-4 shadow border border-green-200" draggable="true" id="task-19" data-target="lab-ipa" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan stock opname (pendataan ulang) bahan kimia sesuai standar keamanan.</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-20" data-target="lab-ipa" style="transform: rotate(1.2deg);">
<p class="text-xs font-semibold text-slate-800">Menyusun jadwal penggunaan lab terpadu & form peminjaman alat yang praktis.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-21" data-target="lab-ipa" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengintegrasikan jadwal praktikum minimal satu kali dalam setiap bab mapel IPA.</p>
</div>
<!-- PIKET (22-24) -->
<div class="task-card bg-indigo-100 rounded-lg p-4 shadow border border-indigo-200" draggable="true" id="task-22" data-target="piket" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengetatkan patroli keliling kelas & memberlakukan kartu izin keluar saat KBM.</p>
</div>
<div class="task-card bg-amber-100 rounded-lg p-4 shadow border border-amber-200" draggable="true" id="task-23" data-target="piket" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Menyiapkan bank tugas/lembar kerja mandiri cadangan untuk kelas jika guru absen.</p>
</div>
<div class="task-card bg-blue-100 rounded-lg p-4 shadow border border-blue-200" draggable="true" id="task-24" data-target="piket" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Membuat buku laporan harian piket yang terintegrasi ke Kesiswaan & Kepsek.</p>
</div>
<!-- WALI KELAS (25-27) -->
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-25" data-target="wali-kelas" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan sesi bimbingan kelompok/individu secara rutin tiap minggu di kelas.</p>
</div>
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-26" data-target="wali-kelas" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Menggunakan format administrasi digital terpusat (leger, absen, denah duduk).</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-27" data-target="wali-kelas" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan home visit (kunjungan rumah) bagi siswa yang bermasalah/mangkir.</p>
</div>
<!-- GURU WALI (28-30) -->
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-28" data-target="guru-wali" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Membuka layanan "Pojok Curhat" yang ramah anak & menjaga kerahasiaan siswa.</p>
</div>
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-29" data-target="guru-wali" style="transform: rotate(1.5deg);">
<p class="text-xs font-semibold text-slate-800">Membuat lembar penanganan kasus bersama (case conference) dengan orang tua.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-30" data-target="guru-wali" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Memberikan bimbingan klasikal tentang manajemen stres, motivasi, & karier.</p>
</div>
</div>
</div>
</section>
</div>
<footer class="mt-8 text-center border-t border-teal-100 pt-6">
<p class="text-sm text-slate-500 font-medium">Panitia Raker SMP Negeri 72 Maluku Tengah © 2026 - Papan Interaktif Dinamis</p>
</footer>
</main>
<!-- SCRIPT DRAG & DROP + AUDIO -->
<script>
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playAudioFeedback(type) {
if (audioCtx.state === 'suspended') audioCtx.resume();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
if (type === 'drop') {
osc.type = 'sine';
osc.frequency.setValueAtTime(450, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(600, audioCtx.currentTime + 0.1);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
osc.start(); osc.stop(audioCtx.currentTime + 0.1);
} else if (type === 'success') {
osc.type = 'triangle';
osc.frequency.setValueAtTime(523.25, audioCtx.currentTime);
osc.frequency.setValueAtTime(659.25, audioCtx.currentTime + 0.1);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);
osc.start(); osc.stop(audioCtx.currentTime + 0.3);
} else if (type === 'error') {
osc.type = 'sawtooth';
osc.frequency.setValueAtTime(150, audioCtx.currentTime);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);
osc.start(); osc.stop(audioCtx.currentTime + 0.3);
}
}
document.addEventListener('DOMContentLoaded', () => {
const taskCards = document.querySelectorAll('.task-card');
const dropZones = document.querySelectorAll('.drop-zone');
const bankGrid = document.getElementById('bankGrid');
const resetBtn = document.getElementById('resetBtn');
const checkBtn = document.getElementById('checkBtn');
document.body.addEventListener('click', () => {
if (audioCtx.state === 'suspended') audioCtx.resume();
}, { once: true });
taskCards.forEach(card => {
card.addEventListener('dragstart', dragStart);
card.addEventListener('dragend', dragEnd);
});
dropZones.forEach(zone => {
zone.addEventListener('dragover', dragOver);
zone.addEventListener('dragenter', dragEnter);
zone.addEventListener('dragleave', dragLeave);
zone.addEventListener('drop', dragDrop);
});
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
setTimeout(() => e.target.classList.add('dragging'), 0);
removeValidationStyling(e.target);
}
function dragEnd(e) {
e.target.classList.remove('dragging');
dropZones.forEach(zone => zone.classList.remove('drag-over'));
}
function dragOver(e) { e.preventDefault(); }
function dragEnter(e) {
e.preventDefault();
let zone = e.target.closest('.drop-zone');
if (zone && zone.id !== 'bankTugas') zone.classList.add('drag-over');
}
function dragLeave(e) {
let zone = e.target.closest('.drop-zone');
if (zone) zone.classList.remove('drag-over');
}
function dragDrop(e) {
e.preventDefault();
let zone = e.target.closest('.drop-zone');
if (zone) {
zone.classList.remove('drag-over');
const id = e.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(id);
if (draggableElement) {
playAudioFeedback('drop');
if (zone.id === 'bankTugas') {
bankGrid.appendChild(draggableElement);
let randomRotate = (Math.random() * 5 - 2.5).toFixed(1);
draggableElement.style.transform = `rotate(${randomRotate}deg)`;
} else {
zone.appendChild(draggableElement);
}
}
}
}
function removeValidationStyling(card) {
card.classList.remove('correct-ans', 'wrong-ans');
const feedbackMsg = card.querySelector('.feedback-msg');
if (feedbackMsg) feedbackMsg.remove();
}
resetBtn.addEventListener('click', () => {
if(!confirm("Kembalikan semua tugas ke Bank Tugas?")) return;
taskCards.forEach(card => {
removeValidationStyling(card);
bankGrid.appendChild(card);
let randomRotate = (Math.random() * 5 - 2.5).toFixed(1);
card.style.transform = `rotate(${randomRotate}deg)`;
});
});
checkBtn.addEventListener('click', () => {
let correctCount = 0;
let wrongCount = 0;
let unplacedCount = 0;
taskCards.forEach(card => {
removeValidationStyling(card);
const targetId = card.getAttribute('data-target');
const currentParent = card.parentNode;
const targetName = document.getElementById(targetId).getAttribute('data-name');
if (currentParent.id === 'bankGrid' || currentParent.id === 'bankTugas') {
unplacedCount++;
} else if (currentParent.id === targetId) {
correctCount++;
card.classList.add('correct-ans');
} else {
wrongCount++;
card.classList.add('wrong-ans');
const msg = document.createElement('div');
msg.className = 'feedback-msg text-[10px] font-bold text-red-700 mt-2 p-1 bg-white bg-opacity-90 rounded border border-red-300 text-center leading-tight';
msg.innerHTML = `ā Seharusnya:<br>${targetName}`;
card.appendChild(msg);
}
});
if (wrongCount > 0) {
playAudioFeedback('error');
} else if (correctCount > 0 && wrongCount === 0) {
playAudioFeedback('success');
}
alert(`š HASIL EVALUASI\n\nā
Benar: ${correctCount}\nā Salah: ${wrongCount}\nā ļø Belum Dipilih: ${unplacedCount}`);
});
});
</script>
</body>
</html>
.png)
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 7 : TP 11 & Suhu Tubuh: Perpindahan Kalor secara Konduksi, Konveksi, Radiasi serta Termoregulasi Hewan Ektoterm & Endoterm
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 7 - Perpindahan Kalor & Termoregulasi</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, #064e3b 0%, #1e1b4b 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, #c084fc); 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, #c084fc); -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, #c084fc); 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, #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 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">š Pertemuan 7</span>
<h1>PERPINDAHAN KALOR & TERMOREGULASI</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 11 & Suhu Tubuh):</b></p>
<p>Siswa mampu menganalisis 3 cara perpindahan kalor (konduksi, konveksi, radiasi) serta mekanisme pengaturan suhu tubuh (termoregulasi) pada manusia dan hewan (Ektoterm vs Endoterm).</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 Api Unggun & Kadal Berjemur</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">š„ šļø</span>
<p><b>Duduk Dekat Api Unggun</b></p>
<button class="interactive-btn" onclick="alert('Tubuh terasa hangat meski tidak menyentuh api! Terjadi perpindahan kalor secara RADIASI (pancaran tanpa perantara).')">Amati Radiasi</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">š¦ šŖØ</span>
<p><b>Kadal Berbaring di Batu Panas</b></p>
<button class="interactive-btn" onclick="alert('Kadal (Ektoterm) menyerap kalor dari batu secara KONDUKSI langsung untuk menaikkan suhu tubuhnya!')">Amati Ektoterm</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">š¤ Pertanyaan Pemantik</span>
<h2>Mengapa Menggigil saat Kedinginan?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa saat kamu berada di ruangan AC yang sangat dingin, tubuhmu tiba-tiba menggigil secara otomatis?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">š„¶ ā š§ ā šŖ (Menggigil)</p>
<p>Bagaimana perintah hipotalamus otak menghasilkan panas melalui gerak otot rangka?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">š Tinjauan Kontekstual</span>
<h2>Aplikasi Perpindahan Kalor & Adaptasi Hewan</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Peralatan Masak:</b> Gagang wajan terbuat dari plastik/kayu (isolator) agar tidak panas saat dipegang (mencegah konduksi).</li>
<li style="margin-bottom: 10px;"><b>Ventilasi Rumah:</b> Cerobong dan angin laut/darat terjadi akibat aliran udara panas (konveksi).</li>
<li><b>Hewan Kutub:</b> Beruang kutub (Endoterm) memiliki lapisan lemak tebal untuk menjaga metabolisme panas internal.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 11 -->
<div class="slide">
<span class="slide-tag">š Materi Padat TP 11</span>
<h2>8. 3 Cara Perpindahan Kalor</h2>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--primary);">1. Konduksi</h4>
<p style="font-size: 0.88rem;">Perpindahan kalor lewat hantaran <b>tanpa disertai perpindahan partikel</b> zat (terjadi pada zat padat/konduktor). Contoh: Sendok besi panas di teh manis.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--success);">2. Konveksi</h4>
<p style="font-size: 0.88rem;">Perpindahan kalor lewat aliran di mana <b>partikel zat ikut berpindah</b> (pada cair/gas). Contoh: Memasak air mendidih, angin laut.</p>
</div>
</div>
<div class="glass-card" style="margin-top: 10px;">
<h4 style="color: var(--yellow);">3. Radiasi</h4>
<p style="font-size: 0.88rem;">Perpindahan kalor secara pancaran <b>tanpa melalui zat perantara</b> (medium). Contoh: Sinar matahari sampai ke bumi, panas api unggun.</p>
</div>
</div>
<!-- SLIDE 6: MATERI PADAT TERMOREGULASI -->
<div class="slide">
<span class="slide-tag">š Materi Padat Termoregulasi</span>
<h2>9. Pengaturan Suhu Tubuh (Termoregulasi)</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p>Suhu tubuh normal manusia: $36{,}5^{\circ}\text{C} - 37{,}5^{\circ}\text{C}$.</p>
<p style="font-size: 0.9rem; margin-top: 4px;">ā¢ <b>Kondisi Panas:</b> Pembuluh darah melebar, berkeringat, pakai baju tipis.<br>ā¢ <b>Kondisi Dingin:</b> Pembuluh darah menyempit, otot menggigil untuk produksi panas.</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--accent);">š¦ Hewan Ektoterm</h4>
<p style="font-size: 0.88rem;">Berdarah dingin, mengandalkan panas **eksternal/lingkungan** (contoh: reptil berjemur di batu, berendam lumpur).</p>
</div>
<div class="glass-card">
<h4 style="color: var(--purple);">š» Hewan Endoterm</h4>
<p style="font-size: 0.88rem;">Berdarah panas, menghasilkan panas dari **metabolisme tubuh** (contoh: mamalia, burung). Melakukan *torpor* saat cuaca dingin ekstrem.</p>
</div>
</div>
</div>
<!-- SLIDE 7: KUIS TP 11 & TERMOREGULASI -->
<div class="slide">
<span class="slide-tag">š® Kuis TP 11</span>
<h2>Uji Perpindahan Kalor & Suhu Tubuh (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 8: 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 (Konduksi)</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 (Konveksi)</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 (Radiasi)</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 (Termoregulasi)</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 9: 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 10: 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 mengenai perpindahan kalor & termoregulasi:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Selamat kamu menyelesaikan seluruh Bab 3! šš')">š Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Terus tingkatkan pemahaman IPA ya! š')">š Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan risau, ulangi membaca bagian konveksi dan ektoterm! šŖ')">š Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 11: 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 menuntaskan Bab 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 11</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. Perpindahan kalor yang terjadi tanpa disertai perpindahan partikel zat perantaranya dinamakan...", opts: ["Konduksi", "Konveksi", "Radiasi"], ans: 0 },
{ q: "2. Terjadinya angin laut dan angin darat merupakan contoh perpindahan kalor secara...", opts: ["Konveksi", "Konduksi", "Radiasi"], ans: 0 },
{ q: "3. Panas matahari sampai ke permukaan bumi tanpa zat perantara melalui proses...", opts: ["Radiasi", "Konduksi", "Evaporasi"], ans: 0 },
{ q: "4. Hewan ektoterm (berdarah dingin) mengatur suhu tubuhnya dengan cara...", opts: ["Mengandalkan sumber panas eksternal/lingkungan", "Meningkatkan metabolisme internal", "Menggigil terus menerus"], ans: 0 },
{ q: "5. Saat suhu lingkungan sangat dingin, otot manusia berkontraksi menggigil dengan tujuan...", opts: ["Meningkatkan suhu tubuh melalui pergerakan otot", "Mengeluarkan keringat", "Menyempitkan napas"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "š Tuntas! Kuis TP 11 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: "Konduksi terjadi pada zat...", opts: ["Padat", "Gas"], ans: 0 },
{ q: "Ujung sendok dipanaskan terasa panas...", opts: ["Konduksi", "Radiasi"], ans: 0 },
{ q: "Partikel zat konduksi...", opts: ["Tidak ikut berpindah", "Ikut mengalir"], ans: 0 },
{ q: "Bahan mudah hantar panas...", opts: ["Konduktor", "Isolator"], ans: 0 },
{ q: "Gagang ebonit wajan adalah...", opts: ["Isolator", "Konduktor"], ans: 0 }
],
t2: [
{ q: "Konveksi diikuti perpindahan...", opts: ["Partikel zat", "Cahaya"], ans: 0 },
{ q: "Memasak air mendidih contoh...", opts: ["Konveksi", "Konduksi"], ans: 0 },
{ q: "Angin darat dan laut adalah...", opts: ["Konveksi udara", "Radiasi"], ans: 0 },
{ q: "Cerobong asap pabrik memanfaatkan...", opts: ["Konveksi", "Konduksi"], ans: 0 },
{ q: "Minyak goreng berputar saat panas...", opts: ["Konveksi", "Radiasi"], ans: 0 }
],
t3: [
{ q: "Radiasi perpindahan tanpa...", opts: ["Perantara/medium", "Suhu"], ans: 0 },
{ q: "Panas api unggun sampai lewat...", opts: ["Radiasi", "Konduksi"], ans: 0 },
{ q: "Panas matahari sampai ke bumi...", opts: ["Radiasi", "Konveksi"], ans: 0 },
{ q: "Baju hitam menyerap radiasi...", opts: ["Lebih banyak", "Lebih sedikit"], ans: 0 },
{ q: "Lampu inkubator telur contoh...", opts: ["Radiasi", "Konduksi"], ans: 0 }
],
t4: [
{ q: "Reptil/Kadal tergolong hewan...", opts: ["Ektoterm", "Endoterm"], ans: 0 },
{ q: "Mamalia/Manusia tergolong...", opts: ["Endoterm", "Ektoterm"], ans: 0 },
{ q: "Kadal berjemur batu panas secara...", opts: ["Konduksi", "Konveksi"], ans: 0 },
{ q: "Torpor adalah penurunan...", opts: ["Metabolisme saat dingin", "Massa"], ans: 0 },
{ q: "Keringat keluar saat kondisi...", opts: ["Panas", "Sangat dingin"], 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. Saat memasak air di panci, bagian air bawah bergerak ke atas dan air dingin di atas turun. Ini terjadi karena perpindahan...", opts: ["Konveksi", "Konduksi", "Radiasi"], ans: 0 },
{ q: "2. Hewan endoterm (berdarah panas) mempertahankan suhu tubuhnya terutama melalui...", opts: ["Metabolisme internal tubuh", "Berjemur di batu panas", "Masuk ke dalam liang tanah"], ans: 0 },
{ q: "3. Tubuh manusia mengeluarkan keringat saat cuaca panas. Mekanisme ini bertujuan untuk...", opts: ["Membuang panas tubuh lewat evaporasi", "Menjaga agar kulit tetap basah", "Meningkatkan massa air"], ans: 0 },
{ q: "4. Dinding termos dilapisi bahan mengkilap tembaga/perak bertujuan untuk mencegah perpindahan kalor secara...", opts: ["Radiasi", "Konduksi", "Konveksi"], ans: 0 },
{ q: "5. Ujung besi yang dibakar di atas api lama-kelamaan membuat tangan yang memegang ujung lainnya terasa panas secara...", opts: ["Konduksi", "Konveksi", "Radiasi"], 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 7 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 6 : Pengaruh Kalor pada Suhu & Wujud Zat, Faktor Penguapan, Perhitungan
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 6 - Kalor & Perhitungannya</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, #f43f5e 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, #f43f5e, #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, #fbbf24, #f43f5e, #38bdf8); -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, #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, #f43f5e, #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 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">š Pertemuan 6 (Modul Padat TP 6 - 10)</span>
<h1>KALOR & PERUBAHAN ZAT</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: 15px auto; width: 85%;">
<p>šÆ <b>Tujuan Pembelajaran Padat (TP 6, 7, 8, 9, 10):</b></p>
<p>1. Menyelidiki pengaruh kalor terhadap suhu & wujud zat.<br>2. Menganalisis 4 faktor percepatan penguapan.<br>3. Menghitung besar kalor ($Q = m \cdot c \cdot \Delta t$ dan $Q = m \cdot L$).</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 Memasak Air & Menjemur Baju</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">š« āØļø</span>
<p><b>Memasak Air di Kompor</b></p>
<button class="interactive-btn" onclick="alert('Semakin lama dipanaskan, suhu air semakin tinggi hingga 100 Ā°C, lalu berubah wujud menjadi uap air!')">Amati Pemberian Kalor</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">š āļø</span>
<p><b>Menjemur Pakaian Basah</b></p>
<button class="interactive-btn" onclick="alert('Baju dijereng luas di bawah sinar matahari dan angin kencang akan sangat cepat kering karena penguapan dipercepat!')">Amati Penguapan</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">š¤ Pertanyaan Pemantik</span>
<h2>Mengapa Suhu Es batu Tidak Naik saat Mencair?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Saat es batu dipanaskan dan mulai mencair menjadi air pada suhu $0^{\circ}\text{C}$, mengapa termometer menunjukkan angka yang TETAP $0^{\circ}\text{C}$ sampai semua es habis mencair?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">š§ ā š§ ($Q = m \cdot L$)</p>
<p>Ke mana perginya energi kalor yang terus diberikan saat perubahan wujud terjadi?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">š Tinjauan Kontekstual</span>
<h2>Kalor dalam Kehidupan & Industri</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Keringat Manusia:</b> Tubuh mengeluarkan keringat agar saat menguap dapat menyerap kalor berlebih dari kulit.</li>
<li style="margin-bottom: 10px;"><b>Mesin Pendingin Es:</b> Menggunakan perhitungan $Q = m \cdot L$ untuk membekukan air menjadi balok es.</li>
<li><b>Pengeringan Garam Laut:</b> Petani garam memperluas permukaan tambak air laut agar penguapan berlangsung cepat.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 6 & 7 -->
<div class="slide">
<span class="slide-tag">š Materi Padat TP 6 & 7</span>
<h2>6. Kalor, Perubahan Wujud & Penguapan</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Kalor ($Q$):</b> Bentuk energi yang berpindah dari benda bersuhu lebih tinggi ke benda bersuhu lebih rendah (Satuan SI: Joule / $\text{J}$).</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--yellow);">š„ Perubahan Wujud Zat</h4>
<p style="font-size: 0.88rem;">ā¢ <b>Butuh Kalor:</b> Melebur (padat$\rightarrow$cair), Menguap (cair$\rightarrow$gas), Menyublim (padat$\rightarrow$gas).<br>ā¢ <b>Lepas Kalor:</b> Membeku (cair$\rightarrow$padat), Mengembun (gas$\rightarrow$cair), Mengkristal (gas$\rightarrow$padat).</p>
</div>
<div class="glass-card">
<h4 style="color: var(--primary);">ā” 4 Cara Mempercepat Penguapan</h4>
<p style="font-size: 0.88rem;">1. Memanaskan zat cair.<br>2. Memperbesar luas permukaan.<br>3. Mengalirkan udara kering di atasnya.<br>4. Mengurangi tekanan uap di permukaan.</p>
</div>
</div>
</div>
<!-- SLIDE 6: MATERI PADAT TP 8, 9, 10 -->
<div class="slide">
<span class="slide-tag">š Materi Padat TP 8, 9, 10</span>
<h2>7. Perhitungan Rumus Kalor ($Q$)</h2>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--success);">1. Perubahan Suhu ($Q = m \cdot c \cdot \Delta t$)</h4>
<p style="font-size: 0.9rem;">$Q = \text{kalor } (\text{J})$, $m = \text{massa } (\text{kg})$, $c = \text{kalor jenis } (\text{J/kg}\cdot^{\circ}\text{C})$, $\Delta t = t_2 - t_1 = \text{kenaikan suhu}$.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--accent);">2. Perubahan Wujud ($Q = m \cdot L$)</h4>
<p style="font-size: 0.9rem;">Saat melebur/mendidih, suhu **tetap**. $L = \text{kalor lebur/lebur laten } (\text{J/kg})$, $U = \text{kalor uap}$.</p>
</div>
</div>
<div class="glass-card" style="margin-top: 10px; text-align: center;">
<p style="color: var(--yellow); font-weight: bold;">Grafik Kalor: Garam/Es Mendidih</p>
<p style="font-size: 0.9rem;">Garis miring = $Q = m \cdot c \cdot \Delta t$ (Suhu naik) | Garis mendatar = $Q = m \cdot L$ (Wujud berubah, suhu tetap).</p>
</div>
</div>
<!-- SLIDE 7: KUIS TP 6-10 -->
<div class="slide">
<span class="slide-tag">š® Kuis Padat TP 6-10</span>
<h2>Uji Pemahaman Kalor (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 8: 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 (Wujud Kalor)</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 (Faktor Penguapan)</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 (Rumus $Q=m c \Delta t$)</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 (Kalor Laten)</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 9: 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 10: 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 tentang perhitungan kalor:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Materi hitungan kalor dikuasai dengan baik! šš')">š Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Tingkatkan latihan rumus $Q=m.c.\\Delta t$ ya! š')">š Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Mari diskusikan grafik kalor bersama guru! šŖ')">š Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 11: 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 7! š')">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 11</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. Peristiwa perubahan wujud zat dari cair menjadi gas yang membutuhkan kalor dinamakan...", opts: ["Menguap", "Membeku", "Mengembun"], ans: 0 },
{ q: "2. Cara yang TEPAT untuk mempercepat penguapan air pakaian basah adalah...", opts: ["Memperluas permukaan pakaian (dijereng)", "Dilipat rapat", "Ditaruh di tempat tertutup"], ans: 0 },
{ q: "3. Banyaknya kalor yang dibutuhkan untuk menaikkan suhu $2\\text{ kg}$ air sebesar $10^{\\circ}\\text{C}$ ($c = 4200\\text{ J/kg}^{\\circ}\\text{C}$) adalah...", opts: ["84.000 Joule", "42.000 Joule", "8.400 Joule"], ans: 0 },
{ q: "4. Rumus yang digunakan untuk menghitung kalor saat zat sedang melebur/mencair pada suhu tetap adalah...", opts: ["$Q = m \\cdot L$", "$Q = m \\cdot c \\cdot \\Delta t$", "$Q = m / L$"], ans: 0 },
{ q: "5. Pada grafik perubahan wujud es menjadi air, garis mendatar menunjukkan bahwa kalor digunakan untuk...", opts: ["Mengubah wujud zat (suhu tetap)", "Menaikkan suhu zat", "Mendinginkan zat"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "š Tuntas! Kuis Padat TP 6-10 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: "Melebur perubahan padat ke...", opts: ["Cair", "Gas"], ans: 0 },
{ q: "Membeku melepaskan...", opts: ["Kalor", "Es"], ans: 0 },
{ q: "Menguap perubahan cair ke...", opts: ["Gas", "Padat"], ans: 0 },
{ q: "Menyublim perubahan padat ke...", opts: ["Gas", "Cair"], ans: 0 },
{ q: "Mengembun melepaskan...", opts: ["Kalor", "Bensin"], ans: 0 }
],
t2: [
{ q: "Memperluas permukaan mempercepat...", opts: ["Penguapan", "Pembekuan"], ans: 0 },
{ q: "Pemanasan zat cair mempercepat...", opts: ["Menguap", "Mengkristal"], ans: 0 },
{ q: "Mengalirkan udara kering di atas air...", opts: ["Mempercepat penguapan", "Membuat beku"], ans: 0 },
{ q: "Mengurangi tekanan uap...", opts: ["Mempercepat uap", "Membuat mendidih lama"], ans: 0 },
{ q: "Keringat menguap menyerap...", opts: ["Kalor tubuh", "Air"], ans: 0 }
],
t3: [
{ q: "Rumus kalor kenaikan suhu...", opts: ["Q = m.c.\\Delta t", "Q = m.L"], ans: 0 },
{ q: "Simbol c artinya...", opts: ["Kalor jenis", "Panjang"], ans: 0 },
{ q: "Satuan SI kalor adalah...", opts: ["Joule", "Kalori saja"], ans: 0 },
{ q: "\\Delta t adalah...", opts: ["Suhu akhir - suhu awal", "Suhu awal"], ans: 0 },
{ q: "Kalor sebanding dengan...", opts: ["Massa & kenaikan suhu", "Warna"], ans: 0 }
],
t4: [
{ q: "Rumus kalor lebur adalah...", opts: ["Q = m.L", "Q = m.c.\\Delta t"], ans: 0 },
{ q: "Saat melebur, suhu zat bersifat...", opts: ["Tetap", "Meningkat drastis"], ans: 0 },
{ q: "Simbol L adalah...", opts: ["Kalor lebur laten", "Luas"], ans: 0 },
{ q: "Satuan kalor lebur laten L...", opts: ["J/kg", "J/Ā°C"], ans: 0 },
{ q: "Garis mendatar grafik kalor...", opts: ["Perubahan wujud", "Suhu naik"], 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. Air sebanyak $0{,}5\\text{ kg}$ bersuhu $20^{\\circ}\\text{C}$ dipanaskan hingga $80^{\\circ}\\text{C}$. Jika $c = 4200\\text{ J/kg}^{\\circ}\\text{C}$, kalor yang dibutuhkan adalah...", opts: ["126.000 Joule", "63.000 Joule", "252.000 Joule"], ans: 0 },
{ q: "2. Es massanya $2\\text{ kg}$ mencair seluruhnya pada titik leburnya $0^{\\circ}\\text{C}$. Jika $L = 336.000\\text{ J/kg}$, besar kalor lebur adalah...", opts: ["672.000 Joule", "336.000 Joule", "168.000 Joule"], ans: 0 },
{ q: "3. Peristiwa berikut yang MELEPASKAN kalor ke lingkungan adalah...", opts: ["Uap air mengembun menjadi titik air", "Es batu mencair", "Air menguap saat dimasak"], ans: 0 },
{ q: "4. Mengapa pakaian yang dijemur dengan cara dijereng lebar lebih cepat kering dibanding lipatan?", opts: ["Karena memperbesar luas permukaan penguapan", "Karena mendapat suhu lebih dingin", "Karena massanya berkurang"], ans: 0 },
{ q: "5. Satuan Standar Internasional (SI) untuk menyatakan besar kalor adalah...", opts: ["Joule", "Kalori", "Watt"], 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 6 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 5 : P 5: Menunjukkan pemuaian dalam teknologi, prinsip kerja bimetal, dan pengaplikasiannya
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 5 - Pemuaian dalam Teknologi & Bimetal</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #311b92 50%, #4c1d95 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, #f43f5e); 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 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">š Pertemuan 5</span>
<h1>PEMUAIAN DALAM TEKNOLOGI</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 5):</b></p>
<p>Siswa mampu mendeskripsikan dan menganalisis penerapan prinsip pemuaian zat dalam teknologi modern, khususnya sakelar otomatis keping bimetal dan kelengkungan kabel listrik.</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 Setrika & Kabel Listrik</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">š š</span>
<p><b>Setrika Otomatis Mati Sendiri</b></p>
<button class="interactive-btn" onclick="alert('Lampu indikator setrika padam saat sudah sangat panas karena bimetal membengkok dan memutuskan arus listrik!')">Amati Bimetal Setrika</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">ā” š£ļø</span>
<p><b>Kabel Listrik Siang vs Malam</b></p>
<button class="interactive-btn" onclick="alert('Kabel terlihat kendor/melengkung saat siang terik (panas), namun terlihat kencang/lurus saat malam hari (dingin)!')">Amati Kabel Listrik</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">š¤ Pertanyaan Pemantik</span>
<h2>Ke Mana Bimetal Membengkok?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Jika dua logam dengan koefisien muai berbeda dikeling menjadi satu (Bimetal) lalu dipanaskan, ke arah logam mana bimetal itu akan membengkok?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">š§² āŖļø ($\alpha_{\text{kecil}}$)</p>
<p>Mengapa bimetal membengkok ke arah logam bertanda koefisien muai lebih kecil saat dipanaskan?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">š Tinjauan Kontekstual</span>
<h2>Aplikasi Teknologi Bimetal & Pemuaian</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Thermostat Kulkas & AC:</b> Mengatur suhu pendingin ruangan secara otomatis menggunakan sakelar bimetal.</li>
<li style="margin-bottom: 10px;"><b>Alarm Kebakaran Otomatis:</b> Panas dari api membuat bimetal membengkok menyentuh kontak listrik untuk menyalakan sirine.</li>
<li><b>Pengelingan Pelat Kapal:</b> Paku keling dipanaskan hingga membara sebelum dipasang agar saat dingin mengikat sangat kuat.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 5 -->
<div class="slide">
<span class="slide-tag">š Materi Padat TP 5</span>
<h2>5. Prinsip Kerja Bimetal & Kabel Listrik</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Bimetal:</b> Dua keping logam berbeda koefisien muainya ($\alpha$) yang dikeling menjadi satu.</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--accent);">š„ Saat Dipanaskan</h4>
<p style="font-size: 0.9rem;">Bimetal membengkok ke arah logam yang <b>koefisien muai panjangnya lebih kecil</b> ($\alpha_{\text{kecil}}$).</p>
</div>
<div class="glass-card">
<h4 style="color: var(--primary);">āļø Saat Didinginkan</h4>
<p style="font-size: 0.9rem;">Bimetal melengkung/membengkok ke arah logam yang <b>koefisien muai panjangnya lebih besar</b> ($\alpha_{\text{besar}}$).</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 5 -->
<div class="slide">
<span class="slide-tag">š® Kuis TP 5</span>
<h2>Uji Pemuaian Teknologi (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 (Definisi Bimetal)</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 (Arah Bengkok)</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 (Aplikasi Alat)</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 (Kabel & Keling)</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 tentang teknologi bimetal:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Aplikasi bimetal sangat menyenangkan! šš')">š Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Terus amati teknologi sekitar ya! š')">š Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Mari diskusikan arah pembengkokannya lagi! šŖ')">š 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 6! š')">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. Bimetal terdiri dari dua keping logam yang dikeling menjadi satu dengan syarat...", opts: ["Koefisien muainya berbeda", "Jenis logam harus sama", "Ketebalannya beda jauh"], ans: 0 },
{ q: "2. Ketika bimetal dipanaskan, ia akan membengkok ke arah logam yang...", opts: ["Koefisien muainya lebih kecil", "Koefisien muainya lebih besar", "Massanya lebih berat"], ans: 0 },
{ q: "3. Sebaliknya jika bimetal didinginkan, ia akan membengkok ke arah logam yang...", opts: ["Koefisien muainya lebih besar", "Koefisien muainya lebih kecil", "Lebih panjang"], ans: 0 },
{ q: "4. Alat rumah tangga berikut yang memanfaatkan prinsip kerja bimetal sebagai pemutus arus otomatis adalah...", opts: ["Setrika listrik", "Kipas angin", "Lampu pijar"], ans: 0 },
{ q: "5. Mengapa kabel listrik di pinggir jalan dipasang agak kendor di siang hari?", opts: ["Agar tidak putus saat menyusut pada malam hari yang dingin", "Agar menghemat kabel", "Agar mudah tertiup angin"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "š Tuntas! Kuis TP 5 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: "Bimetal adalah ... keping logam", opts: ["Dua", "Tiga"], ans: 0 },
{ q: "Syarat bimetal logamnya harus...", opts: ["Beda koefisien muai", "Sama jenis"], ans: 0 },
{ q: "Keping bimetal disatukan dengan...", opts: ["Paku keling", "Lem kertas"], ans: 0 },
{ q: "Bimetal peka terhadap...", opts: ["Perubahan suhu", "Tekanan angin"], ans: 0 },
{ q: "Logam A (\\alpha besar) dan B (\\alpha kecil)...", opts: ["Membentuk bimetal", "Mencair"], ans: 0 }
],
t2: [
{ q: "Dipanaskan, bimetal bengkok ke...", opts: ["\\alpha kecil", "\\alpha besar"], ans: 0 },
{ q: "Didinginkan, bimetal bengkok ke...", opts: ["\\alpha besar", "\\alpha kecil"], ans: 0 },
{ q: "Besi (\\alpha kecil) + Kuningan (\\alpha besar) dipanaskan...", opts: ["Bengkok ke Besi", "Bengkok ke Kuningan"], ans: 0 },
{ q: "Besi + Kuningan didinginkan...", opts: ["Bengkok ke Kuningan", "Bengkok ke Besi"], ans: 0 },
{ q: "Bimetal lurus kembali jika suhu...", opts: ["Normal kembali", "Makin mendidih"], ans: 0 }
],
t3: [
{ q: "Setrika otomatis pakai...", opts: ["Bimetal", "Roda gigi"], ans: 0 },
{ q: "Alarm kebakaran bimetal menyalakan...", opts: ["Sirine", "Kipas"], ans: 0 },
{ q: "Thermostat kulkas mengatur...", opts: ["Suhu otomatis", "Kecepatan es"], ans: 0 },
{ q: "Saat setrika terlalu panas bimetal...", opts: ["Putuskan arus", "Meningkatkan arus"], ans: 0 },
{ q: "Lampu sein mobil memanfaatkan...", opts: ["Bimetal", "Motor listrik"], ans: 0 }
],
t4: [
{ q: "Siang hari kabel listrik...", opts: ["Melengkung/kendor", "Lurus tegang"], ans: 0 },
{ q: "Malam hari kabel listrik...", opts: ["Lurus/kencang", "Sangat kendor"], ans: 0 },
{ q: "Kabel kendor di siang mencegah...", opts: ["Putus saat dingin", "Terbakar"], ans: 0 },
{ q: "Pengelingan pelat dipanaskan agar...", opts: ["Cepat rapat saat dingin", "Mudah berkarat"], ans: 0 },
{ q: "Ban sepeda meletus karena muai...", opts: ["Gas/Udara", "Karet padat"], 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. Keping bimetal terdiri dari tembaga ($\alpha = 0{,}000019/^{\circ}\text{C}$) dan besi ($\alpha = 0{,}000012/^{\circ}\text{C}$). Jika dipanaskan bimetal membengkok ke arah...", opts: ["Besi", "Tembaga", "Lurus"], ans: 0 },
{ q: "2. Sakelar bimetal pada setrika listrik bekerja dengan cara...", opts: ["Memutuskan aliran listrik ketika suhu melebihi batas", "Menambah daya listrik", "Mendinginkan alas setrika"], ans: 0 },
{ q: "3. Kabel transmisi listrik PLN sengaja dipasang agak kendur pada siang hari bertujuan agar...", opts: ["Tidak putus saat menyusut pada malam hari", "Menghemat penggunaan kawat", "Mudah dibetulkan"], ans: 0 },
{ q: "4. Pada alarm kebakaran, panas dari kobaran api menyebabkan bimetal membengkok dan...", opts: ["Menghubungkan kontak listrik sehingga bel berbunyi", "Menyemprotkan air", "Memadamkan api"], ans: 0 },
{ q: "5. Pengelingan pelat logam dilakukan pada saat paku keling dalam keadaan membara agar...", opts: ["Saat dingin paku menyusut dan menjepit pelat sangat kuat", "Paku tidak mudah patah", "Pelat tidak berkarat"], 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 5 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 4 : Melakukan percobaan sederhana untuk menunjukkan pemuaian zat padat, cair, dan gas & menghitung pertambahan muai
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 4 - Percobaan & Rumus Pemuaian</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; }
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 4</span>
<h1>PERCOBAAN & RUMUS PEMUAIAN</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 4):</b></p>
<p>Siswa mampu membuktikan pemuaian melalui percobaan sederhana (Musschenbroek/sederhana) serta menghitung nilai pemuaian panjang dan volume menggunakan koefisien muai ($\alpha$ dan $\gamma$).</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>Simulasi Percobaan Musschenbroek</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">š„ š</span>
<p><b>Batang Tembaga Dipanaskan</b></p>
<button class="interactive-btn" onclick="alert('Jarum penunjuk bergeser tajam! Tembaga memanjang signifikan karena koefisien muai panjangnya lumayan besar.')">Panaskan Tembaga</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">š„ š„¢</span>
<p><b>Batang Besi Dipanaskan</b></p>
<button class="interactive-btn" onclick="alert('Jarum bergeser sedikit lebih lambat dari tembaga. Jenis logam berbeda memiliki angka koefisien muai berbeda!')">Panaskan Besi</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">š¤ Pertanyaan Pemantik</span>
<h2>Apakah Semua Logam Memuai Sama?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Jika batang besi, tembaga, dan aluminium yang panjangnya sama dipanaskan dengan suhu yang sama, manakah yang memanjang paling besar?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">š $\alpha_{\text{Al}} > \alpha_{\text{Cu}} > \alpha_{\text{Fe}}$</p>
<p>Mengapa koefisien muai panjang ($\alpha$) menjadi penentu utama pertambahan panjang?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">š Tinjauan Kontekstual</span>
<h2>Perhitungan Presisi dalam Konstruksi</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Insinyur Jembatan:</b> Menghitung rumusan $L_2 = L_1(1 + \alpha \Delta t)$ untuk menentukan jarak celah landasan jembatan baja.</li>
<li style="margin-bottom: 10px;"><b>Pabrik Tangki BBM:</b> Menghitung pertambahan volume drum bensin saat terik matahari agar tangki tidak meledak.</li>
<li><b>Pemasangan Kabel PLN:</b> Memperhitungkan koefisien muai kawat tembaga agar kabel tidak putus saat musim dingin.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 4 -->
<div class="slide">
<span class="slide-tag">š Materi Padat TP 4</span>
<h2>4. Koefisien Muai & Rumus Pemuaian</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<h4 style="color: var(--primary);">š Rumus Muai Panjang Zat Padat</h4>
<p style="font-size: 1.2rem; color: var(--yellow); text-align: center; margin: 6px 0;">$$L_2 = L_1 (1 + \alpha \Delta t)$$</p>
<p style="font-size: 0.9rem;">$L_1 = \text{panjang awal (m/cm)}$, $L_2 = \text{panjang akhir}$, $\alpha = \text{koefisien muai panjang } (/\text{Ā°C})$, $\Delta t = t_2 - t_1 = \text{kenaikan suhu } (\text{Ā°C})$.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--success);">š¦ Rumus Muai Volume Zat</h4>
<p style="font-size: 1.2rem; color: var(--yellow); text-align: center; margin: 6px 0;">$$V_2 = V_1 (1 + \gamma \Delta t)$$</p>
<p style="font-size: 0.9rem;">$V_1 = \text{volume awal}$, $V_2 = \text{volume akhir}$, $\gamma = 3\alpha = \text{koefisien muai ruang/volume}$.</p>
</div>
</div>
<!-- SLIDE 6: KUIS TP 4 -->
<div class="slide">
<span class="slide-tag">š® Kuis TP 4</span>
<h2>Uji Rumus & Percobaan (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 (Musschenbroek)</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 (Muai Panjang)</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 (Muai Volume)</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 (Koefisien)</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 perhitungan pemuaian:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Perhitungan koefisien muai sudah paham! šš')">š Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Tingkatkan latihan hitungan ya! š')">š Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Tetap semangat, mari pelajari latihan soalnya! šŖ')">š 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 5! š')">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. Alat laboratorium yang digunakan untuk menyelidiki pemuaian panjang logam adalah...", opts: ["Alat Musschenbroek", "Termometer Six", "Barometer"], ans: 0 },
{ q: "2. Bilangan yang menunjukkan pertambahan panjang zat padat tiap 1 meter jika suhu naik 1 Ā°C adalah...", opts: ["Koefisien muai panjang (\\alpha)", "Kalor jenis", "Massa jenis"], ans: 0 },
{ q: "3. Hubungan antara koefisien muai volume (\\gamma) dengan koefisien muai panjang (\\alpha) adalah...", opts: ["\\gamma = 3\\alpha", "\\gamma = 2\\alpha", "\\gamma = \\alpha / 3"], ans: 0 },
{ q: "4. Batang besi panjang $1\\text{ m}$ dipanaskan sehingga suhunya naik. Rumus mencari panjang akhir ($L_2$) adalah...", opts: ["$L_2 = L_1 (1 + \\alpha \\Delta t)$", "$L_2 = L_1 + \\alpha$", "$L_2 = L_1 / \\Delta t$"], ans: 0 },
{ q: "5. Semakin besar koefisien muai panjang suatu logam, maka pertambahan panjangnya saat dipanaskan akan...", opts: ["Semakin besar", "Semakin kecil", "Tetap sama"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "š Tuntas! Kuis TP 4 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: "Musschenbroek uji pemuaian...", opts: ["Logam/Padat", "Zat cair"], ans: 0 },
{ q: "Jarum bergerak jika logam...", opts: ["Memanjang/Memuai", "Mengecil"], ans: 0 },
{ q: "Beda jenis logam maka jarum...", opts: ["Beda pergeserannya", "Sama persis"], ans: 0 },
{ q: "Panas api memberikan energi...", opts: ["Kalor", "Listrik"], ans: 0 },
{ q: "Percobaan muai gas pakai...", opts: ["Botol + Balon", "Penggaris"], ans: 0 }
],
t2: [
{ q: "Simbol koefisien muai panjang...", opts: ["\\alpha", "\\gamma"], ans: 0 },
{ q: "Satuan koefisien muai panjang...", opts: ["/Ā°C", "m/s"], ans: 0 },
{ q: "Rumus muai panjang...", opts: ["L2 = L1(1 + \\alpha \\Delta t)", "L2 = L1 x \\alpha"], ans: 0 },
{ q: "\\Delta t artinya...", opts: ["Kenaikan suhu", "Panjang akhir"], ans: 0 },
{ q: "Pertambahan panjang = ...", opts: ["L2 - L1", "L1 + L2"], ans: 0 }
],
t3: [
{ q: "Simbol muai volume...", opts: ["\\gamma", "\\alpha"], ans: 0 },
{ q: "\\gamma nilainya sama dengan...", opts: ["3\\alpha", "2\\alpha"], ans: 0 },
{ q: "Rumus muai volume...", opts: ["V2 = V1(1 + \\gamma \\Delta t)", "V2 = V1 x \\gamma"], ans: 0 },
{ q: "Pertambahan volume = ...", opts: ["V2 - V1", "V1 + V2"], ans: 0 },
{ q: "Muai luas bermuatan...", opts: ["2\\alpha", "3\\alpha"], ans: 0 }
],
t4: [
{ q: "Aluminium memuai lebih ... dari besi", opts: ["Besar", "Kecil"], ans: 0 },
{ q: "Koefisien muai besi...", opts: ["Kecil", "Sangat besar"], ans: 0 },
{ q: "Jika \\Delta t membesar, muai...", opts: ["Semakin besar", "Semakin kecil"], ans: 0 },
{ q: "L1 adalah...", opts: ["Panjang awal", "Suhu awal"], ans: 0 },
{ q: "Pemanasan memperbesar...", opts: ["Ukuran zat", "Massa zat"], 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. Batang kuningan panjangnya $2\\text{ m}$ dipanaskan hingga suhunya naik $50^{\\circ}\\text{C}$. Jika $\\alpha = 0{,}000019/^{\\circ}\\text{C}$, pertambahan panjangnya adalah...", opts: ["0,0019 m", "0,019 m", "0,19 m"], ans: 0 },
{ q: "2. Percobaan Musschenbroek membuktikan bahwa pertambahan panjang logam tergantung pada...", opts: ["Jenis bahan logam dan kenaikan suhu", "Warna cat logam", "Berat timbangan logam"], ans: 0 },
{ q: "3. Jika koefisien muai panjang suatu zat padat adalah $\\alpha = 0{,}000012/^{\\circ}\\text{C}$, maka koefisien muai volumenya ($\\gamma$) adalah...", opts: ["0,000036 /Ā°C", "0,000024 /Ā°C", "0,000012 /Ā°C"], ans: 0 },
{ q: "4. Rumus pertambahan panjang ($\Delta L$) zat padat secara tepat adalah...", opts: ["$\\Delta L = L_1 \\cdot \\alpha \\cdot \\Delta t$", "$\\Delta L = L_1 / (\\alpha \\cdot \\Delta t)$", "$\\Delta L = \\alpha \\cdot \\Delta t$"], ans: 0 },
{ q: "5. Pemuaian volume zat cair dapat diamati dalam laboratorium menggunakan alat...", opts: ["Labu didih berpipa kapiler", "Musschenbroek", "Termometer Klinis"], 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 4 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 3 : Menyelidiki proses pemuaian pada zat padat, cair, dan gas Next, lanjut untuk TP yang ketiga.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 3 - Proses Pemuaian 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, #064e3b 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, #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; }
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 3</span>
<h1>PROSES PEMUAIAN ZAT</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 3):</b></p>
<p>Siswa mampu menyelidiki dan menganalisis mekanisme gerakan partikel saat proses pemuaian terjadi pada zat padat, cair, dan gas akibat penerimaan energi panas.</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 Perilaku Partikel & Balon</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">š</span>
<p><b>Balon di Atas Botol Dipanaskan</b></p>
<button class="interactive-btn" onclick="alert('Gas di dalam botol memuai ketika dipanaskan, mendorong udara ke atas sehingga balon mengembang!')">Amati Pemuaian Gas</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">ā</span>
<p><b>Air Penuh Panas Meluap</b></p>
<button class="interactive-btn" onclick="alert('Zat cair memuai lebih besar daripada wadah kaca/logamnya saat dipanaskan sehingga air tumpah!')">Amati Pemuaian Cair</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">š¤ Pertanyaan Pemantik</span>
<h2>Apa yang Terjadi pada Partikel?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa benda padat yang keras seperti rel kereta atau logam bisa memanjang saat kena terik matahari?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">āļø ā āļø āļø āļø</p>
<p>Bagaimana pengaruh getaran partikel terhadap kebutuhan ruang/volume benda?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">š Tinjauan Kontekstual</span>
<h2>Pemuaian dalam Kehidupan Sehari-hari</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Celah Rel Kereta:</b> Sambungan rel sengaja diberi celah agar tidak melengkung saat memuai di siang hari.</li>
<li style="margin-bottom: 10px;"><b>Kaca Jendela:</b> Bingkai kayu jendela diberi celah longgar agar kaca tidak pecah saat memuai panas.</li>
<li><b>Ban Sepeda Terik Matahari:</b> Udara/gas di dalam ban memuai dan bisa meletus jika diparkir di tempat sangat panas.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 3 -->
<div class="slide">
<span class="slide-tag">š Materi Padat TP 3</span>
<h2>3. Mekanisme Pemuaian Padat, Cair & Gas</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Pemuaian:</b> Pertambahan ukuran (panjang, luas, atau volume) suatu zat akibat kenaikan suhu (menerima kalor).</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--primary);">š§± Zat Padat</h4>
<p style="font-size: 0.9rem;">Partikel selalu bergetar. Saat dipanaskan, getaran semakin cepat sehingga jarak antarpartikel membesar. Mengalami muai panjang, luas, dan volume.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--success);">š§ Zat Cair & š Gas</h4>
<p style="font-size: 0.9rem;">ā¢ <b>Zat Cair:</b> Hanya mengalami muai volume. Besarnya tergantung koefisien muai volume ($\gamma$).<br>ā¢ <b>Zat Gas:</b> Memuai paling besar dibanding padat/cair karena gaya antarpartikel sangat lemah.</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 3 -->
<div class="slide">
<span class="slide-tag">š® Kuis TP 3</span>
<h2>Uji Pemahaman Pemuaian (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 (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>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">š” Tim 2 (Padat)</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 (Cair)</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 (Gas)</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 mengenai pemuaian:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Konsep getaran partikel sudah dipahami! šš')">š Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Mantap! Semangat terus ya! š')">š Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan ragu bertanya pada 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 4! š')">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. Ketika zat dipanaskan, partikel-partikel penyusunnya akan bergerak...", opts: ["Lebih lambat", "Lebih cepat", "Berhenti"], ans: 1 },
{ q: "2. Karena gerakan partikel semakin cepat saat dipanaskan, maka jarak antarpartikel menjadi...", opts: ["Makin menyempit", "Makin membesar", "Tetap"], ans: 1 },
{ q: "3. Zat cair yang dipanaskan di dalam wadah hanya mengalami pemuaian...", opts: ["Panjang saja", "Volume", "Luas saja"], ans: 1 },
{ q: "4. Wujud zat yang mengalami pemuaian paling besar ketika dipanaskan adalah...", opts: ["Zat Padat", "Zat Cair", "Zat Gas"], ans: 2 },
{ q: "5. Mengapa celah dipasang pada sambungan rel kereta api?", opts: ["Agar rel tidak melengkung saat memuai", "Agar kereta berjalan lambat", "Agar roda berbunyi"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "š Tuntas! Kuis TP 3 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: "Partikel dipanaskan bergerak...", opts: ["Cepat", "Lambat"], ans: 0 },
{ q: "Jarak antarpartikel saat panas...", opts: ["Membesar", "Mengecil"], ans: 0 },
{ q: "Zat didinginkan partikelnya...", opts: ["Lambat", "Sangat cepat"], ans: 0 },
{ q: "Pemuaian butuh energi...", opts: ["Panas/Kalor", "Listrik"], ans: 0 },
{ q: "Proses mengecilnya zat dinamakan...", opts: ["Penyusutan", "Penguapan"], ans: 0 }
],
t2: [
{ q: "Zat padat dipanaskan memuai...", opts: ["Panjang, luas, volume", "Volume saja"], ans: 0 },
{ q: "Rel kereta diberi celah untuk...", opts: ["Cegah melengkung", "Hiasan"], ans: 0 },
{ q: "Kaca jendela dipasang...", opts: ["Agak longgar", "Sangat sempit"], ans: 0 },
{ q: "Logam memuai jika...", opts: ["Suhu naik", "Suhu turun"], ans: 0 },
{ q: "Batang besi memanjang adalah...", opts: ["Muai panjang", "Muai volume"], ans: 0 }
],
t3: [
{ q: "Zat cair memuai secara...", opts: ["Volume", "Panjang"], ans: 0 },
{ q: "Air panas penuh di teko akan...", opts: ["Meluap/tumpah", "Kering"], ans: 0 },
{ q: "Pemuaian cair tergantung...", opts: ["Koefisien muai volume", "Warna"], ans: 0 },
{ q: "Muai cair dibanding padat...", opts: ["Lebih besar", "Lebih kecil"], ans: 0 },
{ q: "Termometer memanfaatkan muai...", opts: ["Zat cair", "Zat padat saja"], ans: 0 }
],
t4: [
{ q: "Gas memuai paling...", opts: ["Besar", "Kecil"], ans: 0 },
{ q: "Ban sepeda di panas matahari bisa...", opts: ["Meletus", "Kempis"], ans: 0 },
{ q: "Balon mengembang di botol panas karena...", opts: ["Gas memuai", "Air terserap"], ans: 0 },
{ q: "Gaya antarpartikel gas bersifat...", opts: ["Sangat lemah", "Kuat"], ans: 0 },
{ q: "Udara panas ruangannya...", opts: ["Membesar", "Mengecil"], 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. Mengapa air yang diisi penuh di dalam panci akan meluap saat mendidih?", opts: ["Karena panci menyusut tajam", "Karena pemuaian volume air lebih besar dari panci", "Karena air bertambah berat"], ans: 1 },
{ q: "2. Pemuaian pada zat padat terjadi karena kenaikan suhu menyebabkan partikel...", opts: ["Berhenti bergetar", "Bergetar lebih cepat dan butuh ruang lebih luas", "Menjadi semakin dekat"], ans: 1 },
{ q: "3. Pemasangan kaca pada bingkai jendela dibuat agak longgar bertujuan untuk...", opts: ["Memberi ruang saat kaca memuai di siang hari", "Agar angin mudah masuk", "Agar kaca mudah dilepas"], ans: 0 },
{ q: "4. Di antara zat padat, cair, dan gas, yang mengalami pemuaian paling besar adalah...", opts: ["Gas", "Cair", "Padat"], ans: 0 },
{ q: "5. Proses bertambahnya ukuran suatu benda akibat menerima energi panas disebut...", opts: ["Pemuaian", "Penyusutan", "Kondensasi"], 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 3 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 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>