Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 7
Bahasa Inggris
About Me : Physical Appearance & Personality
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Physical Appearance & Personality 👤</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="user" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 4: Physical Appearance & Personality</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Physical Appearance & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Personality</span> 👤
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 4):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-700">mendeskripsikan ciri-ciri fisik (physical appearance)</span> dan <span class="text-emerald-700">kepribadian (personality)</span> orang lain menggunakan kosakata yang sesuai.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's continue learning! 👇</p>
</div>
</div>
<!-- Slide 2: Physical Appearance -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Physical Appearance 👁️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Kosakata Ciri-Ciri Fisik</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-lg mt-2 space-y-4">
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Height (Tinggi Badan):</b>
<ul class="text-slate-700 font-semibold space-y-1 mt-1">
<li>• <b>Tall:</b> Tinggi</li>
<li>• <b>Short:</b> Pendek</li>
<li>• <b>Medium height:</b> Sedang</li>
</ul>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Hair (Rambut):</b>
<ul class="text-slate-700 font-semibold space-y-1 mt-1">
<li>• <b>Long / Short:</b> Panjang / Pendek</li>
<li>• <b>Curly / Straight:</b> Keriting / Lurus</li>
<li>• <b>Black / Blonde:</b> Hitam / Pirang</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 3: Personality -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Personality 🌟</h2>
<p class="text-base font-bold text-slate-500 mt-2">Kosakata Sifat / Kepribadian</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Contoh sifat atau kepribadian seseorang:</p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-1">
<ul class="text-slate-700 font-semibold space-y-2">
<li>• <b>Friendly:</b> Ramah / Bersahabat</li>
<li>• <b>Kind:</b> Baik hati</li>
<li>• <b>Smart / Clever:</b> Pintar / Cerdas</li>
</ul>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-1">
<ul class="text-slate-700 font-semibold space-y-2">
<li>• <b>Diligient:</b> Rajin</li>
<li>• <b>Funny:</b> Lucu / Menyenangkan</li>
<li>• <b>Quiet:</b> Pendiam / Tenang</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 4.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 4)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after learning about physical appearance and personality today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 4: Physical Appearance & Personality)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Which one describes physical appearance (height)?", opts: ["Tall", "Friendly", "Smart"], ans: 0 },
{ q: "Sinta is very kind and helps others. She has a good...", opts: ["personality", "book", "pencil"], ans: 0 },
{ q: "He has short curly hair. 'Hair' means...", opts: ["Rambut", "Mata", "Tinggi"], ans: 0 },
{ q: "Which one describes personality (sifat)?", opts: ["Diligient", "Short", "Long hair"], ans: 0 },
{ q: "My teacher is very smart and helpful. 'Smart' means...", opts: ["Pintar", "Pendek", "Keriting"], ans: 0 },
{ q: "Budi is tall and has black hair. 'Tall' means...", opts: ["Tinggi", "Ramah", "Baik"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 4)
const evaluasiBank = [
{
q: "Which word describes someone's height (fisik)?",
options: ["Tall", "Friendly", "Kind", "Smart"],
a: 0,
exp: "'Tall' (tinggi) adalah kosakata untuk mendeskripsikan ciri fisik."
},
{
q: "Rina always studies hard and gets good grades. She is very...",
options: ["short", "diligent", "long", "curly"],
a: 1,
exp: "'Diligent' (rajin) adalah kepribadian yang cocok untuk anak yang rajin belajar."
},
{
q: "He has short, black hair. The word 'hair' means...",
options: ["Mata", "Rambut", "Hidung", "Tinggi"],
a: 1,
exp: "'Hair' artinya rambut."
},
{
q: "Which one is an example of personality (sifat)?",
options: ["Curly hair", "Tall height", "Friendly", "Short hair"],
a: 2,
exp: "'Friendly' (ramah) adalah bentuk kepribadian atau sifat seseorang."
},
{
q: "Andi helps his friends and always smiles. He is a ... boy.",
options: ["tall", "kind", "short", "long"],
a: 1,
exp: "'Kind' (baik hati) menggambarkan kepribadian seseorang yang suka menolong."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 4 (Physical Appearance & Personality): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 4 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
About Me : Hobbies, Frequency & Tools
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Hobbies, Frequency & Tools 🎨⚽</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="palette" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 3: Hobbies, Frequency & Tools</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Hobbies, Frequency & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Tools</span> 🎨⚽
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 3):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-700">mendeskripsikan berbagai macam hobi</span> dan berbicara tentang <span class="text-emerald-700">frekuensi serta peralatan</span> yang digunakan untuk hobi tersebut.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's continue learning! 👇</p>
</div>
</div>
<!-- Slide 2: Hobbies & Frequency -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Hobbies & Frequency ⏱️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Menyatakan Hobi dan Frekuensi Melakukannya</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-2">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-teal-900 text-base">Frequency Adverbs (Frekuensi):</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• <b>Always:</b> Selalu (100%)</li>
<li>• <b>Usually:</b> Biasanya (75%)</li>
<li>• <b>Sometimes:</b> Kadang-kadang (50%)</li>
<li>• <b>Never:</b> Tidak pernah (0%)</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-teal-900 text-base">Contoh Kalimat:</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• "I <b>always</b> read books in my free time."</li>
<li>• "She <b>usually</b> plays badminton on Sunday."</li>
<li>• "We <b>sometimes</b> go swimming."</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Tools for Hobbies -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Tools for Hobbies 🛠️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Peralatan yang Digunakan untuk Hobi</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Pola kalimat menyatakan alat (*tools*): <br><i class="text-emerald-700">"I use [tool] to [hobby]."</i></p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Drawing:</b><br><span class="text-emerald-900 font-bold">"I use a pencil and paper to draw."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Cooking:</b><br><span class="text-emerald-900 font-bold">"I use a pan and stove to cook."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Reading:</b><br><span class="text-emerald-900 font-bold">"I use books and novels to read."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Playing Football:</b><br><span class="text-emerald-900 font-bold">"I use a football and shoes to play."</span>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 3.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 3)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after learning about hobbies, frequency, and tools today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 3: Hobbies, Frequency & Tools)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What tool do you need to draw pictures?", opts: ["Pencil and paper", "Stove and pan", "Football and shoes"], ans: 0 },
{ q: "I ... read books every night before sleeping (always).", opts: ["always", "never", "pan"], ans: 0 },
{ q: "What tool do you use when your hobby is cooking?", opts: ["Book", "Pan and stove", "Bicycle"], ans: 1 },
{ q: "Which one shows frequency?", opts: ["Usually", "Pencil", "Kitchen"], ans: 0 },
{ q: "To play football, we need a...", opts: ["book", "football and shoes", "pan"], ans: 1 },
{ q: "What do you use to read stories?", opts: ["Book", "Pencil", "Knife"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 3)
const evaluasiBank = [
{
q: "I like reading. I use a ... to read.",
options: ["book", "pan", "pencil", "ball"],
a: 0,
exp: "Untuk hobi membaca (reading), alat utama yang digunakan adalah buku (book)."
},
{
q: "She ... plays badminton on Sunday (menyatakan kebiasaan/frekuensi).",
options: ["usually", "book", "pan", "pencil"],
a: 0,
exp: "'Usually' adalah kata keterangan frekuensi (frequency adverb)."
},
{
q: "What tool do you use for drawing?",
options: ["Stove", "Pencil and paper", "Football", "Guitar"],
a: 1,
exp: "Pencil and paper (pensil dan kertas) adalah alat utama untuk menggambar."
},
{
q: "Budi likes cooking. He uses a ... to fry some fish.",
options: ["book", "pan", "ball", "bicycle"],
a: 1,
exp: "Wajan (pan) digunakan untuk memasak atau menggoreng."
},
{
q: "Which sentence is correct?",
options: ["I use a book to cook", "I use a pencil to draw", "I use a pan to read", "I use a ball to write"],
a: 1,
exp: "Kalimat yang logis adalah 'I use a pencil to draw'."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 3 (Hobbies, Frequency & Tools): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 3 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
About Me : Personal Identity & Introducing Others
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Personal Identity & Introducing Others 🤝</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="users" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 2: Personal Identity & Introducing Others</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Identity & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Introducing Others</span> 👥
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 2):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-700">bertanya jawab tentang identitas pribadi</span> dan <span class="text-emerald-700">memperkenalkan orang lain</span> kepada teman.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's continue learning! 👇</p>
</div>
</div>
<!-- Slide 2: Asking & Answering Personal Identity -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Asking & Answering Identity 💬</h2>
<p class="text-base font-bold text-slate-500 mt-2">Tanya Jawab Identitas Pribadi</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-lg mt-2 space-y-4">
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Nama:</b><br>
<span class="text-teal-900 font-bold">Q: "What is your name?"</span><br>
<span class="text-slate-600">A: "My name is Sinta."</span>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Tempat Tinggal:</b><br>
<span class="text-teal-900 font-bold">Q: "Where do you live?"</span><br>
<span class="text-slate-600">A: "I live in Masohi."</span>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Usia:</b><br>
<span class="text-teal-900 font-bold">Q: "How old are you?"</span><br>
<span class="text-slate-600">A: "I am 13 years old."</span>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Hobi:</b><br>
<span class="text-teal-900 font-bold">Q: "What is your hobby?"</span><br>
<span class="text-slate-600">A: "I like reading."</span>
</div>
</div>
</div>
</div>
<!-- Slide 3: Introducing Others -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Introducing Others 🤝</h2>
<p class="text-base font-bold text-slate-500 mt-2">Memperkenalkan Orang Lain kepada Teman</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Contoh ungkapan dan respons saat memperkenalkan teman:</p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-2">
<b>Ungkapan Pengantar:</b>
<ul class="text-slate-700 space-y-1 font-semibold">
<li>• "This is my friend, Andi."</li>
<li>• "I'd like to introduce my classmate, Rina."</li>
<li>• "Budi, this is Doni."</li>
</ul>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-2">
<b>Respons Lawan Bicara:</b>
<ul class="text-slate-700 space-y-1 font-semibold">
<li>• "Hello, Andi. Glad to know you."</li>
<li>• "Hi, Rina. Nice to meet you."</li>
<li>• "Hello, Doni. Pleased to meet you."</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 2.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 2)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after practicing personal identity and introducing others today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 2: Identity & Introducing Others)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "A: 'What is your name?' -> B: '...'", opts: ["My name is Sinta", "I live in Ambon", "I am 13 years old"], ans: 0 },
{ q: "A: 'Where do you live?' -> B: '...'", opts: ["I like reading", "I live on Jalan Merdeka", "My name is Doni"], ans: 1 },
{ q: "How do you introduce your friend to others?", opts: ["This is my friend, Andi", "Hello, my name is Budi", "Nice to meet you"], ans: 0 },
{ q: "A: 'This is my classmate, Rina.' -> B: '...'", opts: ["Good night", "Glad to know you, Rina", "Goodbye"], ans: 1 },
{ q: "A: 'How old are you?' -> B: '...'", opts: ["I am thirteen years old", "I am from Papua", "My hobby is swimming"], ans: 0 },
{ q: "To ask someone's place of living, we say...", opts: ["What is your name?", "Where do you live?", "How are you?"], ans: 1 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 2)
const evaluasiBank = [
{
q: "A: 'What is your name?' -> B: '...'",
options: ["I live in Jakarta", "My name is Joko", "I am 13 years old", "I like swimming"],
a: 1,
exp: "Pertanyaan 'What is your name?' dijawab dengan menyebutkan nama."
},
{
q: "A: 'Where do you live?' -> B: '...'",
options: ["My name is Siska", "I live on Jalan Sudirman", "I am fine", "Nice to meet you"],
a: 1,
exp: "Pertanyaan 'Where do you live?' menanyakan alamat atau tempat tinggal."
},
{
q: "Which expression is used to introduce your friend to someone else?",
options: ["How are you?", "This is my friend, Rian.", "Good morning, Sir.", "What is your hobby?"],
a: 1,
exp: "'This is my friend, Rian.' adalah kalimat untuk memperkenalkan orang lain."
},
{
q: "A: 'This is my classmate, Ani.' -> B: '...'",
options: ["Good night", "Glad to know you, Ani", "Goodbye", "See you later"],
a: 1,
exp: "Respons yang ramah saat diperkenalkan dengan teman baru adalah 'Glad to know you'."
},
{
q: "To ask someone's age, we use the question...",
options: ["Where do you live?", "What is your name?", "How old are you?", "What is your hobby?"],
a: 2,
exp: "'How old are you?' digunakan khusus untuk menanyakan usia."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 2 (Identity & Introducing Others): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 2 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
About Me : Greeting, Leave-Taking & Self-Introduction
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Greeting, Leave-Taking & Self-Introduction 👋</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="user-check" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 1: Greeting, Leave-Taking & Self-Introduction</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Greeting, Leave-Taking & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Self-Introduction</span> 👋
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 1):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu menggunakan ungkapan untuk <span class="text-emerald-700">menyapa</span>, <span class="text-emerald-700">pamit</span>, dan <span class="text-emerald-700">memperkenalkan diri sendiri</span> dengan menyebutkan <span class="text-emerald-700">nama, asal, alamat, usia, dan hobi</span>.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's start learning! 👇</p>
</div>
</div>
<!-- Slide 2: Greetings & Leave-Takings -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Greetings & Leave-Takings 💬</h2>
<p class="text-base font-bold text-slate-500 mt-2">Ungkapan Menyapa dan Berpamitan</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-2">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-emerald-800 text-base flex items-center gap-2"><i data-lucide="sun"></i> Greetings (Menyapa)</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• <b>Good morning:</b> Selamat pagi</li>
<li>• <b>Good afternoon:</b> Selamat siang/sore</li>
<li>• <b>Hello / Hi:</b> Halo</li>
<li>• <b>How are you?:</b> Apa kabar?</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-emerald-800 text-base flex items-center gap-2"><i data-lucide="moon"></i> Leave-Takings (Berpamitan)</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• <b>Goodbye / Bye:</b> Selamat tinggal</li>
<li>• <b>See you tomorrow:</b> Sampai jumpa besok</li>
<li>• <b>See you later:</b> Sampai jumpa lagi</li>
<li>• <b>Good night:</b> Selamat malam (tidur)</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Self-Introduction (Name, Origin, Address, Age, Hobby) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Self-Introduction 🙋♂️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Cara Memperkenalkan Diri Sendiri</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Contoh kalimat lengkap untuk memperkenalkan diri:</p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Name (Nama):</b><br><span class="text-emerald-800 font-bold">"Hello, my name is Ahmad."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Origin (Asal):</b><br><span class="text-emerald-800 font-bold">"I am from Maluku."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Address (Alamat):</b><br><span class="text-emerald-800 font-bold">"I live in Masohi."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Age (Usia) & Hobby (Hobi):</b><br><span class="text-emerald-800 font-bold">"I am 13 years old. I like reading."</span>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 1.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 1)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after learning to greet, say goodbye, and introduce yourself today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 1: Greeting, Leave-Taking, Self-Introduction)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What do you say when you meet your teacher in the morning?", opts: ["Good morning, Sir", "Good night, Sir", "Goodbye"], ans: 0 },
{ q: "Which one is an expression of leave-taking?", opts: ["How are you?", "See you tomorrow", "Nice to meet you"], ans: 1 },
{ q: "A: 'Hello, my name is Budi.' -> B: '...'", opts: ["I am from Ambon", "Nice to meet you, Budi", "Good night"], ans: 1 },
{ q: "To state your age, you say...", opts: ["I live in Masohi", "I am 13 years old", "I like reading"], ans: 1 },
{ q: "Which sentence tells about hobby?", opts: ["I live in Jakarta", "My name is Sinta", "I like swimming"], ans: 2 },
{ q: "When you want to go home in the afternoon, you say...", opts: ["Good morning", "Goodbye", "How do you do?"], ans: 1 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 1)
const evaluasiBank = [
{
q: "It is 07.00 AM. You meet your friend at school. You say...",
options: ["Good evening", "Good morning", "Good night", "Goodbye"],
a: 1,
exp: "Pukul 07.00 pagi menggunakan sapaan 'Good morning'."
},
{
q: "Which expression is used when you want to leave someone?",
options: ["Nice to meet you", "See you tomorrow", "How are you?", "Good morning"],
a: 1,
exp: "'See you tomorrow' adalah ungkapan berpamitan (leave-taking)."
},
{
q: "Hello, my name ... Doni. I live in Ambon.",
options: ["am", "is", "are", "be"],
a: 1,
exp: "Subjek 'my name' adalah tunggal, sehingga menggunakan 'is'."
},
{
q: "To state your age in English, you say...",
options: ["I am 13 years old", "I live in Jakarta", "My hobby is reading", "I am from Papua"],
a: 0,
exp: "'I am 13 years old' digunakan untuk menyatakan usia."
},
{
q: "Which sentence shows someone's hobby?",
options: ["I am a student", "I live on Jalan Melati", "I like swimming", "My name is Rina"],
a: 2,
exp: "'I like swimming' menyatakan hobi seseorang."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 1 (Greeting, Leave-Taking, Self-Intro): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 1 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 1 Menjelaskan pengertian iklan, membedakan iklan komersial dan nonkomersial, serta mengidentifikasi informasi penting dalam iklan.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Periklanan (TP 1) 📢</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fffbeb;
background-image: radial-gradient(#fde68a 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-amber-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-amber-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="megaphone" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-amber-800 uppercase tracking-widest">Bab 2 - TP 1: Pengertian & Jenis Iklan</span>
<span id="progress-text" class="text-xs font-black text-white bg-amber-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 1 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 1: <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Dunia Iklan & Pesannya</span> 🎯
</h1>
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=800&q=80" alt="Iklan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-amber-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menjelaskan <span class="text-amber-600">pengertian iklan</span> secara tepat.</li>
<li>Membedakan <span class="text-amber-600">iklan komersial dan nonkomersial</span>.</li>
<li>Mengidentifikasi <span class="text-amber-600">informasi penting</span> dalam sebuah iklan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membongkar rahasia di balik iklan? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Apa itu Iklan? 💡</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pesan pembawa informasi untuk membujuk atau menggerakkan khalayak ramai.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Komersial -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Komersial">
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Iklan Komersial (Niaga)</div>
<p class="text-slate-700 font-bold mb-3">Bertujuan menawarkan produk atau jasa untuk mendapatkan <span class="text-amber-600 font-black">keuntungan/penjualan</span>.</p>
</div>
<div class="bg-amber-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-amber-900 italic">Contoh: Iklan makanan, handphone, pakaian, jasa ojek online.</p>
</div>
</div>
<!-- Nonkomersial -->
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1532629345422-7515f3d16bb9?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Layanan Masyarakat">
<div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Iklan Nonkomersial (Layanan Masyarakat)</div>
<p class="text-slate-700 font-bold mb-3">Bertujuan memberikan pencerahan, imbauan, atau edukasi sosial tanpa mencari <span class="text-orange-600 font-black">keuntungan material</span>.</p>
</div>
<div class="bg-orange-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-orange-900 italic">Contoh: Iklan hemat energi, bahaya narkoba, taat prokes.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Jenis Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-amber-600">Komersial vs Nonkomersial</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-amber-100 border-2 border-amber-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-amber-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis iklan dari pernyataan berikut:</p>
<div id="q1-text" class="text-2xl text-box text-amber-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Komersial</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Nonkomersial (Layanan M.)</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-amber-600 text-white rounded-2xl font-black text-xl hover:bg-amber-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Informasi Penting dalam Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Menggali Informasi Iklan 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Detektif iklan harus jeli melihat pesan utama yang disampaikan.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Unsur penting yang wajib dicari dalam sebuah iklan:</p>
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Produk/Pesan Utama:</b> Apa yang ditawarkan atau disosialisasikan?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Sasaran (Target):</b> Kepada siapa iklan ini ditujukan (anak-anak, remaja, umum)?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Daya Tarik/Keunggulan:</b> Alasan mengapa khalayak harus tertarik.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis Iklan">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Informasi Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-orange-600">Bedah Pesan Iklan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full">
<span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Iklan Cerdas) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-500 tracking-wide uppercase">🏁 Balap Iklan Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat seputar pengertian & jenis iklan, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-amber-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 1 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-amber-500 hover:bg-amber-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#d97706] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#d97706] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 1 -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi TP 1 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang iklan hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-amber-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Paham!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Ngerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian materi iklan mana yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-amber-50 border-2 border-amber-200 focus:border-amber-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 1 & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 1</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman pengertian dan jenis iklan melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-amber-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-amber-700 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 1 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-amber-900 mb-2">Misi TP 1 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 1: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-amber-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-amber-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 1 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-amber-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Pemahaman Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-amber-500">
<option value="100">Sangat Paham Pengertian & Jenis Iklan!</option>
<option value="75">Paham Sebagian Besar</option>
<option value="50">Masih Perlu Belajar</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 1 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-amber-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-600 shadow-[0_4px_0px_#d97706]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Komersial/Nonkomersial)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Diskon besar-besaran akhir tahun untuk semua produk pakaian merek Lokal.\"", a: true, exp: "Ini menawarkan produk untuk transaksi jual beli (Iklan Komersial)." },
{ t: "\"Ayo hemat penggunaan air demi kelangsungan bumi masa depan!\"", a: false, exp: "Ini berisi imbauan sosial tanpa mencari keuntungan (Iklan Layanan Masyarakat)." },
{ t: "\"Pesan sekarang smartphone tercanggih dengan kamera 108MP!\"", a: true, exp: "Ini adalah promosi produk komersial." },
{ t: "\"Cegah demam berdarah dengan menerapkan 3M Plus di rumah.\"", a: false, exp: "Ini adalah bentuk iklan nonkomersial edukatif." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Analisis Informasi)
let countQ2 = 0;
const q2Bank = [
{
story: "Sebuah iklan menampilkan produk susu pertumbuhan khusus anak usia 1-3 tahun dengan kandungan kalsium tinggi.",
q: "Siapa target sasaran utama dari produk iklan tersebut?",
ops: ["Orang tua yang memiliki anak usia balita (1-3 tahun)", "Para atlet profesional", "Lansia di atas 60 tahun"],
ans: 0,
exp: "Iklan susu tersebut ditujukan bagi anak balita dan orang tuanya."
},
{
story: "Iklan lowongan pekerjaan daring menawarkan kemudahan melamar kerja cepat tanpa biaya pendaftaran.",
q: "Apa nilai keunggulan utama yang ditawarkan iklan tersebut?",
ops: ["Proses melamar cepat dan gratis", "Biaya pendaftaran yang mahal", "Lokasi kantor yang jauh"],
ans: 0,
exp: "Keunggulan yang ditonjolkan adalah kemudahan cepat dan tanpa biaya."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 1
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Pesan yang bertujuan membujuk pembeli disebut...", a: "IKLAN" },
{ q: "Iklan niaga disebut juga iklan...", a: "KOMERSIAL" },
{ q: "Iklan edukasi sosial disebut iklan layanan...", a: "MASYARAKAT" },
{ q: "Tujuan utama iklan komersial adalah mencari...", a: "KEUNTUNGAN" },
{ q: "Informasi kepada siapa iklan ditujukan disebut ... sasaran.", a: "TARGET" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-amber-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) btn.classList.add('border-amber-400', 'bg-amber-50');
else if(btn.innerText.includes('Ngerti')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 1
const evaluasiBank = [
{
q: `Pesan komunikasi penyiaran yang bertujuan untuk membujuk orang membeli produk disebut...`,
options: [`Iklan komersial`, `Iklan layanan masyarakat`, `Slogan`, `Poster`],
a: 0,
exp: "Iklan komersial berfokus pada penawaran produk untuk mendapatkan keuntungan."
},
{
q: `Manakah di bawah ini yang merupakan tujuan utama dari iklan nonkomersial (layanan masyarakat)?`,
options: [`Mendapatkan laba penjualan setinggi-tingginya`, `Memberikan edukasi atau imbauan sosial`, `Menjatuhkan produk pesaing`, `Memamerkan karya seni`],
a: 1,
exp: "Iklan layanan masyarakat bertujuan memberikan pencerahan dan edukasi sosial."
},
{
q: `Sebuah iklan menawarkan sabun mandi dengan keunggulan membunuh kuman 99%. Unsur informasi yang ditonjolkan adalah...`,
options: [`Harga produk`, `Keunggulan/daya tarik produk`, `Lokasi pabrik`, `Nama pembuat iklan`],
a: 1,
exp: "Membunuh kuman 99% merupakan keunggulan atau daya tarik utama produk."
},
{
q: `Perbedaan mendasar antara iklan komersial dan nonkomersial terletak pada...`,
options: [`Media yang digunakan`, `Tujuan akhir pembuatan iklan`, `Waktu penayangannya`, `Jumlah kata yang dipakai`],
a: 1,
exp: "Perbedaan utamanya adalah motif pencarian keuntungan (komersial) versus edukasi sosial (nonkomersial)."
},
{
q: `Jika sebuah iklan kosmetik remaja ditayangkan khusus untuk anak muda usia sekolah, hal ini berkaitan dengan unsur...`,
options: [`Target sasaran iklan`, `Biaya produksi iklan`, `Durasi tayang iklan`, `Ukuran cetak iklan`],
a: 0,
exp: "Menentukan siapa pengguna atau pembeli produk adalah penentuan target sasaran."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-amber-50 hover:border-amber-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 1 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 1 Bab 2: " + refleksi,
strategi: "Evaluasi TP 1: Pengertian & Jenis Iklan"
}, "*");
} else {
alert("Laporan TP 1 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
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>
📊 Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Siswa 1 | Bilangan Rasional Matematika — Kelas 7 | 3 / 7 | 100% | Hambatan Siswa: Tidak ada hambatan | Strategi Siswa: Tidak ada strategi khusus |
| sasasa | Bilangan Rasional Matematika — Kelas 7 | 3 / 7 | 100% | Hambatan Siswa: sas | Strategi Siswa: sas |
| Coba1 | Bilangan Rasional Matematika — Kelas 7 | 1 / 7 | 100% | Hambatan Siswa: 1 | Strategi Siswa: 2 |
| sasdsadasd | Bilangan Rasional Matematika — Kelas 7 | 2 / 7 | 50% | Hambatan Siswa: dasda | Strategi Siswa: asdas |
| dddddddd | Bilangan Rasional Matematika — Kelas 7 | 3 / 7 | 75% | Hambatan Siswa: Hambatan | Strategi Siswa: Strategi |