Kumpulan Prompt AI untuk
EduGames & Simulations

Topik: Gaya & Gerak — Kelas 5 SD / 8 SMP

Buatkan simulasi interaktif tentang GAYA DAN GERAK menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file HTML.

Fitur utama:
- Canvas responsif (max 700x500px)
- Objek (bola/orang kecil) yang bisa didrag dengan mouse
- Tombol untuk memilih jenis gaya:
  * Gravitasi (bola jatuh ke bawah)
  * Gaya gesek (bola melambat di permukaan kasar/halus)
  * Gaya magnet (objek tertarik/ditolak)
  * Gaya pegas (objek memantul)
- Slider untuk mengubah besaran gaya (nilai visible)
- Vektor gaya ditunjukkan dengan anak panah berlabel
- Kotak info yang menampilkan nilai gaya, kecepatan, percepatan
- Tombol reset untuk mengembalikan ke posisi awal
- Animasi smooth menggunakan requestAnimationFrame

Visual: clean, colorful, menggunakan ikon dan label yang jelas. Background putih dengan grid subtle. Objek menggunakan shape geometric dengan warna berbeda untuk tiap jenis gaya. Animasi label nilai real-time.

Topik: Sains Umum — Kelas 4-6 SD

Buatkan game kuis sains interaktif untuk siswa SD kelas 4-6 menggunakan HTML, CSS, dan JavaScript dalam satu file.

Gameplay:
- Tampilan utama: nama game, instruksi, tombol "Mulai"
- 20 pertanyaan sains SD (campuran IPA: makhluk hidup, benda, energi, sistem tata surya)
- Setiap pertanyaan tampil 1 per layar dengan 4 pilihan jawaban (A, B, C, D)
- Sistem lives: pemain punya 3 hati (salah 3x = game over)
- Poin: +10 untuk benar, +0 untuk salah
- Bonus waktu: menjawab dalam 10 detik = +5 poin ekstra
- Feedback langsung: jawaban benar = animasi checkmark hijau + suara, salah = X merah + show correct answer
- Progress bar di atas menunjukkan pertanyaan ke-X dari 20
- Setelah pertanyaan 5, 10, 15: pertanyaan bonus (全 benar = 20 poin)
- Halaman hasil akhir: skor, jumlah benar, level yang dicapai
- Retry button dan high score (localStorage)

Visual: bright dan playful — warna pastel, emoji di setiap pertanyaan, animasi confetti saat menjawab benar, screen shake saat salah. Font besar dan mudah dibaca untuk anak SD.

Topik: Siklus Air — Kelas 3-5 SD

Buatkan virtual lab interaktif tentang SIKLUS AIR untuk siswa SD kelas 3-5 menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Ilustrasi landscape 2D: gunung, laut, awan, matahari, hutan, kota
- Animasi partikel air yang bergerak melalui siklus:
  * Evaporasi: partikel air dari laut/sungai naik ke atas (dipanaskan matahari)
  * Transpirasi: partikel dari tumbuhan naik ke atmosfer
  * Kondensasi: partikel berubah menjadi titik-titik kecil, membentuk awan
  * Presipitasi: hujan turun ke bumi
  * Aliran permukaan & infiltrasi: air mengalir kembali ke laut
- Slider SPEED untuk mempercepat/memperlambat siklus
- Toggle label untuk show/hide nama setiap proses
- Klik pada setiap tahap untuk info singkat popup
- Recorder sheet: siswa mencatat apa yang mereka observe di setiap tahap
- Tombol "Amati Sendiri": siswa menjawab 3 pertanyaan observasi
- Tombol reset untuk mulai ulang

Visual: ilustrasi kartun yang colorful dan engaging, dengan animasi smooth. Sky berubah warna dari biru ke abu-abu saat mendung. Partikel air menggunakan glow effect. Cocok untuk diproyeksikan di kelas SD.

Topik: Tata Surya — Kelas 6 SD / 9 SMP

Buatkan simulasi orbit tata surya menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Matahari di pusat dengan glow effect
- 8 planet dengan ukuran relatif yang sesuai
- Orbit elips untuk setiap planet
- Planet berotasi dan berevolusi (animasi continuous)
- Toggle untuk PLANET INFO: hover/click planet menampilkan nama, jarak dari matahari, diameter, jumlah satelit
- Tombol PLAY/PAUSE untuk kontrol animasi
- Slider SPEED: 1x, 2x, 5x, 10x, 50x
- Toggle untuk menampilkan: orbit paths, labels, planet sizes (to-scale vs exaggerated)
- Tombol ZOOM untuk focus ke planet tertentu
- Simulasi siang/malam: bagian planet yang menghadap matahari terang, yang menghadap gelap
- Sidebar info: facts menarik tentang setiap planet (dapat diedit)
- Background starfield parallax

Visual: space aesthetic — background hitam dengan bintang, planet dengan warna dan texture yang reconheisable. Smooth animation. Tooltip hover dengan data faktual.

Topik: Eksplorasi Sains — Kelas 5-6 SD

Buatkan game eksplorasi sains "Sains Explorer" menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Gameplay:
- Karakter kecil (sprite sederhana) yang bergerak di world map
- World map terdiri dari 5 area berbeda: Hutan, Laut, Gunung, Luar Angkasa, Laboratorium
- Setiap area punya 3 tantangan sains:
  * Hutan: ekosistem食物链, siklus hidup tanaman
  * Laut: tekanan air, adaptasi ikan
  * Gunung: lapisan atmosfer, ketinggian & suhu
  * Luar Angkasa: planet, bintang, gravitasi
  * Laboratorium: eksperimen virtual
- Setiap tantangan = 5 mini-game atau kuis interaktif
- Player punya HP bar dan XP bar
- Benar semua = max XP + item koleksi
- Items yang dikumpulkan: mikroskop, teropong, globe, dll.
- Completeness tracker: area yang sudah dijelajahi ditandai
- Achievement badges untuk setiap area yang diselesaikan
- Save progress ke localStorage

Visual: pixel art style, bright colors, map menggunakan ilustrasi cartoon. Smooth movement dan animasi. Cocok untuk anak SD — intuitif dan engaging.

Topik: Wujud Benda & Perubahannya — Kelas 4 SD

Buatkan visualisasi interaktif tentang PERUBAHAN WUJUD BENDA menggunakan HTML, CSS, dan JavaScript dalam satu file.

Fitur:
- Sederetan partikel (bola-bola kecil) yang merepresentasikan molekul
- Tampilan perbandingan: PADAT, CAIR, GAS dalam 3 panel
- Panel PADAT: partikel rapat, bergerak di tempat (vibrasi)
- Panel CAIR: partikel lebih renggang, bisa bergeser
- Panel GAS: partikel spread out, bergerak cepat ke segala arah
- Slider TEMPERATURE: dari -50°C hingga 200°C
- Slider PRESSURE: dari rendah ke tinggi
- Partikel berubah warna (biru=dingin, kuning=hangat, merah=panas) berdasarkan suhu
- Label di setiap panel: nama wujud, deskripsi, contoh
- Kotak info: jenis perubahan (mencair, membeku, menguap, mengembun, menyublim, Deposisi) dengan penjelasan singkat
- Tombol "Percobaan": pilih dua wujud, ubah kondisi, lihat perubahan secara animasi
- Fun fact popup untuk setiap jenis perubahan

