BARU

Buatkan sebuah aplikasi web pembelajaran interaktif satu halaman (single-page application) untuk siswa sekolah dasar tentang perkembangbiakan tumbuhan. Aplikasi ini harus ramah anak, visual, dan menyenangkan.

Nama Aplikasi: Tumbuh Bersama

Fitur Utama yang Harus Ada:

Halaman Utama: Tampilkan judul yang menarik, sapaan dari "guru virtual" (bisa berupa gambar/SVG sederhana), dan tombol "Mulai" yang besar dan jelas.
Menu Navigasi: Setelah menekan "Mulai", tampilkan menu utama dengan ikon-ikon yang menarik untuk fitur-fitur berikut:
- Belajar Yuk! (Materi pembelajaran)
- Eksperimen Mini (Simulasi interaktif)
- Kuis Interaktif (Uji pemahaman)
- Game Edukasi (Placeholder untuk game di masa depan)
- Galeri Tumbuhan (Kumpulan contoh tumbuhan)
- Papan Prestasi (Menyimpan skor tertinggi)
Modul Belajar:
- Sajikan materi dalam beberapa bagian singkat (misalnya: Pengertian, Vegetatif Alami, Vegetatif Buatan, Generatif).
- Setiap bagian harus memiliki gambar ilustrasi, teks penjelasan yang mudah dipahami, dan navigasi "Lanjut" & "Kembali".
Eksperimen Interaktif:
- Buat simulasi sederhana stek batang.
- Pengguna bisa mengklik "gunting" lalu mengklik "tanaman induk" untuk memotong, kemudian menanamnya di "pot".
- Berikan pesan status untuk setiap langkah (misal: "Batang berhasil dipotong!").
Kuis Interaktif:
- Buat beberapa jenis soal, seperti pilihan ganda dan drag-and-drop (mencocokkan nama bagian bunga).
- Berikan umpan balik langsung (suara dan pesan modal) untuk jawaban benar atau salah.
- Hitung skor di akhir kuis.
Galeri & Prestasi:
- Galeri: Tampilkan kartu-kartu gambar tumbuhan beserta nama dan cara berkembang biaknya. Saat diklik, munculkan detailnya di jendela modal.
- Prestasi: Simpan dan tampilkan skor kuis tertinggi dan materi yang sudah dipelajari. Gunakan localStorage untuk menyimpan data ini.

Spesifikasi Teknis:

Gunakan HTML, CSS, dan JavaScript murni.
Untuk styling, gunakan Tailwind CSS.
Gunakan Google Fonts (misalnya, 'Poppins') untuk tampilan yang ramah.
Tambahkan efek suara sederhana menggunakan Tone.js untuk interaksi (klik, jawaban benar, jawaban salah) tanpa menggunakan file audio eksternal.
Desain harus responsif dan berfungsi baik di perangkat seluler maupun desktop.
Gunakan gambar placeholder dari placehold.co untuk semua ilustrasi.

Prompt ini memberikan detail yang cukup spesifik mengenai fungsionalitas, konten, dan teknologi yang diinginkan, sehingga dapat memandu model untuk menghasilkan kode yang sesuai dengan aplikasi yang sudah Anda lihat.

Tolong buatkan saya sebuah aplikasi web pembelajaran interaktif dalam satu file HTML tunggal.

Judul Aplikasi: Tumbuh Bersama: Jelajah Perkembangbiakan Tumbuhan

Target Pengguna: Anak-anak usia sekolah dasar (6-9 tahun).

Bahasa: Seluruh konten dan teks antarmuka harus dalam Bahasa Indonesia.

Teknologi:

Gunakan HTML untuk struktur.
Gunakan Tailwind CSS untuk styling. Muat dari CDN.
Gunakan JavaScript vanilla untuk semua interaktivitas (tanpa library atau framework eksternal).

Gaya dan Desain:

Tampilan harus ceria, penuh warna, dan menarik bagi anak-anak.
Gunakan palet warna yang didominasi hijau, kuning, dan biru muda.
Gunakan font 'Gochi Hand' dari Google Fonts untuk semua judul utama dan font 'Inter' untuk teks biasa agar mudah dibaca.
Semua elemen interaktif seperti tombol dan kartu harus memiliki sudut membulat (rounded) dan efek bayangan (shadow).
Buat animasi sederhana seperti pop-in saat halaman atau elemen baru muncul.

Struktur dan Fitur Aplikasi: Aplikasi ini harus berupa Single Page Application (SPA) di mana semua "halaman" adalah div yang ditampilkan atau disembunyikan dengan JavaScript.

Halaman Beranda (#beranda):
- Judul besar aplikasi.
- Maskot avatar SVG yang ramah bernama "Kak Bija" dengan gelembung ucapan sapaan "Halo, Jagoan Cilik!".
- Menu utama berupa grid tombol yang mengarah ke halaman lain:
  - 📖 Belajar Yuk!
  - 🧪 Eksperimen Mini
  - 🧠 Kuis Interaktif
  - 🎮 Game Edukasi
  - 📚 Galeri Tumbuhan
  - 🏆 Papan Prestasi
Halaman Belajar (#belajar):
- Sebuah area konten untuk menampilkan materi.
- Materi harus mencakup topik: Pengertian Perkembangbiakan, Vegetatif Alami, Vegetatif Buatan, dan Generatif.
- Setiap materi terdiri dari judul, gambar (gunakan placeholder dari placehold.co), dan paragraf penjelasan singkat.
- Harus ada tombol navigasi "Sebelumnya" dan "Selanjutnya" untuk berpindah antar materi.
Halaman Eksperimen (#eksperimen):
- Simulasi interaktif menanam stek batang.
- Langkah 1: Tampilkan gambar tanaman dan ikon gunting ✂️. Saat gunting diklik, potongan stek muncul.
- Langkah 2: Potongan stek tersebut harus bisa diseret (drag) dan diletakkan (drop) ke dalam gambar pot.
- Langkah 3: Setelah stek diletakkan di pot, muncul tombol "Siram Tanaman" 💧.
- Langkah 4: Saat tombol siram diklik, tampilkan gambar tanaman baru yang sudah tumbuh di dalam pot.
Halaman Kuis (#kuis):
- Kuis interaktif drag-and-drop untuk mencocokkan nama bagian-bagian bunga.
- Sediakan 4 nama bagian (Mahkota, Kelopak, Putik, Benang Sari) sebagai item yang bisa diseret.
- Sediakan gambar skema bunga dengan 4 area target (drop zone) yang sesuai.
- Harus ada tombol "Cek Jawaban" yang akan memberi warna hijau pada jawaban benar dan merah pada jawaban salah.
- Tampilkan pesan hasil kuis, misalnya "Hebat! Semua jawabanmu benar!".
Halaman Galeri (#galeri):
- Tampilkan grid kartu berisi gambar (dari placehold.co) dan nama tumbuhan (contoh: Jahe, Kentang, Mangga, Singkong).
- Saat salah satu kartu diklik, tampilkan jendela modal (pop-up).
- Modal harus menampilkan gambar yang lebih besar, nama tumbuhan, cara berkembang biak, dan satu fakta unik.
Halaman Game & Prestasi (#game & #prestasi):
- Buat sebagai halaman placeholder saja.
- Tampilkan pesan seperti "Segera Hadir!" atau contoh papan skor statis.

Fungsionalitas Tambahan:

Setiap halaman (kecuali Beranda) harus memiliki tombol "Kembali" untuk navigasi ke halaman Beranda.
Pastikan aplikasi responsif dan terlihat bagus di perangkat mobile maupun desktop.

Page updated

Google Sites

Report abuse