Kelas 7
Bahasa Inggris
Culinary and Me : 3 Descriptive Text about Favorite Snack
<!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: Descriptive Text about Favorite Snack 🥟</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: #fff7ed;
background-image: radial-gradient(#ffedd5 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; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="book-open-check" 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-orange-800 uppercase tracking-widest">Bab 2 - TP 3: Multimodal Descriptive Text</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-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 -->
<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-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Descriptive Text: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600">My Favorite Snack</span> 🥟📖
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-orange-600">memahami informasi tersurat dan tersirat dari teks deskriptif multimodal</span> tentang makanan (jajanan favorit) dan meresponnya sesuai konteks.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's read and analyze the text! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Teks Deskriptif Makanan -->
<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">Tahap 1: Apa itu Teks Deskriptif Makanan? 📄</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengenal struktur dan tujuan teks deskriptif jajanan favorit.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-orange-800">Struktur Teks (Structure)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Identification (Identifikasi):</b> Pengenalan nama makanan atau jajanan yang dibahas.</li>
<li>• <b>Description (Deskripsi):</b> Penjelasan rinci mengenai bentuk, warna, rasa, tekstur, bahan utama, hingga tempat membelinya.</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-amber-800">Unsur Kebahasaan (Language Features)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• Menggunakan <b>Simple Present Tense</b> (Contoh: *It is*, *It tastes*).</li>
<li>• Menggunakan kata sifat (*adjectives*) untuk rasa dan tekstur (*delicious, crunchy, sweet*).</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu membaca sebuah poster promosi atau teks ulasan tentang martabak manis di kantin sekolah, informasi tersurat apa saja yang bisa kamu temukan di dalamnya?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Informasi tersurat adalah informasi yang <span class="text-orange-600 font-black">tertulis jelas secara langsung</span> di dalam teks.</p>
</div>
</div>
<!-- Slide 4: Materi Inti - Contoh Teks Multimodal (Martabak / Bakso) -->
<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">Materi 1: Contoh Teks Deskriptif Makanan 📝</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md space-y-5">
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 space-y-3">
<h4 class="font-black text-orange-900 text-xl text-center">My Favorite Snack: Indonesian Martabak</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed text-center italic">
"Martabak manis is my favorite snack in Indonesia. It is a thick and sweet pancake filled with chocolate, cheese, and crushed peanuts. The texture is soft on the inside and a bit crunchy on the edges. When you take a bite, it tastes extremely sweet and savory. I usually buy it at the local street food stall near my house every weekend."
</p>
</div>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm font-bold text-slate-700">
<div class="bg-amber-50 p-4 rounded-xl border border-amber-200">
<b class="text-amber-900 block mb-1">Informasi Tersurat (Explicit):</b>
<p>Isi martabak: Cokelat, keju, dan kacang tanah hancur (*chocolate, cheese, and peanuts*).</p>
</div>
<div class="bg-amber-50 p-4 rounded-xl border border-amber-200">
<b class="text-amber-900 block mb-1">Informasi Tersirat (Implicit):</b>
<p>Makanan ini sangat cocok dinikmati saat akhir pekan (*weekend*) sebagai camilan santai.</p>
</div>
</div>
</div>
</div>
<!-- Slide 5: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan analisis teks deskriptif ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-orange-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-orange-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>📖 KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-orange-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-orange-50 p-4 rounded-2xl border-2 border-orange-100 text-center">
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-amber-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🔍 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-amber-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-yellow-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>📝 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-yellow-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-amber-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9a3412] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 6: 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-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 3 (Descriptive Text)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu dalam menganalisis informasi dari teks deskriptif makanan!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-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-orange-700 bg-orange-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-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-orange-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 to-amber-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-orange-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-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-orange-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-orange-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-orange-500 to-amber-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 7: Refleksi (Paling Akhir) -->
<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 Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah menganalisis teks deskriptif tentang makanan hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu hal baru yang kamu pelajari dari struktur teks deskriptif makanan:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-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-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]">
<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, .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); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What is the first structure of a descriptive text?", opts: ["Identification", "Conclusion", "Steps"], ans: 0 },
{ q: "In the martabak text, what are the fillings?", opts: ["Chicken and soup", "Chocolate, cheese, and peanuts", "Rice and egg"], ans: 1 },
{ q: "What tense is mostly used in descriptive texts?", opts: ["Simple Present Tense", "Simple Past Tense", "Future Tense"], ans: 0 },
{ q: "The part of text that explains details (shape, taste, texture) is called...", opts: ["Identification", "Description", "Orientation"], ans: 1 },
{ q: "Information that is clearly written and stated in the text is called...", opts: ["Explicit / Tersurat", "Implicit / Tersirat", "Secret"], ans: 0 },
{ q: "What is the texture of martabak edges mentioned in the text?", opts: ["Soft", "Crunchy", "Hard"], 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 = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 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-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "What is the purpose of a descriptive text about food?",
options: ["To tell a fictional story", "To describe a specific food in detail", "To explain how to make a recipe step by step", "To persuade people to buy a car"],
a: 1,
exp: "Tujuan teks deskriptif adalah mendeskripsikan suatu objek secara rinci."
},
{
q: "The structure of descriptive text consists of...",
options: ["Orientation and Resolution", "Identification and Description", "Goal and Steps", "Arguments and Conclusion"],
a: 1,
exp: "Struktur teks deskriptif terdiri dari Identification dan Description."
},
{
q: "Information that is explicitly stated (tersurat) in the text means...",
options: ["It is hidden between lines", "It is clearly written in the text", "It is a secret", "It is false"],
a: 1,
exp: "Informasi tersurat adalah informasi yang tertulis jelas di dalam teks."
},
{
q: "Which grammatical tense is primarily used in descriptive texts?",
options: ["Simple Present Tense", "Simple Past Tense", "Simple Future Tense", "Past Continuous Tense"],
a: 0,
exp: "Teks deskriptif menggunakan Simple Present Tense."
},
{
q: "In describing food, adjectives are used to explain...",
options: ["Time and place", "Taste and texture", "People's names", "Rules of a game"],
a: 1,
exp: "Kata sifat dalam teks makanan digunakan untuk menjelaskan rasa dan tekstur."
}
];
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-orange-50 hover:border-orange-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 || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 2 TP 3: " + refleksi,
strategi: "Evaluasi: Bab 2 TP 3 Descriptive Text"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Culinary and Me : 2 Food Preferences & Opinions (Like/Don t Like)
<!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: Food Preferences & Opinions (Like/Don't Like) 😋</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: #fff7ed;
background-image: radial-gradient(#ffedd5 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; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="message-square-heart" 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-orange-800 uppercase tracking-widest">Bab 2 - TP 2: Food Preferences (Like / Don't Like)</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-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 -->
<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-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Food Preferences: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600">Like & Don't Like</span> ❤️
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu menggunakan Bahasa Inggris untuk <span class="text-orange-600">berinteraksi, mengungkapkan pendapat, dan preferensi</span> tentang makanan dan minuman favorit dalam konteks informal (<span class="text-orange-600">like / don't like</span>).
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's talk about our favorite foods! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Ungkapan Suka & Tidak Suka -->
<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">Tahap 1: Ungkapan Suka & Tidak Suka 👍👎</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana cara mengekspresikan pilihan makananmu?</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<span class="text-4xl">😍</span>
<h4 class="font-black text-xl text-emerald-800">Menyatakan Suka (Likes)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>I love...</b> (Aku sangat suka...)</li>
<li>• <b>I really like...</b> (Aku benar-benar suka...)</li>
<li>• <b>My favorite food is...</b> (Makanan favoritku adalah...)</li>
</ul>
<p class="text-xs font-bold text-emerald-700 bg-emerald-50 p-2 rounded-lg">Contoh: "I love fried chicken, it is so crispy!"</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-sm space-y-3">
<span class="text-4xl">🤢</span>
<h4 class="font-black text-xl text-rose-800">Menyatakan Tidak Suka (Dislikes)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>I don't like...</b> (Aku tidak suka...)</li>
<li>• <b>I dislike...</b> (Aku tidak menyukai...)</li>
<li>• <b>I hate...</b> (Aku benci / sangat tidak suka...)</li>
</ul>
<p class="text-xs font-bold text-rose-700 bg-rose-50 p-2 rounded-lg">Contoh: "I don't like bitter gourd (pare), it is too bitter."</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu dan teman sebangku memiliki selera makanan yang berbeda—satu suka pedas, yang satu tidak—bagaimana cara kalian menanyakannya dalam Bahasa Inggris?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Kita bisa menggunakan kalimat tanya seperti: <span class="text-orange-600 font-black">"Do you like...?"</span> atau <span class="text-orange-600 font-black">"What is your favorite food?"</span></p>
</div>
</div>
<!-- Slide 4: Materi Inti - Bertanya Jawab (Asking & Answering) -->
<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">Materi 1: Tanya Jawab Preferensi Makanan 💬</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md space-y-6">
<p class="text-lg font-bold text-slate-700">Contoh percakapan informal untuk menanyakan makanan atau minuman favorit:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-orange-50 p-5 rounded-2xl border-2 border-orange-200 space-y-3">
<h4 class="font-black text-orange-900 text-lg">Menanyakan Makanan Favorit</h4>
<div class="space-y-2 text-xs md:text-sm font-bold text-slate-700">
<p><b>Q:</b> "What is your favorite food?"</p>
<p><b>A:</b> "My favorite food is fried noodles."</p>
<p><b>Q:</b> "Do you like spicy food?"</p>
<p><b>A:</b> "Yes, I do. I love spicy food!" / "No, I don't. I prefer sweet food."</p>
</div>
</div>
<div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-3">
<h4 class="font-black text-amber-900 text-lg">Menanyakan Minuman Favorit</h4>
<div class="space-y-2 text-xs md:text-sm font-bold text-slate-700">
<p><b>Q:</b> "What is your favorite drink?"</p>
<p><b>A:</b> "I love sweet tea."</p>
<p><b>Q:</b> "Do you like coffee?"</p>
<p><b>A:</b> "No, I dislike coffee. It is too bitter for me."</p>
</div>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Mini Kuis Praktik Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Temanmu bertanya: <i>"Do you like spicy chicken?"</i> dan kamu sangat menyukainya. Respons yang tepat adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, respons tersebut menyatakan tidak suka.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">No, I don't</button>
<button onclick="alert('Hebat! Benar, \"Yes, I do. I love it!\" adalah jawaban yang antusias.')" class="px-4 py-2 bg-orange-500 text-white font-bold rounded-xl hover:bg-orange-600">Yes, I do. I love it! ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 5: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan ekspresi like/don't like ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-orange-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-orange-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>❤️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-orange-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-orange-50 p-4 rounded-2xl border-2 border-orange-100 text-center">
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-amber-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧡 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-amber-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-yellow-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>💛 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-yellow-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-amber-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9a3412] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 6: 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-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 2 (Food Preferences)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji kemampuanmu dalam mengekspresikan suka/tidak suka makanan!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-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-orange-700 bg-orange-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-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-orange-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 to-amber-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-orange-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-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-orange-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-orange-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-orange-500 to-amber-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 7: Refleksi (Paling Akhir) -->
<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 Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah berlatih mengungkapkan makanan kesukaanmu hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu kalimat makanan yang kamu suka dan satu yang tidak kamu suka:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Contoh: I love fried chicken, but I don't like coffee..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-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-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]">
<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, .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); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Which expression means kamu sangat suka?", opts: ["I love...", "I hate...", "I don't like..."], ans: 0 },
{ q: "A: 'Do you like vegetables?' -> B: 'No, ...'", opts: ["I do", "I don't", "I love"], ans: 1 },
{ q: "To ask about someone's favorite food, we say...", opts: ["What is your favorite food?", "Where do you live?", "How old are you?"], ans: 0 },
{ q: "Which one shows dislike (tidak suka)?", opts: ["I really like", "I love", "I dislike"], ans: 2 },
{ q: "A: 'What is your favorite drink?' -> B: '...'", opts: ["My favorite drink is sweet tea", "I live in Jakarta", "It is crunchy"], ans: 0 },
{ q: "If you hate coffee, you can say: 'I ... coffee.'", opts: ["love", "hate", "like"], 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 = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 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-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Which sentence shows that you really like something?",
options: ["I don't like fried chicken", "I love fried chicken", "I hate fried chicken", "I dislike fried chicken"],
a: 1,
exp: "Kata 'love' menunjukkan rasa suka yang sangat kuat."
},
{
q: "A: 'Do you like spicy noodles?' -> B: 'Yes, ...'",
options: ["I do", "I don't", "I am", "I have"],
a: 0,
exp: "Pertanyaan yang dimulai dengan 'Do you...' dijawab dengan 'Yes, I do'."
},
{
q: "To ask about someone's favorite drink, we can ask:",
options: ["What is your favorite food?", "What is your favorite drink?", "Where do you live?", "How old are you?"],
a: 1,
exp: "'What is your favorite drink?' digunakan khusus untuk menanyakan minuman favorit."
},
{
q: "Which one is an expression of dislike?",
options: ["I really like fish", "I love ice cream", "I don't like coffee", "My favorite food is pizza"],
a: 2,
exp: "'I don't like coffee' adalah ungkapan ketidaksukaan."
},
{
q: "A: 'What is your favorite food?' -> B: '...'",
options: ["I live in Jakarta", "My favorite food is meatball", "It is 13 years old", "I am fine, thank you"],
a: 1,
exp: "Pertanyaan tentang makanan favorit dijawab dengan menyebutkan jenis makanannya."
}
];
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-orange-50 hover:border-orange-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 || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 2 TP 2: " + refleksi,
strategi: "Evaluasi: Bab 2 TP 2 Food Preferences"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Culinary and Me : 1 Culinary and Me - Food & Taste
<!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: Culinary and Me - Food & Taste 🍔</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: #fff7ed;
background-image: radial-gradient(#ffedd5 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; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="utensils" 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-orange-800 uppercase tracking-widest">Bab 2 - TP 1: Food, Taste & Texture</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-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 -->
<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-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Culinary & Me: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600">Taste and Texture</span> 🍔🍜
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu memahami gagasan utama dan informasi rinci dari teks lisan serta <span class="text-orange-600">mendeskripsikan makanan favorit</span> (makanan utama, jajanan, minuman) beserta <span class="text-orange-600">rasa dan teksturnya</span>.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's explore delicious foods! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Jenis Makanan -->
<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">Tahap 1: Kategori Makanan & Minuman 🍱</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kenali jenis-jenis hidangan dalam bahasa Inggris!</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm space-y-3 text-center">
<span class="text-5xl">🍛</span>
<h4 class="font-black text-xl text-orange-800">Main Dish (Makanan Utama)</h4>
<p class="text-slate-600 font-bold text-sm">Makanan berat pengisi energi utama.</p>
<p class="text-xs font-bold text-orange-700 bg-orange-50 p-2 rounded-lg">Contoh: Fried Rice (Nasi Goreng), Noodles (Mi), Chicken Soup.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3 text-center">
<span class="text-5xl">🍢</span>
<h4 class="font-black text-xl text-amber-800">Snacks (Jajanan / Kudapan)</h4>
<p class="text-slate-600 font-bold text-sm">Makanan ringan pengganjal perut.</p>
<p class="text-xs font-bold text-amber-700 bg-amber-50 p-2 rounded-lg">Contoh: Meatball (Bakso), Martabak, Dumpling.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-yellow-200 shadow-sm space-y-3 text-center">
<span class="text-5xl">🧋</span>
<h4 class="font-black text-xl text-yellow-800">Drinks (Minuman)</h4>
<p class="text-slate-600 font-bold text-sm">Berbagai pelepas dahaga.</p>
<p class="text-xs font-bold text-yellow-700 bg-yellow-50 p-2 rounded-lg">Contoh: Sweet Tea (Teh Manis), Juice, Ice Cream.</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana cara kamu menjelaskan rasa keripik singkong yang pedas gurih atau es teh manis yang dingin kepada temanmu dalam Bahasa Inggris?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Kita butuh kosakata khusus untuk **Taste** (rasa) dan **Texture** (tekstur).</p>
</div>
</div>
<!-- Slide 4: Materi Inti - Taste & Texture -->
<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">Materi 1: Rasa & Tekstur Makanan 👅</h2>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-2">
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-orange-800 flex items-center gap-2"><i data-lucide="smile"></i> Tastes (Rasa)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b class="text-orange-600">Sweet:</b> Manis (Contoh: Sugar, Ice cream)</li>
<li>• <b class="text-orange-600">Salty:</b> Asin (Contoh: Salt, Salted fish)</li>
<li>• <b class="text-orange-600">Spicy:</b> Pedas (Contoh: Chili, Sambal)</li>
<li>• <b class="text-orange-600">Sour:</b> Asam (Contoh: Lemon, Tamarind)</li>
<li>• <b class="text-orange-600">Bitter:</b> Pahit (Contoh: Coffee, Bitter gourd/pare)</li>
<li>• <b class="text-orange-600">Savory / Umami:</b> Gurih (Contoh: Fried chicken)</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-amber-800 flex items-center gap-2"><i data-lucide="layers"></i> Textures (Tekstur)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b class="text-amber-600">Crunchy / Crispy:</b> Renyah / Garing (Kerupuk, kripik)</li>
<li>• <b class="text-amber-600">Soft:</b> Lembut (Roti tawar, spons)</li>
<li>• <b class="text-amber-600">Chewy:</b> Kenyal (Mochi, permen karet)</li>
<li>• <b class="text-amber-600">Hard:</b> Keras (Kacang tanah mentah)</li>
<li>• <b class="text-amber-600">Smooth:</b> Halus / Licin (Puding, bubur)</li>
</ul>
</div>
</div>
</div>
<!-- Slide 5: Pola Kalimat Deskripsi Makanan -->
<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-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Pola Kalimat Deskripsi ✍️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-amber-200 shadow-md space-y-6">
<p class="text-lg font-bold text-slate-700">Untuk mendeskripsikan makanan favorit, kita bisa menggunakan struktur kalimat berikut:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-2">
<h4 class="font-black text-amber-900 text-lg">Pola 1: Menggunakan "It is..."</h4>
<p class="text-slate-700 font-bold text-sm">Digunakan untuk menjelaskan rasa dan tekstur benda tunggal.</p>
<div class="bg-white p-3 rounded-xl border border-amber-200 text-amber-800 font-bold text-xs">
"I love fried chicken. <span class="text-orange-600">It is</span> crunchy and savory."
</div>
</div>
<div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-2">
<h4 class="font-black text-amber-900 text-lg">Pola 2: Menggunakan "It tastes..."</h4>
<p class="text-slate-700 font-bold text-sm">Fokus khusus untuk mendeskripsikan rasa.</p>
<div class="bg-white p-3 rounded-xl border border-amber-200 text-amber-800 font-bold text-xs">
"My favorite drink is orange juice. <span class="text-orange-600">It tastes</span> sweet and sour."
</div>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Mini Kuis Praktik Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">"Keripik singkong (cassava chips) memiliki tekstur yang renyah." Bahasa Inggris yang tepat adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, soft artinya lembut.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">It is soft</button>
<button onclick="alert('Hebat! Benar, crunchy/crispy adalah istilah untuk makanan yang renyah.')" class="px-4 py-2 bg-orange-500 text-white font-bold rounded-xl hover:bg-orange-600">It is crunchy ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan kuis kosakata makanan ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-orange-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-orange-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🍔 KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-orange-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-orange-50 p-4 rounded-2xl border-2 border-orange-100 text-center">
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-amber-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🍕 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-amber-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-yellow-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🍜 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-yellow-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-amber-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9a3412] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: 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-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 1 (Culinary & Me)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang kosakata rasa, tekstur, dan kategori makanan!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-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-orange-700 bg-orange-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-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-orange-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 to-amber-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-orange-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-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-orange-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-orange-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-orange-500 to-amber-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 8: Refleksi (Paling Akhir) -->
<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 Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari kosakata makanan, rasa, dan tekstur hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan makanan favoritmu beserta rasa dan teksturnya dalam Bahasa Inggris:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Contoh: My favorite food is fried rice. It is savory..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-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-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]">
<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, .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); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What is the taste of chili or sambal?", opts: ["Sweet", "Spicy", "Salty"], ans: 1 },
{ q: "What is the texture of crackers (kerupuk)?", opts: ["Crunchy / Crispy", "Soft", "Smooth"], ans: 0 },
{ q: "Fried rice (nasi goreng) belongs to which category?", opts: ["Drink", "Snack", "Main Dish"], ans: 2 },
{ q: "What is the taste of sugar or honey?", opts: ["Sweet", "Sour", "Bitter"], ans: 0 },
{ q: "What is the texture of mochi or bubble tea pearls?", opts: ["Hard", "Chewy (Kenyal)", "Crunchy"], ans: 1 },
{ q: "Lemon and tamarind (asam jawa) usually taste...", opts: ["Sweet", "Sour (Asam)", "Salty"], ans: 1 },
{ q: "Sweet tea (teh manis) is an example of...", opts: ["Main dish", "Drink", "Snack"], 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 = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 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-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "What is the taste of coffee without sugar?",
options: ["Sweet", "Bitter (Pahit)", "Salty", "Spicy"],
a: 1,
exp: "Kopi tanpa gula memiliki rasa pahit (bitter)."
},
{
q: "Fried chicken and french fries usually have a ... texture.",
options: ["Soft", "Crunchy / Crispy", "Chewy", "Smooth"],
a: 1,
exp: "Ayam goreng dan kentang goreng memiliki tekstur yang garing/renyah (crunchy/crispy)."
},
{
q: "Which one is classified as a 'snack' (jajanan)?",
options: ["Fried Rice", "Meatball (Bakso)", "Sweet Tea", "Mineral Water"],
a: 1,
exp: "Bakso (meatball) atau jajanan pasar umumnya dikategorikan sebagai kudapan/snack."
},
{
q: "Complete the sentence: 'Salt is ...'",
options: ["sweet", "salty (asin)", "sour", "bitter"],
a: 1,
exp: "Garam (salt) memiliki rasa asin (salty)."
},
{
q: "Which phrase is correct to describe the taste of lemon?",
options: ["It tastes sweet", "It tastes sour (asam)", "It tastes spicy", "It tastes crunchy"],
a: 1,
exp: "Lemon memiliki rasa asam (sour)."
}
];
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-orange-50 hover:border-orange-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 || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 2 TP 1: " + refleksi,
strategi: "Evaluasi: Bab 2 TP 1 Culinary & Me"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
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 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 6 mengidentifikasi dan menggunakan kalimat perbandingan, analogi, antonim, dan sinonim untuk memperkaya tulisan.
<!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 Menulis Artikel Ilmiah Populer (TP 6) 🌟</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: #fff1f2;
background-image: radial-gradient(#fecdd3 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-rose-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-rose-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="sparkles" 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-rose-800 uppercase tracking-widest">Bab 3 - TP 6: Memperkaya Tulisan (Perbandingan, Analogi, Antonim, & Sinonim)</span>
<span id="progress-text" class="text-xs font-black text-white bg-rose-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-rose-400 via-pink-500 to-red-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 TP 6 -->
<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-rose-100 text-rose-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 6: <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-red-600">Memperkaya Gaya Bahasa</span> 🌟
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Gaya Bahasa" 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-rose-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-rose-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-red-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>Mengidentifikasi <span class="text-rose-600">kalimat perbandingan & analogi</span> dalam artikel.</li>
<li>Menggunakan <span class="text-rose-600">antonim dan sinonim</span> untuk memperkaya kosakata tulisan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menyempurnakan mahakarya artikel ilmiah populer Bab 3? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Perbandingan, Analogi, Antonim, Sinonim -->
<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-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Bumbu Pemanis Kata dalam Artikel 🎨</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Empat unsur kebahasaan kunci untuk membuat artikel ilmiah populer semakin hidup dan menarik.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Perbandingan & Analogi -->
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-rose-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Perbandingan & Analogi</div>
<p class="text-slate-700 font-bold mb-3">Membandingkan dua hal berbeda untuk memperjelas maksud.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li><b>Perbandingan:</b> Menyoroti persamaan/perbedaan langsung (misal: <i>lebih besar daripada</i>).</li>
<li><b>Analogi:</b> Perbandingan kiasan (misal: <i>Otak manusia seperti spons yang menyerap air</i>).</li>
</ul>
</div>
<div class="bg-rose-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-rose-900 italic">"Membuat konsep rumit menjadi mudah dipahami."</p>
</div>
</div>
<!-- Antonim & Sinonim -->
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Antonim & Sinonim</div>
<p class="text-slate-700 font-bold mb-3">Variasi pilihan kata (diksi) untuk menghindari pengulangan membosankan.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li><b>Sinonim:</b> Persamaan kata (misal: <i>bersih = higienis, elok</i>).</li>
<li><b>Antonim:</b> Lawan kata (misal: <i>bersih × kotor</i>).</li>
</ul>
</div>
<div class="bg-pink-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-pink-900 italic">"Variasi diksi memperkaya keindahan tulisan."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Identifikasi Kaidah Kebahasaan) -->
<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-rose-600">Perbandingan, Analogi, atau Sinonim?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-rose-100 border-2 border-rose-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-rose-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 kaidah kebahasaan pada kalimat berikut:</p>
<div id="q1-text" class="text-xl text-box text-rose-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, 'analogi')" 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">Kalimat Analogi</button>
<button onclick="checkQ1(this, 'perbandingan')" 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">Kalimat Perbandingan</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-rose-600 text-white rounded-2xl font-black text-xl hover:bg-rose-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Variasi Diksi Antonim & Sinonim -->
<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-red-900 bg-red-100 inline-block px-6 py-2 rounded-2xl">Kekuatan Diksi: Sinonim & Antonim ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menghindari kebosanan pembaca dengan variasi pilihan kata yang kaya makna.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-red-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">Contoh Penerapan dalam Kalimat:</p>
<div class="bg-red-50 p-6 rounded-2xl border-2 border-red-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Lingkungan sekolah yang bersih <span class="text-rose-700">(sinonim: higienis, asri)</span> sangat kontras dengan kondisi kantin yang kotor <span class="text-red-700">(antonim dari bersih)</span>."</p>
<div class="border-t-2 border-red-200 pt-3">
<p class="text-slate-700 font-bold text-sm"><b>Manfaat:</b> Penggunaan sinonim dan antonim membuat paragraf artikel terasa hidup, dinamis, dan profesional.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?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="Diksi Kata">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Diksi & Perbandingan) -->
<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-red-600">Evaluasi Gaya Bahasa</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-red-100 border-2 border-red-400 px-6 py-2 rounded-full">
<span class="font-black text-red-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-red-600 text-white rounded-2xl font-black text-xl hover:bg-red-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Diksi & Gaya Bahasa) -->
<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-rose-600 to-red-600 tracking-wide uppercase">🏁 Balap Diksi & Gaya Bahasa 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar perbandingan, analogi, antonim, dan sinonim, 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-rose-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 6 ⛽</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-rose-500 hover:bg-rose-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#9f1239] 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-rose-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-rose-600 hover:bg-rose-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9f1239] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Akhir Bab 3 (TP 6) -->
<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 Akhir Bab 3 (TP 6) 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana kesan dan pengalamanmu menyelesaikan seluruh materi Bab 3 tentang Artikel Ilmiah Populer?</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-rose-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Luar Biasa!</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 Berkesan</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">Perlu Pengulangan</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pesan atau rangkuman kesan belajar menulis artikel ilmiah populer di Bab 3:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-rose-50 border-2 border-rose-200 focus:border-rose-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 6 & 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 Bab 3 (TP 6)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji komprehensif perbandingan, analogi, antonim, dan sinonim melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-rose-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-rose-700 bg-rose-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 6 -->
<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-rose-900 mb-2">Bab 3 Selesai Sepenuhnya!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 6: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-rose-600 to-red-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-rose-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-rose-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai akhir Bab 3 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-rose-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Keseluruhan Bab 3</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-rose-500">
<option value="100">Sangat Tuntas & Menguasai Seluruh Materi Bab 3!</option>
<option value="75">Tuntas Sebagian Besar</option>
<option value="50">Perlu Pengulangan Belajar</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-rose-600 to-red-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 Akhir Bab 3 🚀
</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-rose-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-rose-700 shadow-[0_4px_0px_#9f1239]">
<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 (Analogi vs Perbandingan)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Pikiran manusia bekerja seperti spons yang menyerap seluruh cairan di sekitarnya.\"", type: 'analogi', exp: "Merupakan perbandingan kiasan (analogi)." },
{ t: "\"Jumlah siswa kelas 8A lebih banyak daripada jumlah siswa kelas 8B.\"", type: 'perbandingan', exp: "Merupakan kalimat perbandingan langsung." },
{ t: "\"Membaca buku bagaikan membuka jendela dunia yang luas.\"", type: 'analogi', exp: "Perbandingan kiasan sifat atau keadaan disebut analogi." },
{ t: "\"Kadar kebersihan sekolah ini jauh lebih baik dibandingkan tahun lalu.\"", type: 'perbandingan', exp: "Perbandingan langsung antara dua waktu/keadaan." }
];
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, typeChoosed) {
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 = (typeChoosed === currentQ1Data.type);
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.type === 'analogi') 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.add('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Diksi)
let countQ2 = 0;
const q2Bank = [
{
story: "Penulis menggunakan kata 'bersih' di paragraf pertama, lalu menggunakan kata 'higienis' dan 'asri' pada paragraf berikutnya untuk menghindari pengulangan.",
q: "Penggunaan variasi kata tersebut memanfaatkan kaidah...",
ops: ["Sinonim (persamaan kata)", "Antonim (lawan kata)", "Kalimat tanya berita"],
ans: 0,
exp: "Penggunaan kata yang berbeda arti sama (bersih, higienis, asri) adalah sinonim."
},
{
story: "Penulis mempertentangkan kata 'bersih' dengan kata 'kotor' untuk menggambarkan perbedaan kondisi dua kantin sekolah.",
q: "Penerapan kata berlawanan arti ini disebut...",
ops: ["Antonim (lawan kata)", "Sinonim kata", "Kalimat imperatif"],
ans: 0,
exp: "Hubungan kata berlawanan arti (bersih dan kotor) disebut antonim."
}
];
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.add('hidden');
}
generateQ2();
// Racing Game TP 6
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Persamaan kata atau padanan kata disebut...", a: "SINONIM" },
{ q: "Lawan kata atau pertentangan makna kata disebut...", a: "ANTONIM" },
{ q: "Perbandingan kiasan untuk menjelaskan sesuatu secara menarik disebut...", a: "ANALOGI" },
{ q: "Kalimat yang menyoroti perbedaan atau persamaan langsung disebut kalimat...", a: "PERBANDINGAN" },
{ q: "Pilihan kata yang tepat dan selaras dalam menulis disebut...", a: "DIKSI" }
];
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-rose-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('Luar Biasa')) btn.classList.add('border-rose-400', 'bg-rose-50');
else if(btn.innerText.includes('Berkesan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 6
const evaluasiBank = [
{
q: `Apa fungsi utama dari penggunaan sinonim dan antonim dalam penulisan artikel ilmiah populer?`,
options: [`Memperkaya pilihan kata (diksi) dan menghindari pengulangan kata yang membosankan`, `Membuat paragraf artikel menjadi sangat singkat`, `Menghilangkan seluruh fakta dalam tulisan`, `Mengubah artikel menjadi puisi tradisional`],
a: 0,
exp: "Sinonim dan antonim memperkaya variasi diksi agar tulisan lebih hidup dan menarik."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat analogi?`,
options: [`Pikiran yang terbuka bagaikan parasut yang hanya berfungsi saat terbuka`, `Jumlah buku di perpustakaan lebih banyak daripada di koperasi`, `Hari ini cuaca sangat panas sekali`, `Siswa kelas 8 belajar dengan giat`],
a: 0,
exp: "Analogi adalah perbandingan kiasan yang menyamakan pikiran dengan parasut."
},
{
q: `Hubungan kata yang memiliki makna berlawanan (seperti bersih dan kotor) disebut sebagai...`,
options: [`Antonim`, `Sinonim`, `Homofon`, ` Akronim`],
a: 0,
exp: "Lawan kata atau pertentangan makna disebut antonim."
},
{
q: `Apa perbedaan antara kalimat perbandingan langsung dan kalimat analogi?`,
options: [`Perbandingan menyoroti persamaan/perbedaan nyata secara langsung, sedangkan analogi menggunakan perbandingan kiasan`, `Perbandingan hanya digunakan dalam matematika`, `Analogi tidak menggunakan bahasa sama sekali`, `Tidak ada perbedaan`],
a: 0,
exp: "Perbandingan bersifat langsung, sedangkan analogi bersifat kiasan."
},
{
q: `Secara keseluruhan, tujuan pembelajaran Bab 3 membimbing peserta didik untuk...`,
options: [`Mampu memahami, merencanakan data, dan menulis artikel ilmiah populer secara kreatif`, `Menghafal seluruh kamus bahasa`, `Menjual artikel cetak di pasar umum`, `Mengabaikan aturan tata bahasa`],
a: 0,
exp: "Kompetensi akhir Bab 3 mencakup penguasaan utuh penulisan artikel ilmiah populer."
}
];
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-rose-50 hover:border-rose-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 || "Bab 3 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Akhir Bab 3 (TP 6): " + refleksi,
strategi: "Evaluasi Akhir TP 6: Memperkaya Tulisan (Perbandingan, Analogi, Antonim, & Sinonim)"
}, "*");
} else {
alert("Laporan Akhir Bab 3 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 5 merancang kerangka dan menulis draf artikel ilmiah populer berdasarkan data yang telah direncanakan.
<!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 Menulis Artikel Ilmiah Populer (TP 5) 📝</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: #fdf4ff;
background-image: radial-gradient(#f5d0fe 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-fuchsia-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-fuchsia-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="pen-tool" 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-fuchsia-800 uppercase tracking-widest">Bab 3 - TP 5: Kerangka & Penulisan Draf Artikel Ilmiah Populer</span>
<span id="progress-text" class="text-xs font-black text-white bg-fuchsia-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-fuchsia-400 via-pink-500 to-rose-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 TP 5 -->
<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-fuchsia-100 text-fuchsia-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 5: <span class="text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-rose-600">Menulis Draf Artikel</span> 📝
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Menulis Draf" 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-fuchsia-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-fuchsia-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-rose-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>Merancang <span class="text-fuchsia-600">kerangka tulisan</span> artikel ilmiah populer.</li>
<li>Menulis <span class="text-fuchsia-600">draf artikel utuh</span> berdasarkan data yang direncanakan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap merangkai kata menjadi karya tulis ilmiah yang memukau? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Kerangka & Struktur Artikel -->
<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-fuchsia-900 bg-fuchsia-100 inline-block px-6 py-2 rounded-2xl">Struktur & Kerangka Artikel 🏗️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Tiga bagian utama dalam menyusun kerangka penulisan artikel ilmiah populer.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- Pendahuluan -->
<div class="bg-white p-6 rounded-3xl border-2 border-fuchsia-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-fuchsia-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Pendahuluan</div>
<p class="text-slate-700 font-bold mb-3">Menarik perhatian pembaca, memaparkan latar belakang masalah, dan menyatakan pendapat utama (opini).</p>
</div>
<div class="bg-fuchsia-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-fuchsia-900 italic">"Pengenalan isu menarik seputar sekolah."</p>
</div>
</div>
<!-- Isi / Pembahasan -->
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Isi & Pembahasan</div>
<p class="text-slate-700 font-bold mb-3">Menyajikan alasan pendukung, data fakta, hasil wawancara, atau kuesioner yang memperkuat argumen.</p>
</div>
<div class="bg-pink-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-pink-900 italic">"Pembeberan data nyata dan analisis."</p>
</div>
</div>
<!-- Penutup -->
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-rose-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">3. Penutup (Simpulan)</div>
<p class="text-slate-700 font-bold mb-3">Merangkum inti pembahasan secara singkat serta memberikan solusi atau ajakan bertindak bagi pembaca.</p>
</div>
<div class="bg-rose-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-rose-900 italic">"Kesimpulan dan saran konstruktif."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Struktur Kerangka) -->
<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-fuchsia-600">Bagian Struktur Artikel?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-fuchsia-100 border-2 border-fuchsia-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-fuchsia-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 bagian struktur artikel pada pernyataan berikut:</p>
<div id="q1-text" class="text-xl text-box text-fuchsia-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-3 gap-3 max-w-xl mx-auto">
<button onclick="checkQ1(this, 'pendahuluan')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Pendahuluan</button>
<button onclick="checkQ1(this, 'isi')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Isi / Pembahasan</button>
<button onclick="checkQ1(this, 'penutup')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Penutup</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-fuchsia-600 text-white rounded-2xl font-black text-xl hover:bg-fuchsia-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Panduan Menulis Draf Artikel -->
<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-pink-900 bg-pink-100 inline-block px-6 py-2 rounded-2xl">Langkah Menyusun Draf Tulisan ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengubah kerangka data hasil wawancara/kuesioner menjadi artikel utuh yang komunikatif.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-pink-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">Tahapan Penulisan Draf:</p>
<div class="bg-pink-50 p-6 rounded-2xl border-2 border-pink-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Kembangkan Kerangka:</b> Tulis paragraf demi paragraf berdasarkan poin kerangka yang telah dibuat.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Sertakan Bukti Data:</b> Masukkan kutipan wawancara atau angka kuesioner ke dalam bagian isi.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Gunakan Bahasa Populer:</b> Pastikan kalimat tidak terlalu kaku agar enak dibaca masyarakat luas.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?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="Menulis Artikel">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Penulisan Draf) -->
<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-pink-600">Evaluasi Draf Tulisan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-pink-100 border-2 border-pink-400 px-6 py-2 rounded-full">
<span class="font-black text-pink-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-pink-600 text-white rounded-2xl font-black text-xl hover:bg-pink-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Menulis Draf) -->
<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-fuchsia-600 to-rose-600 tracking-wide uppercase">🏁 Balap Menulis Draf 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar kerangka dan penulisan draf artikel, 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-fuchsia-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 5 ⛽</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-fuchsia-500 hover:bg-fuchsia-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#a21caf] 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-fuchsia-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#a21caf] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 5 -->
<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 5 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pengalamanmu merancang kerangka dan menulis draf artikel 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-fuchsia-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Seru!</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 Lancar</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">Agak Kesulitan</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan ide judul artikel ilmiah populer buatanmu:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-fuchsia-50 border-2 border-fuchsia-200 focus:border-fuchsia-500 outline-none font-medium" rows="3" placeholder="Contoh: Menjaga Kebersihan Lingkungan Sekolah Melalui Gerakan Bawa Botol Minum..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 5 & 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 5</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman kerangka dan penulisan draf artikel ilmiah populer melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-fuchsia-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-fuchsia-700 bg-fuchsia-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 5 -->
<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-fuchsia-900 mb-2">Misi TP 5 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 5: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-fuchsia-500 to-rose-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-fuchsia-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-fuchsia-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 5 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-fuchsia-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan 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-fuchsia-500">
<option value="100">Sangat Mahir Merancang Kerangka & Menulis Draf Artikel!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Bimbingan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-fuchsia-500 to-rose-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 5 🚀
</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-fuchsia-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-fuchsia-600 shadow-[0_4px_0px_#a21caf]">
<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 (Struktur Kerangka)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Bagian awal artikel yang memaparkan latar belakang masalah dan pernyataan pendapat utama.\"", type: 'pendahuluan', exp: "Ini adalah fungsi dari bagian pendahuluan artikel." },
{ t: "\"Bagian tengah artikel yang menyajikan data fakta hasil kuesioner dan alasan pendukung.\"", type: 'isi', exp: "Penyajian data fakta dan pembahasan argumen terletak pada bagian isi." },
{ t: "\"Bagian akhir artikel yang merangkum inti pembahasan dan memberikan solusi atau saran.\"", type: 'penutup', exp: "Rangkuman dan simpulan akhir berada pada bagian penutup artikel." },
{ t: "\"Paragraf pengantar yang menarik perhatian pembaca di awal teks artikel ilmiah populer.\"", type: 'pendahuluan', exp: "Paragraf pembuka penarik perhatian adalah ciri bagian pendahuluan." }
];
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 p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
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 = (typeChoosed === currentQ1Data.type);
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');
btns.forEach(b => {
if(b.textContent.toLowerCase().includes(currentQ1Data.type)) b.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.add('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Penulisan Draf)
let countQ2 = 0;
const q2Bank = [
{
story: "Siswa sedang menulis bagian tengah artikelnya dengan memasukkan angka persentase hasil kuesioner kebersihan sekolah.",
q: "Bagian struktur artikel manakah yang sedang ditulis oleh siswa tersebut?",
ops: ["Bagian isi / pembahasan", "Bagian judul sampul", "Bagian penutup simpulan"],
ans: 0,
exp: "Penyajian data hasil kuesioner dan fakta pendukung berada di bagian isi artikel."
},
{
story: "Di akhir tulisannya, seorang siswa menuliskan ajakan agar seluruh warga sekolah bersama-sama menjaga kebersihan lingkungan.",
q: "Bagian struktur apa yang sedang disusun siswa tersebut?",
ops: ["Bagian penutup (simpulan dan saran)", "Bagian pendahuluan masalah", "Bagian daftar pustaka"],
ans: 0,
exp: "Ajakan dan rangkuman akhir merupakan bagian penutup dari sebuah artikel."
}
];
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.add('hidden');
}
generateQ2();
// Racing Game TP 5
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Bagian awal artikel yang memaparkan latar belakang masalah disebut...", a: "PENDAHULUAN" },
{ q: "Bagian tengah artikel yang menyajikan fakta dan data pembahasan disebut...", a: "ISI" },
{ q: "Bagian akhir artikel yang berisi rangkuman dan saran disebut...", a: "PENUTUP" },
{ q: "Sebelum menulis draf lengkap, penulis wajib membuat kerangka...", a: "TULISAN" },
{ q: "Hasil wawancara dan kuesioner dimasukkan ke dalam bagian...", a: "PEMBAHASAN" }
];
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-fuchsia-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('Seru')) btn.classList.add('border-fuchsia-400', 'bg-fuchsia-50');
else if(btn.innerText.includes('Lancar')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 5
const evaluasiBank = [
{
q: `Apa saja tiga bagian struktur utama dalam menyusun kerangka artikel ilmiah populer?`,
options: [`Pendahuluan, isi (pembahasan), dan penutup`, `Judul, daftar pustaka, dan sampul`, `Kata pengantar, biografi, dan indeks`, `Lampiran data, kuesioner, dan catatan kaki`],
a: 0,
exp: "Tiga struktur inti penulisan artikel adalah pendahuluan, isi, dan penutup."
},
{
q: `Bagian mana dari artikel yang berfungsi untuk menarik perhatian pembaca serta memaparkan isu permasalahan?`,
options: [`Pendahuluan`, `Penutup`, `Daftar pustaka`, `Lampiran angka`],
a: 0,
exp: "Pendahuluan berfungsi menarik minat pembaca dan mengenalkan latar belakang masalah."
},
{
q: `Di manakah tempat yang paling tepat untuk memasukkan data hasil wawancara atau kuesioner dalam draf artikel?`,
options: [`Bagian isi / pembahasan`, `Bagian judul paling atas`, `Bagian penutup simpulan`, `Bagian nama pengarang`],
a: 0,
exp: "Data fakta dan hasil riset dipaparkan secara mendalam pada bagian isi artikel."
},
{
q: `Apa tujuan utama dari pembuatan kerangka tulisan sebelum mulai menulis draf artikel?`,
options: [`Agar alur penulisan terstruktur rapi, logis, dan tidak melenceng dari topik`, `Agar jumlah kata langsung mencapai satu juta`, `Supaya penulis tidak perlu membaca data riset`, `Agar artikel berbentuk cerita fiksi`],
a: 0,
exp: "Kerangka menjaga keteraturan struktur dan alur logis penulisan."
},
{
q: `Bagian penutup dalam sebuah artikel ilmiah populer biasanya berisi...`,
options: [`Rangkuman inti pembahasan serta saran atau solusi konstruktif`, `Kisah masa kecil penulis`, `Daftar harga buku pelajaran`, `Rumus kimia laboratorium`],
a: 0,
exp: "Penutup memuat simpulan ringkas dan saran atau ajakan solutif."
}
];
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-fuchsia-50 hover:border-fuchsia-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.add('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 5 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 5 Bab 3: " + refleksi,
strategi: "Evaluasi TP 5: Kerangka & Penulisan Draf Artikel Ilmiah Populer"
}, "*");
} else {
alert("Laporan TP 5 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>