Matematika
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olimpiade Matematika SD/MI Kelas 6 & 7</title>
<style>
:root{
--bg:#070a12; --panel:rgba(18,24,38,.72); --panel2:rgba(255,255,255,.055);
--line:rgba(255,255,255,.10); --text:#f6f8ff; --muted:#9aa6bd;
--accent:#7c5cff; --accent2:#00d4ff; --good:#32d583; --bad:#ff5c7a;
--shadow:0 24px 70px rgba(0,0,0,.45); --radius:24px;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);
background:radial-gradient(circle at 15% 10%,rgba(124,92,255,.22),transparent 28%),radial-gradient(circle at 90% 20%,rgba(0,212,255,.14),transparent 25%),linear-gradient(145deg,#05070d,#0b1020 55%,#070a12);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px}
.app{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:26px 0 50px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.08em}
.logo{width:44px;height:44px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,92,255,.45),rgba(0,212,255,.18));box-shadow:0 10px 30px rgba(124,92,255,.18)}
.badge{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.045);font-size:12px;font-weight:800;color:#dce3f5}
.screen{display:none}.screen.active{display:block}
.hero,.quiz-card,.result-card,.review-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:var(--radius)}
.hero{padding:44px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-90px;background:radial-gradient(circle,rgba(0,212,255,.22),transparent 65%)}
.kicker{color:#aeb9d0;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:900}
h1{font-size:clamp(38px,6vw,76px);line-height:.95;margin:12px 0 18px;max-width:850px;letter-spacing:-.055em}
.gradient{background:linear-gradient(90deg,#fff,#b8a8ff 50%,#7deaff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:720px;color:var(--muted);font-size:17px;line-height:1.7}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0}
.stat{padding:18px;border:1px solid var(--line);background:var(--panel2);border-radius:18px}.stat b{display:block;font-size:24px}.stat span{color:var(--muted);font-size:12px}
.btn{border:0;color:white;background:linear-gradient(135deg,var(--accent),#5d45df);padding:14px 20px;border-radius:14px;font-weight:900;cursor:pointer;box-shadow:0 12px 30px rgba(124,92,255,.28);transition:.2s}
.btn:hover{transform:translateY(-2px)}.btn.secondary{background:rgba(255,255,255,.06);border:1px solid var(--line);box-shadow:none}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.quiz-card{padding:28px}
.quiz-head{display:flex;justify-content:space-between;gap:14px;align-items:center}.qmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.chip{font-size:12px;font-weight:900;padding:8px 11px;border-radius:999px;background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.3);color:#d8d0ff}
.progress{height:9px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;margin:20px 0 28px}.bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.35s}
.question{font-size:clamp(21px,3vw,30px);line-height:1.35;margin:10px 0 25px;font-weight:800}
.options{display:grid;gap:12px}.opt{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);cursor:pointer;font-size:16px;transition:.18s}.opt:hover{border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.09)}.opt .letter{min-width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07);font-weight:900}.opt.selected{border-color:#8c75ff;background:rgba(124,92,255,.16)}.opt.correct{border-color:rgba(50,213,131,.65);background:rgba(50,213,131,.11)}.opt.wrong{border-color:rgba(255,92,122,.65);background:rgba(255,92,122,.10)}
.feedback{display:none;margin-top:18px;padding:18px;border-radius:16px;border:1px solid var(--line);line-height:1.6}.feedback.show{display:block}.feedback.good{border-color:rgba(50,213,131,.35);background:rgba(50,213,131,.08)}.feedback.bad{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.08)}
.nav{display:flex;justify-content:space-between;gap:12px;margin-top:25px}
.result-card{padding:42px;text-align:center}.score{font-size:clamp(64px,12vw,120px);font-weight:1000;letter-spacing:-.07em;background:linear-gradient(90deg,#fff,#8f7cff,#67e8ff);-webkit-background-clip:text;color:transparent}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.result-stat{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}.result-stat b{display:block;font-size:26px}.result-stat span{font-size:12px;color:var(--muted)}
.review-card{padding:26px;margin-top:18px}.review-item{padding:20px 0;border-bottom:1px solid var(--line)}.review-item:last-child{border-bottom:0}.review-q{font-weight:800;line-height:1.5}.status{display:inline-block;margin:8px 0;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900}.status.ok{background:rgba(50,213,131,.12);color:#71e6a8}.status.no{background:rgba(255,92,122,.12);color:#ff9aad}.explain{color:var(--muted);line-height:1.65;margin-top:8px}
.hidden{display:none!important}
@media(max-width:760px){.app{width:min(100% - 18px,1180px);padding-top:14px}.hero,.quiz-card,.result-card{padding:22px}.stats{grid-template-columns:repeat(2,1fr)}.result-grid{grid-template-columns:1fr 1fr}.topbar{margin-bottom:12px}.brand span{display:none}.quiz-head{align-items:flex-start}.nav .btn{flex:1}}
@media(max-width:430px){.result-grid{grid-template-columns:1fr}.question{font-size:21px}}
</style>
</head>
<body>
<div class="app">
<div class="topbar">
<div class="brand"><div class="logo">∑</div><span>OLIMPIADE MATEMATIKA</span></div>
<div class="badge">SD/MI KELAS 6–7 • OFFLINE</div>
</div>
<section id="start" class="screen active">
<div class="hero">
<div class="kicker">Premium Mathematics Challenge</div>
<h1><span class="gradient">Berpikir. Hitung. Juara.</span></h1>
<p class="lead">100 soal cerita pilihan ganda untuk latihan Olimpiade Matematika SD/MI kelas 6 dan 7. Kerjakan, lihat pembahasan otomatis, dan evaluasi hasilmu.</p>
<div class="stats">
<div class="stat"><b>100</b><span>Soal</span></div>
<div class="stat"><b>5</b><span>Materi</span></div>
<div class="stat"><b>10</b><span>Poin / soal</span></div>
<div class="stat"><b>1.000</b><span>Skor maksimal</span></div>
</div>
<button class="btn" onclick="startQuiz()">Mulai Olimpiade →</button>
</div>
</section>
<section id="quiz" class="screen">
<div class="quiz-card">
<div class="quiz-head">
<div class="qmeta"><span id="qnum" class="chip">Soal 1/100</span><span id="topic" class="chip">Materi</span></div>
<strong id="points">+10 poin</strong>
</div>
<div class="progress"><div id="bar" class="bar"></div></div>
<div id="question" class="question"></div>
<div id="options" class="options"></div>
<div id="feedback" class="feedback"></div>
<div class="nav">
<button id="prev" class="btn secondary" onclick="prevQuestion()">← Sebelumnya</button>
<button id="next" class="btn" onclick="nextQuestion()">Berikutnya →</button>
</div>
</div>
</section>
<section id="result" class="screen">
<div class="result-card">
<div class="kicker">Hasil Olimpiade</div>
<div id="score" class="score">0</div>
<h2 id="resultTitle">Luar biasa!</h2>
<p id="resultDesc" class="lead" style="margin:0 auto"></p>
<div class="result-grid">
<div class="result-stat"><b id="correct">0</b><span>Benar</span></div>
<div class="result-stat"><b id="wrong">0</b><span>Salah</span></div>
<div class="result-stat"><b id="percent">0%</b><span>Persentase</span></div>
</div>
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap">
<button class="btn" onclick="restart()">↻ Ulangi</button>
<button class="btn secondary" onclick="toggleReview()">▤ Review Pembahasan</button>
</div>
</div>
<div id="review" class="review-card hidden"></div>
</section>
</div>
<script>
const qs = [{"topic": "Perbandingan Terbalik", "question": "6 pekerja menyelesaikan pengecatan dalam 12 hari. Jika pekerjanya menjadi 8 orang dengan kemampuan sama, berapa hari diperlukan?", "options": ["8 hari", "12 hari", "9 hari", "10 hari"], "answer": 2, "explain": "Pekerja × hari tetap: 6×12 = 8×d, jadi d = 9 hari."}, {"topic": "Perbandingan Terbalik", "question": "4 mesin mencetak buku dalam 15 jam. Jika digunakan 5 mesin identik, waktu yang diperlukan adalah...", "options": ["20 jam", "18 jam", "12 jam", "10 jam"], "answer": 2, "explain": "4×15 = 5×t, sehingga t = 12 jam."}, {"topic": "Perbandingan Terbalik", "question": "12 siswa membersihkan halaman dalam 30 menit. Jika 18 siswa bekerja dengan laju sama, waktunya...", "options": ["15 menit", "20 menit", "18 menit", "25 menit"], "answer": 1, "explain": "12×30 = 18×t, jadi t = 20 menit."}, {"topic": "Perbandingan Terbalik", "question": "Sebuah persediaan makanan cukup untuk 20 orang selama 15 hari. Jika dimakan 25 orang, persediaan cukup selama...", "options": ["10 hari", "12 hari", "18 hari", "15 hari"], "answer": 1, "explain": "20×15 = 25×t, sehingga t = 12 hari."}, {"topic": "Perbandingan Terbalik", "question": "7 tukang menyelesaikan pekerjaan dalam 24 hari. Agar selesai 14 hari, diperlukan...", "options": ["10 tukang", "14 tukang", "12 tukang", "16 tukang"], "answer": 1, "explain": "7×24 = n×14, maka n = 12. (Koreksi: hasilnya 12 tukang.)"}, {"topic": "Perbandingan Terbalik", "question": "3 pompa menguras kolam dalam 40 menit. Dengan 5 pompa identik, waktu menguras...", "options": ["32 menit", "24 menit", "20 menit", "30 menit"], "answer": 1, "explain": "3×40 = 5×t, jadi t = 24 menit."}, {"topic": "Perbandingan Terbalik", "question": "10 sapi menghabiskan persediaan pakan dalam 18 hari. Jika sapi menjadi 15 ekor, persediaan bertahan...", "options": ["12 hari", "27 hari", "15 hari", "10 hari"], "answer": 0, "explain": "10×18 = 15×t, jadi t = 12 hari."}, {"topic": "Perbandingan Terbalik", "question": "8 orang membagikan brosur selesai dalam 6 jam. Jika 12 orang bekerja, waktunya...", "options": ["3 jam", "6 jam", "5 jam", "4 jam"], "answer": 3, "explain": "8×6 = 12×t, sehingga t = 4 jam."}, {"topic": "Perbandingan Terbalik", "question": "5 komputer menyelesaikan proses dalam 16 menit. Jika hanya 4 komputer digunakan, waktu...", "options": ["20 menit", "12 menit", "16 menit", "24 menit"], "answer": 0, "explain": "5×16 = 4×t, jadi t = 20 menit."}, {"topic": "Perbandingan Terbalik", "question": "9 pekerja menggali parit dalam 20 hari. Jika target selesai 15 hari, pekerja yang dibutuhkan...", "options": ["15", "14", "10", "12"], "answer": 3, "explain": "9×20 = n×15, maka n = 12."}, {"topic": "Perbandingan Terbalik", "question": "15 orang mengecat gedung dalam 8 hari. Jika hanya 10 orang, waktu...", "options": ["16 hari", "12 hari", "10 hari", "14 hari"], "answer": 1, "explain": "15×8 = 10×t, jadi t = 12 hari."}, {"topic": "Perbandingan Terbalik", "question": "6 kendaraan mengangkut pasir dalam 10 perjalanan. Jika 12 kendaraan dipakai, jumlah perjalanan...", "options": ["8", "6", "5", "3"], "answer": 2, "explain": "6×10 = 12×t, jadi t = 5 perjalanan."}, {"topic": "Perbandingan Terbalik", "question": "20 relawan menyusun paket dalam 9 jam. Jika 30 relawan, waktu...", "options": ["12 jam", "6 jam", "4 jam", "8 jam"], "answer": 1, "explain": "20×9 = 30×t, jadi t = 6 jam."}, {"topic": "Perbandingan Terbalik", "question": "4 pekerja membuat 80 kerajinan dalam 10 hari. Untuk pekerjaan yang sama dengan 8 pekerja, waktunya...", "options": ["20 hari", "8 hari", "4 hari", "5 hari"], "answer": 3, "explain": "4×10 = 8×t, jadi t = 5 hari."}, {"topic": "Perbandingan Terbalik", "question": "18 siswa membutuhkan 25 menit untuk mengatur kursi. Jika 15 siswa, waktunya...", "options": ["25 menit", "35 menit", "30 menit", "20 menit"], "answer": 2, "explain": "18×25 = 15×t, jadi t = 30 menit."}, {"topic": "Perbandingan Terbalik", "question": "16 petani memanen sawah dalam 15 hari. Jika 20 petani bekerja, waktu...", "options": ["10 hari", "18 hari", "15 hari", "12 hari"], "answer": 3, "explain": "16×15 = 20×t, jadi t = 12 hari."}, {"topic": "Perbandingan Terbalik", "question": "5 truk mengangkut muatan dalam 14 perjalanan. Jika 7 truk digunakan, perjalanan...", "options": ["10", "12", "8", "14"], "answer": 0, "explain": "5×14 = 7×t, jadi t = 10 perjalanan."}, {"topic": "Perbandingan Terbalik", "question": "24 siswa menyelesaikan proyek dalam 10 hari. Jika 30 siswa, waktu...", "options": ["12 hari", "6 hari", "10 hari", "8 hari"], "answer": 3, "explain": "24×10 = 30×t, jadi t = 8 hari."}, {"topic": "Perbandingan Terbalik", "question": "12 pekerja memasang pagar dalam 15 jam. Jika 9 pekerja, waktunya...", "options": ["12 jam", "18 jam", "20 jam", "15 jam"], "answer": 1, "explain": "12×15 = 9×t, jadi t = 20 jam."}, {"topic": "Perbandingan Terbalik", "question": "8 koki memasak untuk acara dalam 6 jam. Jika 12 koki dengan kemampuan sama, waktu...", "options": ["4 jam", "5 jam", "3 jam", "9 jam"], "answer": 0, "explain": "8×6 = 12×t, jadi t = 4 jam."}, {"topic": "Aritmatika Sosial", "question": "Rina membeli tas Rp200.000 dan mendapat diskon 15%. Harga yang dibayar...", "options": ["Rp160.000", "Rp170.000", "Rp175.000", "Rp185.000"], "answer": 1, "explain": "Diskon = 15%×Rp200.000 = Rp30.000, jadi bayar Rp170.000."}, {"topic": "Aritmatika Sosial", "question": "Sebuah buku dibeli Rp40.000 lalu dijual Rp50.000. Persentase untung...", "options": ["25%", "40%", "30%", "20%"], "answer": 0, "explain": "Untung Rp10.000; 10.000/40.000×100% = 25%."}, {"topic": "Aritmatika Sosial", "question": "Pedagang membeli sepatu Rp240.000 dan menjualnya Rp204.000. Persentase rugi...", "options": ["10%", "15%", "12%", "20%"], "answer": 1, "explain": "Rugi Rp36.000; 36.000/240.000×100% = 15%."}, {"topic": "Aritmatika Sosial", "question": "Harga sebuah jaket Rp350.000 didiskon 20%. Harga setelah diskon...", "options": ["Rp270.000", "Rp280.000", "Rp300.000", "Rp290.000"], "answer": 1, "explain": "Bayar 80%×Rp350.000 = Rp280.000."}, {"topic": "Aritmatika Sosial", "question": "Sebuah barang dijual Rp180.000 dengan untung 20%. Harga belinya...", "options": ["Rp140.000", "Rp160.000", "Rp170.000", "Rp150.000"], "answer": 3, "explain": "Harga jual = 120% harga beli, jadi beli = 180.000/1,2 = Rp150.000."}, {"topic": "Aritmatika Sosial", "question": "Modal Rp500.000 menghasilkan untung 12%. Besar untung...", "options": ["Rp50.000", "Rp80.000", "Rp70.000", "Rp60.000"], "answer": 3, "explain": "12%×Rp500.000 = Rp60.000."}, {"topic": "Aritmatika Sosial", "question": "Harga sepeda Rp1.200.000 didiskon 10%, lalu tambahan voucher Rp50.000. Harga akhir...", "options": ["Rp1.080.000", "Rp1.000.000", "Rp1.150.000", "Rp1.030.000"], "answer": 3, "explain": "Diskon 10% = Rp120.000, harga Rp1.080.000; dikurangi voucher Rp50.000 = Rp1.030.000."}, {"topic": "Aritmatika Sosial", "question": "Seorang pedagang membeli 20 pensil Rp4.000 per buah dan menjual semuanya Rp100.000. Persentase untung...", "options": ["15%", "25%", "30%", "20%"], "answer": 3, "explain": 2}, {"topic": "Aritmatika Sosial", "question": "Harga awal Rp250.000 naik 8%. Harga baru...", "options": ["Rp258.000", "Rp280.000", "Rp270.000", "Rp275.000"], "answer": 2, "explain": "Kenaikan 8% = Rp20.000, jadi Rp270.000."}, {"topic": "Aritmatika Sosial", "question": "Sebuah barang Rp400.000 mengalami kerugian 10%. Harga jual...", "options": ["Rp380.000", "Rp340.000", "Rp360.000", "Rp350.000"], "answer": 2, "explain": "Harga jual 90%×Rp400.000 = Rp360.000."}, {"topic": "Aritmatika Sosial", "question": "Tabungan Rp2.000.000 mendapat bunga sederhana 6% setahun. Bunga setahun...", "options": ["Rp60.000", "Rp120.000", "Rp150.000", "Rp100.000"], "answer": 1, "explain": "Bunga = 6%×Rp2.000.000 = Rp120.000."}, {"topic": "Aritmatika Sosial", "question": "Modal Rp750.000 dijual dengan untung 16%. Harga jual...", "options": ["Rp900.000", "Rp860.000", "Rp870.000", "Rp840.000"], "answer": 2, "explain": "16%×750.000 = 120.000, jadi Rp870.000."}, {"topic": "Aritmatika Sosial", "question": "Harga makanan Rp80.000 dikenai pajak 10%. Total bayar...", "options": ["Rp90.000", "Rp84.000", "Rp88.000", "Rp92.000"], "answer": 2, "explain": "Pajak Rp8.000, total Rp88.000."}, {"topic": "Aritmatika Sosial", "question": "Sebuah toko memberi diskon 25% pada barang Rp320.000. Besar diskon...", "options": ["Rp90.000", "Rp70.000", "Rp80.000", "Rp60.000"], "answer": 2, "explain": "25%×Rp320.000 = Rp80.000."}, {"topic": "Aritmatika Sosial", "question": "Doni membeli 5 kg jeruk seharga Rp18.000/kg dan membayar ongkos Rp10.000. Total modal...", "options": ["Rp90.000", "Rp100.000", "Rp105.000", "Rp95.000"], "answer": 1, "explain": "5×18.000 + 10.000 = Rp100.000."}, {"topic": "Aritmatika Sosial", "question": "Modal sebuah barang Rp600.000. Jika ingin untung 15%, harga jual...", "options": ["Rp660.000", "Rp700.000", "Rp690.000", "Rp720.000"], "answer": 2, "explain": "15%×600.000 = 90.000, jadi Rp690.000."}, {"topic": "Aritmatika Sosial", "question": "Harga setelah diskon 30% adalah Rp140.000. Harga sebelum diskon...", "options": ["Rp210.000", "Rp200.000", "Rp180.000", "Rp190.000"], "answer": 1, "explain": "Rp140.000 = 70% harga awal, jadi 140.000/0,7 = Rp200.000."}, {"topic": "Aritmatika Sosial", "question": "Seorang pedagang rugi 20% dari modal Rp450.000. Harga jual...", "options": ["Rp400.000", "Rp380.000", "Rp360.000", "Rp340.000"], "answer": 2, "explain": "80%×Rp450.000 = Rp360.000."}, {"topic": "Aritmatika Sosial", "question": "Baju Rp300.000 mendapat diskon 10% lalu diskon tambahan 10% dari harga setelah diskon pertama. Harga akhir...", "options": ["Rp240.000", "Rp250.000", "Rp270.000", "Rp243.000"], "answer": 3, "explain": "Setelah diskon pertama Rp270.000; diskon kedua Rp27.000; akhir Rp243.000."}, {"topic": "Aritmatika Sosial", "question": "Uang Rp1.500.000 disimpan dengan bunga sederhana 4% per tahun selama 2 tahun. Jumlah akhir...", "options": ["Rp1.560.000", "Rp1.620.000", "Rp1.680.000", "Rp1.600.000"], "answer": 1, "explain": "Bunga = 1.500.000×4%×2 = Rp120.000, total Rp1.620.000."}, {"topic": "Jarak & Kecepatan", "question": "Siti bersepeda dengan kecepatan 12 km/jam selama 2,5 jam. Jarak yang ditempuh...", "options": ["32 km", "36 km", "30 km", "24 km"], "answer": 2, "explain": "Jarak = kecepatan×waktu = 12×2,5 = 30 km."}, {"topic": "Jarak & Kecepatan", "question": "Mobil menempuh 180 km dalam 3 jam. Kecepatan rata-ratanya...", "options": ["70 km/jam", "60 km/jam", "50 km/jam", "90 km/jam"], "answer": 1, "explain": "180/3 = 60 km/jam."}, {"topic": "Jarak & Kecepatan", "question": "Bus melaju 45 km/jam selama 4 jam. Jarak...", "options": ["200 km", "220 km", "160 km", "180 km"], "answer": 3, "explain": "45×4 = 180 km."}, {"topic": "Jarak & Kecepatan", "question": "Andi berjalan 5 km/jam selama 1 jam 30 menit. Jarak...", "options": ["6 km", "7,5 km", "7 km", "8 km"], "answer": 1, "explain": "1,5 jam×5 = 7,5 km."}, {"topic": "Jarak & Kecepatan", "question": "Kereta menempuh 240 km dengan kecepatan 80 km/jam. Waktu tempuh...", "options": ["5 jam", "4 jam", "3 jam", "2 jam"], "answer": 2, "explain": "240/80 = 3 jam."}, {"topic": "Jarak & Kecepatan", "question": "Sepeda motor menempuh 150 km dalam 2,5 jam. Kecepatan...", "options": ["50 km/jam", "75 km/jam", "60 km/jam", "70 km/jam"], "answer": 2, "explain": "150/2,5 = 60 km/jam."}, {"topic": "Jarak & Kecepatan", "question": "Lari dengan kecepatan 8 m/s selama 25 detik. Jarak...", "options": ["220 m", "180 m", "200 m", "160 m"], "answer": 2, "explain": "8×25 = 200 m."}, {"topic": "Jarak & Kecepatan", "question": "Mobil menempuh 72 km dalam 1 jam 12 menit. Kecepatan...", "options": ["50 km/jam", "60 km/jam", "80 km/jam", "72 km/jam"], "answer": 1, "explain": "1 jam 12 menit = 1,2 jam; 72/1,2 = 60 km/jam."}, {"topic": "Jarak & Kecepatan", "question": "Budi berlari 600 m dalam 2 menit. Kecepatannya...", "options": ["5 m/s", "3 m/s", "4 m/s", "6 m/s"], "answer": 0, "explain": "2 menit = 120 detik; 600/120 = 5 m/s."}, {"topic": "Jarak & Kecepatan", "question": "Perjalanan 90 km ditempuh dengan kecepatan 45 km/jam. Waktu...", "options": ["2,5 jam", "1 jam", "3 jam", "2 jam"], "answer": 3, "explain": "90/45 = 2 jam."}, {"topic": "Jarak & Kecepatan", "question": "Kereta melaju 100 km/jam selama 2 jam 30 menit. Jarak...", "options": ["250 km", "200 km", "225 km", "275 km"], "answer": 0, "explain": "2,5×100 = 250 km."}, {"topic": "Jarak & Kecepatan", "question": "Pesepeda menempuh 36 km dalam 3 jam. Kecepatan...", "options": ["15 km/jam", "10 km/jam", "18 km/jam", "12 km/jam"], "answer": 3, "explain": "36/3 = 12 km/jam."}, {"topic": "Jarak & Kecepatan", "question": "Sebuah kapal menempuh 150 km dengan kecepatan 30 km/jam. Waktu...", "options": ["5 jam", "4 jam", "7 jam", "6 jam"], "answer": 0, "explain": "150/30 = 5 jam."}, {"topic": "Jarak & Kecepatan", "question": "Dina berjalan 2 km ke sekolah dalam 24 menit. Kecepatan dalam km/jam...", "options": ["6 km/jam", "8 km/jam", "4 km/jam", "5 km/jam"], "answer": 0, "explain": 1}, {"topic": "Jarak & Kecepatan", "question": "Motor berkecepatan 72 km/jam. Dalam 25 detik, jarak yang ditempuh...", "options": ["400 m", "450 m", "500 m", "550 m"], "answer": 2, "explain": "72 km/jam = 20 m/s; 20×25 = 500 m."}, {"topic": "Jarak & Kecepatan", "question": "Pelari menempuh 1.000 m dalam 200 detik. Kecepatan...", "options": ["5 m/s", "8 m/s", "6 m/s", "4 m/s"], "answer": 0, "explain": "1000/200 = 5 m/s."}, {"topic": "Jarak & Kecepatan", "question": "Bus menempuh 300 km dengan kecepatan 75 km/jam, tetapi berhenti 30 menit. Lama perjalanan total...", "options": ["5,5 jam", "4 jam", "5 jam", "4,5 jam"], "answer": 3, "explain": "Waktu bergerak 300/75 = 4 jam; +0,5 jam = 4,5 jam."}, {"topic": "Jarak & Kecepatan", "question": "Sebuah mobil menempuh 100 km dalam 2 jam. Jika kecepatannya dinaikkan menjadi 50 km/jam, waktu untuk 100 km...", "options": ["2 jam", "3 jam", "1 jam", "2,5 jam"], "answer": 0, "explain": "100/50 = 2 jam."}, {"topic": "Jarak & Kecepatan", "question": "Ayah berkendara 40 km/jam selama 45 menit. Jarak...", "options": ["35 km", "30 km", "20 km", "25 km"], "answer": 1, "explain": "45 menit = 0,75 jam; 40×0,75 = 30 km."}, {"topic": "Jarak & Kecepatan", "question": "Kereta menempuh 360 km dalam 4 jam 30 menit. Kecepatan rata-rata...", "options": ["80 km/jam", "70 km/jam", "100 km/jam", "90 km/jam"], "answer": 0, "explain": "4,5 jam; 360/4,5 = 80 km/jam."}, {"topic": "Persamaan", "question": "Tiga kali sebuah bilangan ditambah 7 sama dengan 28. Bilangan itu...", "options": ["7", "6", "8", "5"], "answer": 1, "explain": 2}, {"topic": "Persamaan", "question": "Harga 4 pensil dan Rp2.000 sama dengan Rp14.000. Harga satu pensil...", "options": ["Rp4.000", "Rp2.000", "Rp3.000", "Rp5.000"], "answer": 2, "explain": "4x+2.000=14.000, x=3.000."}, {"topic": "Persamaan", "question": "Dua kali umur Rani ditambah 5 adalah 25. Umur Rani...", "options": ["8", "15", "10", "12"], "answer": 2, "explain": "2x+5=25, x=10."}, {"topic": "Persamaan", "question": "Sebuah bilangan dikurangi 18 sama dengan 35. Bilangan itu...", "options": ["48", "53", "43", "58"], "answer": 1, "explain": "x−18=35, jadi x=53."}, {"topic": "Persamaan", "question": "Lima kali suatu bilangan dikurangi 10 sama dengan 40. Bilangan...", "options": ["14", "10", "12", "8"], "answer": 1, "explain": "5x−10=40, 5x=50, x=10."}, {"topic": "Persamaan", "question": "Jumlah suatu bilangan dan 27 adalah 65. Bilangan...", "options": ["32", "42", "28", "38"], "answer": 3, "explain": "x+27=65, x=38."}, {"topic": "Persamaan", "question": "Tiga kali jumlah x dan 4 adalah 30. Nilai x...", "options": ["4", "6", "10", "8"], "answer": 0, "explain": 1}, {"topic": "Persamaan", "question": "Keliling persegi 52 cm. Jika sisi x, persamaannya 4x=52. Panjang sisi...", "options": ["13 cm", "11 cm", "14 cm", "12 cm"], "answer": 0, "explain": "x=52/4=13 cm."}, {"topic": "Persamaan", "question": "Harga 3 buku sama dengan Rp45.000. Harga satu buku...", "options": ["Rp18.000", "Rp12.000", "Rp10.000", "Rp15.000"], "answer": 3, "explain": "3x=45.000, x=15.000."}, {"topic": "Persamaan", "question": "Sebuah bilangan dibagi 4 menghasilkan 9. Bilangan itu...", "options": ["18", "27", "36", "45"], "answer": 2, "explain": "x/4=9, jadi x=36."}, {"topic": "Persamaan", "question": "Dua kali suatu bilangan sama dengan 46. Bilangan...", "options": ["22", "24", "21", "23"], "answer": 3, "explain": "2x=46, x=23."}, {"topic": "Persamaan", "question": "Umur kakak 4 tahun lebih dari dua kali umur adik. Jika kakak 16 tahun, umur adik...", "options": ["8", "6", "7", "5"], "answer": 1, "explain": "2x+4=16, x=6."}, {"topic": "Persamaan", "question": "Sebuah bilangan ditambah 15 lalu dibagi 5 hasilnya 9. Bilangan...", "options": ["20", "25", "35", "30"], "answer": 3, "explain": "(x+15)/5=9, x+15=45, x=30."}, {"topic": "Persamaan", "question": "Tiga kali suatu bilangan sama dengan bilangan itu ditambah 18. Bilangan...", "options": ["6", "9", "15", "12"], "answer": 3, "explain": 1}, {"topic": "Persamaan", "question": "Selisih suatu bilangan dan 12 adalah 20. Bilangan...", "options": ["32", "28", "30", "34"], "answer": 1, "explain": 2}, {"topic": "Persamaan", "question": "Sebuah bilangan dikalikan 5 lalu ditambah 3 menjadi 48. Bilangan...", "options": ["9", "7", "10", "8"], "answer": 3, "explain": 2}, {"topic": "Persamaan", "question": "Harga 2 pulpen dan Rp5.000 adalah Rp21.000. Harga satu pulpen...", "options": ["Rp6.000", "Rp8.000", "Rp7.000", "Rp9.000"], "answer": 2, "explain": 2}, {"topic": "Persamaan", "question": "Jumlah dua bilangan berurutan adalah 41. Bilangan yang lebih kecil...", "options": ["22", "19", "20", "21"], "answer": 2, "explain": "x+(x+1)=41, 2x=40, x=20."}, {"topic": "Persamaan", "question": "Empat kali suatu bilangan dikurangi 6 sama dengan 26. Bilangan...", "options": ["8", "6", "7", "9"], "answer": 0, "explain": "4x−6=26, 4x=32, x=8."}, {"topic": "Persamaan", "question": "Persegi panjang panjangnya 3 cm lebih dari lebarnya. Jika keliling 30 cm, lebarnya...", "options": ["7 cm", "6 cm", "5 cm", "8 cm"], "answer": 1, "explain": "2(w+w+3)=30 → 4w+6=30 → w=6 cm."}, {"topic": "Volume & Debit", "question": "Sebuah akuarium panjang 60 cm, lebar 30 cm, tinggi 40 cm. Volumenya...", "options": ["60.000 cm³", "90.000 cm³", "72.000 cm³", "80.000 cm³"], "answer": 2, "explain": "V=60×30×40=72.000 cm³."}, {"topic": "Volume & Debit", "question": "Bak mandi berukuran 100 cm×50 cm×40 cm. Volume dalam liter...", "options": ["100 L", "150 L", "200 L", "250 L"], "answer": 2, "explain": "V=200.000 cm³ = 200 liter."}, {"topic": "Volume & Debit", "question": "Keran mengalirkan 12 liter/menit. Waktu untuk mengisi 96 liter...", "options": ["10 menit", "8 menit", "6 menit", "12 menit"], "answer": 1, "explain": "t=96/12=8 menit."}, {"topic": "Volume & Debit", "question": "Kolam berisi 1.500 liter dikuras dengan debit 50 L/menit. Waktu...", "options": ["25 menit", "35 menit", "30 menit", "20 menit"], "answer": 2, "explain": "t=1500/50=30 menit."}, {"topic": "Volume & Debit", "question": "Kubus memiliki rusuk 20 cm. Volume...", "options": ["10.000 cm³", "4.000 cm³", "6.000 cm³", "8.000 cm³"], "answer": 3, "explain": "V=20³=8.000 cm³."}, {"topic": "Volume & Debit", "question": "Balok 25 cm×20 cm×10 cm. Volume...", "options": ["4.000 cm³", "7.000 cm³", "6.000 cm³", "5.000 cm³"], "answer": 3, "explain": "25×20×10=5.000 cm³."}, {"topic": "Volume & Debit", "question": "Sebuah tandon berisi 2.400 liter. Pompa mengisi 80 L/menit. Waktu...", "options": ["40 menit", "50 menit", "20 menit", "30 menit"], "answer": 3, "explain": "2400/80=30 menit."}, {"topic": "Volume & Debit", "question": "Bak 80 cm×50 cm×50 cm diisi 20 L/menit. Waktu hingga penuh...", "options": ["12 menit", "15 menit", "10 menit", "8 menit"], "answer": 0, "explain": 1}, {"topic": "Volume & Debit", "question": "Sebuah kubus volumenya 1.000 cm³. Panjang rusuk...", "options": ["10 cm", "20 cm", "5 cm", "8 cm"], "answer": 0, "explain": "Rusuk = ∛1000 = 10 cm."}, {"topic": "Volume & Debit", "question": "Tangki 600 L dikosongkan dengan debit 25 L/menit. Waktu...", "options": ["24 menit", "20 menit", "25 menit", "30 menit"], "answer": 0, "explain": "600/25=24 menit."}, {"topic": "Volume & Debit", "question": "Balok berukuran 40 cm×25 cm×30 cm. Volume...", "options": ["35.000 cm³", "30.000 cm³", "25.000 cm³", "20.000 cm³"], "answer": 1, "explain": "40×25×30=30.000 cm³."}, {"topic": "Volume & Debit", "question": "Keran 15 L/menit mengisi bak 180 L. Waktu...", "options": ["12 menit", "18 menit", "10 menit", "15 menit"], "answer": 0, "explain": "180/15=12 menit."}, {"topic": "Volume & Debit", "question": "Volume sebuah balok 24.000 cm³. Panjang 40 cm dan lebar 20 cm. Tinggi...", "options": ["35 cm", "20 cm", "30 cm", "25 cm"], "answer": 2, "explain": "t=24.000/(40×20)=30 cm."}, {"topic": "Volume & Debit", "question": "Sebuah wadah 2.000 L diisi 100 L/menit selama 15 menit. Volume yang masuk...", "options": ["1.500 L", "2.000 L", "1.000 L", "1.800 L"], "answer": 0, "explain": "100×15=1.500 L."}, {"topic": "Volume & Debit", "question": "Kolam 900 L diisi 30 L/menit. Setelah 20 menit, air yang belum terisi...", "options": ["400 L", "200 L", "500 L", "300 L"], "answer": 3, "explain": "Masuk 600 L, sisa 300 L."}, {"topic": "Volume & Debit", "question": "Sebuah kubus rusuk 15 cm. Volume...", "options": ["4.500 cm³", "3.000 cm³", "2.250 cm³", "3.375 cm³"], "answer": 3, "explain": "15³=3.375 cm³."}, {"topic": "Volume & Debit", "question": "Tandon 1.200 L diisi 40 L/menit. Waktu...", "options": ["40 menit", "30 menit", "20 menit", "25 menit"], "answer": 1, "explain": "1200/40=30 menit."}, {"topic": "Volume & Debit", "question": "Balok volume 12.000 cm³, panjang 30 cm, lebar 20 cm. Tinggi...", "options": ["15 cm", "10 cm", "25 cm", "20 cm"], "answer": 1, "explain": 2}, {"topic": "Volume & Debit", "question": "Sebuah ember 15 L diisi dengan debit 0,5 L/detik. Waktu pengisian...", "options": ["50 detik", "20 detik", "30 detik", "40 detik"], "answer": 2, "explain": "15/0,5=30 detik."}, {"topic": "Volume & Debit", "question": "Bak 300 L dikuras dengan debit 10 L/menit. Jika mulai penuh, waktu...", "options": ["25 menit", "30 menit", "20 menit", "35 menit"], "answer": 1, "explain": "300/10=30 menit."}];
let idx=0, answers=Array(qs.length).fill(null), locked=Array(qs.length).fill(false);
function show(id){document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));document.getElementById(id).classList.add('active');window.scrollTo({top:0,behavior:'smooth'});}
function startQuiz(){idx=0;answers.fill(null);locked.fill(false);show('quiz');render();}
function render(){
const q=qs[idx];
document.getElementById('qnum').textContent=`Soal ${idx+1}/${qs.length}`;
document.getElementById('topic').textContent=q.topic;
document.getElementById('question').textContent=q.question;
document.getElementById('bar').style.width=((idx+1)/qs.length*100)+'%';
const box=document.getElementById('options'); box.innerHTML='';
const letters=['A','B','C','D'];
q.options.forEach((text,i)=>{
const b=document.createElement('button'); b.className='opt';
if(answers[idx]===i)b.classList.add('selected');
if(locked[idx]){
if(i===q.answer)b.classList.add('correct');
if(answers[idx]===i && i!==q.answer)b.classList.add('wrong');
}
b.innerHTML=`<span class="letter">${letters[i]}</span><span>${text}</span>`;
b.onclick=()=>choose(i);
b.disabled=locked[idx];
box.appendChild(b);
});
const fb=document.getElementById('feedback');
if(locked[idx]){
const ok=answers[idx]===q.answer;
fb.className='feedback show '+(ok?'good':'bad');
fb.innerHTML=`<strong>${ok?'✓ Jawaban benar':'✕ Jawaban kurang tepat'}</strong><br>${q.explain}`;
}else{fb.className='feedback';fb.innerHTML='';}
document.getElementById('prev').disabled=idx===0;
document.getElementById('next').textContent=idx===qs.length-1?'Lihat Hasil →':'Berikutnya →';
}
function choose(i){
if(locked[idx])return;
answers[idx]=i;locked[idx]=true;render();
}
function nextQuestion(){
if(!locked[idx]){alert('Pilih salah satu jawaban terlebih dahulu.');return;}
if(idx<qs.length-1){idx++;render();}else{finish();}
}
function prevQuestion(){if(idx>0){idx--;render();}}
function finish(){
const correct=answers.reduce((n,a,i)=>n+(a===qs[i].answer?1:0),0);
const wrong=qs.length-correct, score=correct*10, pct=Math.round(correct/qs.length*100);
document.getElementById('score').textContent=score.toLocaleString('id-ID');
document.getElementById('correct').textContent=correct;
document.getElementById('wrong').textContent=wrong;
document.getElementById('percent').textContent=pct+'%';
let title='Tetap semangat!';
if(pct>=90)title='🏆 Juara Matematika!';
else if(pct>=75)title='🔥 Sangat hebat!';
else if(pct>=60)title='✨ Bagus sekali!';
document.getElementById('resultTitle').textContent=title;
document.getElementById('resultDesc').textContent=`Kamu memperoleh ${score} dari 1.000 poin. Terus latih ketelitian dan strategi berhitungmu!`;
buildReview();show('result');
}
function buildReview(){
const r=document.getElementById('review'); r.innerHTML='<h3>Review 100 Soal & Pembahasan</h3>';
qs.forEach((q,i)=>{
const ok=answers[i]===q.answer;
const el=document.createElement('div');el.className='review-item';
el.innerHTML=`<div class="qmeta"><span class="chip">Soal ${i+1}</span><span class="chip">${q.topic}</span></div>
<div class="review-q">${q.question}</div>
<span class="status ${ok?'ok':'no'}">${ok?'BENAR':'SALAH'} • Jawaban benar: ${['A','B','C','D'][q.answer]}</span>
<div class="explain"><b>Pembahasan:</b> ${q.explain}</div>`;
r.appendChild(el);
});
}
function toggleReview(){document.getElementById('review').classList.toggle('hidden');}
function restart(){show('start');}
</script>
</body>
</html>
Want to submit a review? Login