Visual: colorful particle animation dengan glow. Clean layout dengan 3 panel berdampingan. Animasi partikel harus smooth dan scientifically accurate untuk level SD.

Topik: Gerak Parabola — Kelas 8 SMP / 10 SMA

Buatkan simulasi GERAK PARABOLA menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Cannon/peluncur di sisi kiri canvas
- Slider untuk mengatur: sudut elevasi (0-90°), kecepatan awal (10-100 m/s)
- Tombol LAUNCH untuk menembakkan proyektil
- Trace trajectory: garis putus-putus menunjukkan lintasan
- Partikel smoke di belakang proyektil saat bergerak
- Collision detection: proyektil mengenai ground → ledakan partikel
- Data panel real-time: posisi (x,y), kecepatan, waktu tempuh, jarak maksimum, tinggi maksimum
- Toggle: grid ON/OFF, trajectory trace ON/OFF, vectors (velocity & acceleration)
- Histori tembakan: sampai 5 lintasan ditampilkan sekaligus (dengan warna berbeda) untuk perbandingan
- Tombol CLEAR untuk reset canvas
- Mode AUTO: proyektil otomatis ditembakkan setiap 2 detik dengan parameter random

Visual: physics textbook style — grid background, axis labels, clean fonts. Proyektil menggunakan warna oranye cerah. Cannon menggunakan shape geometris. Gaya fisika harus accurate secara ilmiah.

Topik: Cahaya & Optik — Kelas 8 SMP

Buatkan simulasi OPTIK GEOMETRI menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Area canvas dengan berbagai tipe medium (air, glass, diamond, air)
- Sumber cahaya: bisa dipindah dengan drag (sun/flashlight icon)
- Sinar datang, sinar pantul, sinar bias ditampilkan dengan warna berbeda
- Toggle mode: PEMANTULAN atau PEMBIASAN
- Slider untuk indeks bias medium kedua
- Toggle: TIRTEL DINDING (garis normal) visible atau tidak
- Toggle: SUDUT UKUR (derajat) visible atau tidak
- Tabel data yang otomatis terisi: sudut datang, sudut pantul, sudut bias, kecepatan cahaya di medium
- Cermin datar dan cermin lengkung (concave/convex): pilih dengan tombol
- Untuk cermin lengkung: focus point dan center ditunjukkan
- Lensa cembung dan cekung: pilih dengan tombol
- Reset button
- Penjelasan singkat di sidebar untuk setiap fenomena

Visual: clean scientific diagram style. Sinar menggunakan gradient warna (merah untuk datang, biru untuk pantul, hijau untuk bias). Medium menggunakan warna semi-transparan. Grid dan axis untuk referensi.

Topik: Listrik Dinamis — Kelas 9 SMP / 12 SMA

Buatkan simulasi RANGKAIAN LISTRIK menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Canvasarea untuk menempatkan komponen
- Sidebar komponen yang bisa didrag ke canvas: baterai, resistor, saklar, bohlam, ampermeter, voltmeter, kabel
- Drag-drop untuk menyusun rangkaian
- Tombol MODE: SERI vs PARALEL (auto-configure layout)
- Tombol ON/OFF untuk saklar
- Calculations panel real-time:
  * Total hambatan (RT)
  * Arus listrik (I = V/R)
  * Tegangan di setiap komponen
  * Daya listrik (P = V*I)
- Bohlam menyala (animasi glow) dengan kecerahan proporsional terhadap daya
- Voltage drops ditunjukkan di sepanjang rangkaian
- Current flow animation: partikel bergerak di kabel menunjukkan arah arus
- Tombol "Preset": pilihan rangkaian contoh (seri 3 resistor, paralel 3 resistor, campuran)
- Tombol reset
- Error message jika rangkaian terbuka

Visual: clean schematic style. Komponen menggunakan symbols standar fisika. Wiring menggunakan garis dengan animasi flow. Panel kalkulasi menggunakan font mono untuk nilai numerik.

Topik: Gas Ideal & Hukum Gas — Kelas 11 SMA

Buatkan simulasi TERMODINAMIKA menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Container 2D (kotak) yang dipenuhi partikel bergerak (bola-bola kecil)
- Partikel bertumbukan satu sama lain dan dengan dinding container
- Slider untuk parameter:
  * Suhu (T): mempengaruhi kecepatan partikel
  * Volume (V): container bisa membesar/mengecil
  * Jumlah partikel (N): tambah/kurangi partikel
  * Tekanan (P): diukur dan ditampilkan
- Grafik real-time: hubungan P vs V (pada T konstan), P vs T (pada V konstan), V vs T (pada P konstan)
- Drei pilihan Hukum: Boyle, Charles-Gay Lussac, atau Gas Ideal (PV = nRT)
- Grafik menggunakan canvas plotting (bukan library)
- Histogram distribusi kecepatan Maxwell-Boltzmann
- Toggle: SHOW VELOCITY VECTORS (tunjukkan arah kecepatan tiap partikel)
- Collision counter dan average speed display
- Tombol "Reset" dan "Pause"

Visual: clean scientific style. Partikel menggunakan gradient warna berdasarkan kecepatan (slow=red/warm, fast=blue/cold). Container menggunakan outline. Grafik plot dengan grid lines yang jelas.

Topik: Gelombang — Kelas 11 SMA

Buatkan simulasi GELOMBANG INTERFERENSI menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Sumber gelombang: 1 atau 2 sumber (toggle)
- Slider: frekuensi, amplitude, panjang gelombang
- Canvas menampilkan top-view air surface dengan wave animation
- Efek interferensi: constructive (garis terang), destructive (garis gelap) untuk 2 sumber
- Slider untuk jarak antar sumber (d)
- Fringe counter: menghitung jumlah garis interferensi constructive
- Mode DIFRAKSI: single slit dengan adjustable slit width
- Grafik intensitas: plot 2D intensity vs position di bagian bawah canvas
- Phase difference display
- Toggle: SLOW MOTION (animasi 0.25x speed)
- Tombol preset: double slit, single slit, diffraction grating
- Color map untuk representasikan amplitude (heatmap style)

Visual: wave field menggunakan contour lines dengan warna based on amplitude. Beautiful dan hypnotic wave pattern. Grafik dengan axis labels yang jelas.

Topik: Energi & Hukum Newton — Kelas 10 SMA

Buatkan game "Roller Coaster Physics" menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Gameplay:
- Pemain merancang track roller coaster dengan klik titik-titik di canvas
- Track otomatis terbentuk menghubungkan titik-titik
- Physics engine: kereta bergerak sepanjang track berdasarkan gravitasi dan hukum Newton
- Sensor di track menampilkan: kecepatan, energi kinetik, energi potensial di setiap titik
- Grafik energy bar (EK vs EP) di samping canvas
- Constraint: track tidak boleh terlalu curam (>60°) atau loop yang tidak aman
- Tombol TEST: kereta dijalankan di track yang sudah dibuat
- Indikator safety: track hijau (aman), kuning (borderline), merah (tidak aman)
- Challenge mode: pemain harus mencapai checkpoint dengan kecepatan tertentu
- Objective tracker: reach the end with minimum/maximum speed
- Score berdasarkan efficiency (track yang smooth dan hemat material)
- Particle effects: fire/spark saat kereta bergerak cepat

