Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
๐ Pilih Materi Pelajaran Belajar
Kelas 7
Penguatan Numerasi
penjumlahan 1-100
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Dasar: Petualangan Penjumlahan (1-100) โ</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fffbeb;
background-image: radial-gradient(#fde68a 1.2px, transparent 1.2px);
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:
Kelas 7
Bahasa Inggris
Home Sweet Home : 4 Procedure Text (Recycling & Crafting) โป๏ธ
<!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: Procedure Text (Recycling & Crafting) โป๏ธ๐ฆ</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: #f0fdf4;
background-image: radial-gradient(#dcfce7 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-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="recycle" 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-emerald-800 uppercase tracking-widest">Bab 3 - TP 4: Procedure Text (Recycling & Crafting)</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-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-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-sm font-black uppercase tracking-widest shadow-sm">
Fase D โข Kurikulum Merdeka (10 Slides)
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Procedure Text: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Recycling & Crafting</span> โป๏ธ๐ฆ
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu memahami alur informasi dari <span class="text-emerald-600">teks prosedur</span> dan mempresentasikan gagasan secara tertulis atau multimodal untuk menjelaskan langkah-langkah melakukan sesuatu (misalnya, <span class="text-emerald-600">memilah sampah atau membuat kerajinan dari bahan bekas</span>).
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's learn step-by-step instructions! ๐</p>
</div>
</div>
<!-- Slide 2: Apa itu Teks Prosedur? -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Slide 2: Mengenal Teks Prosedur (Procedure Text) ๐</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Apa fungsi dan tujuan dari teks prosedur?</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">
<h4 class="font-black text-xl text-emerald-800">Definisi & Tujuan (Definition & Purpose)</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
Teks prosedur adalah teks yang memberikan petunjuk, instruksi, atau langkah-langkah bagaimana sesuatu dapat dilakukan atau dibuat secara berurutan.
</p>
<p class="text-xs font-bold text-emerald-700 bg-emerald-50 p-2 rounded-lg">Tujuan utamanya: To explain how to do or make something clearly.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Struktur Umum (Generic Structure)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Goal / Title:</b> Judul atau tujuan (misal: *How to Make a Pencil Case*).</li>
<li>โข <b>Materials / Tools:</b> Bahan dan alat yang diperlukan.</li>
<li>โข <b>Steps / Methods:</b> Langkah-langkah pembuatan secara berurutan.</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Unsur Kebahasaan Teks Prosedur -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Slide 3: Unsur Kebahasaan (Language Features) โ๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kaidah kebahasaan yang wajib ada dalam teks prosedur.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<h4 class="font-black text-lg text-emerald-800">1. Imperative Sentences</h4>
<p class="text-slate-600 font-bold text-sm">Kalimat perintah yang diawali kata kerja dasar (Verb-1).</p>
<p class="text-xs font-bold text-emerald-700 bg-emerald-50 p-2 rounded-lg">Contoh: *Cut, Fold, Glue, Clean*.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-lg text-teal-800">2. Action Verbs</h4>
<p class="text-slate-600 font-bold text-sm">Kata kerja tindakan fisik yang menunjukkan aktivitas.</p>
<p class="text-xs font-bold text-teal-700 bg-teal-50 p-2 rounded-lg">Contoh: *Put, Wash, Mix, Take*.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-green-200 shadow-sm space-y-3">
<h4 class="font-black text-lg text-green-800">3. Connectives / Connectors</h4>
<p class="text-slate-600 font-bold text-sm">Kata hubung urutan untuk menyusun langkah.</p>
<p class="text-xs font-bold text-green-700 bg-green-50 p-2 rounded-lg">Contoh: *First, Next, Then, Finally*.</p>
</div>
</div>
</div>
<!-- Slide 4: Contoh 1 - Memilah Sampah (Sorting Waste) -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Slide 4: Contoh Teks 1 - Sorting Waste (Memilah Sampah) ๐๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menerapkan prosedur pemilahan sampah di rumah.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md space-y-4">
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-100 space-y-2">
<h4 class="font-black text-emerald-900 text-lg">How to Sort Household Waste Properly</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
<b>Goal:</b> Cleaning and keeping the environment healthy by sorting waste.<br>
<b>Materials/Tools:</b> Two bins (Organic and Inorganic bins), gloves.<br>
<b>Steps:</b><br>
1. <b>First</b>, wear your gloves to keep your hands clean.<br>
2. <b>Second</b>, separate food scraps and leaves into the organic bin.<br>
3. <b>Next</b>, put plastic bottles, paper, and cans into the inorganic bin.<br>
4. <b>Finally</b>, throw the bins into the proper large garbage disposal outside.
</p>
</div>
</div>
</div>
<!-- Slide 5: Latihan Analisis Teks Memilah Sampah -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Slide 5: Analisis Teks Memilah Sampah ๐</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Uji pemahaman informasi tersurat dari teks sebelumnya.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<p class="text-lg font-bold text-slate-700">Pertanyaan: Where should we put plastic bottles and paper based on the text?</p>
<div class="space-y-3">
<button onclick="alert('Kurang tepat, food scraps dan leaves masuk ke organic bin.')" class="w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold hover:bg-emerald-50">A. Into the organic bin</button>
<button onclick="alert('Hebat! Benar, plastic bottles dan paper dimasukkan ke inorganic bin.')" class="w-full text-left p-4 bg-emerald-500 text-white border-2 border-emerald-700 rounded-xl font-bold">B. Into the inorganic bin โ
</button>
<button onclick="alert('Kurang tepat.')" class="w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold hover:bg-emerald-50">C. Under the bed</button>
</div>
</div>
</div>
<!-- Slide 6: Contoh 2 - Kerajinan dari Bahan Bekas (Recycled Craft) -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Slide 6: Contoh Teks 2 - Recycled Craft (Kerajinan Botol) ๐จ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Membuat tempat pensil dari botol plastik bekas.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md space-y-4">
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-100 space-y-2">
<h4 class="font-black text-teal-900 text-lg">How to Make a Pencil Holder from Used Plastic Bottles</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
<b>Goal:</b> Turning unused plastic bottles into a useful desk organizer.<br>
<b>Tools & Materials:</b> An empty plastic bottle, cutter, scissors, colorful papers, glue.<br>
<b>Steps:</b><br>
1. <b>First</b>, wash the empty plastic bottle and dry it completely.<br>
2. <b>Second</b>, cut the bottom half of the bottle carefully using scissors.<br>
3. <b>Then</b>, wrap the outside of the bottle with colorful paper using glue.<br>
4. <b>Finally</b>, put your pencils and pens inside your new pencil holder!
</p>
</div>
</div>
</div>
<!-- Slide 7: Kosakata Tambahan (Vocabulary Booster) -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Slide 7: Kosakata Penting (Vocabulary Booster) ๐</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kata kerja dan istilah yang sering muncul dalam teks prosedur.</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">
<h4 class="font-black text-xl text-emerald-800">Action Verbs (Kata Kerja Tindakan)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Cut:</b> Memotong</li>
<li>โข <b>Fold:</b> Melipat</li>
<li>โข <b>Glue:</b> Menempelkan / Mengelem</li>
<li>โข <b>Wrap:</b> Membungkus</li>
<li>โข <b>Wash:</b> Mencuci</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Sequence Connectors (Kata Urutan)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>First:</b> Pertama</li>
<li>โข <b>Second:</b> Kedua</li>
<li>โข <b>Next / Then:</b> Selanjutnya / Lalu</li>
<li>โข <b>After that:</b> Setelah itu</li>
<li>โข <b>Finally:</b> Terakhir / Akhirnya</li>
</ul>
</div>
</div>
</div>
<!-- Slide 8: 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-emerald-600 to-teal-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 teks prosedur 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-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">
<span>โป๏ธ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 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-emerald-50 p-4 rounded-2xl border-2 border-emerald-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-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">
<span>๐ฆ KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 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-teal-50 p-4 rounded-2xl border-2 border-teal-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-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">
<span>๐จ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 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-green-50 p-4 rounded-2xl border-2 border-green-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-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi ๐
</button>
</div>
</div>
<!-- Slide 9: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">๐ Ujian Akhir Bab 3 (TP 4)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang teks prosedur memilah sampah dan kerajinan!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-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-emerald-800 bg-emerald-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-emerald-900 mb-2">Bab 3 Completed! ๐</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-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-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-emerald-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-emerald-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-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru ๐
</button>
</div>
</div>
</div>
<!-- Slide 10: Refleksi Akhir Bab 3 -->
<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">Slide 10: Refleksi Akhir Bab 3 ๐ญ</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah menuntaskan seluruh materi Bab 3 (Home Sweet Home)?</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 paling menarik dari materi kerajinan atau pemilahan sampah:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" 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-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-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 main purpose of a procedure text?", opts: ["To explain how to make or do something", "To tell a fictional story", "To describe a specific person"], ans: 0 },
{ q: "Which one is part of the generic structure of a procedure text?", opts: ["Goal, Materials, Steps", "Orientation, Complication", "Identification, Description"], ans: 0 },
{ q: "Words like 'First, Next, Then, Finally' are called...", opts: ["Sequence connectors", "Nouns", "Pronouns"], ans: 0 },
{ q: "In sorting waste, food scraps should be put into...", opts: ["Organic bin", "Inorganic bin", "Pencil case"], ans: 0 },
{ q: "To make a pencil holder from a bottle, what tool is used to cut it?", opts: ["Scissors or cutter", "Spoon", "Pillow"], ans: 0 },
{ q: "Which word is an action verb in a craft procedure?", opts: ["Cut", "Happy", "Tall"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `๐ SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-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 primary purpose of a procedure text?",
options: ["To explain how to do or make something step by step", "To entertain readers with a funny story", "To describe a specific animal", "To report breaking news"],
a: 0,
exp: "Tujuan utama teks prosedur adalah menjelaskan cara melakukan atau membuat sesuatu langkah demi langkah."
},
{
q: "Which part of a procedure text lists the things needed?",
options: ["Goal", "Materials / Tools", "Orientation", "Conclusion"],
a: 1,
exp: "Bagian 'Materials / Tools' berisi daftar bahan dan alat yang diperlukan."
},
{
q: "In sorting waste, plastic bottles and papers should be placed into...",
options: ["Organic bin", "Inorganic bin", "Water tank", "Wardrobe"],
a: 1,
exp: "Botol plastik dan kertas adalah sampah anorganik (inorganic waste)."
},
{
q: "What do we call words like 'First, Second, Next, Finally' in a procedure text?",
options: ["Action verbs", "Sequence connectors", "Adjectives", "Pronouns"],
a: 1,
exp: "Kata-kata tersebut disebut sebagai sequence connectors (penghubung urutan)."
},
{
q: "When making a pencil holder from a plastic bottle, what is the first step?",
options: ["Wash the empty plastic bottle and dry it", "Throw it into the river", "Paint your bedroom", "Cook some rice"],
a: 0,
exp: "Langkah pertama yang benar adalah mencuci botol plastik kosong dan mengeringkannya."
}
];
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-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-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 3 TP 4 (10 Slides): " + refleksi,
strategi: "Evaluasi: Bab 3 TP 4 Procedure Text"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Home Sweet Home : 3 Imperative Sentences for House Cleaning
<!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: Imperative Sentences for House Cleaning ๐งฝ๐งน</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: #f0fdf4;
background-image: radial-gradient(#dcfce7 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-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="megaphone" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Bab 3 - TP 3: Imperative Sentences for Cleaning</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-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-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-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">
Imperative Sentences: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">House Cleaning Instructions</span> ๐ข๐งผ
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-600">merespon dan menggunakan kalimat perintah (imperative sentences)</span> untuk memberikan <span class="text-emerald-600">instruksi terkait kebersihan rumah</span> sesuai konteks.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's give instructions! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Kalimat Perintah (Imperative) -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Apa itu Imperative Sentences? โก</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengenal bentuk kalimat perintah positif dan negatif.</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">
<h4 class="font-black text-xl text-emerald-800">Positive Imperative (+)</h4>
<p class="text-slate-600 font-bold text-sm">Diawali langsung dengan kata kerja dasar (Verb-1).</p>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Sweep the floor!</b> (Sapu lantainya!)</li>
<li>โข <b>Clean your bedroom!</b> (Bersihkan kamarmu!)</li>
<li>โข <b>Wash the dishes!</b> (Cuci piringnya!)</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Negative Imperative (-)</h4>
<p class="text-slate-600 font-bold text-sm">Diawali dengan kata <b>"Don't"</b> untuk melarang.</p>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Don't litter!</b> (Jangan membuang sampah sembarangan!)</li>
<li>โข <b>Don't make a mess!</b> (Jangan membuat berantakan!)</li>
<li>โข <b>Don't leave dirty clothes!</b> (Jangan tinggalkan baju kotor!)</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 ibumu menyuruhmu untuk segera merapikan meja belajar dan tidak meninggalkan sampah di sana, kalimat perintah apa yang akan diucapkan?"
</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">Ibu bisa berkata: <span class="text-emerald-600 font-black">"Clean your study desk and don't leave any trash!"</span></p>
</div>
</div>
<!-- Slide 4: Materi Inti - Instruksi Kebersihan Rumah -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Instruksi Kebersihan Rumah ๐ก๐งผ</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<p class="text-lg font-bold text-slate-700">Berikut adalah contoh kalimat instruksi yang sering digunakan untuk menjaga kebersihan rumah:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 space-y-3">
<h4 class="font-black text-emerald-900 text-lg">Di Ruang Tamu & Kamar Tidur</h4>
<ul class="space-y-2 text-xs md:text-sm font-bold text-slate-700">
<li>โข <i>"Make your bed every morning."</i> (Rapikan tempat tidurmu setiap pagi.)</li>
<li>โข <i>"Put the books on the bookshelf."</i> (Letakkan buku-buku di rak buku.)</li>
<li>โข <i>"Tidy up the living room."</i> (Rapikan ruang tamu.)</li>
</ul>
</div>
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-3">
<h4 class="font-black text-teal-900 text-lg">Di Dapur & Halaman</h4>
<ul class="space-y-2 text-xs md:text-sm font-bold text-slate-700">
<li>โข <i>"Wash the plates after eating."</i> (Cuci piring setelah makan.)</li>
<li>โข <i>"Take out the trash now."</i> (Buang sampahnya sekarang.)</li>
<li>โข <i>"Sweep the yard cleanly."</i> (Sapu halaman dengan bersih.)</li>
</ul>
</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 membuang sampah sembarangan. Teguran larangan (negative imperative) yang tepat adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, itu bukan kalimat larangan.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">Sweep the floor</button>
<button onclick="alert('Hebat! Benar, \"Don\'t litter!\" adalah larangan membuang sampah sembarangan.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl hover:bg-emerald-700">Don't litter! โ
</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-emerald-600 to-teal-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 kalimat perintah kebersihan 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-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">
<span>๐ข KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 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-emerald-50 p-4 rounded-2xl border-2 border-emerald-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-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">
<span>๐งน KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 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-teal-50 p-4 rounded-2xl border-2 border-teal-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-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">
<span>๐งผ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 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-green-50 p-4 rounded-2xl border-2 border-green-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-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] 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 Bab 3 (TP 3)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang kalimat perintah kebersihan rumah!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-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-emerald-800 bg-emerald-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-emerald-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-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-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-emerald-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-emerald-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-emerald-500 to-teal-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 mempelajari kalimat perintah kebersihan rumah 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 contoh kalimat perintah atau larangan terkait kebersihan rumah:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Contoh: Don't litter! atau Sweep the floor..."></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-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-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: "An imperative sentence always starts with...", opts: ["Verb-1 (kata kerja dasar)", "A pronoun (I/you)", "A conjunction"], ans: 0 },
{ q: "Which sentence is a negative imperative (larangan)?", opts: ["Sweep the floor!", "Don't litter!", "Wash the dishes!"], ans: 1 },
{ q: "Mother says: '... the trash outside.' (buang sampah ke luar)", opts: ["Take out", "Eat", "Sleep"], ans: 0 },
{ q: "Which one is an instruction to clean the bedroom?", opts: ["Make your bed", "Drive a car", "Swim in the pool"], ans: 0 },
{ q: "To tell someone not to make a room dirty, we say...", opts: ["Don't make a mess!", "Clean the messy room!", "Make it dirty!"], ans: 0 },
{ q: "Which word starts a negative imperative sentence?", opts: ["Don't", "Do", "Are"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `๐ SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-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 is a correct positive imperative for cleaning?",
options: ["You sweep the floor", "Sweep the floor!", "Sweeping the floor", "He sweeps the floor"],
a: 1,
exp: "Kalimat perintah positif diawali langsung dengan kata kerja dasar (Verb-1) seperti 'Sweep the floor!'."
},
{
q: "Which sentence is a negative imperative (larangan) to keep the house clean?",
options: ["Clean your room!", "Don't throw rubbish everywhere!", "Wash the dishes!", "Make your bed!"],
a: 1,
exp: "'Don't throw rubbish everywhere!' adalah bentuk larangan (negative imperative)."
},
{
q: "Father says: '... the window because it is dusty.'",
options: ["Clean", "Cleans", "Cleaning", "Cleaned"],
a: 0,
exp: "Kalimat perintah menggunakan bentuk dasar kata kerja (Verb-1) yaitu 'Clean'."
},
{
q: "What is the function of imperative sentences in daily context?",
options: ["To ask a question", "To give instructions or commands", "To tell a past story", "To express a feeling"],
a: 1,
exp: "Fungsi kalimat imperatif adalah untuk memberikan instruksi atau perintah."
},
{
q: "To tell someone to put the books back on the shelf, we say...",
options: ["Put the books on the shelf!", "Take the books away!", "Hide the books!", "Don't read books!"],
a: 0,
exp: "'Put the books on the shelf!' adalah instruksi yang tepat untuk merapikan buku."
}
];
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-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-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 3 TP 3: " + refleksi,
strategi: "Evaluasi: Bab 3 TP 3 Imperative Sentences"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Home Sweet Home : 2 House Chores & Simple Present Tense
<!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: House Chores & Simple Present Tense ๐งน</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: #f0fdf4;
background-image: radial-gradient(#dcfce7 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-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="check-square" 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-emerald-800 uppercase tracking-widest">Bab 3 - TP 2: House Chores & Simple Present Tense</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-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-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-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">
House Chores & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Simple Present Tense</span> ๐งนโจ
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu memahami informasi tersurat dari teks tulis dan mengomunikasikan pengalaman tentang <span class="text-emerald-600">pekerjaan rumah tangga (house chores)</span> menggunakan <span class="text-emerald-600">Simple Present Tense</span> dalam kalimat sederhana dan majemuk.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's clean our house! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Kosakata House Chores -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Kosakata House Chores (Pekerjaan Rumah) ๐งฝ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengenal berbagai aktivitas rutin membersihkan rumah.</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">
<h4 class="font-black text-xl text-emerald-800">Common Chores (Pekerjaan Umum)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Sweep the floor:</b> Menyapu lantai</li>
<li>โข <b>Mop the floor:</b> Mengepel lantai</li>
<li>โข <b>Wash the dishes:</b> Mencuci piring</li>
<li>โข <b>Make the bed:</b> Merapikan tempat tidur</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Other Chores (Pekerjaan Lainnya)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Water the plants:</b> Menyirami tanaman</li>
<li>โข <b>Take out the trash:</b> Membuang sampah</li>
<li>โข <b>Iron the clothes:</b> Menyetrika pakaian</li>
<li>โข <b>Clean the window:</b> Membersihkan jendela</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">
"Bagaimana cara kamu menceritakan kebiasaan atau rutinitas harianmu membersihkan rumah setiap pagi 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 menggunakan <span class="text-emerald-600 font-black">Simple Present Tense</span> (bentuk kalimat untuk kebiasaan atau rutinitas).</p>
</div>
</div>
<!-- Slide 4: Materi Inti - Simple Present Tense (Positif, Negatif, Tanya) -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Simple Present Tense untuk Rutinitas โก</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-base">1. Kalimat Positif (+)</h4>
<p class="text-xs font-bold text-slate-700">Subjek (I/You/We/They) + Verb-1<br>Subjek (He/She/It) + Verb-s/es</p>
<p class="text-xs font-bold text-emerald-800 bg-white p-2 rounded-lg">Contoh: <i>"She sweeps the floor every morning."</i></p>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-base">2. Kalimat Negatif (-)</h4>
<p class="text-xs font-bold text-slate-700">Subjek + <b>don't / doesn't</b> + Verb-1</p>
<p class="text-xs font-bold text-teal-800 bg-white p-2 rounded-lg">Contoh: <i>"I don't wash the dishes at night."</i></p>
</div>
<div class="bg-green-50 p-4 rounded-2xl border-2 border-green-200 space-y-2">
<h4 class="font-black text-green-900 text-base">3. Kalimat Tanya (?)</h4>
<p class="text-xs font-bold text-slate-700"><b>Do / Does</b> + Subjek + Verb-1?</p>
<p class="text-xs font-bold text-green-800 bg-white p-2 rounded-lg">Contoh: <i>"Do you clean your room?"</i></p>
</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">"Budi ... the floor every afternoon." Kata kerja yang tepat untuk melengkapi kalimat adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, subjek Budi (He) membutuhkan tambahan -s/-es pada verb.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">sweep</button>
<button onclick="alert('Hebat! Benar, untuk subjek tunggal orang ketiga (Budi), verb-nya ditambah -s menjadi sweeps.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl hover:bg-emerald-700">sweeps โ
</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-emerald-600 to-teal-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 tentang pekerjaan rumah 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-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">
<span>๐งน KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 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-emerald-50 p-4 rounded-2xl border-2 border-emerald-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-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">
<span>๐งฝ KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 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-teal-50 p-4 rounded-2xl border-2 border-teal-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-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">
<span>โจ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 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-green-50 p-4 rounded-2xl border-2 border-green-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-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] 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 Bab 3 (TP 2)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang house chores dan simple present tense!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-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-emerald-800 bg-emerald-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-emerald-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-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-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-emerald-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-emerald-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-emerald-500 to-teal-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 mempelajari pekerjaan rumah tangga 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 pekerjaan rumah yang biasa kamu lakukan setiap hari:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Contoh: I sweep the floor every morning..."></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-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-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 'menyapu lantai' in English?", opts: ["Sweep the floor", "Wash the dishes", "Make the bed"], ans: 0 },
{ q: "She ... the dishes after dinner every night.", opts: ["wash", "washes", "washing"], ans: 1 },
{ q: "I ... sweep the floor in the morning (bentuk negatif).", opts: ["don't", "doesn't", "isn't"], ans: 0 },
{ q: "What does 'water the plants' mean?", opts: ["Menyirami tanaman", "Mencuci pakaian", "Membuang sampah"], ans: 0 },
{ q: "He ... his bed every morning.", opts: ["make", "makes", "making"], ans: 1 },
{ q: "... you clean your room on Sunday?", opts: ["Do", "Does", "Is"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `๐ SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-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: "Mother ... the clothes every morning.",
options: ["iron", "irons", "ironing", "ironed"],
a: 1,
exp: "Subjek 'Mother' (kata ganti She) menggunakan bentuk verb+s/-es yaitu 'irons' dalam Simple Present Tense."
},
{
q: "I ... not wash the dishes in the afternoon.",
options: ["do", "does", "is", "are"],
a: 0,
exp: "Subjek 'I' pada kalimat negatif Simple Present Tense menggunakan 'do not (don't)'."
},
{
q: "What does 'sweep the floor' mean in Indonesian?",
options: ["Mencuci piring", "Menyapu lantai", "Mengepel lantai", "Menyirami tanaman"],
a: 1,
exp: "'Sweep the floor' artinya menyapu lantai."
},
{
q: "Does Andi ... his bedroom every morning?",
options: ["clean", "cleans", "cleaning", "cleaned"],
a: 0,
exp: "Dalam kalimat tanya Simple Present Tense yang sudah menggunakan 'Does', kata kerja kembali ke bentuk dasar (Verb-1) yaitu 'clean'."
},
{
q: "Which sentence uses Simple Present Tense correctly for daily routine?",
options: ["They sweeps the floor", "We waters the plants", "He makes his bed every day", "She wash the dishes"],
a: 2,
exp: "'He makes his bed every day' adalah struktur kalimat positif Simple Present Tense yang tepat untuk subjek tunggal orang ketiga."
}
];
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-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-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 3 TP 2: " + refleksi,
strategi: "Evaluasi: Bab 3 TP 2 House Chores"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Home Sweet Home : 1 Home Sweet Home (Rooms & There is/There are)
<!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: Home Sweet Home (Rooms & There is/There are) ๐ </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: #f0fdf4;
background-image: radial-gradient(#dcfce7 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-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="home" 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-emerald-800 uppercase tracking-widest">Bab 3 - TP 1: Rooms, Furniture & There is/There are</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-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-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-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">
Home Sweet Home: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Rooms & Furniture</span> ๐ก๐๏ธ
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu memahami informasi rinci dari teks lisan dan mengungkapkan gagasan secara lisan untuk mendeskripsikan <span class="text-emerald-600">berbagai ruangan dan perabotan</span> menggunakan kosakata, preposisi, dan struktur kalimat <span class="text-emerald-600">There is/There are</span> yang sesuai konteks.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's explore our house! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Ruangan & Perabotan -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Rooms & Furniture (Ruangan & Perabotan) ๐๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengenal bagian-bagian rumah dan isinya dalam bahasa Inggris.</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">
<h4 class="font-black text-xl text-emerald-800">Rooms (Ruangan Rumah)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Living room:</b> Ruang tamu</li>
<li>โข <b>Bed room:</b> Kamar tidur</li>
<li>โข <b>Kitchen:</b> Dapur</li>
<li>โข <b>Bathroom:</b> Kamar mandi</li>
<li>โข <b>Dining room:</b> Ruang makan</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Furniture (Perabotan)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b>Sofa / Couch:</b> Sofa (di ruang tamu)</li>
<li>โข <b>Bed:</b> Tempat tidur (di kamar tidur)</li>
<li>โข <b>Stove:</b> Kompor (di dapur)</li>
<li>โข <b>Refrigerator:</b> Kulkas</li>
<li>โข <b>Wardrobe:</b> Lemari pakaian</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 ingin memberitahu temanmu bahwa ada satu buah tempat tidur di kamarmu, atau ada banyak buku di atas meja, frasa Bahasa Inggris apa yang harus kamu gunakan?"
</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 menggunakan <span class="text-emerald-600 font-black">"There is"</span> untuk benda tunggal (singular) dan <span class="text-emerald-600 font-black">"There are"</span> untuk benda jamak (plural).</p>
</div>
</div>
<!-- Slide 4: Materi Inti - There is / There are & Prepositions of Place -->
<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-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 1: There is/There are & Prepositions ๐</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-lg">1. Penggunaan There is & There are</h4>
<ul class="text-xs md:text-sm font-bold text-slate-700 space-y-2">
<li>โข <b>There is</b> + benda tunggal (Contoh: <i>There is a bed in my bedroom.</i>)</li>
<li>โข <b>There are</b> + benda jamak/banyak (Contoh: <i>There are two chairs in the kitchen.</i>)</li>
</ul>
</div>
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-lg">2. Prepositions of Place (Preposisi Tempat)</h4>
<ul class="text-xs md:text-sm font-bold text-slate-700 space-y-2">
<li>โข <b>In:</b> Di dalam (Contoh: <i>in the room</i>)</li>
<li>โข <b>On:</b> Di atas permukaan (Contoh: <i>on the table</i>)</li>
<li>โข <b>Under:</b> Di bawah (Contoh: <i>under the bed</i>)</li>
<li>โข <b>Next to:</b> Di sebelah (Contoh: <i>next to the sofa</i>)</li>
</ul>
</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">"There ... three books on the table." Kata yang tepat untuk melengkapi kalimat tersebut adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, is digunakan untuk benda tunggal.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">is</button>
<button onclick="alert('Hebat! Benar, are digunakan karena three books berjumlah jamak (plural).')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl hover:bg-emerald-700">are โ
</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-emerald-600 to-teal-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 tentang ruangan dan there is/there are 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-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">
<span>๐ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 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-emerald-50 p-4 rounded-2xl border-2 border-emerald-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-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">
<span>๐๏ธ KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 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-teal-50 p-4 rounded-2xl border-2 border-teal-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-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">
<span>๐๏ธ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 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-green-50 p-4 rounded-2xl border-2 border-green-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-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] 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 Bab 3 (TP 1)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang ruangan, perabotan, dan there is/there are!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-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-emerald-800 bg-emerald-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-emerald-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-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-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-emerald-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-emerald-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-emerald-500 to-teal-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 mendeskripsikan ruangan dan perabotan rumah 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 menggunakan 'There is' atau 'There are' tentang kamarmu:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Contoh: There is a bed and a desk in my room..."></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-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-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: "Where do we usually cook food?", opts: ["Kitchen", "Bathroom", "Living room"], ans: 0 },
{ q: "There ... a bed in my bedroom.", opts: ["is", "are", "am"], ans: 0 },
{ q: "There ... three chairs in the dining room.", opts: ["is", "are", "be"], ans: 1 },
{ q: "Where do we put our clothes?", opts: ["Wardrobe (lemari)", "Stove", "Bed"], ans: 0 },
{ q: "The cat is sleeping ... the table (di bawah meja).", opts: ["on", "under", "in"], ans: 1 },
{ q: "We take a bath in the...", opts: ["Bathroom", "Kitchen", "Living room"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `๐ SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-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: "There ... a big sofa in our living room.",
options: ["is", "are", "am", "be"],
a: 0,
exp: "Subjek 'a big sofa' bersifat tunggal (singular), sehingga menggunakan 'is'."
},
{
q: "Where do we usually wash our body and take a bath?",
options: ["Kitchen", "Bathroom", "Living room", "Garage"],
a: 1,
exp: "Kamar mandi (bathroom) adalah tempat untuk mandi."
},
{
q: "There ... four windows and a door in my classroom.",
options: ["is", "are", "am", "be"],
a: 1,
exp: "Subjek 'four windows' bersifat jamak (plural), sehingga menggunakan 'are'."
},
{
q: "The cat is sleeping ... the bed (di atas tempat tidur).",
options: ["in", "on", "under", "between"],
a: 1,
exp: "Preposisi 'on' digunakan untuk menunjukkan posisi di atas permukaan."
},
{
q: "Which one is an example of kitchen furniture/equipment?",
options: ["Bed", "Stove", "Sofa", "Wardrobe"],
a: 1,
exp: "Kompor (stove) adalah peralatan yang ada di dapur."
}
];
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-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-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 3 TP 1: " + refleksi,
strategi: "Evaluasi: Bab 3 TP 1 Home Sweet Home"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Culinary and Me : 5 Writing & Presenting a Simple Recipe
<!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: Writing & Presenting a Simple Recipe ๐๐ณ</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="chef-hat" 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 5: Writing & Presenting a Recipe</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">
Write & Present: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600">My Own Recipe</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">mengomunikasikan gagasan dalam bentuk teks prosedur tertulis</span> menggunakan kalimat sederhana dan majemuk tentang cara membuat makanan, serta <span class="text-orange-600">menyajikannya secara lisan</span>.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's become a master chef! ๐</p>
</div>
</div>
<!-- Slide 2: Kalimat Sederhana & Majemuk (Simple & Compound Sentences) -->
<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: Kalimat Sederhana & Majemuk ๐</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menggabungkan ide dalam menulis resep.</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">Simple Sentence (Kalimat Sederhana)</h4>
<p class="text-slate-600 font-bold text-sm">Memiliki satu gagasan utuh (Subjek + Predikat).</p>
<p class="text-xs font-bold text-orange-700 bg-orange-50 p-2 rounded-lg">Contoh: "Cut the onion." atau "Heat the oil."</p>
</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">Compound Sentence (Kalimat Majemuk)</h4>
<p class="text-slate-600 font-bold text-sm">Menggabungkan dua kalimat dengan kata hubung (*and, but, because*).</p>
<p class="text-xs font-bold text-amber-700 bg-amber-50 p-2 rounded-lg">Contoh: "Slice the onion, <b>and</b> fry it until fragrant."</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 diminta mempraktikkan cara membuat es teh manis di depan kelas sambil berbicara dalam Bahasa Inggris, kalimat pembuka apa yang akan kamu gunakan?"
</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">Kamu bisa mulai dengan: <span class="text-orange-600 font-black">"Hello everyone, today I will show you how to make..."</span></p>
</div>
</div>
<!-- Slide 4: Materi Inti - Contoh Resep Tertulis & Presentasi Lisan -->
<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: Menulis & Presentasi Resep ๐๐ฃ๏ธ</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-lg">Contoh Teks Prosedur Sederhana:</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed italic">
"<b>How to Make Sweet Tea</b><br>
<b>Ingredients:</b> A bag of tea, hot water, sugar, and ice cubes.<br>
<b>Steps:</b><br>
1. Put the tea bag into a glass of hot water.<br>
2. Add two spoons of sugar, <b>and</b> stir it well.<br>
3. Add some ice cubes <b>because</b> it is better to drink it cold."
</p>
</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-base">Tips Presentasi Lisan (Oral Presentation):</h4>
<ul class="text-xs md:text-sm font-bold text-slate-700 space-y-1 list-disc list-inside">
<li>Gunakan intonasi yang jelas dan percaya diri.</li>
<li>Gunakan kata sambung urutan: <i>First, Second, Next, Finally</i>.</li>
<li>Tutup presentasi dengan ucapan terima kasih: <i>"Thank you for watching!"</i></li>
</ul>
</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 resep dan kalimat majemuk 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 Bab 2 (TP 5)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji akhir kompetensi penulisan dan penyajian resep sederhana!</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">Bab 2 Completed!</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 Akhir Bab 2 ๐ญ</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah menuntaskan seluruh materi Bab 2 (Culinary and Me)?</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 kesan atau resep makanan apa yang paling ingin kamu coba buat:</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: "Which word is a conjunction used in compound sentences?", opts: ["And / But", "Cut", "Pan"], ans: 0 },
{ q: "What is a good opening phrase for presenting a recipe?", opts: ["Today I will show you how to make...", "Goodbye everyone", "Stop cooking"], ans: 0 },
{ q: "Which one is a compound sentence?", opts: ["Cut the onion.", "Slice the onion, and fry it.", "The onion is red."], ans: 1 },
{ q: "What should you say at the end of your presentation?", opts: ["Thank you for watching", "I don't like food", "Open the door"], ans: 0 },
{ q: "To show sequence in steps, we can use words like...", opts: ["First, Second, Next", "Tall, Short, Big", "Sweet, Sour, Salty"], ans: 0 },
{ q: "A simple sentence consists of...", opts: ["One complete thought (Subjek + Predikat)", "Five paragraphs", "Only numbers"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `๐ SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-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 one is a compound sentence (kalimat majemuk) using a conjunction?",
options: ["Boil the water.", "Mix the flour and sugar, and stir it well.", "The water is hot.", "Cut the potatoes."],
a: 1,
exp: "Kalimat majemuk menggabungkan dua klausa menggunakan kata sambung seperti 'and'."
},
{
q: "When you present your recipe in front of the class, a good opening is...",
options: ["Good morning friends, today I will show you how to make...", "Go away", "I hate cooking", "Silence please"],
a: 0,
exp: "Kalimat pembuka yang sopan dan sesuai konteks resep adalah menyapa dan menjelaskan hal yang akan dibuat."
},
{
q: "Which conjunction is best to show reason (alasan) in a sentence?",
options: ["and", "but", "because", "or"],
a: 2,
exp: "'Because' digunakan untuk menyatakan alasan."
},
{
q: "What is the final step when presenting a recipe orally?",
options: ["Saying thank you to the audience", "Running away", "Eating all the food immediately", "Crying"],
a: 0,
exp: "Menutup presentasi dengan ucapan terima kasih adalah bentuk etika komunikasi yang baik."
},
{
q: "In writing a simple recipe, sequence words like 'First, Next, Then, Finally' are used to...",
options: ["Describe a person's physical appearance", "Show the order of steps clearly", "State personal feelings", "Count money"],
a: 1,
exp: "Sequence words digunakan untuk menunjukkan urutan langkah-langkah secara runtut."
}
];
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 5: " + refleksi,
strategi: "Evaluasi: Bab 2 TP 5 Writing & Presenting"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Culinary and Me : 4 Procedure Text (Recipe & Imperative Sentences) ๐ณ
<!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: Procedure Text (Recipe & Imperative Sentences) ๐ณ</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="list-ordered" 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 4: Procedure Text (Recipe & Imperative)</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">
Procedure Text: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600">Recipe & Imperative Sentences</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">mengidentifikasi struktur teks dan unsur kebahasaan (kalimat imperatif)</span> dari sebuah teks prosedur (resep): tujuan, bahan/alat, langkah-langkah.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's learn how to cook through text! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Struktur Teks Prosedur -->
<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: Struktur Teks Prosedur (Recipe) ๐</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagian-bagian penting dalam sebuah resep masakan.</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">
<h4 class="font-black text-xl text-orange-800">1. Goal / Title</h4>
<p class="text-slate-600 font-bold text-sm">Judul atau tujuan pembuatan makanan.</p>
<p class="text-xs font-bold text-orange-700 bg-orange-50 p-2 rounded-lg">Contoh: "How to Make Fried Rice"</p>
</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">2. Ingredients & Tools</h4>
<p class="text-slate-600 font-bold text-sm">Bahan-bahan dan alat yang dibutuhkan.</p>
<p class="text-xs font-bold text-amber-700 bg-amber-50 p-2 rounded-lg">Contoh: Rice, egg, pan, stove.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-yellow-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-yellow-800">3. Steps / Methods</h4>
<p class="text-slate-600 font-bold text-sm">Langkah-langkah pembuatan secara berurutan.</p>
<p class="text-xs font-bold text-yellow-700 bg-yellow-50 p-2 rounded-lg">Contoh: First, heat the oil. Second...</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 membaca kalimat instruksi dalam resep seperti: 'Cut the onions' atau 'Heat the oil', jenis kalimat apakah itu dan apa fungsinya?"
</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">Kalimat tersebut adalah <span class="text-orange-600 font-black">kalimat perintah (imperative sentence)</span> yang selalu diawali dengan kata kerja (*verb*).</p>
</div>
</div>
<!-- Slide 4: Materi Inti - Kalimat Imperatif (Imperative Sentences) -->
<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: Kalimat Imperatif (Imperative Sentences) โก</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">Kalimat imperatif adalah kalimat perintah untuk menyuruh seseorang melakukan sesuatu. Dalam resep, kalimat ini selalu diawali dengan <b>kata kerja bentuk pertama (Verb-1)</b>.</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">Contoh Kata Kerja dalam Resep:</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>โข <b class="text-orange-600">Cut:</b> Potong</li>
<li>โข <b class="text-orange-600">Heat:</b> Panaskan</li>
<li>โข <b class="text-orange-600">Mix:</b> Aduk / Campurkan</li>
<li>โข <b class="text-orange-600">Pour:</b> Tuangkan</li>
<li>โข <b class="text-orange-600">Stir:</b> Aduk</li>
</ul>
</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">Contoh Kalimat Imperatif:</h4>
<ul class="space-y-2 text-slate-700 font-bold text-xs md:text-sm">
<li>โข <i>"<b class="text-orange-600">Heat</b> the oil in a pan."</i> (Panaskan minyak di wajan.)</li>
<li>โข <i>"<b class="text-orange-600">Slice</b> the onions thinly."</i> (Iris tipis bawang merah.)</li>
<li>โข <i>"<b class="text-orange-600">Mix</b> the ingredients together."</i> (Campurkan bahan-bahan tersebut.)</li>
</ul>
</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">Manakah kalimat di bawah ini yang merupakan kalimat imperatif (perintah)?</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, kalimat tersebut adalah pernyataan (declarative).')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">I like fried rice</button>
<button onclick="alert('Hebat! Benar, diawali dengan kata kerja \"Add\" yang berarti perintah.')" class="px-4 py-2 bg-orange-500 text-white font-bold rounded-xl hover:bg-orange-600">Add some salt to the pan โ
</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 teks prosedur 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 4 (Procedure Text)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang struktur teks prosedur dan kalimat imperatif!</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 mempelajari struktur teks prosedur dan kalimat perintah 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 contoh satu kalimat imperatif (perintah) yang biasa ada di resep memasak:</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: Slice the onion..."></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 main purpose of a procedure text (recipe)?", opts: ["To tell a story", "To explain how to make or do something", "To describe a person"], ans: 1 },
{ q: "Which one is part of the structure of a procedure text?", opts: ["Goal, Ingredients, Steps", "Identification, Description", "Orientation, Complication"], ans: 0 },
{ q: "An imperative sentence always starts with...", opts: ["A verb-1 (kata kerja)", "A noun", "An adjective"], ans: 0 },
{ q: "Which one is an imperative sentence?", opts: ["She cooks rice", "Heat the oil", "The food is delicious"], ans: 1 },
{ q: "What does 'slice' mean in a recipe?", opts: ["Memotong tipis", "Merebus", "Mencuci"], ans: 0 },
{ q: "The steps in a recipe are usually written in...", opts: ["Chronological order (berurutan)", "Random order", "Alphabetical order"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `๐ SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-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 are the main generic structures of a procedure text (recipe)?",
options: ["Orientation, Complication, Resolution", "Goal, Ingredients/Tools, Steps", "Identification, Description", "Arguments, Recommendation"],
a: 1,
exp: "Struktur teks prosedur adalah Goal, Ingredients/Tools, dan Steps."
},
{
q: "Which one is an imperative sentence (kalimat perintah)?",
options: ["You slice the onion", "Slice the onion thinly", "She slices the onion", "Slicing the onion"],
a: 1,
exp: "Kalimat perintah langsung diawali dengan kata kerja dasar (Verb-1) yaitu 'Slice'."
},
{
q: "In a recipe, 'pan', 'stove', and 'knife' belong to...",
options: ["Ingredients (bahan)", "Tools (alat)", "Steps (langkah)", "Goals (tujuan)"],
a: 1,
exp: "Wajan, kompor, dan pisau adalah peralatan (tools)."
},
{
q: "What does the word 'heat' mean in the instruction 'Heat the oil'?",
options: ["Potong", "Panaskan", "Aduk", "Tuang"],
a: 1,
exp: "'Heat' berarti memanaskan."
},
{
q: "Why does a procedure text use action verbs like pour, mix, and stir?",
options: ["To give clear instructions on how to do the steps", "To describe a person's appearance", "To tell a past story", "To state a personal opinion"],
a: 0,
exp: "Action verbs digunakan untuk memberikan instruksi langkah-langkah yang jelas."
}
];
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 4: " + refleksi,
strategi: "Evaluasi: Bab 2 TP 4 Procedure Text"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
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>
๐ Papan Nilai & Aktivitas Kelas
Nilai ganda per siswa otomatis diambil skor tertinggi| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Irham Soulisa | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi โ Kelas 7 | 80 | 100% | Refleksi Perkalian: 1 | Evaluasi: Perkalian Dasar (1-10) |
| fadil | Menemukan Fakta Eksplisit Penguatan Literasi Dasar โ Kelas 7 | 60 | 100% | Refleksi Fakta Eksplisit: Misi Detektif Fakta Eksplisit Selesai! | Evaluasi: Menemukan Fakta Eksplisit |
| ismail assel | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi โ Kelas 7 | 80 | 100% | Refleksi Perkalian: Misi Perkalian Selesai! | Evaluasi: Perkalian Dasar (1-10) |
| fikram bahtiar | penjumlahan 1-100 Penguatan Numerasi โ Kelas 7 | 20 | 100% | Refleksi Penjumlahan: Misi Penjumlahan Selesai! | Evaluasi: Penjumlahan Bilangan (1-100) |
| Siswa 1 | Bilangan Rasional Matematika โ Kelas 7 | 3 | 100% | Hambatan Siswa: Tidak ada hambatan | Strategi Siswa: Tidak ada strategi khusus |
| sasasa | Bilangan Rasional Matematika โ Kelas 7 | 3 | 100% | Hambatan Siswa: sas | Strategi Siswa: sas |
| Coba1 | Bilangan Rasional Matematika โ Kelas 7 | 1 | 100% | Hambatan Siswa: 1 | Strategi Siswa: 2 |
| sasdsadasd | Bilangan Rasional Matematika โ Kelas 7 | 2 | 50% | Hambatan Siswa: dasda | Strategi Siswa: asdas |
| dddddddd | Bilangan Rasional Matematika โ Kelas 7 | 3 | 75% | Hambatan Siswa: Hambatan | Strategi Siswa: Strategi |