bangun datar
Mapel
Matematika
Jenjang
Kelas 2 SD
Platform
HTML5 · Web
Tentang Game Ini
<!doctype html> <html lang="id"> <head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260910-03-217e83f","C":{"Abril Fatface":"YACgEZbkUVE,0","Alfa Slab One":"YACgEYS9sJU,0","Anton":"YACgEcYqQ-A,0","Archivo":"YAHO2-t-jNE,0","Arial":"YAGyDvJ_4Ts,0","Bebas Neue":"YACgESME5ew,0","Bricolage Grotesque":"YAFyMcdwzpc,0","Canva Sans":"YAFLd8sKbwc,2","Caveat":"YALBs2ploWQ,0","Comic Sans MS":"YAHO2VMiyZo,0","Cormorant Garamond":"YAFdJhX-538,0","Courier New":"YAGzXiGs0_8,0","DM Sans":"YAD1aU3sLnI,0","DM Serif Display":"YAD1aYG82rc,0","Forum":"YACgEcnnqB4,0","Fraunces":"YAEul-FRQw4,0","Georgia":"YAGzXkO0pEM,0","Helvetica Neue":"YAFcf6CtJfI,0","Impact":"YAFcfnjI7Vk,0","Inter":"YAFdJvSyp_k,3","Iowan Old Style":"YAGNIFa8j9o,0","Jacques Francois":"YAHO2a5g66Q,0","JetBrains Mono":"YAFdJksXcAk,0","Libre Baskerville":"YACgEUFdPdA,0","Manrope":"YAHO2b2feC4,0","Merriweather":"YACgEXvHxxs,0","Montserrat":"YADLjI9qxTA,0","Nunito":"YACgEX8C5Gg,0","Oleo Script":"YACgEQQ14jI,0","Phantom Sans":"YAHO2E8Pb88,0","Playfair Display":"YACgEYmuCJE,0","Poppins":"YAFdJjbTu24,1","Press Start 2P":"YAFyGr-8pmQ,0","Quicksand":"YADWjpfPmdk,0","Raleway":"YACgEVg3xZg,0","Segoe UI":"YAHNdRD1Klw,0","Source Sans 3":"YAG4lO1Mj10,0","Spectral":"YAHO2rVUHIM,0","Times New Roman":"YAGzXW3gftg,0","Times":"YAGzXW3gftg,0","Ubuntu":"YACgERDU--Q,0","Work Sans":"YAGXhLOKv44,0","Yellowtail":"YACgEYG4kG4,0","ui-monospace":"YADlN8CFZ8Q,0","ui-sans-serif":"YACkoN-xg4g,0"}}');</script><script src="/_sdk/c21197326e9a1154.telemetry_sdk.js" integrity="sha512-Aqwl+NmLtKBcMQM4HY+W9lmBHa+zP5MqSEuYfCjkzt4xeOSv2xNz81cCp7JyXBVrY+zojg5o94FHY/R31v2d3Q=="></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bangun Datar Fun</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.577.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,700;9..144,800&display=swap" rel="stylesheet"> <style> :root { --ink: #17324d; --cream: #fff9ed; --sun: #ffcb47; --coral: #ff715b; --aqua: #40c9c5; --blue: #4776e6; --violet: #8b62c8; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "DM Sans", sans-serif; color: var(--ink); } .display-font { font-family: "Fraunces", serif; } .fun-shell { background-image: radial-gradient(circle at 7% 10%, rgba(255, 203, 71, .30) 0 2px, transparent 3px), radial-gradient(circle at 91% 22%, rgba(64, 201, 197, .28) 0 3px, transparent 4px), radial-gradient(circle at 19% 81%, rgba(255, 113, 91, .22) 0 3px, transparent 4px); background-size: 42px 42px, 66px 66px, 58px 58px; } .hero-blob { border-radius: 44% 56% 60% 40% / 45% 43% 57% 55%; animation: floaty 5s ease-in-out infinite; } .shape-card { min-height: 222px; transition: transform .22s ease, box-shadow .22s ease; } .shape-card:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: 0 18px 30px rgba(23, 50, 77, .13); } .shape-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: white; font-size: 1.6rem; font-weight: 800; } .match-button, .quiz-option { transition: transform .18s ease, background .18s ease, border-color .18s ease; } .match-button:hover, .quiz-option:hover { transform: translateY(-2px); } .match-button.active { border-color: #17324d !important; background: #fff2ca !important; box-shadow: 0 8px 18px rgba(23, 50, 77, .12); } .quiz-option.correct { background: #dff8e9 !important; border-color: #23945b !important; color: #12643b !important; } .quiz-option.wrong { background: #ffe8e4 !important; border-color: #dc594a !important; color: #9d3025 !important; } .hidden-panel { display: none; } .reveal { animation: reveal .55s ease both; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(2deg); } } @keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .hero-blob { border-radius: 30px; } } </style> <script src="/_sdk/efe904fe8a212716.data_sdk.js" type="text/javascript" integrity="sha512-oiO0pmn5llS1uDeB2l690YywxqOe/a0U1kzY6RGaLZXtyh9YjTk1CUoK/bJUugc1QbUaJMJ3IE1MtpNY5NBZCw=="></script> <script src="/_sdk/6125e8aa3c264a2d.resizing_sdk.js" type="text/javascript" integrity="sha512-+j9iK2FF/yFSTU389rFqKj3v0s1ELh1r0aj3mqpsVRZujaeWi0WgN7jmTcWLcBq91dz3NCEyXqMtHbwpOxhDYg=="></script> </head> <body data-template-id="__page-root" class="w-full min-h-screen fun-shell"> <header class="w-full px-5 pt-5"> <nav data-template-id="top-nav" class="canva-header mx-auto flex max-w-6xl items-center justify-between rounded-2xl px-5 py-3 shadow-sm backdrop-blur"><a href="#beranda" class="flex items-center gap-2 font-extrabold text-[#17324d]"> <span class="grid h-9 w-9 place-items-center rounded-xl bg-[#ffcb47] text-lg">△</span> <span data-template-id="brand-name" class="canva-text"></span> </a> <div class="hidden items-center gap-1 md:flex"><a data-template-id="nav-materi" class="canva-link rounded-lg px-3 py-2 hover:bg-[#fff2ca]" href="#materi"></a> <a data-template-id="nav-kalkulator" class="canva-link rounded-lg px-3 py-2 hover:bg-[#e2fbfa]" href="#kalkulator"></a> <a data-template-id="nav-cocokkan" class="canva-link rounded-lg px-3 py-2 hover:bg-[#f0e9ff]" href="#cocokkan"></a> <a data-template-id="nav-kuis" class="canva-link rounded-lg px-3 py-2 hover:bg-[#ffe7e1]" href="#kuis"></a> </div> </nav> </header> <main id="beranda" class="w-full"> <section class="mx-auto grid max-w-6xl items-center gap-10 px-5 py-12 md:grid-cols-2 md:py-16"> <div class="reveal"> <p data-template-id="hero-kicker" class="canva-tag mb-4 inline-flex rounded-full px-4 py-2 text-sm"></p> <h1 data-template-id="hero-title" class="canva-text display-font mb-5 leading-[1.05]"></h1> <p data-template-id="hero-description" class="canva-text mb-7 max-w-xl leading-relaxed"></p> <div class="flex flex-wrap gap-3"><a data-template-id="hero-primary-button" class="canva-button inline-flex items-center gap-2 rounded-xl px-5 py-3 shadow-sm transition hover:-translate-y-0.5" href="#materi"></a> <a data-template-id="hero-secondary-button" class="canva-button inline-flex items-center gap-2 rounded-xl px-5 py-3 transition hover:-translate-y-0.5" href="#kuis"></a> </div> </div> <div class="relative reveal" style="animation-delay:.14s"> <div class="hero-blob overflow-hidden border-8 border-white bg-[#40c9c5] p-3 shadow-xl"><img data-template-id="hero-image" loading="lazy" class="canva-image h-80 w-full rounded-[28px] object-cover md:h-96"> </div> <div class="absolute -bottom-4 -left-2 grid h-20 w-20 place-items-center rounded-full bg-[#ff715b] text-3xl text-white shadow-lg"> ○ </div> <div class="absolute -right-3 top-8 grid h-16 w-16 place-items-center rotate-12 rounded-2xl bg-[#ffcb47] text-3xl text-[#17324d] shadow-lg"> □ </div> </div> </section> <section id="materi" class="w-full bg-white/80 px-5 py-14"> <div class="mx-auto max-w-6xl"> <div class="mb-8 max-w-2xl"> <p data-template-id="materi-kicker" class="canva-tag mb-3 inline-block rounded-full px-3 py-1 text-sm"></p> <h2 data-template-id="materi-title" class="canva-text display-font mb-3"></h2> <p data-template-id="materi-description" class="canva-text leading-relaxed"></p> </div> <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5"> <article data-template-id="card-persegi" class="canva-card shape-card rounded-3xl border-2 border-[#d8e5ff] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#4776e6]"> □ </div> <h3 data-template-id="persegi-title" class="canva-text mb-2"></h3> <p data-template-id="persegi-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-persegi-panjang" class="canva-card shape-card rounded-3xl border-2 border-[#ffdfda] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#ff715b]"> ▭ </div> <h3 data-template-id="persegi-panjang-title" class="canva-text mb-2"></h3> <p data-template-id="persegi-panjang-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-segitiga" class="canva-card shape-card rounded-3xl border-2 border-[#fff0bd] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#f4af18]"> △ </div> <h3 data-template-id="segitiga-title" class="canva-text mb-2"></h3> <p data-template-id="segitiga-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-lingkaran" class="canva-card shape-card rounded-3xl border-2 border-[#c9f1ef] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#40c9c5]"> ○ </div> <h3 data-template-id="lingkaran-title" class="canva-text mb-2"></h3> <p data-template-id="lingkaran-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-jajargenjang" class="canva-card shape-card rounded-3xl border-2 border-[#eadbff] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#8b62c8]"> ▱ </div> <h3 data-template-id="jajargenjang-title" class="canva-text mb-2"></h3> <p data-template-id="jajargenjang-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-trapesium" class="canva-card shape-card rounded-3xl border-2 border-[#fbd8ea] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#d45b9f]"> ⌑ </div> <h3 data-template-id="trapesium-title" class="canva-text mb-2"></h3> <p data-template-id="trapesium-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-layang" class="canva-card shape-card rounded-3xl border-2 border-[#cfeee2] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#27a879]"> ◇ </div> <h3 data-template-id="layang-title" class="canva-text mb-2"></h3> <p data-template-id="layang-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-belahlketupat" class="canva-card shape-card rounded-3xl border-2 border-[#dfe5ff] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#5b71d6]"> ◆ </div> <h3 data-template-id="belahlketupat-title" class="canva-text mb-2"></h3> <p data-template-id="belahlketupat-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-segilima" class="canva-card shape-card rounded-3xl border-2 border-[#f6e5bd] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#c48722]"> ⬠ </div> <h3 data-template-id="segilima-title" class="canva-text mb-2"></h3> <p data-template-id="segilima-description" class="canva-text text-sm leading-relaxed"></p> </article> <article data-template-id="card-segienam" class="canva-card shape-card rounded-3xl border-2 border-[#cee8f7] p-5 shadow-sm"> <div class="shape-icon mb-4 bg-[#2689bd]"> ⬡ </div> <h3 data-template-id="segienam-title" class="canva-text mb-2"></h3> <p data-template-id="segienam-description" class="canva-text text-sm leading-relaxed"></p> </article> </div> </div> </section> <section id="kalkulator" class="w-full px-5 py-14"> <div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[.8fr_1.2fr]"> <div> <p data-template-id="calculator-kicker" class="canva-tag mb-3 inline-block rounded-full px-3 py-1 text-sm"></p> <h2 data-template-id="calculator-title" class="canva-text display-font mb-3"></h2> <p data-template-id="calculator-description" class="canva-text leading-relaxed"></p> <div class="mt-6 flex items-start gap-3 rounded-2xl bg-[#fff2ca] p-4"><i data-lucide="lightbulb" class="mt-0.5 h-6 w-6 shrink-0 text-[#bb7610]"></i> <p data-template-id="calculator-tip" class="canva-text text-sm leading-relaxed"></p> </div> </div> <form id="calculator-form" data-template-id="calculator-panel" class="canva-panel rounded-3xl p-6 shadow-lg"><label data-template-id="shape-select-label" class="canva-text mb-2 block" for="shape-select"></label> <select id="shape-select" class="mb-5 w-full rounded-xl border-2 border-[#c8d9f5] bg-white px-4 py-3 font-semibold text-[#17324d] outline-none focus:border-[#4776e6]"> <option value="square">Persegi</option> <option value="rectangle">Persegi Panjang</option> <option value="triangle">Segitiga</option> <option value="circle">Lingkaran</option> <option value="parallelogram">Jajargenjang</option> <option value="trapezoid">Trapesium</option> <option value="kite">Layang-layang</option> <option value="rhombus">Belah Ketupat</option> </select> <div id="input-fields" class="grid gap-4 sm:grid-cols-2"></div><button data-template-id="calculate-button" class="canva-button mt-5 w-full rounded-xl px-5 py-3 transition hover:-translate-y-0.5" type="submit"></button> <div id="calculation-result" class="mt-5 hidden rounded-2xl bg-[#e2fbfa] p-5" aria-live="polite"> <p id="result-shape" class="text-sm font-bold uppercase tracking-wider text-[#217e7b]"></p> <p id="result-area" class="mt-2 text-lg font-extrabold text-[#17324d]"></p> <p id="result-perimeter" class="mt-1 font-semibold text-[#36516d]"></p> </div> <p id="calculator-message" class="mt-3 hidden text-sm font-semibold text-[#b83c31]" aria-live="polite"></p> </form> </div> </section> <section id="cocokkan" class="w-full bg-white/80 px-5 py-14"> <div class="mx-auto max-w-6xl"> <div class="mb-8 max-w-2xl"> <p data-template-id="match-kicker" class="canva-tag mb-3 inline-block rounded-full px-3 py-1 text-sm"></p> <h2 data-template-id="match-title" class="canva-text display-font mb-3"></h2> <p data-template-id="match-description" class="canva-text leading-relaxed"></p> </div> <div class="grid gap-6 lg:grid-cols-[1fr_.9fr]"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3"><button type="button" class="match-button rounded-2xl border-2 border-[#d8e5ff] bg-white p-4 font-extrabold text-[#17324d]" data-match="square">□ Persegi</button> <button type="button" class="match-button rounded-2xl border-2 border-[#ffdfda] bg-white p-4 font-extrabold text-[#17324d]" data-match="triangle">△ Segitiga</button> <button type="button" class="match-button rounded-2xl border-2 border-[#c9f1ef] bg-white p-4 font-extrabold text-[#17324d]" data-match="circle">○ Lingkaran</button> <button type="button" class="match-button rounded-2xl border-2 border-[#eadbff] bg-white p-4 font-extrabold text-[#17324d]" data-match="trapezoid">⌑ Trapesium</button> <button type="button" class="match-button rounded-2xl border-2 border-[#cfeee2] bg-white p-4 font-extrabold text-[#17324d]" data-match="kite">◇ Layang-layang</button> <button type="button" class="match-button rounded-2xl border-2 border-[#f6e5bd] bg-white p-4 font-extrabold text-[#17324d]" data-match="hexagon">⬡ Segi Enam</button> </div> <aside data-template-id="match-panel" class="canva-panel rounded-3xl p-6 shadow-sm"> <p data-template-id="match-panel-label" class="canva-text mb-3 text-sm"></p> <h3 id="match-name" class="display-font text-3xl font-extrabold text-[#17324d]" aria-live="polite">Pilih sebuah bentuk!</h3> <p id="match-clue" class="mt-4 leading-relaxed text-[#36516d]" aria-live="polite">Klik kartu bentuk di sebelah kiri untuk melihat ciri khasnya.</p> </aside> </div> </div> </section> <section id="kuis" class="w-full bg-[#17324d] px-5 py-14"> <div class="mx-auto max-w-3xl"> <div class="mb-7 text-center"> <p data-template-id="quiz-kicker" class="canva-tag mb-3 inline-block rounded-full px-3 py-1 text-sm"></p> <h2 data-template-id="quiz-title" class="canva-text display-font mb-3"></h2> <p data-template-id="quiz-description" class="canva-text"></p> </div> <div data-template-id="quiz-panel" class="canva-panel rounded-3xl p-6 shadow-2xl sm:p-8"> <div class="mb-6 flex items-center justify-between gap-4"> <p id="quiz-progress" class="text-sm font-bold text-[#4776e6]" aria-live="polite"></p> <div class="h-3 w-36 overflow-hidden rounded-full bg-[#dfe8ff]"> <div id="progress-bar" class="h-full rounded-full bg-[#ffcb47] transition-all duration-300"></div> </div> </div> <section class="quiz-question" data-question="0"> <h3 data-template-id="q1-question" class="canva-text mb-5"></h3> <div class="grid gap-3"><button data-template-id="q1-a" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> <button data-template-id="q1-b" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="true"></button> <button data-template-id="q1-c" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> </div> </section> <section class="quiz-question hidden-panel" data-question="1"> <h3 data-template-id="q2-question" class="canva-text mb-5"></h3> <div class="grid gap-3"><button data-template-id="q2-a" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> <button data-template-id="q2-b" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> <button data-template-id="q2-c" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="true"></button> </div> </section> <section class="quiz-question hidden-panel" data-question="2"> <h3 data-template-id="q3-question" class="canva-text mb-5"></h3> <div class="grid gap-3"><button data-template-id="q3-a" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="true"></button> <button data-template-id="q3-b" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> <button data-template-id="q3-c" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> </div> </section> <section class="quiz-question hidden-panel" data-question="3"> <h3 data-template-id="q4-question" class="canva-text mb-5"></h3> <div class="grid gap-3"><button data-template-id="q4-a" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> <button data-template-id="q4-b" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="true"></button> <button data-template-id="q4-c" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> </div> </section> <section class="quiz-question hidden-panel" data-question="4"> <h3 data-template-id="q5-question" class="canva-text mb-5"></h3> <div class="grid gap-3"><button data-template-id="q5-a" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> <button data-template-id="q5-b" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="true"></button> <button data-template-id="q5-c" class="canva-button quiz-option rounded-xl border-2 px-5 py-4 text-left" type="button" data-correct="false"></button> </div> </section> <div id="quiz-feedback" class="mt-5 hidden rounded-xl px-4 py-3 font-bold" aria-live="polite"></div><button data-template-id="next-question-button" id="next-question" class="canva-button mt-5 hidden rounded-xl px-5 py-3 transition hover:-translate-y-0.5" type="button"></button> <section id="quiz-result" class="hidden-panel text-center"> <div class="mx-auto mb-4 grid h-20 w-20 place-items-center rounded-full bg-[#ffcb47] text-4xl"> ★ </div> <h3 data-template-id="result-title" class="canva-text mb-2"></h3> <p id="score-text" class="text-lg font-bold text-[#36516d]" aria-live="polite"></p> <p data-template-id="result-message" class="canva-text mx-auto mt-3 max-w-md leading-relaxed"></p><button data-template-id="restart-button" id="restart-quiz" class="canva-button mt-6 rounded-xl px-5 py-3 transition hover:-translate-y-0.5" type="button"></button> </section> </div> </div> </section> </main> <footer data-template-id="footer-section" class="canva-footer w-full px-5 py-6 text-center"> <p data-template-id="footer-text" class="canva-text"></p> </footer> <script src="/_sdk/30c55ecbc6674b44.editing_sdk.js" integrity="sha512-0yFeF6zlu+oH8OLIevdE3rVnNpxlIOQLA+qziaTMZfWAXZCIgq/P4thaeFBF1Vs8MRNK6uAQef6aJvUVhmpcHw=="></script> <script> const fieldSets = { square: [ { id: "side", label: "Panjang sisi", placeholder: "Contoh: 8" } ], rectangle: [ { id: "length", label: "Panjang", placeholder: "Contoh: 10" }, { id: "width", label: "Lebar", placeholder: "Contoh: 6" } ], triangle: [ { id: "base", label: "Alas", placeholder: "Contoh: 10" }, { id: "height", label: "Tinggi", placeholder: "Contoh: 8" }, { id: "sideA", label: "Sisi 1", placeholder: "Contoh: 9" }, { id: "sideB", label: "Sisi 2", placeholder: "Contoh: 9" } ], circle: [ { id: "radius", label: "Jari-jari", placeholder: "Contoh: 7" } ], parallelogram: [ { id: "base", label: "Alas", placeholder: "Contoh: 10" }, { id: "height", label: "Tinggi", placeholder: "Contoh: 6" }, { id: "side", label: "Sisi miring", placeholder: "Contoh: 7" } ], trapezoid: [ { id: "top", label: "Sisi atas", placeholder: "Contoh: 6" }, { id: "bottom", label: "Sisi bawah", placeholder: "Contoh: 10" }, { id: "height", label: "Tinggi", placeholder: "Contoh: 5" }, { id: "sideA", label: "Sisi kiri", placeholder: "Contoh: 6" }, { id: "sideB", label: "Sisi kanan", placeholder: "Contoh: 6" } ], kite: [ { id: "d1", label: "Diagonal 1", placeholder: "Contoh: 12" }, { id: "d2", label: "Diagonal 2", placeholder: "Contoh: 8" }, { id: "sideA", label: "Sisi panjang", placeholder: "Contoh: 7" }, { id: "sideB", label: "Sisi pendek", placeholder: "Contoh: 5" } ], rhombus: [ { id: "d1", label: "Diagonal 1", placeholder: "Contoh: 12" }, { id: "d2", label: "Diagonal 2", placeholder: "Contoh: 8" }, { id: "side", label: "Panjang sisi", placeholder: "Contoh: 7" } ] }; const shapeNames = { square: "Persegi", rectangle: "Persegi Panjang", triangle: "Segitiga", circle: "Lingkaran", parallelogram: "Jajargenjang", trapezoid: "Trapesium", kite: "Layang-layang", rhombus: "Belah Ketupat" }; const select = document.getElementById("shape-select"); const inputs = document.getElementById("input-fields"); const calculatorForm = document.getElementById("calculator-form"); const calculationResult = document.getElementById("calculation-result"); const calculatorMessage = document.getElementById("calculator-message"); function renderFields() { inputs.innerHTML = ""; fieldSets[select.value].forEach((field) => { const wrapper = document.createElement("div"); const label = document.createElement("label"); const input = document.createElement("input"); label.htmlFor = field.id; label.textContent = field.label + " (cm)"; label.className = "mb-2 block text-sm font-bold text-[#17324d]"; input.id = field.id; input.dataset.value = field.id; input.type = "number"; input.min = "0"; input.step = "any"; input.required = true; input.placeholder = field.placeholder; input.className = "w-full rounded-xl border-2 border-[#c8d9f5] bg-white px-4 py-3 font-semibold text-[#17324d] outline-none focus:border-[#4776e6]"; wrapper.appendChild(label); wrapper.appendChild(input); inputs.appendChild(wrapper); }); calculationResult.classList.add("hidden"); calculatorMessage.classList.add("hidden"); } function formatNumber(value) { return value.toFixed(2).replace(".00", ""); } function valueOf(id) { const input = document.querySelector('[data-value="' + id + '"]'); return input ? Number(input.value) : 0; } select.addEventListener("change", renderFields); calculatorForm.addEventListener("submit", (event) => { event.preventDefault(); const shape = select.value; const values = {}; fieldSets[shape].forEach((field) => { values[field.id] = valueOf(field.id); }); if (Object.values(values).some((value) => !Number.isFinite(value) || value <= 0)) { calculatorMessage.textContent = "Yuk isi semua ukuran dengan angka lebih dari 0."; calculatorMessage.classList.remove("hidden"); calculationResult.classList.add("hidden"); return; } let area = 0; let perimeter = 0; if (shape === "square") { area = values.side ** 2; perimeter = 4 * values.side; } else if (shape === "rectangle") { area = values.length * values.width; perimeter = 2 * (values.length + values.width); } else if (shape === "triangle") { area = 0.5 * values.base * values.height; perimeter = values.base + values.sideA + values.sideB; } else if (shape === "circle") { area = Math.PI * values.radius ** 2; perimeter = 2 * Math.PI * values.radius; } else if (shape === "parallelogram") { area = values.base * values.height; perimeter = 2 * (values.base + values.side); } else if (shape === "trapezoid") { area = 0.5 * (values.top + values.bottom) * values.height; perimeter = values.top + values.bottom + values.sideA + values.sideB; } else if (shape === "kite") { area = 0.5 * values.d1 * values.d2; perimeter = 2 * (values.sideA + values.sideB); } else if (shape === "rhombus") { area = 0.5 * values.d1 * values.d2; perimeter = 4 * values.side; } document.getElementById("result-shape").textContent = shapeNames[shape]; document.getElementById("result-area").textContent = "Luas = " + formatNumber(area) + " cm²"; document.getElementById("result-perimeter").textContent = "Keliling = " + formatNumber(perimeter) + " cm"; calculatorMessage.classList.add("hidden"); calculationResult.classList.remove("hidden"); }); const matchData = { square: { name: "Persegi", clue: "Memiliki empat sisi yang sama panjang dan empat sudut siku-siku." }, triangle: { name: "Segitiga", clue: "Memiliki tiga sisi dan tiga sudut. Bentuk atap rumah sering menyerupai segitiga." }, circle: { name: "Lingkaran", clue: "Tidak mempunyai sudut. Semua titik pada tepinya berjarak sama dari titik tengah." }, trapezoid: { name: "Trapesium", clue: "Memiliki satu pasang sisi sejajar, seperti bentuk beberapa kap lampu." }, kite: { name: "Layang-layang", clue: "Memiliki dua pasang sisi berdekatan yang sama panjang." }, hexagon: { name: "Segi Enam", clue: "Memiliki enam sisi. Sarang lebah adalah contoh bentuk segi enam di alam." } }; document.querySelectorAll(".match-button").forEach((button) => { button.addEventListener("click", () => { document.querySelectorAll(".match-button").forEach((item) => item.classList.remove("active")); button.classList.add("active"); const data = matchData[button.dataset.match]; document.getElementById("match-name").textContent = data.name; document.getElementById("match-clue").textContent = data.clue; }); }); let currentQuestion = 0; let score = 0; let answered = false; const questions = Array.from(document.querySelectorAll(".quiz-question")); const nextButton = document.getElementById("next-question"); const feedback = document.getElementById("quiz-feedback"); const resultPanel = document.getElementById("quiz-result"); function showQuestion(index) { questions.forEach((question, questionIndex) => { question.classList.toggle("hidden-panel", questionIndex !== index); }); document.getElementById("quiz-progress").textContent = "Pertanyaan " + (index + 1) + " dari " + questions.length; document.getElementById("progress-bar").style.width = ((index + 1) / questions.length) * 100 + "%"; feedback.classList.add("hidden"); nextButton.classList.add("hidden"); answered = false; } document.querySelectorAll(".quiz-option").forEach((option) => { option.addEventListener("click", () => { if (answered) return; answered = true; const activeQuestion = questions[currentQuestion]; const isCorrect = option.dataset.correct === "true"; activeQuestion.querySelectorAll(".quiz-option").forEach((button) => { button.disabled = true; if (button.dataset.correct === "true") button.classList.add("correct"); }); if (isCorrect) { score += 1; feedback.textContent = "Hebat! Jawabanmu benar! 🎉"; feedback.className = "mt-5 rounded-xl bg-[#dff8e9] px-4 py-3 font-bold text-[#12643b]"; } else { option.classList.add("wrong"); feedback.textContent = "Belum tepat. Jawaban hijau adalah jawaban yang benar."; feedback.className = "mt-5 rounded-xl bg-[#ffe8e4] px-4 py-3 font-bold text-[#9d3025]"; } feedback.classList.remove("hidden"); nextButton.classList.remove("hidden"); }); }); nextButton.addEventListener("click", () => { if (currentQuestion < questions.length - 1) { currentQuestion += 1; showQuestion(currentQuestion); return; } questions.forEach((question) => question.classList.add("hidden-panel")); feedback.classList.add("hidden"); nextButton.classList.add("hidden"); document.getElementById("quiz-progress").textContent = "Kuis selesai"; document.getElementById("progress-bar").style.width = "100%"; document.getElementById("score-text").textContent = "Skormu: " + score + " dari " + questions.length; resultPanel.classList.remove("hidden-panel"); }); document.getElementById("restart-quiz").addEventListener("click", () => { currentQuestion = 0; score = 0; resultPanel.classList.add("hidden-panel"); document.querySelectorAll(".quiz-option").forEach((button) => { button.disabled = false; button.classList.remove("correct", "wrong"); }); showQuestion(0); }); renderFields(); showQuestion(0); lucide.createIcons(); </script> </body> </html>
Manfaat Pembelajaran Matematika
- ✓Memperkuat pemahaman konsep melalui pengulangan yang menyenangkan
- ✓Melatih kecepatan dan akurasi berhitung tanpa tekanan ujian
- ✓Membangun kepercayaan diri siswa dalam menghadapi soal matematika
- ✓Memvisualisasikan konsep abstrak menjadi sesuatu yang konkret dan interaktif
Cara Menggunakan Game Ini
- 1Guru: Gunakan sebagai "warming up" sebelum masuk materi baru, atau sebagai refleksi di akhir pertemuan
- 2Siswa: Mainkan berulang kali hingga skor meningkat — pengulangan adalah kunci penguasaan matematika
- 3Orang tua: Dampingi anak dan jadikan sesi bermain sebagai diskusi santai tentang konsep yang dimainkan
💡 Tips Belajar
Jangan khawatir jika tidak langsung mendapat nilai sempurna. Setiap kesalahan adalah kesempatan belajar. Coba identifikasi bagian mana yang masih salah, lalu pelajari kembali konsep tersebut sebelum memainkan game lagi.