Visual: blueprint/engineering aesthetic dengan grid background. Track menggunakan thick lines dengan warna based on speed. Kereta menggunakan shape sederhana. Beautiful gradient sky background.

Topik: Medan Magnet — Kelas 12 SMA

Buatkan virtual lab MEDAN MAGNET menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Area simulasi dengan magnet batang (bisa dipindah)
- Kompass kecil (jarum magnet) yang bisa diletakkan di mana saja
- Toggle: TAMPILKAN GARIS MEDAN (field lines dengan arah panah)
- Slider: KEAKUTAN magnet (weak/medium/strong)
- Tombol: jenis magnet (batang, horseshoe,环形/magnetic ring)
- Toggle: INTERAKSI DUA MAGNET (letakkan magnet kedua)
- Vektor medan magnet (B) ditunjukkan di sekitar magnet
- Sensor probe: klik di canvas untuk mengukur besar dan arah B di titik tersebut
- Nilai B ditampilkan dalam mikroTesla (µT)
- 3D-ish visualization option: garis medan menggunakan perspective lines
- Activity: challenge "map the field" — siswa menempatkan 10 probe points dan mencatat nilai B
- Check answer button: bandingkan dengan pola yang benar

Visual: scientific lab aesthetic. Magnet menggunakan warna klasik (merah/biru untuk kutub). Field lines menggunakan gradient color dari kutub utara ke selatan. Clean dan accurate.

Topik: Tabel Periodik — Kelas 10 SMA

Buatkan TABEL PERIODIK INTERAKTIF menggunakan HTML, CSS, dan JavaScript dalam satu file.

Fitur:
- Tabel periodik lengkap (118 unsur) dalam layout standar
- 18 kolom (golongan) dan 7 baris (periode) + 2 baris lanthanida/aktinida
- Setiap sel: nomor atom, simbol, nama, massa atom
- Warna berdasarkan kategori: logam alkali, logam tanah alkali, halogen, gas mulia, metaloid, non-logam, dll.
- Klik sel = popup info: konfigurasi elektron, konfigurasi valence, sifat fisik/kimia, kegunaan, fakta menarik
- FILTER: tampilkan hanya kategori tertentu (misal: hanya logam)
- SEARCH: ketik nama unsur atau simbol untuk highlight
- MODE LATIHAN: tampilkan nama → siswa klik simbol yang benar (timer + skor)
- MODE GAME: "Bingo Periodik" — kartu bingo dengan simbol, guru sebut nama, siswa klik sel yang benar
- Toggle: ELECTRONEGATIVITY view (warna berdasarkan keelektronegatifan), ATOMIC RADIUS view
- Animasi ionisasi: visualisasi proses melepas/menerima elektron

Visual: colorful periodic table dengan setiap kategori punya warna berbeda. Clean grid layout. Popup info menggunakan modal overlay. Font simbol besar dan jelas.

Topik: Reaksi Kimia — Kelas 10 SMA

Buatkan simulasi REAKSI KIMIA menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- 2 container (beaker) yang bisa diisi dengan berbagai zat
- Dropdown untuk pilih zat di setiap beaker: H2, O2, Na, Cl, H2O, NaCl, CO2, dll.
- Slider untuk jumlah mol setiap zat
- Tombol "CAMPURKAN" untuk melakukan reaksi
- Animasi reaksi:
  * Partikel mewakili atom/molekul bergerak dan berinteraksi
  * Pembentukan ikatan (animasi garis koneksi)
  * Perubahan warna dan bentuk partikel
  * Pelepasan energi (panas, gas, endapan)
- Calculator panel:
  * Reaksi seimbang (stoikiometri)
  * Massa reaktan dan produk
  * Hukum kekekalan massa (massa sebelum = massa sesudah)
- 5 preset reaksi yang bisa dicoba:
  * 2H2 + O2 → 2H2O
  * 2Na + Cl2 → 2NaCl
  * CH4 + 2O2 → CO2 + 2H2O
  * Fe + O2 → Fe2O3
  * HCl + NaOH → NaCl + H2O
- Tombol RESET untuk kembali ke awal

Visual: chemistry lab aesthetic. Partikel menggunakan bola dengan warna berbeda untuk setiap unsur. Animation saat ikatan terbentuk menggunakan connecting lines. Calculator panel dengan font mono.

Topik: Asam-Basa & Titrasi — Kelas 11 SMA

Buatkan virtual lab TITRASI ASAM-BASA menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Setup titrasi visual lengkap: buret, erlenmeyer, magnetic stirrer
- Dropdown untuk pilih ASAM (HCl, H2SO4, CH3COOH) dan BASA (NaOH, KOH, NH3)
- Slider konsentrasi asam (0.01M - 1M)
- Slider konsentrasi basa (0.01M - 1M)
- Slider volume asam awal (10-50mL)
- Tombol START/PAUSE titrasi
- Tetesan titran dari buret ke erlenmeyer (animasi)
- Indikator pH: larutan berubah warna berdasarkan pH (merah<3, kuning 4-6, hijau 7, biru 8-10, ungu >11)
- Indikator universal (teteskan ke erlenmeyer)
- Grafik TITRASI: pH vs Volume basa ditambahkan (plotted in real-time)
- Titik ekivalen ditandai pada grafik
- Tombol "Tambahkan 1 mL" dan "Tambahkan 0.1 mL" untuk kontrol presisi
- Data table: volume basa, pH, perubahan pH per mL
- Lembar laporan: siswa input data, software calculate molaritas asam

Visual: realistic lab setup. Glass apparatus menggunakan semi-transparent styling. Color change animation harus visible dan scientifically accurate. Grafik diplot dengan canvas.

Topik: Ikatan Kimia — Kelas 10 SMA

Buatkan simulasi IKATAN KIMIA menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Atom selector: pilih 2 unsur untuk divisualisasikan
- Atom divisualisasikan dengan nucleus (bola tengah) + electron shells (lingkaran)
- Elektron animasi berputar di shell-nya (sesuai konfigurasi)
- Toggle IONIC BOND: animasi transfer elektron dari logam ke non-logam
- Toggle COVALENT BOND: animasi berbagi elektron (electron pair ditunjukkan)
- Toggle METALLIC BOND: animasi electron sea (elektron bebas bergerak antar ion)
- Slider untuk interaktif: jarak antar atom (untuk lihat bagaimana ikatan terbentuk/pecah)
- Struktur Lewis: tampilkan dot notation untuk valence electrons
- Molekul preset untuk divisualisasikan:
  * H2, O2, N2 (kovalen)
  * NaCl, MgO (ionik)
  * H2O, CO2, CH4, NH3 (molekuler)
  * C6H12O6 (glukosa — simplified)
- Energy diagram: menunjukkan energi sistem sebelum, selama, sesudah ikatan
- Tombol animation speed control

Visual: beautiful atomic visualization. Nucleus dengan glow. Electrons menggunakan particle dots. Bond formation animation sangat clear. Color coding untuk berbeda jenis ikatan.

Topik: Penyetaraan Reaksi — Kelas 10 SMA

Buatkan game PENYETARAAN REAKSI KIMIA menggunakan HTML, CSS, dan JavaScript dalam satu file.

