Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
๐ Pilih Materi Pelajaran Belajar
Kelas 7
Matematika
Bilangan Rasional - kuis kelompok
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 7 - Bilangan Rasional</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&family=Fraunces:wght@700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
body { font-family: 'Work Sans', sans-serif; }
.font-display { font-family: 'Fraunces', serif; }
.slide { display: none; animation: fadeIn 0.4s ease; }
.slide.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.option-btn { transition: all 0.2s; }
.option-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
.materi-card { background: white; border-radius: 12px; padding: 1.25rem; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-teal-50 via-slate-50 to-emerald-50 text-slate-800">
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center bg-teal-950 text-white text-center px-6 py-12">
<div class="absolute inset-0 bg-gradient-to-t from-teal-950/90 via-teal-900/60 to-teal-950/40"></div>
<div class="relative z-10 flex flex-col items-center justify-center max-w-2xl mx-auto">
<span class="inline-block px-4 py-1 rounded-full text-sm font-medium mb-4 bg-teal-500 text-white shadow">Modul Interaktif Matematika</span>
<h1 class="font-display leading-tight mb-4 text-4xl md:text-5xl font-black">Bab 2: Bilangan Rasional</h1>
<p class="max-w-lg mb-8 text-teal-100 text-sm md:text-base text-balance">Mari pelajari cara menyatakan, membandingkan, dan mengoperasikan bilangan rasional dalam kehidupan sehari-hari!</p>
<button class="px-8 py-3.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="goSlide(1)">Mulai Pembelajaran →</button>
</div>
</div>
</div>
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">๐ฏ</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Capaian Pembelajaran (CP)</h2>
<div class="w-full bg-white border border-teal-100 rounded-2xl p-6 shadow-sm mb-8">
<p class="leading-relaxed text-slate-700 text-sm md:text-base">Di akhir fase D, peserta didik dapat membaca, menulis, dan membandingkan bilangan bulat, bilangan rasional dan irasional, bilangan desimal, bilangan berpangkat bulat dan akar, bilangan dalam notasi ilmiah. Mereka dapat menerapkan operasi aritmetika pada bilangan real, dan memberikan estimasi/perkiraan dalam menyelesaikan masalah.</p>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(0)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(2)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">๐</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Tujuan Pembelajaran (TP)</h2>
<div class="w-full bg-white border border-slate-200 rounded-2xl p-6 shadow-sm mb-8 space-y-4 text-sm md:text-base text-slate-700">
<div class="flex gap-3"><span class="font-bold text-teal-600">1.</span><p>Peserta didik dapat mengidentifikasi bilangan rasional dan menyatakan bilangan rasional dalam bentuk pecahan dan desimal.</p></div>
<div class="flex gap-3"><span class="font-bold text-teal-600">2.</span><p>Peserta didik dapat membandingkan dan mengurutkan bilangan rasional serta menaksir nilai bilangan rasional.</p></div>
<div class="flex gap-3"><span class="font-bold text-teal-600">3.</span><p>Peserta didik dapat melakukan operasi hitung penjumlahan, pengurangan, perkalian, dan pembagian bilangan rasional serta memecahkan masalah kontekstual.</p></div>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(1)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(3)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-3">
<div class="max-w-4xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center">
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-8">Eksplorasi Konsep Bilangan Rasional</h2>
<div class="grid md:grid-cols-2 gap-4 mb-6">
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">๐ก Definisi</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Bilangan rasional adalah bilangan yang dapat ditulis sebagai pecahan <strong>a/b</strong> di mana <em>a</em> dan <em>b</em> bilangan bulat, serta <strong>b โ 0</strong>.</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">๐ Konversi Bentuk</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Mengubah pecahan ke desimal dilakukan dengan pembagian kurung bersusun (misal: 1/4 = 0,25). Desimal berulang juga merupakan bilangan rasional (0,333...).</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">โ๏ธ Membandingkan Nilai</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Gunakan penyamaan penyebut atau ubah ke desimal. Hati-hati pada bilangan negatif: makin besar angkanya, nilainya makin kecil (<strong>-0,5 > -0,75</strong>).</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">๐งฎ Operasi Aritmetika</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Penjumlahan/pengurangan wajib menyamakan penyebut. Pada perkalian pecahan, kalikan langsung pembilang dengan pembilang, penyebut dengan penyebut.</p>
</div>
</div>
<div class="materi-card mb-8">
<h3 class="font-bold text-teal-700 mb-1">๐ Aplikasi Kontekstual</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Digunakan saat menghitung sisa bahan kue, pembagian potongan tali, pengukuran kedalaman laut, atau menghitung diskon belanja secara presisi.</p>
</div>
<div class="flex justify-center gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(2)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(4)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-4">
<div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">โ๏ธ</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Contoh Soal & Pembahasan</h2>
<div class="w-full space-y-4 mb-8 text-sm md:text-base">
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 1: Nyatakan 3/8 dalam desimal</p>
<p class="text-teal-700 font-medium">Jawaban: lakukan pembagian bersusun 3 รท 8 = 0,375. (Rasional terbatas)</p>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 2: Bandingkan -1/2 dengan -1/4</p>
<p class="text-teal-700 font-medium">Jawaban: -0,5 < -0,25. Maka, -1/2 < -1/4.</p>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 3: Ibu memiliki 2,5 kg beras, dimasak sebanyak 1 1/4 kg. Sisa beras?</p>
<p class="text-teal-700 font-medium">Jawaban: 2,5 kg โ 1,25 kg = 1,25 kg atau 1 1/4 kg.</p>
</div>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(3)">← Kembali</button>
<button class="px-8 py-2.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold shadow-md hover:scale-105 transition" onclick="goSlide(5)">Mulai Quiz Kelompok โ๏ธ</button>
</div>
</div>
</div>
<div class="slide" id="slide-5">
<div class="w-full px-3 py-4 min-h-screen flex flex-col justify-between">
<div class="grid grid-cols-2 gap-3 flex-1">
<div class="border-2 border-teal-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-teal-100 text-teal-800">๐ฅ KELOMPOK 1</span>
<div id="timer1" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer1-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar1" class="h-1.5 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q1-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q1-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb1" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-orange-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-orange-100 text-orange-800">โก KELOMPOK 2</span>
<div id="timer2" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer2-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar2" class="h-1.5 rounded-full bg-orange-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q2-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q2-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb2" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-purple-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-800">๐ฎ KELOMPOK 3</span>
<div id="timer3" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer3-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar3" class="h-1.5 rounded-full bg-purple-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q3-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q3-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb3" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-blue-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-blue-100 text-blue-800">๐ KELOMPOK 4</span>
<div id="timer4" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer4-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar4" class="h-1.5 rounded-full bg-blue-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q4-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q4-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb4" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
</div>
</div>
</div>
<div class="slide" id="slide-6">
<div class="max-w-2xl mx-auto px-5 py-12 text-center">
<div class="text-6xl mb-4">๐</div>
<h2 class="font-display mb-6 text-3xl font-black text-slate-800">Papan Skor Akhir Pertandingan Kelompok</h2>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
<div class="bg-teal-50 border border-teal-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-teal-800 mb-1">Kelompok 1</p>
<p id="score1-text" class="text-2xl font-black text-teal-600"></p>
</div>
<div class="bg-orange-50 border border-orange-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-orange-800 mb-1">Kelompok 2</p>
<p id="score2-text" class="text-2xl font-black text-orange-600"></p>
</div>
<div class="bg-purple-50 border border-purple-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-purple-800 mb-1">Kelompok 3</p>
<p id="score3-text" class="text-2xl font-black text-purple-600"></p>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-blue-800 mb-1">Kelompok 4</p>
<p id="score4-text" class="text-2xl font-black text-blue-600"></p>
</div>
</div>
<p id="winner-text" class="text-xl font-black text-slate-800 mb-8 p-3 bg-amber-100 rounded-2xl inline-block px-6"></p>
<div>
<button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="startIndividuQuiz()">Lanjut Kuis Individu Mandiri →</button>
</div>
</div>
</div>
<div class="slide" id="slide-7">
<div class="max-w-xl mx-auto px-6 py-12 min-h-screen flex flex-col justify-center">
<div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-md">
<div class="flex justify-between items-center mb-4">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-800">๐ฏ TANTANGAN INDIVIDU</span>
<span id="ind-progress" class="text-xs font-bold text-slate-500">Soal 1 dari 5</span>
</div>
<div class="w-full bg-slate-100 h-2 rounded-full mb-6">
<div id="ind-bar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 20%"></div>
</div>
<p id="ind-q-text" class="text-base font-bold text-slate-800 mb-4 min-h-[60px]"></p>
<div id="ind-options" class="flex flex-col gap-3"></div>
<div id="ind-fb" class="mt-4 p-3 rounded-xl text-center font-bold text-sm hidden"></div>
</div>
</div>
</div>
<div class="slide" id="slide-8">
<div class="max-w-md mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center text-center">
<div class="text-6xl mb-4">โญ</div>
<h2 class="font-display text-2xl font-black text-slate-800 mb-2">Evaluasi Hasil Mandiri</h2>
<p class="text-sm text-slate-500 mb-6">Kerja bagus! Berikut perolehan poin latihan mandirimu hari ini:</p>
<div class="bg-white border border-indigo-100 rounded-3xl p-6 shadow-sm w-full mb-8">
<p class="text-xs uppercase tracking-wider font-bold text-slate-400 mb-1">Skor Kamu</p>
<p id="ind-score-text" class="text-5xl font-black text-indigo-600">0 / 5</p>
<p id="ind-eval-msg" class="text-sm font-medium text-slate-600 mt-3"></p>
</div>
<button class="w-full py-3 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-bold shadow transition hover:scale-105" onclick="goSlide(9)">Isi Lembar Refleksi Akhir</button>
</div>
</div>
<div class="slide" id="slide-9">
<div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center">
<div class="text-center mb-6">
<span class="text-5xl">๐ญ</span>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 mt-2">Lembar Refleksi Pembelajaran</h2>
<p class="text-xs md:text-sm text-slate-500">Evaluasi pemahaman kelompok dan individu secara jujur</p>
</div>
<div class="space-y-4 mb-8">
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label class="block font-bold text-sm text-slate-800 mb-3">1. Bagaimana perasaan kelompokmu setelah mencoba soal Bilangan Rasional tadi?</label>
<div class="grid grid-cols-4 gap-2 text-center text-sm">
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="sangat-paham" class="text-teal-600">
<span class="text-xl">๐</span><span class="text-xs font-semibold">Sangat Paham</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="paham" class="text-teal-600" checked>
<span class="text-xl">๐</span><span class="text-xs font-semibold">Paham</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="bingung" class="text-teal-600">
<span class="text-xl">๐คจ</span><span class="text-xs font-semibold">Ragu-ragu</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="sulit" class="text-teal-600">
<span class="text-xl">๐ฐ</span><span class="text-xs font-semibold">Butuh Bimbingan</span>
</label>
</div>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label for="ref-kunci" class="block font-bold text-sm text-slate-800 mb-1">2. Bagian mana yang menurut kalian paling menantang?</label>
<input type="text" id="ref-kunci" placeholder="Misal: mengubah desimal berulang, tanda negatif..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label for="ref-rencana" class="block font-bold text-sm text-slate-800 mb-1">3. Apa rencana perbaikan untuk pertemuan selanjutnya?</label>
<input type="text" id="ref-rencana" placeholder="Misal: lebih teliti menyamakan penyebut pecahan..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
</div>
<div class="text-center space-y-2">
<button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full font-bold shadow-lg text-sm transition hover:scale-105" onclick="submitRefleksi()">Kirim Laporan & Selesai! ๐</button>
<p id="ref-success" class="text-xs font-bold text-emerald-600 hidden animate-pulse">Refleksi terkam! Terima kasih telah belajar dengan giat hari ini.</p>
</div>
</div>
</div>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
if (n === 5) startQuiz();
}
// BANK SOAL INDEPENDEN KELOMPOK
const allQs = [
[
{ q: "Manakah yang merupakan bilangan rasional?", opts: ["โ2", "ฯ (pi)", "0,35", "โ7"], ans: 2 },
{ q: "Bentuk desimal dari 3/5 Grandma adalah...", opts: ["0,3", "0,5", "0,6", "0,75"], ans: 2 },
{ q: "Perbandingan yang benar adalah...", opts: ["1/2 < 1/4", "0,4 > 0,5", "-0,2 > -0,6", "3/5 < 2/5"], ans: 2 },
{ q: "Hasil dari 1/4 + 0,5 = ...", opts: ["0,75", "0,55", "1,25", "0,60"], ans: 0 },
{ q: "Suhu awal 2,5ยฐC lalu turun 1,5ยฐC menjadi...", opts: ["4ยฐC", "1ยฐC", "-1ยฐC", "0ยฐC"], ans: 1 }
],
[
{ q: "Pernyataan b โ 0 pada pecahan a/b karena...", opts: ["Hasil tak terdefinisi", "Hasil selalu nol", "Bukan bulat", "Angka pembilang"], ans: 0 },
{ q: "Bentuk pecahan biasa dari 0,8 adalah...", opts: ["1/8", "4/5", "2/3", "3/4"], ans: 1 },
{ q: "Manakah tanda yang tepat untuk 3/4 ... 0,70?", opts: [">", "<", "=", "โค"], ans: 0 },
{ q: "Hasil dari 1,2 + 3/5 = ...", opts: ["1,5", "1,8", "2,0", "1,25"], ans: 1 },
{ q: "Ibu punya 1,75 kg tepung, dipakai 0,5 kg. Sisa...", opts: ["1,20 kg", "1,50 kg", "1,25 kg", "0,75 kg"], ans: 2 }
],
[
{ q: "Bilangan manakah yang termasuk bilangan rasional?", opts: ["โ8", "-2 1/2", "โ5", "0,151617..."], ans: 1 },
{ q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 },
{ q: "Urutan dari yang terkecil adalah...", opts: ["-0,8 ; 0,2 ; 1/2", "0,2 ; 1/2 ; -0,8", "1/2 ; 0,2 ; -0,8", "-0,8 ; 1/2 ; 0,2"], ans: 0 },
{ q: "Hasil dari 3/4 โ 0,25 = ...", opts: ["0,25", "0,50", "0,75", "0"], ans: 1 },
{ q: "Panjang pita 2,5 m dipotong 4 bagian sama rata...", opts: ["0,5 m", "0,625 m", "0,75 m", "1,25 m"], ans: 1 }
],
[
{ q: "Angka -4 dapat diubah ke pecahan menjadi...", opts: ["-4/0", "-4/1", "1/-4", "4/4"], ans: 1 },
{ q: "Bentuk pecahan dari 0,25 adalah...", opts: ["1/2", "1/3", "1/4", "2/5"], ans: 2 },
{ q: "Pernyataan yang benar adalah...", opts: ["-0,3 < -0,5", "3/5 = 0,6", "1/4 > 1/2", "-1 > 0"], ans: 1 },
{ q: "Hasil dari 0,6 ร 1/2 = ...", opts: ["0,3", "0,12", "0,5", "1,2"], ans: 0 },
{ q: "Kedalaman kapal selam 5,5 m lalu naik 2,5 m menjadi...", opts: ["8 m", "3 m", "-3 m", "-8 m"], ans: 2 }
]
];
// SOAL KUIS MANDIRI / INDIVIDU
const individuQs = [
{ q: "Mengapa angka desimal 0,333... disebut bilangan rasional?", opts: ["Karena memiliki batas angka di ujung", "Karena bisa dinyatakan dalam pecahan 1/3", "Karena angkanya tidak pernah berhenti", "Karena nilainya kurang dari 1"], ans: 1 },
{ q: "Manakah bilangan rasional di bawah ini yang posisinya paling kanan pada garis bilangan?", opts: ["-1,5", "-0,25", "0,15", "-2/5"], ans: 2 },
{ q: "Tentukan hasil perhitungan dari 0,75 + 2/5 !", opts: ["1,15", "0,95", "1,35", "0,85"], ans: 0 },
{ q: "Sebuah tali sepanjang 3,5 meter dipotong sepanjang 1 1/2 meter. Berapa sisa tali saat ini?", opts: ["2,5 meter", "1,75 meter", "2,0 meter", "2,25 meter"], ans: 2 },
{ q: "Jika x = -0,6 dan y = -3/5, maka hubungan kebenaran yang mutlak adalah...", opts: ["x lebih besar dari y", "x lebih kecil dari y", "x sama dengan y", "x dan y tidak bisa dibandingkan"], ans: 2 }
];
let scores, currentQs, timers, timesLeft, finished;
let indCurQ = 0, indScore = 0;
function startQuiz() {
scores = [0, 0, 0, 0];
currentQs = [0, 0, 0, 0];
finished = [false, false, false, false];
timers = [null, null, null, null];
timesLeft = [15, 15, 15, 15];
for (let g = 0; g < 4; g++) showQ(g);
}
function showQ(g) {
const gIdx = g + 1;
const qEl = document.getElementById(`q${gIdx}-text`);
const optEl = document.getElementById(`q${gIdx}-options`);
const barEl = document.getElementById(`bar${gIdx}`);
const fbEl = document.getElementById(`fb${gIdx}`);
const timerEl = document.getElementById(`timer${gIdx}-text`);
if (currentQs[g] >= 5) {
finished[g] = true;
qEl.innerHTML = "<span class='text-emerald-600 font-bold'>๐ Selesai! Menunggu kelompok lain...</span>";
optEl.innerHTML = '';
clearInterval(timers[g]);
if (finished.every(f => f)) showResults();
return;
}
const q = allQs[g][currentQs[g]];
qEl.textContent = `${currentQs[g] + 1}. ${q.q}`;
barEl.style.width = `${(currentQs[g] / 5) * 100}%`;
fbEl.classList.add('hidden');
optEl.innerHTML = q.opts.map((o, i) =>
`<button class="option-btn rounded-lg p-2 border border-slate-200 bg-white font-medium text-slate-800 text-xs text-left" onclick="answer(${g},${i})">${o}</button>`
).join('');
timesLeft[g] = 15;
timerEl.textContent = timesLeft[g];
clearInterval(timers[g]);
timers[g] = setInterval(() => {
timesLeft[g]--;
timerEl.textContent = timesLeft[g];
if (timesLeft[g] <= 0) { clearInterval(timers[g]); answer(g, -1); }
}, 1000);
}
function answer(g, val) {
const gIdx = g + 1;
clearInterval(timers[g]);
const optEl = document.getElementById(`q${gIdx}-options`);
const fbEl = document.getElementById(`fb${gIdx}`);
const btns = optEl.querySelectorAll('.option-btn');
btns.forEach(b => b.disabled = true);
const correct = allQs[g][currentQs[g]].ans;
if (val === correct) {
scores[g]++;
if(btns[val]) btns[val].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = 'โ
Benar!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-emerald-100 text-emerald-700';
} else if (val === -1) {
if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = 'โฐ Waktu Habis!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-amber-100 text-amber-700';
} else {
if(btns[val]) btns[val].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold');
if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = 'โ Salah!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-rose-100 text-rose-700';
}
fbEl.classList.remove('hidden');
currentQs[g]++;
setTimeout(() => showQ(g), 1500);
}
function showResults() {
for (let i = 0; i < 4; i++) {
document.getElementById(`score${i+1}-text`).textContent = `${scores[i]} / 5`;
}
const max = Math.max(...scores);
const winners = scores.reduce((acc, s, i) => s === max ? [...acc, i+1] : acc, []);
let text = '';
if (winners.length === 4) text = '๐ค Seri! Kekuatan Semua Kelompok Seimbang!';
else if (winners.length > 1) text = `๐ค Seri: Kelompok ${winners.join(' & ')} unggul bersama!`;
else text = `๐ Selamat! Kelompok ${winners[0]} Keluar Sebagai Juara!`;
document.getElementById('winner-text').textContent = text;
goSlide(6);
}
// FUNGSI UTK KUIS INDIVIDU TANTANGAN
function startIndividuQuiz() {
indCurQ = 0;
indScore = 0;
goSlide(7);
showIndividuQuestion();
}
function showIndividuQuestion() {
const qEl = document.getElementById("ind-q-text");
const optEl = document.getElementById("ind-options");
const fbEl = document.getElementById("ind-fb");
const progEl = document.getElementById("ind-progress");
const barEl = document.getElementById("ind-bar");
if (indCurQ >= individuQs.length) {
showIndividuResults();
return;
}
fbEl.classList.add('hidden');
progEl.textContent = `Soal ${indCurQ + 1} dari ${individuQs.length}`;
barEl.style.width = `${((indCurQ + 1) / individuQs.length) * 100}%`;
const currentQ = individuQs[indCurQ];
qEl.textContent = currentQ.q;
optEl.innerHTML = currentQ.opts.map((o, i) =>
`<button class="ind-opt-btn w-full p-3 text-left text-sm font-medium border border-slate-200 rounded-xl bg-slate-50 hover:bg-slate-100 transition" onclick="checkIndividuAnswer(${i})">${o}</button>`
).join('');
}
function checkIndividuAnswer(selectedIdx) {
const fbEl = document.getElementById("ind-fb");
const btns = document.querySelectorAll(".ind-opt-btn");
btns.forEach(b => b.disabled = true);
const correctIdx = individuQs[indCurQ].ans;
if (selectedIdx === correctIdx) {
indScore++;
btns[selectedIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold");
fbEl.textContent = "๐ฏ Hebat! Jawabanmu Tepat.";
fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-emerald-100 text-emerald-700";
} else {
btns[selectedIdx].classList.add("bg-rose-100", "border-rose-500", "text-rose-700", "font-bold");
btns[correctIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold");
fbEl.textContent = "๐ Masih Kurang Tepat, Perhatikan Pembahasan.";
fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-rose-100 text-rose-700";
}
fbEl.classList.remove('hidden');
indCurQ++;
setTimeout(showIndividuQuestion, 2000);
}
function showIndividuResults() {
goSlide(8);
document.getElementById("ind-score-text").textContent = `${indScore} / ${individuQs.length}`;
const msgEl = document.getElementById("ind-eval-msg");
if (indScore === 5) msgEl.textContent = "Luar biasa! Kamu menguasai penuh materi Bilangan Rasional. ๐";
else if (indScore >= 3) msgEl.textContent = "Sudah bagus! Tingkatkan ketelitian pada pengerjaan tanda operasi hitung. ๐";
else msgEl.textContent = "Jangan patah semangat! Silakan ulas kembali contoh pembahasannya, ya! ๐";
}
function submitRefleksi() {
document.getElementById('ref-success').classList.remove('hidden');
setTimeout(() => {
document.getElementById('ref-kunci').value = '';
document.getElementById('ref-rencana').value = '';
document.getElementById('ref-success').classList.add('hidden');
goSlide(0);
}, 3000);
}
</script>
</body>
</html>
Kelas 7
Matematika
Bilangan Rasional
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 7 - Bilangan Rasional</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&family=Fraunces:wght@700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
body { font-family: 'Work Sans', sans-serif; }
.font-display { font-family: 'Fraunces', serif; }
.slide { display: none; animation: fadeIn 0.4s ease; }
.slide.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.option-btn { transition: all 0.2s; cursor: pointer; }
.option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.4); } 50% { box-shadow: 0 0 0 8px rgba(20,184,166,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
</style>
</head>
<body class="min-h-screen" style="background: linear-gradient(to bottom, #f0fdfa, #ccfbf1, #f0fdf4);">
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center">
<div class="absolute inset-0 bg-teal-950/80"></div>
<div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-12 max-w-2xl mx-auto text-white">
<span class="inline-block px-4 py-1 bg-teal-500 text-white rounded-full text-sm font-medium mb-4 shadow">Modul Interaktif Matematika</span>
<h1 class="font-display leading-tight mb-3 text-4xl md:text-5xl font-black">Bab: Bilangan Rasional</h1>
<p class="max-w-lg mb-6 text-teal-100 text-sm md:text-base">Kuasai konsep bilangan rasional, bentuk pecahan/desimal, perbandingan, hingga operasi hitung secara berurutan!</p>
<div class="mb-6 w-full max-w-xs text-left text-slate-800">
<label for="nama-siswa" class="block text-xs font-bold text-teal-200 uppercase mb-1">Nama Lengkap Siswa:</label>
<input type="text" id="nama-siswa" placeholder="Ketik namamu di sini..." class="w-full p-3 border-2 border-white/20 bg-white/90 rounded-xl text-sm focus:ring-2 focus:ring-teal-400 focus:outline-none font-medium">
</div>
<button class="px-8 py-3 bg-teal-500 text-white rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="mulaiKelas()">Mulai Petualangan Belajar ๐</button>
</div>
</div>
</div>
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 1</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Pengertian & Bentuk Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ Apa itu Bilangan Rasional?</p>
<p class="text-slate-700 text-sm leading-relaxed">Bilangan rasional adalah bilangan yang dapat dinyatakan dalam bentuk pecahan <strong>a/b</strong>, dengan <i>a</i> dan <i>b</i> adalah bilangan bulat, serta <strong>b โ 0</strong>.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ Menyatakan ke Pecahan & Desimal</p>
<p class="text-slate-700 text-sm mb-1">โข <strong>Pecahan ke Desimal:</strong> 1/4 = 0,25 (Desimal terbatas) atau 1/3 = 0,333... (Desimal berulang).</p>
<p class="text-slate-700 text-sm">โข <strong>Desimal ke Pecahan:</strong> 0,5 = 5/10 = 1/2.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab1')">Siap, Uji Kuis Bab 1 โก</button>
</div>
</div>
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-5 py-10">
<div class="flex items-center justify-between mb-4">
<span id="kuis-bab-label" class="inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold"></span>
<div id="timer-display" class="flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-sm timer-pulse">
<i data-lucide="clock" style="width:16px;height:16px;"></i> <span id="timer-text">15</span>
</div>
</div>
<div class="w-full h-2 rounded-full bg-slate-200 mb-6">
<div id="quiz-bar" class="h-2 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div>
</div>
<h2 id="quiz-question" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed"></h2>
<div id="quiz-options" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
<div id="quiz-feedback" class="mt-4 p-3 rounded-lg text-center font-semibold hidden"></div>
</div>
</div>
<div class="slide" id="slide-3">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 2</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Membandingkan Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">โ๏ธ Cara Membandingkan Pecahan</p>
<p class="text-slate-700 text-sm leading-relaxed">Untuk membandingkan dua pecahan (misal 2/3 dan 3/4), kita dapat menyamakan penyebutnya terlebih dahulu atau menggunakan metode perkalian silang:</p>
<p class="text-slate-700 text-sm mt-2 font-medium">โข 2 ร 4 = 8 dan 3 ร 3 = 9. Karena 8 < 9, maka <strong>2/3 < 3/4</strong>.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ Bilangan Rasional Negatif</p>
<p class="text-slate-700 text-sm leading-relaxed">Ingat, pada bilangan negatif, semakin besar angkanya justru nilainya semakin kecil. Contoh: <strong>-0,5 > -0,75</strong>.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab2')">Siap, Uji Kuis Bab 2 โก</button>
</div>
</div>
<div class="slide" id="slide-4">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 3</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Operasi Hitung & Penerapan Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐งฎ Penjumlahan & Perkalian</p>
<p class="text-slate-700 text-sm mb-1">โข <strong>Penjumlahan:</strong> 1/2 + 1/3 = 3/6 + 2/6 = 5/6 (Samakan penyebut).</p>
<p class="text-slate-700 text-sm">โข <strong>Perkalian:</strong> 2/3 ร 4/5 = (2ร4) / (3ร5) = 8/15.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ผ Soal Cerita kontekstual</p>
<p class="text-slate-700 text-sm leading-relaxed">Ibu membeli gula sebanyak 2,5 kg, kemudian digunakan untuk membuat kue sebanyak 1 1/4 kg. Sisa gula ibu adalah: 2,5 โ 1,25 = 1,25 kg.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab3')">Siap, Uji Kuis Bab 3 โก</button>
</div>
</div>
<div class="slide" id="slide-5">
<div class="max-w-2xl mx-auto px-5 py-10">
<div class="bg-indigo-600 rounded-2xl p-6 text-white shadow-xl mb-6">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">๐งญ</span>
<h2 class="font-display text-2xl font-bold">Panel Refleksi: Self-Check & Next Step</h2>
</div>
<p class="text-indigo-100 text-sm">Sebelum menutup misi belajar hari ini, yuk luangkan waktu 1 menit untuk melihat perkembangan dirimu secara jujur!</p>
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4">
<p class="font-bold text-slate-800 text-sm mb-3 flex items-center gap-2">๐ Pengukur Pemahaman (Skala Likert)</p>
<p class="text-xs text-slate-600 mb-4">Jika tingkat pemahamanmu terhadap materi hari ini diibaratkan sebagai Baterai HP, ada di level mana sekarang?</p>
<div class="space-y-2 text-sm text-slate-700">
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="25" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>๐ชซ <strong>25% (Low Batt):</strong> Masih bingung banget, butuh penjelasan ulang guru.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="50" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>๐ <strong>50% (Half):</strong> Setengah paham, tapi masih ragu di hitungan bentuk desimal/negatif.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="75" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>๐ <strong>75% (Good):</strong> Paham materi Bilangan Rasional dan bisa kuis dengan lancar.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="100" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>โก <strong>100% (Full Power):</strong> Paham banget dan siap membantu mengajari teman!</span>
</label>
</div>
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4">
<p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">๐ง Detektor Hambatan (Jawaban Singkat)</p>
<label for="input-hambatan" class="block text-xs text-slate-600 mb-3">Tuliskan konsep atau jenis perkalian/pembagian tanda yang menurutmu paling menantang.</label>
<input type="text" id="input-hambatan" placeholder="Tuliskan hambatanmu..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-6">
<p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">๐ง Strategi Belajar & Solusi</p>
<label for="input-strategi" class="block text-xs text-slate-600 mb-3">Apa strategi belajarmu ke depan agar operasi bilangan bulat negatif terasa lebih mudah?</label>
<input type="text" id="input-strategi" placeholder="Contoh: Membuat jembatan keledai tanda, latihan soal..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="text-center">
<button class="px-8 py-3 bg-indigo-600 text-white rounded-full font-bold shadow-lg hover:scale-105 transition" onclick="simpanRefleksiDanLanjut()">Lihat Skor Akhir Anda →</button>
</div>
</div>
</div>
<div class="slide" id="slide-6">
<div class="max-w-md mx-auto px-5 py-12 text-center bg-white border border-teal-100 rounded-2xl shadow-md mt-12">
<div class="text-6xl mb-4" id="result-emoji">๐</div>
<h2 class="font-display mb-2 text-2xl font-bold text-slate-800">Misi Belajar Selesai!</h2>
<p id="score-text" class="text-3xl font-black text-teal-600 mb-4"></p>
<p class="text-sm text-slate-500 mb-6 px-4">Luar biasa! Seluruh lembar evaluasi dan data penilaian mandiri Anda telah direkam.</p>
<div class="flex flex-col gap-2 max-w-xs mx-auto">
<button id="lms-send-btn" class="px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="kirimDataLms()">Kirim Laporan Nilai ๐</button>
<button class="px-6 py-2.5 bg-slate-100 text-slate-700 rounded-full font-semibold shadow hover:scale-105 transition text-sm" onclick="restart()">Ulangi Dari Awal</button>
</div>
<div id="lms-success-alert" class="hidden mt-4 text-xs font-bold text-green-700 bg-green-50 border border-green-200 p-2 rounded-lg animate-pulse">
Laporan kumulatif dan refleksi berhasil dikirim ke guru!
</div>
</div>
</div>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
}
function mulaiKelas() {
if(!document.getElementById('nama-siswa').value.trim()) {
alert("Masukkan nama terlebih dahulu!");
return;
}
goSlide(1);
}
// BANK SOAL BILANGAN RASIONAL SESUAI DENGAN TUJUAN PEMBELAJARAN
const databaseKuis = {
bab1: [
{ q: "Manakah di bawah ini yang BUKAN merupakan bilangan rasional?", opts: ["โ2", "0,5", "2/3", "-4"], ans: 0 },
{ q: "Bentuk pecahan biasa yang paling sederhana dari bilangan desimal 0,75 adalah...", opts: ["1/2", "3/4", "7/5", "3/5"], ans: 1 },
{ q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 }
],
bab2: [
{ q: "Di antara pilihan berikut, tanda perbandingan yang benar adalah...", opts: ["1/2 < 1/3", "2/5 > 3/5", "-0,6 > -0,2", "3/4 > 2/3"], ans: 3 },
{ q: "Jika diurutkan dari yang terkecil, urutan yang benar adalah...", opts: ["-0,5 ; 1/4 ; 0,6", "0,6 ; 1/4 ; -0,5", "-0,5 ; 0,6 ; 1/4", "1/4 ; -0,5 ; 0,6"], ans: 0 }
],
bab3: [
{ q: "Hasil operasi hitung dari 1/2 + 0,25 adalah...", opts: ["0,5", "3/4", "1/4", "5/4"], ans: 1 },
{ q: "Andi memiliki tali sepanjang 1,5 meter. Ia memotongnya sebanyak 3/4 meter untuk kerajinan. Sisa tali Andi adalah...", opts: ["0,5 meter", "0,25 meter", "0,75 meter", "1 meter"], ans: 2 }
]
};
let babAktif = '';
let qIndex = 0;
let totalSkorBenar = 0;
let totalSoalDilewati = 0;
let timer, timeLeft;
let dataBateraiSiswa = "75";
let dataHambatanSiswa = "-";
let dataStrategiSiswa = "-";
function siapkanKuis(bab) {
babAktif = bab;
qIndex = 0;
goSlide(2);
jalankanKuisEngine();
}
function jalankanKuisEngine() {
const listSoal = databaseKuis[babAktif];
if (qIndex >= listSoal.length) {
if(babAktif === 'bab1') {
goSlide(3);
} else if(babAktif === 'bab2') {
goSlide(4);
} else if(babAktif === 'bab3') {
goSlide(5);
}
return;
}
const dataSoal = listSoal[qIndex];
document.getElementById('kuis-bab-label').textContent = `KUIS AKTIF: ${babAktif.toUpperCase()} - SOAL NO ${qIndex + 1}`;
document.getElementById('quiz-bar').style.width = `${(qIndex / listSoal.length) * 100}%`;
document.getElementById('quiz-feedback').classList.add('hidden');
document.getElementById('quiz-question').textContent = dataSoal.q;
const optContainer = document.getElementById('quiz-options');
optContainer.innerHTML = dataSoal.opts.map((o, i) =>
`<button class="option-btn rounded-xl p-4 border-2 border-slate-200 bg-white font-medium text-slate-800 text-left" onclick="jawabKuis(${i})">${o}</button>`
).join('');
timeLeft = 15;
document.getElementById('timer-text').textContent = timeLeft;
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
document.getElementById('timer-text').textContent = timeLeft;
if (timeLeft <= 0) { clearInterval(timer); jawabKuis(-1); }
}, 1000);
}
function jawabKuis(pilihanSiswa) {
clearInterval(timer);
totalSoalDilewati++;
const btns = document.querySelectorAll('#quiz-options .option-btn');
btns.forEach(b => b.disabled = true);
const correctAns = databaseKuis[babAktif][qIndex].ans;
const fb = document.getElementById('quiz-feedback');
if (pilihanSiswa === correctAns) {
totalSkorBenar++;
btns[pilihanSiswa].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = 'โ
Jawabanmu Benar!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-emerald-100 text-emerald-700 text-sm';
} else if (pilihanSiswa === -1) {
btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = 'โฐ Waktu Habis!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-amber-100 text-amber-700 text-sm';
} else {
btns[pilihanSiswa].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold');
btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = 'โ Masih Salah!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-rose-100 text-rose-700 text-sm';
}
fb.classList.remove('hidden');
qIndex++;
setTimeout(jalankanKuisEngine, 1500);
}
function simpanRefleksiDanLanjut() {
const radioBaterai = document.querySelector('input[name="baterai-refleksi"]:checked');
if (radioBaterai) {
dataBateraiSiswa = radioBaterai.value;
}
dataHambatanSiswa = document.getElementById('input-hambatan').value.trim() || "Tidak ada hambatan";
dataStrategiSiswa = document.getElementById('input-strategi').value.trim() || "Tidak ada strategi khusus";
document.getElementById('score-text').textContent = `Total Skor: ${totalSkorBenar} / ${totalSoalDilewati}`;
goSlide(6);
}
function restart() {
totalSkorBenar = 0;
totalSoalDilewati = 0;
document.getElementById('nama-siswa').value = '';
document.getElementById('input-hambatan').value = '';
document.getElementById('input-strategi').value = '';
const rbs = document.querySelectorAll('input[name="baterai-refleksi"]');
rbs.forEach(rb => rb.checked = false);
const btn = document.getElementById('lms-send-btn');
btn.disabled = false;
btn.className = "px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm";
goSlide(0);
}
function kirimDataLms() {
const nama = document.getElementById('nama-siswa').value.trim();
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama || "Siswa Anonim",
skor: `${totalSkorBenar} / ${totalSoalDilewati}`,
baterai: dataBateraiSiswa,
hambatan: "Hambatan Siswa: " + dataHambatanSiswa,
strategi: "Strategi Siswa: " + dataStrategiSiswa
}, "*");
document.getElementById('lms-success-alert').classList.remove('hidden');
const btn = document.getElementById('lms-send-btn');
btn.disabled = true;
btn.className = "px-6 py-2.5 bg-slate-300 text-slate-500 rounded-full font-bold text-sm cursor-not-allowed";
}
</script>
</body>
</html>
๐ Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Siswa 1 | Bilangan Rasional Matematika โ Kelas 7 | 3 / 7 | 100% | Hambatan Siswa: Tidak ada hambatan | Strategi Siswa: Tidak ada strategi khusus |
| sasasa | Bilangan Rasional Matematika โ Kelas 7 | 3 / 7 | 100% | Hambatan Siswa: sas | Strategi Siswa: sas |
| Coba1 | Bilangan Rasional Matematika โ Kelas 7 | 1 / 7 | 100% | Hambatan Siswa: 1 | Strategi Siswa: 2 |
| sasdsadasd | Bilangan Rasional Matematika โ Kelas 7 | 2 / 7 | 50% | Hambatan Siswa: dasda | Strategi Siswa: asdas |
| dddddddd | Bilangan Rasional Matematika โ Kelas 7 | 3 / 7 | 75% | Hambatan Siswa: Hambatan | Strategi Siswa: Strategi |