Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 7
Bahasa Inggris
About Me : Regular Activities & Descriptive Paragraph
<!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: Regular Activities & Descriptive Paragraph 📝</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="book-open" 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 5: Regular Activities & Descriptive Paragraph</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">
Regular Activities & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Descriptive Paragraph</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 5):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-700">mendeskripsikan kegiatan sehari-hari (regular activities)</span> dan <span class="text-emerald-700">menyusun sebuah paragraf deskriptif sederhana</span> tentang seorang teman.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's complete Bab 1! 👇</p>
</div>
</div>
<!-- Slide 2: Regular Activities (Simple Present Tense) -->
<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. Regular Activities ⏰</h2>
<p class="text-base font-bold text-slate-500 mt-2">Kegiatan Sehari-Hari (Simple Present Tense)</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Menggunakan kata kerja bentuk pertama (Verb-1) untuk kebiasaan:</p>
<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>Contoh Kosakata Harian:</b>
<ul class="text-slate-700 font-semibold space-y-1 mt-1">
<li>• <b>Wake up:</b> Bangun tidur</li>
<li>• <b>Go to school:</b> Pergi ke sekolah</li>
<li>• <b>Study English:</b> Belajar Bahasa Inggris</li>
<li>• <b>Play football:</b> Bermain sepak bola</li>
</ul>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Contoh Kalimat:</b>
<ul class="text-slate-700 font-semibold space-y-2 mt-1">
<li>• "I wake up at 05.00 AM every morning."</li>
<li>• "She goes to school at 07.00 AM."</li>
<li>• "He studies English on Monday."</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 3: Writing a Descriptive Paragraph about a Friend -->
<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. Descriptive Paragraph about a Friend ✍️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Menyusun Paragraf Deskriptif Sederhana</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">Struktur paragraf tentang teman mencakup: nama, usia, penampilan, kepribadian, dan kegiatan rutinnya.</p>
<div class="bg-emerald-50 p-5 rounded-2xl border border-emerald-200 text-xs md:text-sm text-slate-700 space-y-2">
<b class="text-emerald-900 block font-black">Contoh Paragraf:</b>
<p class="italic leading-relaxed">
"This is my best friend, Andi. He is thirteen years old. Andi is tall and has short black hair. He is very friendly and diligent. Every morning, he goes to school early. In his free time, he likes playing football with his friends."
</p>
</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 5.</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 5)</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 completing Bab 1 about regular activities and descriptive text 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 5: Regular Activities & Descriptive Paragraph)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "I ... up at 05.00 AM every morning.", opts: ["wake", "wakes", "waking"], ans: 0 },
{ q: "She ... to school at 07.00 AM.", opts: ["go", "goes", "going"], ans: 1 },
{ q: "Which sentence uses Simple Present Tense correctly?", opts: ["He study English", "He studies English", "He studying English"], ans: 1 },
{ q: "In a descriptive paragraph about a friend, we tell about...", opts: ["name, appearance, and habits", "math formulas", "history dates"], ans: 0 },
{ q: "Every morning, Andi ... breakfast with his family.", opts: ["eat", "eats", "eating"], ans: 1 },
{ q: "We ... football in the school yard every afternoon.", opts: ["play", "plays", "playing"], 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 5)
const evaluasiBank = [
{
q: "I ... up early in the morning every day.",
options: ["wake", "wakes", "waking", "woke"],
a: 0,
exp: "Subjek 'I' menggunakan kata kerja bentuk dasar (Verb-1) yaitu 'wake'."
},
{
q: "Sinta ... to school with her friends every morning.",
options: ["walk", "walks", "walking", "walked"],
a: 1,
exp: "Subjek tunggal 'Sinta' (kata ganti She) pada Simple Present Tense menggunakan verb+s/-es yaitu 'walks'."
},
{
q: "Which one is a good opening sentence for a descriptive paragraph about a friend?",
options: ["This is my best friend, Budi.", "What is your name?", "Goodbye, see you tomorrow.", "Good morning, Sir."],
a: 0,
exp: "'This is my best friend, Budi' adalah kalimat pembuka deskripsi teman."
},
{
q: "They ... English lessons on Tuesday.",
options: ["has", "have", "having", "had"],
a: 1,
exp: "Subjek 'They' menggunakan 'have' dalam Simple Present Tense."
},
{
q: "Which sentence describes someone's regular activity (kebiasaan)?",
options: ["I am thirteen years old", "I live in Ambon", "I play badminton every Sunday", "My name is Ani"],
a: 2,
exp: "'I play badminton every Sunday' menyatakan kegiatan rutin atau kebiasaan."
}
];
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 5 (Regular Activities & Descriptive Paragraph): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 5 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
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>
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>
📊 Papan Nilai & Aktivitas Kelas
Nilai ganda per siswa otomatis diambil skor tertinggi| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Irham Soulisa | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi — Kelas 7 | 80 | 100% | Refleksi Perkalian: 1 | Evaluasi: Perkalian Dasar (1-10) |
| fadil | Menemukan Fakta Eksplisit Penguatan Literasi Dasar — Kelas 7 | 60 | 100% | Refleksi Fakta Eksplisit: Misi Detektif Fakta Eksplisit Selesai! | Evaluasi: Menemukan Fakta Eksplisit |
| ismail assel | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi — Kelas 7 | 80 | 100% | Refleksi Perkalian: Misi Perkalian Selesai! | Evaluasi: Perkalian Dasar (1-10) |
| fikram bahtiar | penjumlahan 1-100 Penguatan Numerasi — Kelas 7 | 20 | 100% | Refleksi Penjumlahan: Misi Penjumlahan Selesai! | Evaluasi: Penjumlahan Bilangan (1-100) |
| Siswa 1 | Bilangan Rasional Matematika — Kelas 7 | 3 | 100% | Hambatan Siswa: Tidak ada hambatan | Strategi Siswa: Tidak ada strategi khusus |
| sasasa | Bilangan Rasional Matematika — Kelas 7 | 3 | 100% | Hambatan Siswa: sas | Strategi Siswa: sas |
| Coba1 | Bilangan Rasional Matematika — Kelas 7 | 1 | 100% | Hambatan Siswa: 1 | Strategi Siswa: 2 |
| sasdsadasd | Bilangan Rasional Matematika — Kelas 7 | 2 | 50% | Hambatan Siswa: dasda | Strategi Siswa: asdas |
| dddddddd | Bilangan Rasional Matematika — Kelas 7 | 3 | 75% | Hambatan Siswa: Hambatan | Strategi Siswa: Strategi |