Gameplay:
- Tampilan: persamaan reaksi tidak setara muncul di tengah
- Koefisien belum ada / ditampilkan sebagai "?"
- Slider atau tombol + / - untuk setiap koefisien (mulai dari 1)
- Tombol "CHECK" untuk memverifikasi
- Benar: confetti animation + chime sound effect + bergerak ke soal berikutnya
- Salah: shake animation + "Coba lagi" message + hint (tunjukkan mass imbalance)
- Sistem poin: 100 per soal benar, -20 per cek salah, streak bonus (3x berturut-turut = bonus 50)
- 20 soal dengan tingkat kesulitan meningkat:
  * Level 1-5: reaksi sederhana (2 unsur)
  * Level 6-10: reaksi sedang (3-4 unsur)
  * Level 11-15: reaksi kompleks (dengan koefisien >5)
  * Level 16-20: reaksi organik sederhana
- Progress bar dan level indicator
- Leaderboard (localStorage)
- Hint button (limited: 3 hints per game, mengurangi poin)
- Retry button dan sound toggle

Visual: chalkboard aesthetic (hitam/hijau tua) dengan font monospace untuk rumus kimia. Partikelpartikel animasi di background. Confetti saat benar. Animasi shake saat salah.

Topik: Sel — Kelas 7 SMP / 11 SMA

Buatkan simulasi SEL INTERAKTIF menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Toggle: SEL HEWAN vs SEL TUMBUHAN
- Canvas menampilkan 3D-ish view sel dengan organel
- Klik pada organel untuk info popup:
  * Membrane sel
  * Nucleus (dengan nucleolus)
  * Mitokondria
  * Retikulum endoplasma
  * Apparatus Golgi
  * Ribosom
  * Lisosom
  * Vakuola (besar di tumbuhan, kecil di hewan)
  * Dinding sel & kloroplas (tumbuhan saja)
- Toggle: TAMPILKAN/NONTON organel (hide semua dulu, show satu per satu)
- Slider ZOOM: perbesaran 100x - 10000x (menunjukkan level detail berbeda)
- Animasi: beberapa proses ditampilkan:
  * Mitokondria: produksi ATP (partikel bergerak masuk/keluar)
  * Ribosom: sintesis protein (rantai asam amino terbentuk)
  * Pembelahan sel: mitosis phase 1-5 animation
- Color-coded organel labels
- Perbandingan otomatis: panel samping menampilkan perbedaan sel hewan vs tumbuhan

Visual: beautiful biological illustration style. Organel menggunakan warna yang membedakan. Animasi smooth dan scientifically accurate. Labels clear dan easy to read.

Topik: Fotosintesis — Kelas 8 SMP

Buatkan simulasi FOTOSINTESIS menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Ilustrasi penampang daun dengan sel epidermis, jaringan palisade, jaringan bunga karang
- Animasi proses fotosintesis stepwise:
  * REAKSI TERANG: cahaya matahari → elektron bergerak di thylakoid → ATP synthase → ATP + NADPH
  * SIKLUS CALVIN: CO2 masuk → RuBisCO → 3-PGA → G3P → Glukosa
- Slider INTENSITAS CAHAYA (affects rate reaksi terang)
- Slider KONSENTRASI CO2 (affects rate siklus Calvin)
- Slider SUHU (affects enzim RuBisCO activity)
- Grafik real-time: laju fotosintesis vs intensitas cahaya (kurva)
- Toggle: TAMPILKAN SIMPEL vs TAMPILKAN DETAIL (detail = nama kimia lengkap)
- Tombol PLAY/PAUSE untuk animasi step-by-step
- Indikator hasil: glukosa terbentuk (counter)
- Sidebar penjelasan untuk setiap tahap
- Quiz mini: 3 pertanyaan tentang faktor yang mempengaruhi fotosintesis

Visual: beautiful biological illustration. Thylakoid menggunakan stack pancake design. Chlorophyll menggunakan green glow. CO2 dan H2O menggunakan molekul visualization. Grafik dengan grid lines.

Topik: Ekosistem & Rantai Makanan — Kelas 7 SMP

Buatkan simulasi EKOSISTEM interaktif menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Landscape view: padang rumput, hutan, sungai, laut (pilih ekosistem)
- Populasi hewan dan tumbuhan yang bisa ditambahkan/dihilangkan dengan klik:
  * Produsen: rumput, pohon, alga
  * Konsumen 1: kelinci, belalang, ikan kecil
  * Konsumen 2: ular, katak, burung
  * Konsumen 3: elang, serigala, hiu
  * Dekomposer: jamur, bakteri
- Simulasi predasi: predator menangkap prey → prey count decreases, predator count increases
- Simulasi reproduksi: populasi bertumbuh jika ada cukup makanan
- Simulasi kematian: starvation jika food supply habis
- Population graph (Chart.js): line chart showing population over time for top 5 species
- Energy pyramid visualization
- Food web: garis penghubung antar organisme yang saling makan
- Toggle: SPEED NORMAL / SPEED FAST
- Slider: initial population count
- Scenario presets: ekosistem seimbang, ekosistem disturbed, invasive species introduction
- Activity: siswa memprediksi apa yang terjadi jika satu spesies dihilangkan

Visual: beautiful nature scene. Organisms menggunakan icon/emoji-based representations. Animasi movement dan predation sangat engaging. Graph menggunakan warna yang membedakan species.

Topik: DNA & Genetika — Kelas 12 SMA

Buatkan simulasi DNA interactive menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- DNA double helix structure dalam 3D (CSS 3D transform)
- Mode REPLIKASI:
  * Helicase bergerak unzip DNA
  * DNA polymerase menambahkan nucleotide baru di setiap strand
  * Leading strand vs lagging strand (Okazaki fragments)
  * Penjelasan setiap enzim
- Mode TRANSKRIPSI:
  * DNA → mRNA (complementary base pairing)
  * mRNA meninggalkan nucleus (jendela nucleus terbuka)
- Mode TRANSLASI:
  * mRNA → Ribosome
  * tRNA delivers amino acids
  * Chain of amino acids grows
  * Protein folding visualization (simplified)
- Toggle detail level: SIMPEL / DETAIL
- Slider speed untuk animasi
- Quiz: match nucleotide pairs, identify DNA sequence from protein
- Labels untuk setiap komponen (base, sugar, phosphate, enzyme)

Visual: beautiful molecular visualization. Nucleotide menggunakan warna berbeda (A=green, T=red, G=blue, C=yellow). Enzyme menggunakan blob shapes. Smooth animation dan transitions. Clean labels.

Topik: Sistem Peredaran Darah — Kelas 8 SMP

Buatkan simulasi SISTEM PEREDARAN DARAH menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Full body cross-section view (torso)
- Sistem peredaran darah: jantung (4 ruang), arteri, vena, kapiler
- Animasi siklus darah:
  * Darah kaya O2 (merah cerah): jantung → paru-paru
  * Darah miskin O2 (merah tua): paru-paru → jantung
  * Darah kaya O2: jantung → tubuh
  * Darah miskin O2: tubuh → jantung
- Tombol untuk menunjukkan jalannya darah:
  * Sirkulasi pulmonari (jantung-paru-jantung)
  * Sirkulasi sistemik (jantung-tubuh-jantung)
  * Siklus lengkap (full cycle animation)
- Toggle: DETAIL (tunjukkan semua pembuluh darah) vs SIMPEL
- Heart animation: atria dan ventrikel berkontraksi dan berelaksasi (pumping)
- Data panel: heart rate (bpm), blood pressure, oxygen level %
- Info panels untuk setiap bagian: atrium kanan/kiri, ventrikel kanan/kiri, pembuluh darah utama
- Toggle label untuk setiap komponen
- Interactive: klik bagian jantung untuk info detail

