Kelas 7
Bahasa Inggris
About Me : Physical Appearance & Personality
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Physical Appearance & Personality 👤</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="user" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 4: Physical Appearance & Personality</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Physical Appearance & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Personality</span> 👤
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 4):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-700">mendeskripsikan ciri-ciri fisik (physical appearance)</span> dan <span class="text-emerald-700">kepribadian (personality)</span> orang lain menggunakan kosakata yang sesuai.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's continue learning! 👇</p>
</div>
</div>
<!-- Slide 2: Physical Appearance -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Physical Appearance 👁️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Kosakata Ciri-Ciri Fisik</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-lg mt-2 space-y-4">
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Height (Tinggi Badan):</b>
<ul class="text-slate-700 font-semibold space-y-1 mt-1">
<li>• <b>Tall:</b> Tinggi</li>
<li>• <b>Short:</b> Pendek</li>
<li>• <b>Medium height:</b> Sedang</li>
</ul>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Hair (Rambut):</b>
<ul class="text-slate-700 font-semibold space-y-1 mt-1">
<li>• <b>Long / Short:</b> Panjang / Pendek</li>
<li>• <b>Curly / Straight:</b> Keriting / Lurus</li>
<li>• <b>Black / Blonde:</b> Hitam / Pirang</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 3: Personality -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Personality 🌟</h2>
<p class="text-base font-bold text-slate-500 mt-2">Kosakata Sifat / Kepribadian</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Contoh sifat atau kepribadian seseorang:</p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-1">
<ul class="text-slate-700 font-semibold space-y-2">
<li>• <b>Friendly:</b> Ramah / Bersahabat</li>
<li>• <b>Kind:</b> Baik hati</li>
<li>• <b>Smart / Clever:</b> Pintar / Cerdas</li>
</ul>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-1">
<ul class="text-slate-700 font-semibold space-y-2">
<li>• <b>Diligient:</b> Rajin</li>
<li>• <b>Funny:</b> Lucu / Menyenangkan</li>
<li>• <b>Quiet:</b> Pendiam / Tenang</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 4.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 4)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after learning about physical appearance and personality today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 4: Physical Appearance & Personality)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Which one describes physical appearance (height)?", opts: ["Tall", "Friendly", "Smart"], ans: 0 },
{ q: "Sinta is very kind and helps others. She has a good...", opts: ["personality", "book", "pencil"], ans: 0 },
{ q: "He has short curly hair. 'Hair' means...", opts: ["Rambut", "Mata", "Tinggi"], ans: 0 },
{ q: "Which one describes personality (sifat)?", opts: ["Diligient", "Short", "Long hair"], ans: 0 },
{ q: "My teacher is very smart and helpful. 'Smart' means...", opts: ["Pintar", "Pendek", "Keriting"], ans: 0 },
{ q: "Budi is tall and has black hair. 'Tall' means...", opts: ["Tinggi", "Ramah", "Baik"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 4)
const evaluasiBank = [
{
q: "Which word describes someone's height (fisik)?",
options: ["Tall", "Friendly", "Kind", "Smart"],
a: 0,
exp: "'Tall' (tinggi) adalah kosakata untuk mendeskripsikan ciri fisik."
},
{
q: "Rina always studies hard and gets good grades. She is very...",
options: ["short", "diligent", "long", "curly"],
a: 1,
exp: "'Diligent' (rajin) adalah kepribadian yang cocok untuk anak yang rajin belajar."
},
{
q: "He has short, black hair. The word 'hair' means...",
options: ["Mata", "Rambut", "Hidung", "Tinggi"],
a: 1,
exp: "'Hair' artinya rambut."
},
{
q: "Which one is an example of personality (sifat)?",
options: ["Curly hair", "Tall height", "Friendly", "Short hair"],
a: 2,
exp: "'Friendly' (ramah) adalah bentuk kepribadian atau sifat seseorang."
},
{
q: "Andi helps his friends and always smiles. He is a ... boy.",
options: ["tall", "kind", "short", "long"],
a: 1,
exp: "'Kind' (baik hati) menggambarkan kepribadian seseorang yang suka menolong."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 4 (Physical Appearance & Personality): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 4 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
About Me : Hobbies, Frequency & Tools
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Hobbies, Frequency & Tools 🎨⚽</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="palette" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 3: Hobbies, Frequency & Tools</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Hobbies, Frequency & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Tools</span> 🎨⚽
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 3):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-700">mendeskripsikan berbagai macam hobi</span> dan berbicara tentang <span class="text-emerald-700">frekuensi serta peralatan</span> yang digunakan untuk hobi tersebut.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's continue learning! 👇</p>
</div>
</div>
<!-- Slide 2: Hobbies & Frequency -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Hobbies & Frequency ⏱️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Menyatakan Hobi dan Frekuensi Melakukannya</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-2">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-teal-900 text-base">Frequency Adverbs (Frekuensi):</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• <b>Always:</b> Selalu (100%)</li>
<li>• <b>Usually:</b> Biasanya (75%)</li>
<li>• <b>Sometimes:</b> Kadang-kadang (50%)</li>
<li>• <b>Never:</b> Tidak pernah (0%)</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-teal-900 text-base">Contoh Kalimat:</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• "I <b>always</b> read books in my free time."</li>
<li>• "She <b>usually</b> plays badminton on Sunday."</li>
<li>• "We <b>sometimes</b> go swimming."</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Tools for Hobbies -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Tools for Hobbies 🛠️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Peralatan yang Digunakan untuk Hobi</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Pola kalimat menyatakan alat (*tools*): <br><i class="text-emerald-700">"I use [tool] to [hobby]."</i></p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Drawing:</b><br><span class="text-emerald-900 font-bold">"I use a pencil and paper to draw."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Cooking:</b><br><span class="text-emerald-900 font-bold">"I use a pan and stove to cook."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Reading:</b><br><span class="text-emerald-900 font-bold">"I use books and novels to read."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Playing Football:</b><br><span class="text-emerald-900 font-bold">"I use a football and shoes to play."</span>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 3.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 3)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after learning about hobbies, frequency, and tools today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 3: Hobbies, Frequency & Tools)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What tool do you need to draw pictures?", opts: ["Pencil and paper", "Stove and pan", "Football and shoes"], ans: 0 },
{ q: "I ... read books every night before sleeping (always).", opts: ["always", "never", "pan"], ans: 0 },
{ q: "What tool do you use when your hobby is cooking?", opts: ["Book", "Pan and stove", "Bicycle"], ans: 1 },
{ q: "Which one shows frequency?", opts: ["Usually", "Pencil", "Kitchen"], ans: 0 },
{ q: "To play football, we need a...", opts: ["book", "football and shoes", "pan"], ans: 1 },
{ q: "What do you use to read stories?", opts: ["Book", "Pencil", "Knife"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 3)
const evaluasiBank = [
{
q: "I like reading. I use a ... to read.",
options: ["book", "pan", "pencil", "ball"],
a: 0,
exp: "Untuk hobi membaca (reading), alat utama yang digunakan adalah buku (book)."
},
{
q: "She ... plays badminton on Sunday (menyatakan kebiasaan/frekuensi).",
options: ["usually", "book", "pan", "pencil"],
a: 0,
exp: "'Usually' adalah kata keterangan frekuensi (frequency adverb)."
},
{
q: "What tool do you use for drawing?",
options: ["Stove", "Pencil and paper", "Football", "Guitar"],
a: 1,
exp: "Pencil and paper (pensil dan kertas) adalah alat utama untuk menggambar."
},
{
q: "Budi likes cooking. He uses a ... to fry some fish.",
options: ["book", "pan", "ball", "bicycle"],
a: 1,
exp: "Wajan (pan) digunakan untuk memasak atau menggoreng."
},
{
q: "Which sentence is correct?",
options: ["I use a book to cook", "I use a pencil to draw", "I use a pan to read", "I use a ball to write"],
a: 1,
exp: "Kalimat yang logis adalah 'I use a pencil to draw'."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 3 (Hobbies, Frequency & Tools): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 3 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
About Me : Personal Identity & Introducing Others
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Personal Identity & Introducing Others 🤝</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="users" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 2: Personal Identity & Introducing Others</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Identity & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Introducing Others</span> 👥
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 2):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-700">bertanya jawab tentang identitas pribadi</span> dan <span class="text-emerald-700">memperkenalkan orang lain</span> kepada teman.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's continue learning! 👇</p>
</div>
</div>
<!-- Slide 2: Asking & Answering Personal Identity -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Asking & Answering Identity 💬</h2>
<p class="text-base font-bold text-slate-500 mt-2">Tanya Jawab Identitas Pribadi</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-lg mt-2 space-y-4">
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Nama:</b><br>
<span class="text-teal-900 font-bold">Q: "What is your name?"</span><br>
<span class="text-slate-600">A: "My name is Sinta."</span>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Tempat Tinggal:</b><br>
<span class="text-teal-900 font-bold">Q: "Where do you live?"</span><br>
<span class="text-slate-600">A: "I live in Masohi."</span>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Usia:</b><br>
<span class="text-teal-900 font-bold">Q: "How old are you?"</span><br>
<span class="text-slate-600">A: "I am 13 years old."</span>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200 space-y-1">
<b>Menanyakan Hobi:</b><br>
<span class="text-teal-900 font-bold">Q: "What is your hobby?"</span><br>
<span class="text-slate-600">A: "I like reading."</span>
</div>
</div>
</div>
</div>
<!-- Slide 3: Introducing Others -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Introducing Others 🤝</h2>
<p class="text-base font-bold text-slate-500 mt-2">Memperkenalkan Orang Lain kepada Teman</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Contoh ungkapan dan respons saat memperkenalkan teman:</p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-2">
<b>Ungkapan Pengantar:</b>
<ul class="text-slate-700 space-y-1 font-semibold">
<li>• "This is my friend, Andi."</li>
<li>• "I'd like to introduce my classmate, Rina."</li>
<li>• "Budi, this is Doni."</li>
</ul>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-2">
<b>Respons Lawan Bicara:</b>
<ul class="text-slate-700 space-y-1 font-semibold">
<li>• "Hello, Andi. Glad to know you."</li>
<li>• "Hi, Rina. Nice to meet you."</li>
<li>• "Hello, Doni. Pleased to meet you."</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 2.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 2)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after practicing personal identity and introducing others today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 2: Identity & Introducing Others)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "A: 'What is your name?' -> B: '...'", opts: ["My name is Sinta", "I live in Ambon", "I am 13 years old"], ans: 0 },
{ q: "A: 'Where do you live?' -> B: '...'", opts: ["I like reading", "I live on Jalan Merdeka", "My name is Doni"], ans: 1 },
{ q: "How do you introduce your friend to others?", opts: ["This is my friend, Andi", "Hello, my name is Budi", "Nice to meet you"], ans: 0 },
{ q: "A: 'This is my classmate, Rina.' -> B: '...'", opts: ["Good night", "Glad to know you, Rina", "Goodbye"], ans: 1 },
{ q: "A: 'How old are you?' -> B: '...'", opts: ["I am thirteen years old", "I am from Papua", "My hobby is swimming"], ans: 0 },
{ q: "To ask someone's place of living, we say...", opts: ["What is your name?", "Where do you live?", "How are you?"], ans: 1 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 2)
const evaluasiBank = [
{
q: "A: 'What is your name?' -> B: '...'",
options: ["I live in Jakarta", "My name is Joko", "I am 13 years old", "I like swimming"],
a: 1,
exp: "Pertanyaan 'What is your name?' dijawab dengan menyebutkan nama."
},
{
q: "A: 'Where do you live?' -> B: '...'",
options: ["My name is Siska", "I live on Jalan Sudirman", "I am fine", "Nice to meet you"],
a: 1,
exp: "Pertanyaan 'Where do you live?' menanyakan alamat atau tempat tinggal."
},
{
q: "Which expression is used to introduce your friend to someone else?",
options: ["How are you?", "This is my friend, Rian.", "Good morning, Sir.", "What is your hobby?"],
a: 1,
exp: "'This is my friend, Rian.' adalah kalimat untuk memperkenalkan orang lain."
},
{
q: "A: 'This is my classmate, Ani.' -> B: '...'",
options: ["Good night", "Glad to know you, Ani", "Goodbye", "See you later"],
a: 1,
exp: "Respons yang ramah saat diperkenalkan dengan teman baru adalah 'Glad to know you'."
},
{
q: "To ask someone's age, we use the question...",
options: ["Where do you live?", "What is your name?", "How old are you?", "What is your hobby?"],
a: 2,
exp: "'How old are you?' digunakan khusus untuk menanyakan usia."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 2 (Identity & Introducing Others): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 2 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
About Me : Greeting, Leave-Taking & Self-Introduction
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Greeting, Leave-Taking & Self-Introduction 👋</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md text-white">
<i data-lucide="user-check" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-xs font-extrabold text-emerald-800 uppercase tracking-widest">Bab 1 - TP 1: Greeting, Leave-Taking & Self-Introduction</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Kurikulum Merdeka • Fase D
</div>
<h1 class="text-3xl md:text-5xl font-black leading-tight text-slate-900 mt-2">
Greeting, Leave-Taking & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Self-Introduction</span> 👋
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran (TP 1):</h3>
<p class="text-xs md:text-sm font-bold text-slate-600 leading-relaxed">
Peserta didik mampu menggunakan ungkapan untuk <span class="text-emerald-700">menyapa</span>, <span class="text-emerald-700">pamit</span>, dan <span class="text-emerald-700">memperkenalkan diri sendiri</span> dengan menyebutkan <span class="text-emerald-700">nama, asal, alamat, usia, dan hobi</span>.
</p>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Let's start learning! 👇</p>
</div>
</div>
<!-- Slide 2: Greetings & Leave-Takings -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">1. Greetings & Leave-Takings 💬</h2>
<p class="text-base font-bold text-slate-500 mt-2">Ungkapan Menyapa dan Berpamitan</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-2">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-emerald-800 text-base flex items-center gap-2"><i data-lucide="sun"></i> Greetings (Menyapa)</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• <b>Good morning:</b> Selamat pagi</li>
<li>• <b>Good afternoon:</b> Selamat siang/sore</li>
<li>• <b>Hello / Hi:</b> Halo</li>
<li>• <b>How are you?:</b> Apa kabar?</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-lg space-y-3">
<h3 class="font-black text-emerald-800 text-base flex items-center gap-2"><i data-lucide="moon"></i> Leave-Takings (Berpamitan)</h3>
<ul class="text-xs md:text-sm font-bold text-slate-600 space-y-2">
<li>• <b>Goodbye / Bye:</b> Selamat tinggal</li>
<li>• <b>See you tomorrow:</b> Sampai jumpa besok</li>
<li>• <b>See you later:</b> Sampai jumpa lagi</li>
<li>• <b>Good night:</b> Selamat malam (tidur)</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Self-Introduction (Name, Origin, Address, Age, Hobby) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">2. Self-Introduction 🙋♂️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Cara Memperkenalkan Diri Sendiri</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-4">
<p class="text-xs md:text-sm font-bold text-slate-700">Contoh kalimat lengkap untuk memperkenalkan diri:</p>
<div class="grid md:grid-cols-2 gap-4 text-xs md:text-sm">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Name (Nama):</b><br><span class="text-emerald-800 font-bold">"Hello, my name is Ahmad."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Origin (Asal):</b><br><span class="text-emerald-800 font-bold">"I am from Maluku."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Address (Alamat):</b><br><span class="text-emerald-800 font-bold">"I live in Masohi."</span>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<b>Age (Usia) & Hobby (Hobi):</b><br><span class="text-emerald-800 font-bold">"I am 13 years old. I like reading."</span>
</div>
</div>
</div>
</div>
<!-- Slide 4: BATTLE PANEL MULTI-USER (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-2xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-xs font-bold text-slate-600 mt-1">Perwakilan kelompok maju ke depan! Jawab masing-masing 5 soal mengenai TP 1.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-xs">
<span>⭐ TEAM 3</span>
<span id="ifp-score-3" class="bg-green-800 px-2 py-0.5 rounded-full">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-sm font-black text-slate-800">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-2 rounded-xl font-bold text-xs text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-7xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-4xl font-black text-yellow-300 mb-6">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-6 py-3 bg-emerald-600 text-white font-black text-lg rounded-full">Mainkan Lagi 🔄</button>
</div>
</div>
<!-- Slide 5: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl font-black text-slate-900 mb-2">📝 Final Evaluation (TP 1)</h2>
<p class="text-sm font-bold text-slate-500 mb-6">Kerjakan 5 soal pilihan ganda berikut secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-xs">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-lg font-bold text-slate-800 mb-6"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-4 rounded-xl text-base font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai LMS -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-6xl mb-4 animate-bounce">🥇</div>
<h2 class="text-3xl font-black text-emerald-900 mb-2">Quiz Completed!</h2>
<p class="text-xl font-extrabold text-slate-600 mb-6">Your Score: <span id="final-score-display" class="text-white text-3xl bg-emerald-600 px-4 py-1 rounded-2xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-[2rem] max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
</div>
<div>
<label class="block text-xs font-black text-slate-700 uppercase mb-1">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 text-sm">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-3 bg-emerald-600 text-white font-black rounded-xl shadow-md hover:bg-emerald-700 transition">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">Reflection 💭</h2>
<p class="text-base font-bold text-slate-600">How do you feel after learning to greet, say goodbye, and introduce yourself today?</p>
</div>
<div class="grid grid-cols-3 gap-4 mt-4 w-full max-w-2xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-green-400 transition">
<div class="text-3xl mb-1">😎</div>
<h3 class="font-black text-sm text-slate-700">Easy!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-yellow-400 transition">
<div class="text-3xl mb-1">🤔</div>
<h3 class="font-black text-sm text-slate-700">So-so</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-4 rounded-2xl text-center hover:border-red-400 transition">
<div class="text-3xl mb-1">🤯</div>
<h3 class="font-black text-sm text-slate-700">Hard</h3>
</button>
</div>
<div class="w-full max-w-2xl mt-4 bg-white p-4 rounded-2xl border-2 border-slate-200">
<label class="block font-black text-slate-700 text-xs mb-1">Write your notes or interesting part:</label>
<textarea id="refleksi-teks" class="w-full p-3 rounded-xl bg-emerald-50 border border-emerald-200 text-xs outline-none" rows="2" placeholder="Write here..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-4 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-200 text-slate-700 font-black text-sm disabled:opacity-40">
<i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-6 py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm shadow-[0_3px_0px_#047857]">
Selanjutnya <i data-lucide="rocket" class="w-4 h-4"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// MULTI-USER IFP GAME DATA (TP 1: Greeting, Leave-Taking, Self-Introduction)
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What do you say when you meet your teacher in the morning?", opts: ["Good morning, Sir", "Good night, Sir", "Goodbye"], ans: 0 },
{ q: "Which one is an expression of leave-taking?", opts: ["How are you?", "See you tomorrow", "Nice to meet you"], ans: 1 },
{ q: "A: 'Hello, my name is Budi.' -> B: '...'", opts: ["I am from Ambon", "Nice to meet you, Budi", "Good night"], ans: 1 },
{ q: "To state your age, you say...", opts: ["I live in Masohi", "I am 13 years old", "I like reading"], ans: 1 },
{ q: "Which sentence tells about hobby?", opts: ["I live in Jakarta", "My name is Sinta", "I like swimming"], ans: 2 },
{ q: "When you want to go home in the afternoon, you say...", opts: ["Good morning", "Goodbye", "How do you do?"], ans: 1 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 FINISHED!<br>Team ${group} completed 5 questions!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Correct!";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-2 bg-rose-500 text-white font-bold rounded-xl text-xs";
btns[correctIdx].className = "w-full text-left p-2 bg-green-500 text-white font-bold rounded-xl text-xs";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Incorrect!";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `TEAM ${group} WIN FIRST! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-50');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Easy')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('So-so')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// EVALUASI INDIVIDU (TP 1)
const evaluasiBank = [
{
q: "It is 07.00 AM. You meet your friend at school. You say...",
options: ["Good evening", "Good morning", "Good night", "Goodbye"],
a: 1,
exp: "Pukul 07.00 pagi menggunakan sapaan 'Good morning'."
},
{
q: "Which expression is used when you want to leave someone?",
options: ["Nice to meet you", "See you tomorrow", "How are you?", "Good morning"],
a: 1,
exp: "'See you tomorrow' adalah ungkapan berpamitan (leave-taking)."
},
{
q: "Hello, my name ... Doni. I live in Ambon.",
options: ["am", "is", "are", "be"],
a: 1,
exp: "Subjek 'my name' adalah tunggal, sehingga menggunakan 'is'."
},
{
q: "To state your age in English, you say...",
options: ["I am 13 years old", "I live in Jakarta", "My hobby is reading", "I am from Papua"],
a: 0,
exp: "'I am 13 years old' digunakan untuk menyatakan usia."
},
{
q: "Which sentence shows someone's hobby?",
options: ["I am a student", "I live on Jalan Melati", "I like swimming", "My name is Rina"],
a: 2,
exp: "'I like swimming' menyatakan hobi seseorang."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerText = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-sm hover:bg-emerald-50 hover:border-emerald-300 transition cursor-pointer";
btn.innerText = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>CORRECT!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-4 rounded-xl text-sm font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>INCORRECT.</b><br>${explanation}`;
}
setTimeout(() => { evalIndex++; loadEvaluasi(); }, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Masukkan nama lengkapmu terlebih dahulu!"); return; }
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Mission Complete!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 1 (Greeting, Leave-Taking, Self-Intro): " + refleksi,
strategi: "Evaluasi: Bab 1 TP 1 Kelas 7"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 6 mengidentifikasi dan menggunakan kalimat perbandingan, analogi, antonim, dan sinonim untuk memperkaya tulisan.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Menulis Artikel Ilmiah Populer (TP 6) 🌟</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fff1f2;
background-image: radial-gradient(#fecdd3 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-rose-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-rose-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="sparkles" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-rose-800 uppercase tracking-widest">Bab 3 - TP 6: Memperkaya Tulisan (Perbandingan, Analogi, Antonim, & Sinonim)</span>
<span id="progress-text" class="text-xs font-black text-white bg-rose-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-rose-400 via-pink-500 to-red-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 6 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-rose-100 text-rose-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 6: <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-red-600">Memperkaya Gaya Bahasa</span> 🌟
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Gaya Bahasa" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-rose-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-red-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Mengidentifikasi <span class="text-rose-600">kalimat perbandingan & analogi</span> dalam artikel.</li>
<li>Menggunakan <span class="text-rose-600">antonim dan sinonim</span> untuk memperkaya kosakata tulisan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menyempurnakan mahakarya artikel ilmiah populer Bab 3? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Perbandingan, Analogi, Antonim, Sinonim -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Bumbu Pemanis Kata dalam Artikel 🎨</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Empat unsur kebahasaan kunci untuk membuat artikel ilmiah populer semakin hidup dan menarik.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Perbandingan & Analogi -->
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-rose-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Perbandingan & Analogi</div>
<p class="text-slate-700 font-bold mb-3">Membandingkan dua hal berbeda untuk memperjelas maksud.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li><b>Perbandingan:</b> Menyoroti persamaan/perbedaan langsung (misal: <i>lebih besar daripada</i>).</li>
<li><b>Analogi:</b> Perbandingan kiasan (misal: <i>Otak manusia seperti spons yang menyerap air</i>).</li>
</ul>
</div>
<div class="bg-rose-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-rose-900 italic">"Membuat konsep rumit menjadi mudah dipahami."</p>
</div>
</div>
<!-- Antonim & Sinonim -->
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Antonim & Sinonim</div>
<p class="text-slate-700 font-bold mb-3">Variasi pilihan kata (diksi) untuk menghindari pengulangan membosankan.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li><b>Sinonim:</b> Persamaan kata (misal: <i>bersih = higienis, elok</i>).</li>
<li><b>Antonim:</b> Lawan kata (misal: <i>bersih × kotor</i>).</li>
</ul>
</div>
<div class="bg-pink-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-pink-900 italic">"Variasi diksi memperkaya keindahan tulisan."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Identifikasi Kaidah Kebahasaan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-rose-600">Perbandingan, Analogi, atau Sinonim?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-rose-100 border-2 border-rose-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-rose-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis kaidah kebahasaan pada kalimat berikut:</p>
<div id="q1-text" class="text-xl text-box text-rose-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, 'analogi')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kalimat Analogi</button>
<button onclick="checkQ1(this, 'perbandingan')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kalimat Perbandingan</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-rose-600 text-white rounded-2xl font-black text-xl hover:bg-rose-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Variasi Diksi Antonim & Sinonim -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-red-900 bg-red-100 inline-block px-6 py-2 rounded-2xl">Kekuatan Diksi: Sinonim & Antonim ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menghindari kebosanan pembaca dengan variasi pilihan kata yang kaya makna.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-red-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Contoh Penerapan dalam Kalimat:</p>
<div class="bg-red-50 p-6 rounded-2xl border-2 border-red-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Lingkungan sekolah yang bersih <span class="text-rose-700">(sinonim: higienis, asri)</span> sangat kontras dengan kondisi kantin yang kotor <span class="text-red-700">(antonim dari bersih)</span>."</p>
<div class="border-t-2 border-red-200 pt-3">
<p class="text-slate-700 font-bold text-sm"><b>Manfaat:</b> Penggunaan sinonim dan antonim membuat paragraf artikel terasa hidup, dinamis, dan profesional.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Diksi Kata">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Diksi & Perbandingan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-red-600">Evaluasi Gaya Bahasa</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-red-100 border-2 border-red-400 px-6 py-2 rounded-full">
<span class="font-black text-red-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-red-600 text-white rounded-2xl font-black text-xl hover:bg-red-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Diksi & Gaya Bahasa) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-red-600 tracking-wide uppercase">🏁 Balap Diksi & Gaya Bahasa 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar perbandingan, analogi, antonim, dan sinonim, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-rose-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 6 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-rose-500 hover:bg-rose-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#9f1239] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-rose-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-rose-600 hover:bg-rose-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9f1239] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Akhir Bab 3 (TP 6) -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Akhir Bab 3 (TP 6) 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana kesan dan pengalamanmu menyelesaikan seluruh materi Bab 3 tentang Artikel Ilmiah Populer?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-rose-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Luar Biasa!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Berkesan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Perlu Pengulangan</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pesan atau rangkuman kesan belajar menulis artikel ilmiah populer di Bab 3:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-rose-50 border-2 border-rose-200 focus:border-rose-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 6 & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Bab 3 (TP 6)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji komprehensif perbandingan, analogi, antonim, dan sinonim melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-rose-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-rose-700 bg-rose-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 6 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-rose-900 mb-2">Bab 3 Selesai Sepenuhnya!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 6: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-rose-600 to-red-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-rose-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-rose-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai akhir Bab 3 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-rose-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Keseluruhan Bab 3</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-rose-500">
<option value="100">Sangat Tuntas & Menguasai Seluruh Materi Bab 3!</option>
<option value="75">Tuntas Sebagian Besar</option>
<option value="50">Perlu Pengulangan Belajar</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-rose-600 to-red-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan Akhir Bab 3 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-rose-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-rose-700 shadow-[0_4px_0px_#9f1239]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Analogi vs Perbandingan)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Pikiran manusia bekerja seperti spons yang menyerap seluruh cairan di sekitarnya.\"", type: 'analogi', exp: "Merupakan perbandingan kiasan (analogi)." },
{ t: "\"Jumlah siswa kelas 8A lebih banyak daripada jumlah siswa kelas 8B.\"", type: 'perbandingan', exp: "Merupakan kalimat perbandingan langsung." },
{ t: "\"Membaca buku bagaikan membuka jendela dunia yang luas.\"", type: 'analogi', exp: "Perbandingan kiasan sifat atau keadaan disebut analogi." },
{ t: "\"Kadar kebersihan sekolah ini jauh lebih baik dibandingkan tahun lalu.\"", type: 'perbandingan', exp: "Perbandingan langsung antara dua waktu/keadaan." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (typeChoosed === currentQ1Data.type);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.type === 'analogi') btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.add('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Diksi)
let countQ2 = 0;
const q2Bank = [
{
story: "Penulis menggunakan kata 'bersih' di paragraf pertama, lalu menggunakan kata 'higienis' dan 'asri' pada paragraf berikutnya untuk menghindari pengulangan.",
q: "Penggunaan variasi kata tersebut memanfaatkan kaidah...",
ops: ["Sinonim (persamaan kata)", "Antonim (lawan kata)", "Kalimat tanya berita"],
ans: 0,
exp: "Penggunaan kata yang berbeda arti sama (bersih, higienis, asri) adalah sinonim."
},
{
story: "Penulis mempertentangkan kata 'bersih' dengan kata 'kotor' untuk menggambarkan perbedaan kondisi dua kantin sekolah.",
q: "Penerapan kata berlawanan arti ini disebut...",
ops: ["Antonim (lawan kata)", "Sinonim kata", "Kalimat imperatif"],
ans: 0,
exp: "Hubungan kata berlawanan arti (bersih dan kotor) disebut antonim."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.add('hidden');
}
generateQ2();
// Racing Game TP 6
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Persamaan kata atau padanan kata disebut...", a: "SINONIM" },
{ q: "Lawan kata atau pertentangan makna kata disebut...", a: "ANTONIM" },
{ q: "Perbandingan kiasan untuk menjelaskan sesuatu secara menarik disebut...", a: "ANALOGI" },
{ q: "Kalimat yang menyoroti perbedaan atau persamaan langsung disebut kalimat...", a: "PERBANDINGAN" },
{ q: "Pilihan kata yang tepat dan selaras dalam menulis disebut...", a: "DIKSI" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-rose-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Luar Biasa')) btn.classList.add('border-rose-400', 'bg-rose-50');
else if(btn.innerText.includes('Berkesan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 6
const evaluasiBank = [
{
q: `Apa fungsi utama dari penggunaan sinonim dan antonim dalam penulisan artikel ilmiah populer?`,
options: [`Memperkaya pilihan kata (diksi) dan menghindari pengulangan kata yang membosankan`, `Membuat paragraf artikel menjadi sangat singkat`, `Menghilangkan seluruh fakta dalam tulisan`, `Mengubah artikel menjadi puisi tradisional`],
a: 0,
exp: "Sinonim dan antonim memperkaya variasi diksi agar tulisan lebih hidup dan menarik."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat analogi?`,
options: [`Pikiran yang terbuka bagaikan parasut yang hanya berfungsi saat terbuka`, `Jumlah buku di perpustakaan lebih banyak daripada di koperasi`, `Hari ini cuaca sangat panas sekali`, `Siswa kelas 8 belajar dengan giat`],
a: 0,
exp: "Analogi adalah perbandingan kiasan yang menyamakan pikiran dengan parasut."
},
{
q: `Hubungan kata yang memiliki makna berlawanan (seperti bersih dan kotor) disebut sebagai...`,
options: [`Antonim`, `Sinonim`, `Homofon`, ` Akronim`],
a: 0,
exp: "Lawan kata atau pertentangan makna disebut antonim."
},
{
q: `Apa perbedaan antara kalimat perbandingan langsung dan kalimat analogi?`,
options: [`Perbandingan menyoroti persamaan/perbedaan nyata secara langsung, sedangkan analogi menggunakan perbandingan kiasan`, `Perbandingan hanya digunakan dalam matematika`, `Analogi tidak menggunakan bahasa sama sekali`, `Tidak ada perbedaan`],
a: 0,
exp: "Perbandingan bersifat langsung, sedangkan analogi bersifat kiasan."
},
{
q: `Secara keseluruhan, tujuan pembelajaran Bab 3 membimbing peserta didik untuk...`,
options: [`Mampu memahami, merencanakan data, dan menulis artikel ilmiah populer secara kreatif`, `Menghafal seluruh kamus bahasa`, `Menjual artikel cetak di pasar umum`, `Mengabaikan aturan tata bahasa`],
a: 0,
exp: "Kompetensi akhir Bab 3 mencakup penguasaan utuh penulisan artikel ilmiah populer."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-rose-50 hover:border-rose-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Bab 3 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Akhir Bab 3 (TP 6): " + refleksi,
strategi: "Evaluasi Akhir TP 6: Memperkaya Tulisan (Perbandingan, Analogi, Antonim, & Sinonim)"
}, "*");
} else {
alert("Laporan Akhir Bab 3 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 5 merancang kerangka dan menulis draf artikel ilmiah populer berdasarkan data yang telah direncanakan.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Menulis Artikel Ilmiah Populer (TP 5) 📝</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fdf4ff;
background-image: radial-gradient(#f5d0fe 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-fuchsia-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-fuchsia-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="pen-tool" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-fuchsia-800 uppercase tracking-widest">Bab 3 - TP 5: Kerangka & Penulisan Draf Artikel Ilmiah Populer</span>
<span id="progress-text" class="text-xs font-black text-white bg-fuchsia-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-fuchsia-400 via-pink-500 to-rose-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 5 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-fuchsia-100 text-fuchsia-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 5: <span class="text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-rose-600">Menulis Draf Artikel</span> 📝
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Menulis Draf" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-fuchsia-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-fuchsia-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-rose-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Merancang <span class="text-fuchsia-600">kerangka tulisan</span> artikel ilmiah populer.</li>
<li>Menulis <span class="text-fuchsia-600">draf artikel utuh</span> berdasarkan data yang direncanakan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap merangkai kata menjadi karya tulis ilmiah yang memukau? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Kerangka & Struktur Artikel -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-fuchsia-900 bg-fuchsia-100 inline-block px-6 py-2 rounded-2xl">Struktur & Kerangka Artikel 🏗️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Tiga bagian utama dalam menyusun kerangka penulisan artikel ilmiah populer.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- Pendahuluan -->
<div class="bg-white p-6 rounded-3xl border-2 border-fuchsia-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-fuchsia-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Pendahuluan</div>
<p class="text-slate-700 font-bold mb-3">Menarik perhatian pembaca, memaparkan latar belakang masalah, dan menyatakan pendapat utama (opini).</p>
</div>
<div class="bg-fuchsia-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-fuchsia-900 italic">"Pengenalan isu menarik seputar sekolah."</p>
</div>
</div>
<!-- Isi / Pembahasan -->
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Isi & Pembahasan</div>
<p class="text-slate-700 font-bold mb-3">Menyajikan alasan pendukung, data fakta, hasil wawancara, atau kuesioner yang memperkuat argumen.</p>
</div>
<div class="bg-pink-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-pink-900 italic">"Pembeberan data nyata dan analisis."</p>
</div>
</div>
<!-- Penutup -->
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-rose-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">3. Penutup (Simpulan)</div>
<p class="text-slate-700 font-bold mb-3">Merangkum inti pembahasan secara singkat serta memberikan solusi atau ajakan bertindak bagi pembaca.</p>
</div>
<div class="bg-rose-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-rose-900 italic">"Kesimpulan dan saran konstruktif."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Struktur Kerangka) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-fuchsia-600">Bagian Struktur Artikel?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-fuchsia-100 border-2 border-fuchsia-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-fuchsia-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan bagian struktur artikel pada pernyataan berikut:</p>
<div id="q1-text" class="text-xl text-box text-fuchsia-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-3 gap-3 max-w-xl mx-auto">
<button onclick="checkQ1(this, 'pendahuluan')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Pendahuluan</button>
<button onclick="checkQ1(this, 'isi')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Isi / Pembahasan</button>
<button onclick="checkQ1(this, 'penutup')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Penutup</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-fuchsia-600 text-white rounded-2xl font-black text-xl hover:bg-fuchsia-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Panduan Menulis Draf Artikel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-pink-900 bg-pink-100 inline-block px-6 py-2 rounded-2xl">Langkah Menyusun Draf Tulisan ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengubah kerangka data hasil wawancara/kuesioner menjadi artikel utuh yang komunikatif.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-pink-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Tahapan Penulisan Draf:</p>
<div class="bg-pink-50 p-6 rounded-2xl border-2 border-pink-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Kembangkan Kerangka:</b> Tulis paragraf demi paragraf berdasarkan poin kerangka yang telah dibuat.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Sertakan Bukti Data:</b> Masukkan kutipan wawancara atau angka kuesioner ke dalam bagian isi.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Gunakan Bahasa Populer:</b> Pastikan kalimat tidak terlalu kaku agar enak dibaca masyarakat luas.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Menulis Artikel">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Penulisan Draf) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-pink-600">Evaluasi Draf Tulisan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-pink-100 border-2 border-pink-400 px-6 py-2 rounded-full">
<span class="font-black text-pink-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-pink-600 text-white rounded-2xl font-black text-xl hover:bg-pink-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Menulis Draf) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-rose-600 tracking-wide uppercase">🏁 Balap Menulis Draf 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar kerangka dan penulisan draf artikel, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-fuchsia-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 5 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-fuchsia-500 hover:bg-fuchsia-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#a21caf] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-fuchsia-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#a21caf] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 5 -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi TP 5 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pengalamanmu merancang kerangka dan menulis draf artikel hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-fuchsia-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Seru!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Lancar</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Agak Kesulitan</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan ide judul artikel ilmiah populer buatanmu:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-fuchsia-50 border-2 border-fuchsia-200 focus:border-fuchsia-500 outline-none font-medium" rows="3" placeholder="Contoh: Menjaga Kebersihan Lingkungan Sekolah Melalui Gerakan Bawa Botol Minum..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 5 & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 5</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman kerangka dan penulisan draf artikel ilmiah populer melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-fuchsia-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-fuchsia-700 bg-fuchsia-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 5 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-fuchsia-900 mb-2">Misi TP 5 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 5: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-fuchsia-500 to-rose-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-fuchsia-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-fuchsia-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 5 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-fuchsia-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-fuchsia-500">
<option value="100">Sangat Mahir Merancang Kerangka & Menulis Draf Artikel!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Bimbingan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-fuchsia-500 to-rose-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 5 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-fuchsia-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-fuchsia-600 shadow-[0_4px_0px_#a21caf]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Struktur Kerangka)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Bagian awal artikel yang memaparkan latar belakang masalah dan pernyataan pendapat utama.\"", type: 'pendahuluan', exp: "Ini adalah fungsi dari bagian pendahuluan artikel." },
{ t: "\"Bagian tengah artikel yang menyajikan data fakta hasil kuesioner dan alasan pendukung.\"", type: 'isi', exp: "Penyajian data fakta dan pembahasan argumen terletak pada bagian isi." },
{ t: "\"Bagian akhir artikel yang merangkum inti pembahasan dan memberikan solusi atau saran.\"", type: 'penutup', exp: "Rangkuman dan simpulan akhir berada pada bagian penutup artikel." },
{ t: "\"Paragraf pengantar yang menarik perhatian pembaca di awal teks artikel ilmiah populer.\"", type: 'pendahuluan', exp: "Paragraf pembuka penarik perhatian adalah ciri bagian pendahuluan." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (typeChoosed === currentQ1Data.type);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if(b.textContent.toLowerCase().includes(currentQ1Data.type)) b.classList.add('btn-correct');
});
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.add('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Penulisan Draf)
let countQ2 = 0;
const q2Bank = [
{
story: "Siswa sedang menulis bagian tengah artikelnya dengan memasukkan angka persentase hasil kuesioner kebersihan sekolah.",
q: "Bagian struktur artikel manakah yang sedang ditulis oleh siswa tersebut?",
ops: ["Bagian isi / pembahasan", "Bagian judul sampul", "Bagian penutup simpulan"],
ans: 0,
exp: "Penyajian data hasil kuesioner dan fakta pendukung berada di bagian isi artikel."
},
{
story: "Di akhir tulisannya, seorang siswa menuliskan ajakan agar seluruh warga sekolah bersama-sama menjaga kebersihan lingkungan.",
q: "Bagian struktur apa yang sedang disusun siswa tersebut?",
ops: ["Bagian penutup (simpulan dan saran)", "Bagian pendahuluan masalah", "Bagian daftar pustaka"],
ans: 0,
exp: "Ajakan dan rangkuman akhir merupakan bagian penutup dari sebuah artikel."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.add('hidden');
}
generateQ2();
// Racing Game TP 5
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Bagian awal artikel yang memaparkan latar belakang masalah disebut...", a: "PENDAHULUAN" },
{ q: "Bagian tengah artikel yang menyajikan fakta dan data pembahasan disebut...", a: "ISI" },
{ q: "Bagian akhir artikel yang berisi rangkuman dan saran disebut...", a: "PENUTUP" },
{ q: "Sebelum menulis draf lengkap, penulis wajib membuat kerangka...", a: "TULISAN" },
{ q: "Hasil wawancara dan kuesioner dimasukkan ke dalam bagian...", a: "PEMBAHASAN" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-fuchsia-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Seru')) btn.classList.add('border-fuchsia-400', 'bg-fuchsia-50');
else if(btn.innerText.includes('Lancar')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 5
const evaluasiBank = [
{
q: `Apa saja tiga bagian struktur utama dalam menyusun kerangka artikel ilmiah populer?`,
options: [`Pendahuluan, isi (pembahasan), dan penutup`, `Judul, daftar pustaka, dan sampul`, `Kata pengantar, biografi, dan indeks`, `Lampiran data, kuesioner, dan catatan kaki`],
a: 0,
exp: "Tiga struktur inti penulisan artikel adalah pendahuluan, isi, dan penutup."
},
{
q: `Bagian mana dari artikel yang berfungsi untuk menarik perhatian pembaca serta memaparkan isu permasalahan?`,
options: [`Pendahuluan`, `Penutup`, `Daftar pustaka`, `Lampiran angka`],
a: 0,
exp: "Pendahuluan berfungsi menarik minat pembaca dan mengenalkan latar belakang masalah."
},
{
q: `Di manakah tempat yang paling tepat untuk memasukkan data hasil wawancara atau kuesioner dalam draf artikel?`,
options: [`Bagian isi / pembahasan`, `Bagian judul paling atas`, `Bagian penutup simpulan`, `Bagian nama pengarang`],
a: 0,
exp: "Data fakta dan hasil riset dipaparkan secara mendalam pada bagian isi artikel."
},
{
q: `Apa tujuan utama dari pembuatan kerangka tulisan sebelum mulai menulis draf artikel?`,
options: [`Agar alur penulisan terstruktur rapi, logis, dan tidak melenceng dari topik`, `Agar jumlah kata langsung mencapai satu juta`, `Supaya penulis tidak perlu membaca data riset`, `Agar artikel berbentuk cerita fiksi`],
a: 0,
exp: "Kerangka menjaga keteraturan struktur dan alur logis penulisan."
},
{
q: `Bagian penutup dalam sebuah artikel ilmiah populer biasanya berisi...`,
options: [`Rangkuman inti pembahasan serta saran atau solusi konstruktif`, `Kisah masa kecil penulis`, `Daftar harga buku pelajaran`, `Rumus kimia laboratorium`],
a: 0,
exp: "Penutup memuat simpulan ringkas dan saran atau ajakan solutif."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-fuchsia-50 hover:border-fuchsia-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.add('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 5 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 5 Bab 3: " + refleksi,
strategi: "Evaluasi TP 5: Kerangka & Penulisan Draf Artikel Ilmiah Populer"
}, "*");
} else {
alert("Laporan TP 5 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 4 merancang instrumen pengumpulan data sederhana (daftar pertanyaan wawancara dan kuesioner) untuk sebuah topik.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Menulis Artikel Ilmiah Populer (TP 4) 📋</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: #f5f3ff;
background-image: radial-gradient(#ddd6fe 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-violet-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-violet-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="clipboard-list" 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-violet-800 uppercase tracking-widest">Bab 3 - TP 4: Perancangan Instrumen Pengumpulan Data (Wawancara & Kuesioner)</span>
<span id="progress-text" class="text-xs font-black text-white bg-violet-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-violet-400 via-purple-500 to-indigo-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 4 -->
<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-violet-100 text-violet-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 4: <span class="text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-indigo-600">Teknik Pengumpulan Data</span> 📋
</h1>
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80" alt="Wawancara dan Kuesioner" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-violet-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-violet-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-indigo-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Memahami cara menyusun <span class="text-violet-600">daftar pertanyaan wawancara</span> yang mendalam.</li>
<li>Merancang <span class="text-violet-600">kuesioner sederhana</span> untuk mengumpulkan data topik artikel.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menjadi peneliti cilik yang handal? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Wawancara & Kuesioner -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-violet-900 bg-violet-100 inline-block px-6 py-2 rounded-2xl">Instrumen Pengumpulan Data 🎙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Dua cara utama mendapatkan fakta dan data akurat sebelum menulis artikel ilmiah populer.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Wawancara -->
<div class="bg-white p-6 rounded-3xl border-2 border-violet-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-violet-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Wawancara (Interview)</div>
<p class="text-slate-700 font-bold mb-3">Tanya jawab langsung dengan narasumber ahli atau pihak terkait untuk menggali informasi mendalam.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Menggunakan pertanyaan terbuka (mengapa, bagaimana).</li>
<li>Narasumber bisa guru, kepala sekolah, atau ahli.</li>
</ul>
</div>
<div class="bg-violet-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-violet-900 italic">Contoh: "Bagaimana tanggapan Bapak terkait kebersihan kantin sekolah?"</p>
</div>
</div>
<!-- Kuesioner -->
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-indigo-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Kuesioner (Angket)</div>
<p class="text-slate-700 font-bold mb-3">Daftar pertanyaan terstruktur yang disebarkan ke banyak responden (misal: teman seangkatan) untuk menjaring data kuantitatif/persentase.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Pertanyaan singkat dan pilihan jawaban tegas.</li>
<li>Menghasilkan data persentase (misal: 75% siswa setuju).</li>
</ul>
</div>
<div class="bg-indigo-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-indigo-900 italic">Contoh: "Seberapa sering Anda membawa botol minum sendiri? [ ] Sering [ ] Jarang"</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Wawancara atau Kuesioner) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-violet-600">Wawancara atau Kuesioner?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-violet-100 border-2 border-violet-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-violet-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis instrumen data yang paling tepat untuk situasi berikut:</p>
<div id="q1-text" class="text-xl text-box text-violet-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, 'wawancara')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Wawancara</button>
<button onclick="checkQ1(this, 'kuesioner')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kuesioner (Angket)</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-violet-600 text-white rounded-2xl font-black text-xl hover:bg-violet-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Menyusun Pertanyaan Efektif -->
<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-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Kiat Menyusun Pertanyaan Hebat 🎯</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Prinsip menyusun daftar pertanyaan agar narasumber antusias dan data akurat terkumpul.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Panduan Pembuatan Instrumen:</p>
<div class="bg-indigo-50 p-6 rounded-2xl border-2 border-indigo-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-indigo-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Fokus pada Topik:</b> Pertanyaan tidak boleh melenceng dari isu artikel (misal: kebersihan sekolah).</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-indigo-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Gunakan Rumus 5W+1H:</b> Apa, siapa, kapan, di mana, mengapa, dan bagaimana.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-indigo-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Bahasa Sopan & Jelas:</b> Mudah dimengerti oleh responden kuesioner atau narasumber.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1517842645767-c639042777db?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Riset Data">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Perancangan Instrumen) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-indigo-600">Evaluasi Pertanyaan Riset</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-indigo-100 border-2 border-indigo-400 px-6 py-2 rounded-full">
<span class="font-black text-indigo-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-indigo-600 text-white rounded-2xl font-black text-xl hover:bg-indigo-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Perancangan Data) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-indigo-600 tracking-wide uppercase">🏁 Balap Riset Data 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar wawancara dan kuesioner, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-violet-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 4 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-violet-500 hover:bg-violet-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#6d28d9] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-violet-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-violet-600 hover:bg-violet-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#6d28d9] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 4 -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi TP 4 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pengalaman merancang daftar wawancara atau kuesioner 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-violet-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Seru!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Lancar</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Agak Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu rancangan pertanyaan wawancara buatanmu untuk narasumber di sekolah:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-violet-50 border-2 border-violet-200 focus:border-violet-500 outline-none font-medium" rows="3" placeholder="Contoh: Apa kendala utama dalam menjaga kebersihan lingkungan sekolah?"></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 4 & 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</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman perancangan instrumen pengumpulan data melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-violet-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-violet-700 bg-violet-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 4 -->
<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-violet-900 mb-2">Misi TP 4 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 4: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-violet-600 to-indigo-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-violet-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-violet-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 4 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-violet-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-violet-500">
<option value="100">Sangat Mahir Merancang Instrumen Data!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Bimbingan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-violet-600 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 4 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-violet-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-violet-700 shadow-[0_4px_0px_#6d28d9]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Wawancara vs Kuesioner)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Bertanya secara langsung dan mendalam kepada kepala sekolah mengenai fasilitas inklusi.\"", type: 'wawancara', exp: "Tanya jawab langsung secara mendalam adalah teknik wawancara." },
{ t: "\"Menyebarkan daftar pertanyaan tertulis berisikan pilihan pilihan jawaban kepada seluruh siswa kelas 8.\"", type: 'kuesioner', exp: "Penyebaran daftar pertanyaan tertulis ke banyak responden disebut kuesioner (angket)." },
{ t: "\"Menggali cerita pengalaman narasumber ahli secara interaktif tatap muka.\"", type: 'wawancara', exp: "Interaksi tatap muka langsung merupakan ciri wawancara." },
{ t: "\"Menjaring data persentase pilihan siswa terhadap jenis ekstrakurikuler favorit melalui angket.\"", type: 'kuesioner', exp: "Angket atau kuesioner digunakan untuk menjaring data kuantitatif dari banyak responden." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (typeChoosed === currentQ1Data.type);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.type === 'wawancara') btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Perancangan Instrumen)
let countQ2 = 0;
const q2Bank = [
{
story: "Siswa ingin mengetahui persentase kebiasaan membawa botol minum siswa satu sekolah.",
q: "Instrumen pengumpulan data apa yang paling efektif digunakan?",
ops: ["Kuesioner (angket) yang disebar ke seluruh kelas", "Wawancara tertutup satu orang saja", "Membaca buku dongeng lama"],
ans: 0,
exp: "Kuesioner sangat efektif menjaring data persentase dari responden yang banyak."
},
{
story: "Siswa ingin menggali kisah mendalam mengenai sejarah berdirinya fasilitas sekolah dari narasumber pendiri sekolah.",
q: "Instrumen apa yang paling tepat dipilih?",
ops: ["Wawancara mendalam (interview) dengan narasumber", "Mengisi teka-teki silang harian", "Menghitung jumlah meja di kelas"],
ans: 0,
exp: "Wawancara mendalam cocok untuk menggali informasi naratif dari narasumber ahli."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 4
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Kegiatan tanya jawab langsung dengan narasumber disebut...", a: "WAWANCARA" },
{ q: "Daftar pertanyaan tertulis yang disebarkan ke banyak responden disebut...", a: "KUESIONER" },
{ q: "Sinonim atau sebutan lain dari kuesioner adalah...", a: "ANGKET" },
{ q: "Prumusan pertanyaan riset data berpedoman pada rumus...", a: "5W1H" },
{ q: "Sebelum menulis artikel, kita harus merancang instrumen pengumpulan...", a: "DATA" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-violet-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Seru')) btn.classList.add('border-violet-400', 'bg-violet-50');
else if(btn.innerText.includes('Lancar')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 4
const evaluasiBank = [
{
q: `Apa perbedaan utama antara wawancara dan kuesioner sebagai instrumen pengumpulan data?`,
options: [`Wawancara tanya jawab langsung secara lisan, kuesioner berupa daftar pertanyaan tertulis`, `Wawancara hanya untuk menulis puisi cinta`, `Kuesioner tidak memerlukan responden sama sekali`, `Tidak ada perbedaan di antara keduanya`],
a: 0,
exp: "Wawancara bersifat lisan interaktif, sedangkan kuesioner berupa lembar tertulis."
},
{
q: `Kapan waktu yang paling tepat bagi seorang penulis menggunakan metode kuesioner (angket)?`,
options: [`Saat ingin menjaring data statistik atau persentase dari banyak responden`, `Saat ingin mendengarkan dongeng sebelum tidur`, `Saat menghitung jumlah halaman buku paket`, `Saat memperbaiki perangkat komputer sekolah`],
a: 0,
exp: "Kuesioner efektif menjaring data kuantitatif dari responden dalam jumlah banyak."
},
{
q: `Manakah prinsip penyusunan pertanyaan wawancara yang paling baik?`,
options: [`Fokus pada topik artikel dan menggunakan pertanyaan terbuka yang mendalam`, `Menanyakan rahasia pribadi narasumber yang tidak berkaitan`, `Menggunakan bahasa sandi yang sulit dimengerti`, `Membuat pertanyaan sebanyak seribu nomor`],
a: 0,
exp: "Pertanyaan wawancara harus fokus pada topik dan bersifat terbuka."
},
{
q: `Mengapa perancangan instrumen data (wawancara/kuesioner) harus dilakukan sebelum menulis artikel ilmiah populer?`,
options: [`Agar data dan fakta yang diperoleh akurat sebagai bahan dasar penulisan`, `Agar penulis bisa beristirahat sepanjang hari`, `Supaya jumlah kertas ujian habis`, `Agar tidak perlu menulis kesimpulan`],
a: 0,
exp: "Instrumen data memastikan fakta dan bukti terkumpul valid sebelum penulisan draf."
},
{
q: `Apa fungsi dari penggunaan rumus 5W+1H dalam menyusun daftar pertanyaan wawancara?`,
options: [`Memandu agar informasi yang digali dari narasumber menjadi lengkap dan komprehensif`, `Menghitung rumus matematika fisika`, `Menentukan harga jual buku artikel`, `Mengatur jadwal masuk sekolah`],
a: 0,
exp: "5W+1H memastikan kelengkapan informasi pokok dari narasumber."
}
];
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-violet-50 hover:border-violet-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 4 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 4 Bab 3: " + refleksi,
strategi: "Evaluasi TP 4: Perancangan Instrumen Pengumpulan Data (Wawancara & Kuesioner)"
}, "*");
} else {
alert("Laporan TP 4 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 3 membedakan dan mengidentifikasi kalimat fakta dan opini dalam sebuah artikel ilmiah populer.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Menulis Artikel Ilmiah Populer (TP 3) 🔍</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: #fafaf9;
background-image: radial-gradient(#d6d3d1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-amber-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-amber-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="search" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-amber-800 uppercase tracking-widest">Bab 3 - TP 3: Kalimat Fakta dan Opini dalam Artikel Ilmiah Populer</span>
<span id="progress-text" class="text-xs font-black text-white bg-amber-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 3 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 3: <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Fakta vs Opini</span> 🔍
</h1>
<img src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=800&q=80" alt="Fakta dan Opini" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-amber-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Memahami perbedaan <span class="text-amber-600">kalimat fakta</span> dan <span class="text-amber-600">kalimat opini</span>.</li>
<li>Mengidentifikasi fakta dan opini dalam artikel ilmiah populer.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguji ketajaman berpikir kritis? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Fakta vs Opini -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Mengenal Fakta & Opini ⚖️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Dua jenis kalimat dasar yang selalu menyusun isi artikel ilmiah populer.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Fakta -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Kalimat Fakta</div>
<p class="text-slate-700 font-bold mb-3">Keadaan yang benar-benar terjadi atau terbukti kebenarannya, didukung oleh data nyata (angka, waktu, tempat).</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Bersifat objektif (apa adanya).</li>
<li>Dapat diverifikasi kebenarannya.</li>
</ul>
</div>
<div class="bg-amber-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-amber-900 italic">Contoh: "SMPN 72 Maluku Tengah berlokasi di Maluku Tengah."</p>
</div>
</div>
<!-- Opini -->
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Kalimat Opini</div>
<p class="text-slate-700 font-bold mb-3">Pendapat, pandangan, atau perkiraan pribadi seseorang yang belum tentu disetujui semua orang.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Bersifat subjektif.</li>
<li>Sering menggunakan kata: <i>menurut saya, sebaiknya, rasanya, diperkirakan</i>.</li>
</ul>
</div>
<div class="bg-orange-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-orange-900 italic">Contoh: "Menurut saya, lingkungan sekolah ini adalah yang paling asri."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Fakta atau Opini) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-amber-600">Fakta atau Opini?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-amber-100 border-2 border-amber-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-amber-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis kalimat berikut:</p>
<div id="q1-text" class="text-xl text-box text-amber-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, 'fakta')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kalimat Fakta</button>
<button onclick="checkQ1(this, 'opini')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kalimat Opini</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-amber-600 text-white rounded-2xl font-black text-xl hover:bg-amber-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Analisis Fakta dan Opini dalam Artikel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Perpaduan Fakta & Opini dalam Artikel 📰</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana penulis artikel ilmiah populer menggunakan fakta untuk memperkuat opininya.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Contoh Analisis Teks:</p>
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Sampah plastik kian menggunung di area sekolah <span class="text-orange-700">(Opini)</span>. Berdasarkan data catatan petugas kebersihan, volume sampah plastik mencapai 50 kilogram setiap harinya <span class="text-amber-700">(Fakta)</span>."</p>
<div class="border-t-2 border-orange-200 pt-3">
<p class="text-slate-700 font-bold text-sm"><b>Catatan Penting:</b> Opini penulis divalidasi dan dikuatkan dengan kalimat fakta berupa data konkrit.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis Artikel">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Fakta & Opini) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-orange-600">Bedah Kalimat Teks</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full">
<span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Fakta & Opini) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-500 tracking-wide uppercase">🏁 Balap Fakta & Opini 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar kalimat fakta dan opini, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-amber-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 3 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-amber-500 hover:bg-amber-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#b45309] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#b45309] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 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">Refleksi TP 3 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu dalam membedakan kalimat fakta dan opini hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-amber-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Mudah!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Mengerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Tertukar</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 fakta buatanmu:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-amber-50 border-2 border-amber-200 focus:border-amber-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 3 & 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</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman fakta dan opini dalam artikel melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-amber-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-amber-700 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 3 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-amber-900 mb-2">Misi TP 3 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 3: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-amber-500 to-orange-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-amber-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-amber-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 3 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-amber-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-amber-500">
<option value="100">Sangat Mahir Membedakan Fakta & Opini!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Bimbingan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 3 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-amber-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-600 shadow-[0_4px_0px_#b45309]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Fakta vs Opini)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Indonesia terletak di antara dua benua dan dua samudera.\"", type: 'fakta', exp: "Merupakan keadaan nyata geografis yang terbukti benar (fakta)." },
{ t: "\"Menurut saya, pelajaran Bahasa Indonesia adalah yang paling menyenangkan.\"", type: 'opini', exp: "Mengandung sudut pandang pribadi 'menurut saya' (opini)." },
{ t: "\"Jumlah siswa di kelas 8 berjumlah 30 orang berdasarkan data dapodik.\"", type: 'fakta', exp: "Didukung oleh data administratif nyata yang objektif (fakta)." },
{ t: "\"Sebaiknya seluruh sekolah menerapkan jam belajar tambahan di sore hari.\"", type: 'opini', exp: "Merupakan usulan dan pandangan subjektif (opini)." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (typeChoosed === currentQ1Data.type);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.type === 'fakta') btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Fakta & Opini)
let countQ2 = 0;
const q2Bank = [
{
story: "Artikel menyatakan: 'Sampah plastik sangat berbahaya bagi lingkungan sekolah. Berdasarkan laporan kebersihan, 45 kg sampah plastik ditemukan berserakan di halaman.'",
q: "Manakah kalimat yang menunjukkan bentuk fakta dalam kutipan di atas?",
ops: ["Volume sampah plastik mencapai 45 kg berserakan di halaman berdasarkan laporan kebersihan", "Sampah plastik sangat berbahaya bagi lingkungan sekolah", "Lingkungan sekolah tampak kurang indah"],
ans: 0,
exp: "Data jumlah 45 kg berdasarkan laporan kebersihan adalah kalimat fakta."
},
{
story: "Penulis menulis: 'Menurut saya, kesadaran siswa menjaga kebersihan masih sangat rendah.'",
q: "Termasuk jenis kalimat apakah pernyataan tersebut?",
ops: ["Kalimat opini karena memuat sudut pandang pribadi", "Kalimat fakta mutlak laboratorium", "Kalimat perintah imperatif"],
ans: 0,
exp: "Kata 'Menurut saya' menunjukkan ciri utama kalimat opini."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 3
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Keadaan yang benar-benar terjadi dan didukung data nyata disebut kalimat...", a: "FAKTA" },
{ q: "Pendapat atau pandangan pribadi yang bersifat subjektif disebut kalimat...", a: "OPINI" },
{ q: "Kata penanda yang sering muncul dalam kalimat opini adalah 'menurut...", a: "SAYA" },
{ q: "Kalimat fakta bersifat objektif dan dapat di...", a: "VERIFIKASI" },
{ q: "Dalam artikel ilmiah populer, fakta digunakan untuk memperkuat...", a: "OPINI" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-amber-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Mudah')) btn.classList.add('border-amber-400', 'bg-amber-50');
else if(btn.innerText.includes('Mengerti')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 3
const evaluasiBank = [
{
q: `Apa ciri utama yang membedakan kalimat fakta dari kalimat opini?`,
options: [`Fakta bersifat objektif dan dapat dibuktikan kebenarannya dengan data nyata`, `Fakta selalu berisi khayalan masa depan`, `Fakta menggunakan kata 'menurut saya'`, `Fakta ditulis berdasarkan perasaan pribadi`],
a: 0,
exp: "Fakta bersifat objektif dan dapat dibuktikan kebenarannya."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat fakta?`,
options: [`Hari kemerdekaan Republik Indonesia diperingati setiap tanggal 17 Agustus`, `Menurut saya tanggal 17 Agustus adalah hari yang sangat panas`, `Sebaiknya perayaan kemerdekaan diadakan di malam hari`, `Saya rasa lomba balap karung sangat seru`],
a: 0,
exp: "Tanggal 17 Agustus adalah peristiwa sejarah nyata yang terbukti benar (fakta)."
},
{
q: `Kata atau frasa apa yang sering menjadi penanda utama dalam sebuah kalimat opini?`,
options: [`Menurut saya, sebaiknya, rasanya, atau diperkirakan`, `Berdasarkan data statistik resmi tahun 2026`, `Tercatat pukul 08.00 WIT`, `Berlokasi di Kabupaten Maluku Tengah`],
a: 0,
exp: "Kata-kata tersebut mencerminkan pandangan atau perkiraan subjektif."
},
{
q: `Mengapa penulis artikel ilmiah populer perlu mencampur kalimat fakta dan opini dalam tulisannya?`,
options: [`Opini penulis diperkuat dan divalidasi oleh data fakta yang objektif`, `Agar pembaca merasa bingung membedakan teks`, `Supaya artikel menjadi karya fiksi dongeng`, `Karena fakta saja tidak penting`],
a: 0,
exp: "Fakta memperkuat argumen opini penulis agar lebih kredibel."
},
{
q: `Kalimat 'Suhu udara di ruang kelas saat ini mencapai 30 derajat Celsius' tergolong sebagai...`,
options: [`Kalimat fakta`, `Kalimat opini`, `Kalimat imperatif perintah`, `Kalimat tanya berita`],
a: 0,
exp: "Pengukuran suhu dengan angka nyata merupakan kalimat fakta."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-amber-50 hover:border-amber-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 3 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 3 Bab 3: " + refleksi,
strategi: "Evaluasi TP 3: Kalimat Fakta dan Opini dalam Artikel Ilmiah Populer"
}, "*");
} else {
alert("Laporan TP 3 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 2 Bedah Ciri Artikel Populer
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Menulis Artikel Ilmiah Populer (TP 2) ✍️</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: #f8fafc;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-teal-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-teal-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="check-circle" 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-teal-800 uppercase tracking-widest">Bab 3 - TP 2: Ciri-Ciri Artikel Ilmiah Populer (Pendapat, Bukti, & Alasan)</span>
<span id="progress-text" class="text-xs font-black text-white bg-teal-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-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 TP 2 -->
<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-teal-100 text-teal-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 2: <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-emerald-600">Bedah Ciri Artikel Populer</span> ✍️
</h1>
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=800&q=80" alt="Ciri Artikel" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-teal-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Mengidentifikasi <span class="text-teal-600">pendapat penulis</span> dalam artikel ilmiah populer.</li>
<li>Menemukan <span class="text-teal-600">bukti dan alasan pendukung</span> yang memperkuat argumen.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mengupas tuntas struktur argumen ilmiah? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Pendapat, Bukti, dan Alasan -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Tiga Pilar Argumen Artikel Populer 🏛️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Sebuah artikel ilmiah populer dibangun dari gagasan yang kokoh melalui tiga unsur utama.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- Pendapat -->
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-teal-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Pendapat (Opini)</div>
<p class="text-slate-700 font-bold mb-3">Gagasan, sudut pandang, atau klaim utama yang disampaikan penulis terhadap suatu isu.</p>
</div>
<div class="bg-teal-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-teal-900 italic">"Sekolah perlu memperluas fasilitas akses bagi siswa difabel."</p>
</div>
</div>
<!-- Alasan -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-emerald-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Alasan Pendukung</div>
<p class="text-slate-700 font-bold mb-3">Penjelasan logis mengapa penulis memiliki pendapat tersebut (menjawab pertanyaan mengapa).</p>
</div>
<div class="bg-emerald-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-emerald-900 italic">"Karena setiap anak berhak mendapatkan kenyamanan belajar yang setara."</p>
</div>
</div>
<!-- Bukti -->
<div class="bg-white p-6 rounded-3xl border-2 border-green-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-green-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">3. Bukti Nyata</div>
<p class="text-slate-700 font-bold mb-3">Data empiris, hasil survei, angka statistik, atau kutipan ahli yang menguatkan alasan.</p>
</div>
<div class="bg-green-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-green-900 italic">"Data menunjukkan 20% siswa difabel terbantu dengan adanya jalur landai."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Bedah Pilar Argumen) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-teal-600">Pendapat, Alasan, atau Bukti?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-teal-100 border-2 border-teal-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-teal-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan kategori kalimat kutipan artikel berikut:</p>
<div id="q1-text" class="text-xl text-box text-teal-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-3 gap-3 max-w-xl mx-auto">
<button onclick="checkQ1(this, 'pendapat')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Pendapat</button>
<button onclick="checkQ1(this, 'alasan')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Alasan</button>
<button onclick="checkQ1(this, 'bukti')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Bukti</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Contoh Analisis Teks Artikel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Bedah Kasus Artikel Populer 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana penulis merangkai pendapat, alasan, dan bukti dalam satu paragraf utuh.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Contoh Paragraf Analisis:</p>
<div class="bg-emerald-50 p-6 rounded-2xl border-2 border-emerald-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Sampah plastik di lingkungan sekolah harus segera ditangani <span class="text-teal-700">(Pendapat)</span>. Jika dibiarkan, tumpukan sampah ini akan merusak kesehatan dan keindahan lingkungan belajar <span class="text-emerald-700">(Alasan)</span>. Berdasarkan survei kebersihan sekolah bulan lalu, tercatat 75% saluran air tersumbat oleh sampah plastik <span class="text-green-700">(Bukti)</span>."</p>
</div>
</div>
<img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Analisis Ciri Artikel) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-emerald-600">Evaluasi Isi Argumen</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Argumen Ilmiah) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-emerald-600 tracking-wide uppercase">🏁 Balap Argumen Ilmiah 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar ciri pendapat, bukti, dan alasan, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-teal-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 2 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-teal-500 hover:bg-teal-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#0f766e] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-teal-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-teal-600 hover:bg-teal-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#0f766e] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 2 -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi TP 2 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu dalam membedakan pendapat, alasan, dan bukti 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-teal-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Jelas!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Mengerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Agak Tertukar</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 alasan atau bukti buatanmu:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-teal-50 border-2 border-teal-200 focus:border-teal-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 2 & 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</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman ciri pendapat, bukti, dan alasan artikel ilmiah populer melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-teal-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-teal-700 bg-teal-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 2 -->
<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-teal-900 mb-2">Misi TP 2 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 2: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-teal-500 to-emerald-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-teal-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-teal-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 2 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-teal-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-teal-500">
<option value="100">Sangat Mahir Mengidentifikasi Pendapat, Bukti, & Alasan!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Bimbingan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-teal-500 to-emerald-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 2 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-teal-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-teal-600 shadow-[0_4px_0px_#0f766e]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Pendapat, Alasan, Bukti)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Menurut saya, penggunaan gawai saat jam pelajaran harus dibatasi.\"", type: 'pendapat', exp: "Ini adalah klaim atau sudut pandang pribadi penulis (pendapat)." },
{ t: "\"Hal ini karena gawai dapat memecah konsentrasi belajar siswa di kelas.\"", type: 'alasan', exp: "Kalimat ini menjelaskan alasan mengapa pendapat tersebut dikemukakan." },
{ t: "\"Survei internal sekolah menunjukkan 80% siswa terganggu notifikasi game saat belajar.\"", type: 'bukti', exp: "Data statistik survei empiris merupakan bentuk bukti nyata." },
{ t: "\"Kebiasaan membaca buku di perpustakaan perlu digalakkan kembali.\"", type: 'pendapat', exp: "Ini adalah bentuk usulan atau pandangan utama penulis (pendapat)." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (typeChoosed === currentQ1Data.type);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if(b.textContent.toLowerCase().includes(currentQ1Data.type)) b.classList.add('btn-correct');
});
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Analisis Argumen)
let countQ2 = 0;
const q2Bank = [
{
story: "Dalam artikel tentang kebersihan, penulis menyatakan bahwa sekolah harus melarang kantin menjual kemasan plastik sekali pakai. Alasannya agar volume sampah sekolah berkurang drastis.",
q: "Bagian manakah yang bertindak sebagai alasan dalam argumen tersebut?",
ops: ["Agar volume sampah sekolah berkurang drastis", "Sekolah harus melarang kantin menjual kemasan plastik", "Penulis suka membeli makanan kemasan"],
ans: 0,
exp: "'Agar volume sampah sekolah berkurang' adalah penjelasan logis (alasan) dari pendapat pelarangan plastik."
},
{
story: "Penulis menuliskan: 'Minat baca siswa tergolong rendah. Laporan perpustakaan mencatat rata-rata kunjungan siswa hanya 2 orang per hari.'",
q: "Kalimat kedua dalam kutipan di atas berfungsi sebagai apa?",
ops: ["Bukti nyata berupa data kunjungan perpustakaan", "Pendapat pribadi penulis tanpa dasar", "Alasan yang tidak masuk akal"],
ans: 0,
exp: "Data kunjungan perpustakaan per hari merupakan bukti penguat argumen."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 2
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Gagasan atau sudut pandang utama penulis dalam artikel disebut...", a: "PENDAPAT" },
{ q: "Penjelasan logis yang menjawab 'mengapa' suatu pendapat dikemukakan disebut...", a: "ALASAN" },
{ q: "Data empiris, survei, atau angka statistik yang menguatkan argumen disebut...", a: "BUKTI" },
{ q: "Gabungan pendapat, alasan, dan bukti membentuk struktur...", a: "ARGUMEN" },
{ q: "Artikel ilmiah populer selalu menyertakan fakta untuk memperkuat...", a: "TULISAN" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-teal-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('Jelas')) btn.classList.add('border-teal-400', 'bg-teal-50');
else if(btn.innerText.includes('Mengerti')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 2
const evaluasiBank = [
{
q: `Apa yang dimaksud dengan unsur 'pendapat' dalam sebuah artikel ilmiah populer?`,
options: [`Gagasan atau sudut pandang utama penulis terhadap suatu masalah`, `Angka statistik mutlak dari laboratorium kimia`, `Kisah fiksi dongeng masa lalu`, `Daftar pustaka buku pelajaran`],
a: 0,
exp: "Pendapat merupakan klaim atau sudut pandang utama yang diusung oleh penulis."
},
{
q: `Bagian mana dalam argumen artikel yang berfungsi menjelaskan alasan logis di balik sebuah pendapat?`,
options: [`Alasan pendukung`, `Judul artikel`, `Nama penulis artikel`, `Daftar isi buku`],
a: 0,
exp: "Alasan memberikan penjelasan mengapa pendapat tersebut dinyatakan."
},
{
q: `Mengapa keberadaan 'bukti' (seperti data atau hasil survei) sangat penting dalam artikel ilmiah populer?`,
options: [`Untuk memperkuat argumen dan meyakinkan pembaca bahwa isi artikel berdasar fakta`, `Agar jumlah halaman buku bertambah tebal`, `Supaya pembaca merasa bosan`, `Agar artikel berbentuk cerita fiksi`],
a: 0,
exp: "Bukti nyata memberikan kredibilitas dan keandalan pada informasi yang disajikan."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat 'bukti' dalam sebuah artikel sekolah?`,
options: [`Berdasarkan data perpustakaan, kunjungan siswa naik 30% bulan ini`, `Menurut saya sekolah ini sangat indah dan megah`, `Sebaiknya seluruh siswa membawa bekal makanan sehat`, `Saya merasa sangat gembira belajar di sini`],
a: 0,
exp: "Data perpustakaan konkrit adalah bentuk bukti empiris."
},
{
q: `Ketiga unsur utama yang membangun kekuatan isi artikel ilmiah populer adalah...`,
options: [`Pendapat, alasan, dan bukti pendukung`, `Tema, gambar, dan warna cover`, `Pendahuluan, penutup, dan lampiran`, `Judul, daftar pustaka, dan indeks`],
a: 0,
exp: "Pilar utama isi artikel ilmiah populer adalah pendapat, alasan, dan bukti."
}
];
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-teal-50 hover:border-teal-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 2 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 2 Bab 3: " + refleksi,
strategi: "Evaluasi TP 2: Ciri-Ciri Artikel Ilmiah Populer (Pendapat, Bukti, & Alasan)"
}, "*");
} else {
alert("Laporan TP 2 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 1 menjelaskan pengertian artikel ilmiah populer dan mengidentifikasi informasi penting di dalamnya.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Menulis Artikel Ilmiah Populer (TP 1) 📝</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0f9ff;
background-image: radial-gradient(#bae6fd 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-sky-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-sky-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="book-open" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-sky-800 uppercase tracking-widest">Bab 3 - TP 1: Pengertian & Informasi Penting Artikel Ilmiah Populer</span>
<span id="progress-text" class="text-xs font-black text-white bg-sky-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-sky-400 via-blue-500 to-indigo-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 1 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-sky-100 text-sky-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 1: <span class="text-transparent bg-clip-text bg-gradient-to-r from-sky-600 to-blue-600">Dunia Artikel Ilmiah Populer</span> 📚
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Artikel" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-sky-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-sky-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-blue-500"></i> Tujuan Pembelajaran Kita (3 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menjelaskan <span class="text-sky-600">pengertian artikel ilmiah populer</span> secara tepat.</li>
<li>Mengidentifikasi <span class="text-sky-600">informasi penting</span> di dalam sebuah artikel ilmiah populer.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menyelami dunia sains dan masyarakat? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Artikel Ilmiah Populer -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Apa itu Artikel Ilmiah Populer? 💡</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Tulisan yang mengandung ilmu pengetahuan namun disajikan dengan gaya bahasa santai dan mudah dipahami masyarakat umum.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Karakteristik -->
<div class="bg-white p-6 rounded-3xl border-2 border-sky-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Menulis">
<div class="bg-sky-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Ciri & Sifat Utama</div>
<p class="text-slate-700 font-bold mb-3">Menggabungkan antara <span class="text-sky-600 font-black">data ilmiah/fakta</span> dengan <span class="text-sky-600 font-black">bahasa populer</span> yang komunikatif.</p>
</div>
<div class="bg-sky-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-sky-900 italic">Contoh Topik: Fasilitas sekolah untuk difabel, kebiasaan membuang sampah, dll.</p>
</div>
</div>
<!-- Perbedaan dengan Ilmiah Murni -->
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Diskusi">
<div class="bg-blue-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Ilmiah Populer vs Ilmiah Murni</div>
<p class="text-slate-700 font-bold mb-3">Jika artikel ilmiah murni kaku dan penuh istilah akademik berat, artikel populer lebih <span class="text-blue-600 font-black">fleksibel, ringan, dan menarik dibaca</span> semua kalangan.</p>
</div>
<div class="bg-blue-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-blue-900 italic">"Ilmu bermanfaat yang dikemas santai untuk publik."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Karakteristik Artikel) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-sky-600">Populer atau Bukan?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-sky-100 border-2 border-sky-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-sky-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis pernyataan dari teks berikut:</p>
<div id="q1-text" class="text-2xl text-box text-sky-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Artikel Ilmiah Populer</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Bukan (Cerita Fiksi / Dongeng)</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-sky-600 text-white rounded-2xl font-black text-xl hover:bg-sky-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Menggali Informasi Penting Artikel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Menggali Informasi Penting 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Detektif teks harus jeli menemukan inti gagasan dalam bacaan ilmiah populer.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-blue-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Langkah menemukan informasi penting:</p>
<div class="bg-blue-50 p-6 rounded-2xl border-2 border-blue-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-blue-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Baca Judul & Paragraf Pertama:</b> Pahami topik utama yang sedang dibahas.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-blue-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Temukan Ide Pokok:</b> Perhatikan gagasan setiap paragraf pendukung.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-blue-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Catat Data/Fakta Pendukung:</b> Ambil data angka atau hasil pengamatan nyata.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis Artikel">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Isi Bacaan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-blue-600">Bedah Informasi Artikel</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Artikel Ilmiah Populer) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-sky-500 to-blue-600 tracking-wide uppercase">🏁 Balap Artikel Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat seputar pengertian & informasi artikel ilmiah populer, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-sky-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 1 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-sky-500 hover:bg-sky-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#0284c7] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-sky-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-sky-600 hover:bg-sky-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#0284c7] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 1 -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi TP 1 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang artikel ilmiah populer 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-sky-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Paham!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-blue-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Ngerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian materi artikel mana yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-sky-50 border-2 border-sky-200 focus:border-sky-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 1 & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 1</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman pengertian dan informasi penting artikel ilmiah populer melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-sky-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-sky-700 bg-sky-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 1 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-sky-900 mb-2">Misi TP 1 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 1: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-sky-500 to-blue-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-sky-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-sky-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 1 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-sky-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Pemahaman Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-sky-500">
<option value="100">Sangat Paham Pengertian & Informasi Artikel!</option>
<option value="75">Paham Sebagian Besar</option>
<option value="50">Masih Perlu Belajar</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-sky-500 to-blue-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 1 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-sky-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-sky-600 shadow-[0_4px_0px_#0284c7]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Pengertian Artikel Ilmiah Populer)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Artikel yang membahas ilmu pengetahuan dengan bahasa santai agar mudah dipahami masyarakat umum.\"", a: true, exp: "Ini adalah definisi tepat dari artikel ilmiah populer." },
{ t: "\"Kisah khayalan tentang seekor kancil yang cerdik menyeberangi sungai berbuaya.\"", a: false, exp: "Ini adalah cerita fiksi/dongeng, bukan artikel ilmiah populer." },
{ t: "\"Tulisan laporan hasil penelitian laboratorium yang penuh istilah biokimia rumit dan kaku.\"", a: false, exp: "Ini termasuk artikel ilmiah murni, bukan populer." },
{ t: "\"Artikel tentang fasilitas sekolah inklusi bagi peserta didik difabel yang disajikan secara menarik.\"", a: true, exp: "Ini adalah contoh nyata artikel ilmiah populer berdasar konteks sosial." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Analisis Informasi)
let countQ2 = 0;
const q2Bank = [
{
story: "Sebuah artikel membahas mengenai fasilitas sekolah inklusi yang menyediakan jalur kursi roda dan papan braille bagi peserta didik difabel.",
q: "Apa informasi penting utama yang disampaikan dalam bacaan tersebut?",
ops: ["Penyediaan fasilitas khusus penunjang bagi peserta didik difabel di sekolah inklusi", "Cara membuat kue tradisional di kantin sekolah", "Jadwal pertandingan olahraga antar kelas"],
ans: 0,
exp: "Fasilitas khusus difabel adalah gagasan utama artikel tersebut."
},
{
story: "Artikel ilmiah populer tentang kebiasaan membuang sampah di sekolah mencatat bahwa 60% siswa masih membuang sampah sembarangan di laci meja.",
q: "Data penting apa yang berhasil ditemukan dari artikel tersebut?",
ops: ["Persentase kebiasaan siswa membuang sampah sembarangan di laci meja", "Harga buku perpustakaan yang sangat mahal", "Jumlah guru yang mengajar di kelas 8"],
ans: 0,
exp: "Data kuantitatif 60% siswa membuang sampah di laci meja adalah informasi penting."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 1
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Tulisan ilmu pengetahuan yang dikemas dengan bahasa santai disebut artikel ilmiah...", a: "POPULER" },
{ q: "Artikel ilmiah populer memadukan antara data fakta dan bahasa yang...", a: "KOMUNIKATIF" },
{ q: "Langkah awal menemukan informasi penting adalah membaca judul dan paragraf...", a: "PERTAMA" },
{ q: "Topik tentang fasilitas sekolah untuk siswa difabel termasuk dalam ruang lingkup sekolah...", a: "INKLUSI" },
{ q: "Informasi yang didukung oleh angka atau pengamatan nyata disebut data...", a: "FAKTA" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-sky-400', 'border-blue-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) btn.classList.add('border-sky-400', 'bg-sky-50');
else if(btn.innerText.includes('Ngerti')) btn.classList.add('border-blue-400', 'bg-blue-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 1
const evaluasiBank = [
{
q: `Apa definisi yang paling tepat mengenai artikel ilmiah populer?`,
options: [`Tulisan yang memuat ilmu pengetahuan dengan bahasa yang santai dan mudah dipahami publik`, `Kisah petualangan fiksi yang penuh keajaiban`, `Laporan laboratorium kimia yang sangat kaku dan akademik`, `Kumpulan puisi cinta remaja`],
a: 0,
exp: "Artikel ilmiah populer menggabungkan unsur keilmuan dengan bahasa yang luwes untuk masyarakat."
},
{
q: `Manakah karakteristik utama yang membedakan artikel ilmiah populer dengan artikel ilmiah murni?`,
options: [`Bahasa penyajiannya lebih fleksibel, komunikatif, dan tidak kaku`, `Jumlah halaman harus tepat seratus lembar`, `Tidak boleh mencantumkan fakta sama sekali`, `Hanya diterbitkan dalam bentuk buku cerita bergambar`],
a: 0,
exp: "Artikel populer mengutamakan bahasa yang komunikatif agar mudah dinikmati pembaca umum."
},
{
q: `Langkah pertama yang paling efektif saat Anda ingin menggali informasi penting dari sebuah artikel adalah...`,
options: [`Membaca judul dan paragraf pertama untuk menangkap topik utama`, `Menghitung jumlah total kata dalam artikel`, `Membaca artikel dari paragraf paling akhir secara terbalik`, `Menutup teks tanpa membacanya`],
a: 0,
exp: "Judul dan paragraf pertama memuat gagasan pokok atau orientasi topik bacaan."
},
{
q: `Topik berikut yang paling sesuai diangkat dalam penulisan artikel ilmiah populer tingkat sekolah adalah...`,
options: [`Kebiasaan membuang sampah di sekolah atau fasilitas siswa difabel`, `Sejarah pertempuran galaksi luar angkasa fiktif`, `Resep ramuan sihir penyembuh luka`, `Cara menerbangkan roket pribadi ke matahari`],
a: 0,
exp: "Topik kontekstual seputar lingkungan sekolah sangat relevan untuk artikel populer siswa."
},
{
q: `Mengapa penulis artikel ilmiah populer perlu menyertakan fakta atau data dalam tulisannya?`,
options: [`Agar informasi yang disampaikan terpercaya dan dapat dipertanggungjawabkan`, `Agar pembaca merasa cepat mengantuk`, `Agar artikel terlihat seperti buku fiksi`, `Agar tidak perlu menggunakan paragraf pembuka`],
a: 0,
exp: "Fakta dan data memberikan fondasi kredibilitas pada isi artikel ilmiah."
}
];
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-sky-50 hover:border-sky-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 1 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 1 Bab 3: " + refleksi,
strategi: "Evaluasi TP 1: Pengertian & Informasi Penting Artikel Ilmiah Populer"
}, "*");
} else {
alert("Laporan TP 1 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>