Visual: detailed anatomical illustration style. Heart dengan warna anatomically accurate. Blood menggunakan animasipartikel yang mengalir. Clean labels dengan lines ke anatomy parts.

Topik: Grafik Fungsi — Kelas 10-11 SMA

Buatkan GRAPHING CALCULATOR interaktif menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Canvas dengan koordinat Cartesian (x: -10 to 10, y: -10 to 10)
- Grid lines dan axis dengan tick marks
- Input fungsi: text field untuk masukkan fungsi f(x), contoh: x^2, sin(x), ln(x), sqrt(x), abs(x), dll.
- Multiple functions: sampai 5 fungsi sekaligus, tiap fungsi punya warna berbeda
- Plot semua fungsi secara simultan
- Slider atau input box untuk domain manipulation
- Point tracing: hover/click di grafik menunjukkan koordinat (x,y)
- Toggle derivative (f'(x)) yang diplot sebagai fungsi terpisah
- Zoom in/out dengan mouse wheel
- Preset functions: linear, quadratic, cubic, trigonometric, exponential, logarithmic
- Table of values: generate table (x, f(x)) untuk setiap fungsi
- Root finder: tampilkan x-intercepts dari setiap fungsi
- Intersection finder: tampilkan titik potong antar fungsi
- Slope visualization: hitung dan tampilkan slope di titik yang diklik

Visual: clean mathematical aesthetic. Grid menggunakan light gray. Functions menggunakan bold colored lines. Points menggunakan dots dengan glow. Font monospace untuk persamaan.

Topik: Aritmatika — Kelas 1-6 SD

Buatkan game ARITHMETIC MASTER menggunakan HTML, CSS, dan JavaScript dalam satu file.

Gameplay:
- 5 level dengan operasi berbeda:
  * Level 1: Penjumlahan (1-10)
  * Level 2: Pengurangan (1-20)
  * Level 3: Perkalian (tabel 1-5)
  * Level 4: Perkalian & Pembagian (tabel 1-10)
  * Level 5: Campuran + soal cerita
- Satu soal per layar, angka besar dan jelas
- 4 pilihan jawaban (number pad untuk input)
- Sistem bintang: 3 bintang (dalam 3 detik), 2 bintang (5 detik), 1 bintang (10 detik)
- Wrong answer: animasi X merah + shake
- Combo counter: 5 berturut-turut benar = bonus points
- Progress bar per level (10 soal per level)
- Sound effects: correct (chime), wrong (buzz), level up (fanfare)
- High score per level tersimpan di localStorage
- Leaderboard top 10 (localStorage)
- Visual rewards: bintang muncul di atas layar saat dapat 3 bintang
- Math problem dalam konteks cerita untuk level 5

Visual: bright, playful, colorful untuk anak SD. Menggunakan emoji dan ilustrasi. Number pad besar dan easy to tap. Confetti animation saat level complete.

Topik: Bangun Datar & Luas — Kelas 1-5 SD

Buatkan GEOBOARD INTERAKTIF menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Grid 10x10 titik (geoboard fisik style)
- Klik titik untuk mulai garis, klik titik kedua untuk menyelesaikan garis
- Bentuk yang dibuat otomatis tertutup jika kembali ke titik awal
- Fill shape dengan warna (klik shape untuk fill)
- Hitung LUAS otomatis (dalam satuan grid) menggunakan Shoelace formula
- Hitung KELILING (panjang total garis)
- Shape presets: buatkan predefined shapes untuk divisualisasikan
  * Segitiga (3 jenis), persegi, persegi panjang, trapesium, jajar genjang
- Measurement tool: klik 2 titik untuk lihat jarak di antara keduanya
- Angle display: sudut antar garis saat hover
- Reset button untuk clear board
- Challenge mode: "Buat shape dengan luas X" (acak X)
- Free draw mode: gambar bebas

Visual: wooden geoboard aesthetic. Titik menggunakan dots berwarna coklat. Rubber bands menggunakan garis warna berbeda. Area filled menggunakan translucent colors. Clean dan engaging untuk anak SD.

Topik: Kalkulus — Kelas 12 SMA

Buatkan simulasi KALKULUS interaktif menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Canvas grafik Cartesian dengan grid
- Input fungsi untuk di-differentiate/integrate
- TURUNAN (Derivative):
  * Plot f(x) dan f'(x) secara bersamaan
  * Secant line animation: dua titik bergerak semakin dekat, garis menghubungkan keduanya → slope = turunan
  * At every x, highlight the slope of f(x) as a vertical segment (slope field)
- INTEGRAL:
  * Riemann sum animation: rectangles mengisi area di bawah kurva, jumlah rectangles increasing
  * Toggle: left endpoint, right endpoint, midpoint Riemann sums
  * Slider untuk number of rectangles (1 to 200)
  * Integral value calculated numerically
  * Toggle definite integral (dengan batas a dan b yang adjustable)
- LIMIT:
  * Animasi x mendekati nilai tertentu dari kiri dan kanan
  * Table of values yang converge/ diverge
- SIMULTANEOUS: plot f(x), f'(x), integral f(x) bersamaan
- Preset functions untuk demonstrasi
- Area under curve di-fill dengan translucent color

Visual: clean mathematical graph. Function curves menggunakan bold lines dengan warna berbeda. Area under curve menggunakan translucent fill. Animations smooth dan educational. Font monospace untuk persamaan.

Topik: Statistika — Kelas 8 SMP / 10 SMA

Buatkan visualisasi STATISTIKA interaktif menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Data input: text field untuk input data (comma-separated) atau generate random data
- Dataset size slider: 10-100 data points
- Generate random data button: normal, uniform, skewed distributions
- Chart types (pilih dengan tab/button):
  * Histogram (with adjustable bin count)
  * Bar chart
  * Pie chart
  * Line chart (time series)
  * Box plot (dengan whisker, median, quartiles, outliers)
  * Scatter plot (untuk data 2 variabel)
- Statistics panel:
  * Mean, median, modus
  * Standar deviasi dan variance
  * Range, IQR
  * Min, max, Q1, Q3
  * Count, sum
- Interactive: klik bar/data point untuk lihat value
- Animation: bars grow from 0 when switching chart types
- Color coding: outlier points highlighted in red
- Educational overlay: z-score, percentile explanation when hovering

Visual: clean data visualization style. Colors coordinated across chart dan stats panel. Smooth animations. Font monospace untuk angka. Chart labels clear dan readable.

Topik: Pecahan & Desimal — Kelas 4-6 SD

Buatkan game MATH MAZE tentang PECAHAN menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Gameplay:
- Maze/grid-based game: player navigasi dari start ke finish
- Setiap sel berisi soal pecahan (penjumlahan, pengurangan, perkalian, pembagian)
- Jawaban yang benar = jalan terbuka ke sel berikutnya
- Jawaban salah = blocked (harus cari jalan lain atau retry)
- Number pad untuk input jawaban
- 3 difficulty levels:
  * Easy: pecahan dengan penyebut sama (1/4 + 2/4)
  * Medium: pecahan penyebut berbeda (1/3 + 1/4)
  * Hard: operasi campuran + konversi ke desimal
- 10 levels dengan maze pattern berbeda
- Star rewards: 3 bintang jika semua benar tanpa salah, 2 bintang jika 1-2 salah, 1 bintang jika >2 salah
- Timer per level
- Hint system: highlight satu jawaban yang mungkin
- Progress save to localStorage
- Particle effects saat membuka jalan baru

Visual: colorful maze dengan character (animal/avatar). Fractions divisualisasikan sebagai pie charts di setiap sel. Clean font untuk math symbols. Engaging untuk anak SD.

Topik: Teorema Pythagoras — Kelas 8 SMP

Buatkan visualizer TEOREMA PYTHAGORAS menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Right triangle yang bisa di-resize (drag vertex)
- Sisi a, b, c dengan label dan panjang yang update real-time
- KUADRAT SISI: tiga persegi di setiap sisi segitiga
- Area squares: hitung dan tampilkan luas tiap persegi (a², b², c²)
- Animasi: square a² dan b² "terbang" dan combine untuk membentuk square c² (area visualization)
- Toggle: TAMPILKAN AREA vs TAMPILKAN KUADRAT
- Formula display: a² + b² = c² dengan angka real-time
- Proof animation: visual proof step-by-step dengan 8 قطعية transformasi
- Challenge mode:
  * Given a, hitung b (acak soal)
  * Given c dan a, hitung b
  * Multiple choice answers
- Interactive: siswa bisa drag vertex untuk buat triangle sendiri
- Angle display: pastikan right angle (90°) dijaga

Visual: clean geometric aesthetic. Colors membedakan setiap sisi (red, blue, green). Squares dengan warna sama dengan sisi yang bersesuaian. Animation smooth dan satisfying. Font monospace untuk angka.

Topik: Algoritma & Logika Pemrograman — Kelas 3-6 SD / 7-9 SMP

Buatkan game "CODE QUEST" belajar algoritma menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Gameplay:
- Grid-based world: karakter robot/maze runner
- Tujuan: reach the goal (bintang/flag)
- Player menulis KODE untuk menggerakkan karakter:
  * Perintah: MOVE UP, MOVE DOWN, MOVE LEFT, MOVE RIGHT, JUMP, REPEAT X TIMES
- Drag-and-drop code blocks di code editor area
- Tombol RUN untuk eksekusi kode
- Animasi karakter mengikuti perintah
- 20 level increasing difficulty:
  * Level 1-5: sequential (simple movement)
  * Level 6-10: loops (REPEAT)
  * Level 11-15: conditionals (IF path blocked)
  * Level 16-20: nested loops dan combinations
- Level bonus: collect coins/crystals while moving (optimal path = max coins)
- Error feedback: jika karakter撞墙 (wall) atau jatuh, show error message
- Star rating: 3 stars if solved in minimum moves
- Solution length tracker
- Level select screen dengan lock/unlock
- Save progress localStorage

Visual: pixel art atau blocky aesthetic. Character menggunakan colorful sprite. Code blocks menggunakan color-coded boxes. Grid world dengan vibrant colors. Engaging untuk anak-anak dan remaja.

Topik: Sistem Bilangan & Logika Digital — Kelas 7-9 SMP

Buatkan simulator BINARY-DECIMAL-HEX converter menggunakan HTML, CSS, dan JavaScript dalam satu file.

Fitur:
- Input fields: Binary (8-bit), Decimal, Hexadecimal
- Convert secara real-time: ketik di satu field, lainnya auto-update
- Visualisasi bitwise: 8 boxes representing bits (0 atau 1)
- Setiap box punya power-of-2 label (128, 64, 32, 16, 8, 4, 2, 1)
- Box yang "ON" (1) highlighted dengan warna, yang "OFF" (0) dim
- Animation: ketika mengetik binary, boxes animate toggle ON/OFF
- Calculator dengan operasi bitwise:
  * AND, OR, XOR, NOT
  * Input dua bilangan, pilih operator, lihat hasil
  * Visualisasi bitwise: kedua input displayed, hasil AND/OR/XOR per bit
- Toggle: BINARY ADDITION animation (full adder visualization)
- Challenge mode: random number challenge — convert X dalam 30 detik
- Score tracker untuk challenge mode
- History of recent conversions

Visual: digital/electronic aesthetic. Bit boxes menggunakan LED-style display (bright green when ON). Font monospace untuk semua numbers. Clean grid layout.

Topik: Algoritma Sorting — Kelas 10-11 SMA / TIK

Buatkan SORTING ALGORITHM VISUALIZER menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Array visualizer: bar chart dengan tinggi proporsional terhadap nilai
- Tombol untuk generate array baru (acak, nearly sorted, reversed, few unique)
- Slider untuk ARRAY SIZE (10-100 bars) dan SPEED (0.5x - 10x)
- Pilihan algoritma:
  * Bubble Sort
  * Selection Sort
  * Insertion Sort
  * Merge Sort (with divide & conquer visualization)
  * Quick Sort (with pivot highlight)
  * Heap Sort
- STEP-BY-STEP mode: tombol "NEXT STEP" untuk advance manual
- Highlight saat compare (warna berbeda) dan swap (animation)
- Comparison counter dan swap counter displayed
- Time complexity info panel untuk setiap algoritma
- Multiple algorithm comparison: jalankan 2 algoritma secara bersamaan untuk compare speed
- Play/Pause button
- Reset button
- Legend untuk warna: comparing, swapping, sorted

Visual: clean data visualization. Bars menggunakan gradient colors berdasarkan value. Comparison animation: bars pulse. Swap animation: bars physically move places. Smooth transitions.

Topik: Gerbang Logika — Kelas 10 SMA / TIK

Buatkan LOGIC GATE SIMULATOR menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Component palette: AND, OR, NOT, NAND, NOR, XOR, XNOR gates
- Drag-drop gates ke canvas
- Wire tool: klik output satu gate, klik input gate lain untuk connect
- Input switches: toggle 0/1
- Probe outputs: LED indicators untuk melihat hasil (0=off/red, 1=on/green)
- Gates placed on canvas dengan labels
- Gate animations: saat input berubah, propagate ke output dengan delay animation
- Pre-built circuits:
  * Half Adder (AND + XOR)
  * Full Adder (2 half adders + OR)
  * 2-to-1 Multiplexer
  * SR Latch
  * Simple calculator (AND + OR untuk penjumlahan bit)
- Truth table generator: secara otomatis generate truth table untuk circuit yang dibuat
- Clear/reset button
- Undo/redo untuk wire connections
- Sidebar truth table yang auto-updates

Visual: clean circuit schematic style. Gates menggunakan standard IEEE symbols. Wires menggunakan colored lines (red for 1, dark for 0). LED menggunakan glow effect when ON. Grid background untuk alignment.

Topik: Database & SQL — Kelas 10-11 SMA / TIK

Buatkan game "DATABASE QUEST" belajar SQL menggunakan HTML, CSS, dan JavaScript dalam satu file.

Gameplay:
- Database scenario: siswa adalah "data detective" yang harus solve cases dengan query SQL
- Pre-loaded database: fictional school "SMAN 1Belajar" dengan tabel:
  * siswa (id, nama, kelas, nilai_ipa, nilai_mtk, nilai_bhs)
  * guru (id, nama, mapel)
  * kelas (id, nama_kelas, wali_id)
- Challenge types:
  * SELECT WHERE: find specific records
  * ORDER BY: rank siswa berdasarkan nilai
  * JOIN: gabungkan tabel untuk answer
  * Aggregate: COUNT, SUM, AVG, MAX, MIN
  * GROUP BY: statistics per kelompok
- SQL input field: ketik query SQL
- Tombol EXECUTE untuk run query
- Results displayed sebagai table
- Challenge card: describe what they need to find
- Hint system: show partial query (sedikit demi sedikit)
- Scoring: 100 per challenge, streak bonus
- 25 challenges increasing complexity
- "Learn Mode": tutorial interaktif untuk setiap SQL command

Visual: database/terminal aesthetic. SQL keywords menggunakan syntax highlighting (colored). Result tables dengan clean styling. Challenge cards dengan clear instructions. Engaging tapi professional.

Topik: Geografi Indonesia — Kelas 5 SD / 7 SMP

Buatkan PETA INDONESIA INTERAKTIF menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Peta Indonesia yang cukup akurat (simplified outline)
- Klik provinsi untuk highlight dan popup info:
  * Nama provinsi + ibu kota
  * Jumlah penduduk
  * Luas wilayah (km²)
  * Produk daerah utama
  * Landmark/budaya terkenal
  * Jumlah kabupaten/kota
- Toggle layers:
  * Provinsi borders
  * Gunung berapi (dots aktif/nonaktif)
  * Sungai utama
  * Laut dan samudra
  * Garis khatulistiwa
- Quiz mode:
  * "Find Province X" — player click provinsi yang benar
  * "Capital City" — match ibu kota
  * Timer dan score
- Challenge: arrange provinces in order dari barat ke timur / berdasarkan luas
- Region grouping: Sumatra, Jawa, Kalimantan, Sulawesi, Nusa Tenggara, Papua
- Legend dan scale bar
- Search function: ketik nama provinsi untuk highlight
- Comparison tool: pilih 2 provinsi untuk compare stats side-by-side

Visual: clean cartographic style. Province colors coordinated per region. Interactive highlights with glow effect. Popup cards dengan smooth animation. Fonts dan icons professional untuk geography.

Topik: Ekonomi — Kelas 7-9 SMP

Buatkan simulasi EKONOMI interaktif menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur:
- Supply-Demand Graph: kurva supply (upward) dan demand (downward)
- Equilibrium point ditandai dan auto-calculated
- Slider untuk menggeser kurva:
  * Supply shift (biaya produksi naik/turun)
  * Demand shift (pendapatan konsumen naik/turun, selera berubah)
- Harga dan kuantitas equilibrium update real-time
- Penjelasan singkat muncul di panel saat kurva bergeser
- Game simulation:
  * Kamu adalah shop owner
  * Set harga jual untuk produk
  * See how many sell (demand curve)
  * Calculate profit = (harga - cost) × quantity
  * Berbeda kondisi: biaya bahan naik, kompetitor masuk, musim cerah
- Multiple rounds dengan varying conditions
- Score based on profit margin accuracy
- Graph dari Canvas plotting (bukan library)
- Sidebar penjelasan konsep: surplus, shortage, price ceiling, price floor

Visual: economics textbook style. Graph dengan clear axes dan labels. Supply curve dalam blue, demand dalam red. Equilibrium dalam green dot. Numbers displayed prominently.

Topik: Sejarah Indonesia — Kelas 5 SD - 12 SMA

Buatkan game SEJARAH INDONESIA menggunakan HTML, CSS, dan JavaScript dalam satu file.

Gameplay:
- Timeline vertikal/horizontal yang bisa di-scroll
- Era/penggalan waktu yang bisa diklik untuk expand
- Mini-game 1 — SEQUENCE: arrange events dalam urutan kronologis (drag-and-drop)
- Mini-game 2 — MATCH: match event dengan tahun yang benar
- Mini-game 3 — FILL BLANK: fill in the year/leader/event
- Mini-game 4 — QUIZ: multiple choice questions tentang event tertentu
- 4 era coverage:
  * Era Kerajaan Nusantara (Majapahit, Srivijaya, Mataram Islam)
  * Era Kolonialisme & Penjajahan
  * Era Kemerdekaan & Orde Lama
  * Era Reformasi & Masa Kini
- Narasi singkat untuk setiap event dengan ilustrasi
- Points: 100 per benar, streak bonus
- 3 stars rating system
- Fact cards: info menarik di setiap event
- Progress tracker per era
- Unlock collectible cards (portrait tokoh sejarah)

Visual: vintage/historical aesthetic. Parchment/scroll textures. Font serif untuk historical content. Ilustrasi kartun untuk tokoh. Color scheme warm dan antique-feeling. Engaging untuk semua level SD-SMA.

Topik: Kosakata Bahasa — Kelas 1-6 SD

Buatkan game WORD BUILDER menggunakan HTML, CSS, dan JavaScript dalam satu file.

Gameplay:
- Huruf-huruf acak ditampilkan (scrambled letters)
- Buat kata sebanyak mungkin dari huruf-huruf tersebut
- Minimum 3 huruf per kata
- 3 difficulty levels:
  * Easy: 4-5 huruf, hint available
  * Medium: 5-7 huruf, time limit
  * Hard: 7+ huruf, limited hints
- Dictionary validation: kata harus valid (gunakan embedded word list untuk Bahasa Indonesia)
- 30 huruf per round, buat semua kata yang mungkin
- Scoring: 1 point per huruf di kata, bonus untuk kata panjang
- Letter bank: drag letters ke input area
- Word history: semua kata yang sudah ditemukan
- Hint system: reveal first letter atau jumlah kata yang mungkin
- Time bonus: selesai lebih cepat = bonus
- Daily challenge: fixed letter set, compete with yourself
- Progress save to localStorage
- Categories: kata benda, kata kerja, kata sifat (difficulty adjustment)

Visual: colorful scrabble-like tiles. Letters menggunakan distinct colors. Background playful dan engaging untuk anak-anak. Smooth drag-and-drop. Animations saat kata ditemukan.

Topik: Tata Bahasa — Kelas 7-9 SMP

Buatkan game GRAMMAR DETECTIVE menggunakan HTML, CSS, dan JavaScript dalam satu file.

Gameplay:
- Kalimat dengan kata yang hilang/bermasalah ditampilkan
- Jenis challenges:
  * Fill in the blank: pilih kata yang tepat dari pilihan
  * Spot the error: kalimat dengan error tata bahasa, find the error
  * Rearrange: arrange words menjadi kalimat yang benar (drag-and-drop)
  * Identify part of speech: klasifikasikan kata (kata benda, kerja, sifat, keterangan)
  * Subject-verb agreement: fix agreement errors
  * Tenses: choose the correct verb form
- 5 topic areas:
  * Parts of speech
  * Sentence structure (S-P-O-K)
  * Tenses (present, past, future)
  * Direct & indirect speech
  * Punctuation & capitalization
- Progressive difficulty within each topic
- Feedback explanation: kenapa salah, kenapa benar
- Grammar rule reference popup di setiap challenge
- Score tracker, streak counter
- Achievement badges untuk topic mastery
- Save progress

Visual: detective/notebook aesthetic. Clean typography dengan good hierarchy. Error highlights dalam red dengan strikethrough. Correct answer dalam green dengan checkmark. Engaging tapi professional.

Topik: Engineering & Fisika — Kelas 7-10 SMP/SMA

Buatkan game BRIDGE BUILDER STEM menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Gameplay:
- Landscape view: dua tebing dengan sungai di tengah, player harus membangun jembatan
- Building tools:
  * Beam tool: buat balok horizontal/diagonal
  * Truss tool: buat struktur segitiga (stronger)
  * Cable tool: buat cable/guy wires
  * Support tool: vertical supports
  * Anchor tool: fix endpoints
- Material budget: player punya limited budget untuk materials
- Material costs: beam=10, truss=15, cable=5, support=5, anchor=2
- Budget tracker displayed
- Load test: setelah dibangun, click "TEST" — truck crosses bridge
- Physics simulation: bridge bends/sags based on load
- Stress visualization: bagian yang stress warnanya berubah (green → yellow → red → break)
- Challenge levels:
  * Level 1: short span, light load (passenger car)
  * Level 2: medium span, medium load (truck)
  * Level 3: long span, heavy load (semi-truck)
  * Level 4: very long span, multiple vehicles
  * Level 5: earthquake simulation (random ground motion)
- Star rating: bridge cost efficiency vs maximum load
- Science sidebar: explain force distribution, tension/compression, structural integrity

Visual: engineering blueprint aesthetic. Material pieces dengan realistic colors. Stress colors clearly communicate engineering data. Background river dan landscape. Clean dan professional.

Topik: Sains Terpadu — Kelas 9-12 SMP/SMA

Buatkan simulasi SPACE MISSION PLANNER terintegrasi menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur (multidisciplinary):
- MISI: Kirim wahana ke Mars
- SCIENCE ENGINEERING module:
  * Rocket design: payload calculator (massa vs thrust)
  * Trajectory planning: visualisasi orbit transfer Hohmann
  * Fuel management: simulate fuel consumption
- PHYSICS module:
  * Orbital mechanics: gravitational assist
  * Kepler's laws visualization
  * Velocity requirements (escape velocity, orbital velocity)
- BIOLOGY module:
  * Life support system: O2, CO2, water, food
  * Hab module design: volume, temperature control
  * Biosphere sustainability
- MATH module:
  * Distance/time calculations
  * Fuel efficiency optimization
  * Trajectory graph plotting
- COMPUTER module:
  * Simple communication delay simulation
  * Data transmission rate calculator
- Mission phases: Launch → Orbit → Transfer → Mars Approach → Landing
- Each phase punya challenge dan resource management
- Success/failure determined by calculations
- Science journal recording data

Visual: space mission control aesthetic. Dark interface dengan bright data displays. Planet Mars dengan realistic colors. Charts dan graphs integrated. Professional NASA-style data panels.

Topik: Sains Lingkungan & IPS — Kelas 10-12 SMA

Buatkan simulasi CLIMATE CHANGE menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Fitur (lintas mata pelajaran):
- Globe visualization (2D map projection atau simple 3D sphere):
  * Temperature layer (heat map global)
  * Sea level layer
  * CO2 concentration layer
  * Ice coverage layer
- TIME SLIDER: simulate years from 1950 to 2100
- Scenario selector:
  * BAU (Business as Usual) — high emission
  * MODERATE — moderate reduction
  * AMBITIOUS — strong reduction targets
- Parameter sliders:
  * CO2 emission rate
  * Deforestation rate
  * Renewable energy adoption
  * Carbon capture investment
- VISUALISASI IMPACT:
  * Sea level rise: coastal areas flooded
  * Temperature increase: heat map changes
  * Ice melting: arctic/antarctic coverage decreases
  * Extreme weather frequency: storm/flood/drought indicators
- Data graphs (canvas plotted):
  * Global temperature trend
  * Sea level rise
  * CO2 concentration
  * Ice extent
- Sidebar with explanations: greenhouse effect, carbon cycle, feedback loops
- SCIENCE behind it: penjelasan setiap parameter bagaimana bekerja
- MATH: hitung projections based on current data
- IPS/ECONOMICS: cost-benefit dari kebijakan climate change
- Country comparison mode

Visual: earth science aesthetic. Globe dengan beautiful colors. Data visualization graphs dengan clear labels. Color gradients untuk temperature maps. Impact overlays menggunakan semi-transparent layers.

Topik: Sains Terpadu — Kelas 8-12 SMP/SMA

Buatkan game ESCAPE ROOM "EMERGENCY LAB" menggunakan HTML Canvas, CSS, dan JavaScript dalam satu file.

Story:
- Kamu trapped di laboratorium sains dan harus selesaikan 5 percobaan untuk membuka pintu escape
- Timer: 20 menit countdown
- Setiap ruangan punya tantangan berbeda topik:

ROOM 1 — PHYSICS LAB:
  * Selesaikan rangkaian listrik untuk menyalakan lampu (drag-drop komponen)
  * Hint: hukum Ohm, paralel vs seri

ROOM 2 — CHEMISTRY LAB:
  * Campurkan larutan untuk create neutral pH (virtual titrasi)
  * Hitung proporsi yang tepat

ROOM 3 — BIOLOGY LAB:
  * Identify organel dari clues microscope view
  * Match DNA sequence dengan complementary strand

ROOM 4 — MATH LAB:
  * Solve 3 math problems (algebra, geometry, trigonometry) untuk unlock safe
  * Use calculator yang provided

ROOM 5 — EARTH SCIENCE LAB:
  * Identify mineral samples dari properti
  * Match fossil dengan era geologis

Features:
- Inventory system: collect tools/items saat solve challenges
- Hint system: 3 hints total, reveal partial answers
- Progress bar: rooms yang sudah cleared
- Victory screen jika escape dalam waktu
- Failed screen jika waktu habis + retry option
- Leaderboard (localStorage)

Visual: atmospheric lab aesthetic. Slightly dark/glowy lighting. Scientific equipment dengan realistic details. Puzzle interfaces clean dan intuitive. Timer menggunakan prominent display.

Topik: Sains & Matematika Campuran — Kelas 6-12

Buatkan game QUIZ BATTLE style Kahoot menggunakan HTML, CSS, dan JavaScript dalam satu file (single player vs AI atau hot-seat multiplayer).

Fitur:
- Home screen: select number of players (1-4), enter names
- Select topic mix:
  * Sains Umum (30%)
  * Matematika (30%)
  * IPS (20%)
  * Bahasa (20%)
- Player avatars: pilih dari 8 avatar preset
- Round system: 20 questions, random topic distribution
- Question display: besar di tengah, timer bar di atas (15 detik)
- 4 answer options (A, B, C, D) di bawah question
- Color coding answers (blue, yellow, pink, green — Kahoot style)
- Scoring: based on correctness AND speed (faster answer = more points)
  * Posisi 1: 1000 + time bonus
  * Posisi 2: 800 + time bonus
  * Posisi 3: 500
  * Posisi 4: 200
- Leaderboard di akhir setiap pertanyaan (animated ranking)
- Music: correct answer tune, wrong answer buzz
- Streak bonus indicator
- Final results screen dengan ranking, total score, accuracy
- AI players: 3 AI dengan different skill levels (smart, medium, guessing)
- Shareable room code display (for future networked version)
- Question bank: minimum 100 questions

Visual: Kahoot-inspired color scheme. Bold colors per answer. Big question text. Animated leaderboard transitions. Fun dan energetic untuk classroom use.