Prompt Buat Web Pembelajaran
Prompt untuk Pembuatan Website Pembelajaran Interaktif (Semua Jenjang & Mapel)
Panduan lengkap beserta Master Prompt Gemini Canvas siap pakai untuk membangun aplikasi web media pembelajaran interaktif yang dilengkapi LKPD digital, simulasi praktik, kuis otomatis, e-sertifikat, hingga Dashboard CMS Guru.
Apa Itu Website Pembelajaran Interaktif?
Website Pembelajaran Interaktif adalah platform atau aplikasi berbasis web (Single-Page Application maupun portal multi-halaman) yang dirancang khusus untuk memfasilitasi proses belajar mengajar secara digital, terstruktur, dan dua arah. Berbeda dengan bahan bacaan statis seperti file PDF atau slide presentasi biasa, website pembelajaran memungkinkan peserta didik berinteraksi langsung dengan materi melalui eksplorasi visual, video terintegrasi, simulasi praktik, pengisian Lembar Kerja Peserta Didik (LKPD) digital, hingga evaluasi kuis yang memberikan umpan balik serta penilaian secara instan.
Dalam paradigma Pembelajaran Mendalam (Deep Learning) pada Kurikulum Nasional, pengalaman belajar siswa perlu dirancang agar berkesadaran (mindful), bermakna (meaningful), dan menggembirakan (joyful). Website pembelajaran menyatukan seluruh alur pedagogis tersebut ke dalam satu tautan yang mudah diakses siswa melalui smartphone, tablet, maupun komputer, sekaligus dapat ditampilkan di layar Interactive Flat Panel (IFP) atau proyektor kelas.
Dilengkapi pengubah tema otomatis (Theme Switcher) yang menyesuaikan tampilan visual untuk jenjang SD, SMP, hingga SMA/SMK.
Mencakup Eksplorasi, Materi & Video, Studi Kasus, Simulasi Praktik, LKPD Auto-Save, Kuis Pembahasan, Refleksi, dan E-Sertifikat.
Guru dapat mengedit identitas, materi, link YouTube, LKPD, dan soal kuis kapan saja langsung dari dalam website menggunakan PIN akses.
Mendukung enkoding parameter URL Base64, ekspor/impor file materi (.json), serta unduh rekap nilai siswa dalam format .csv.
Master Prompt Pembuatan Website Pembelajaran
Silakan klik tombol Salin Prompt di pojok kanan atas kotak kode di bawah ini untuk menyalin keseluruhan instruksi secara utuh, kemudian tempelkan ke Gemini AI (mode Canvas):
Bertindaklah sebagai Senior EdTech Full-Stack Web Developer, UI/UX Designer Pendidikan, dan Pakar Kurikulum Nasional Indonesia. Bangun sebuah Single-Page Application (SPA) Media Pembelajaran Interaktif yang utuh, fungsional, responsif, dan bebas placeholder menggunakan HTML5, Tailwind CSS (via CDN), FontAwesome 6 (via CDN), Google Fonts (Plus Jakarta Sans & Fredoka), dan Vanilla JavaScript modular di dalam Gemini Canvas.
### 1. KONFIGURASI AWAL & ADAPTABILITAS LINTAS JENJANG/MAPEL
Gunakan data berikut sebagai "Default Initial State" saat aplikasi pertama kali dimuat, namun pastikan SELURUH parameter di bawah ini dapat diubah secara dinamis oleh Guru melalui Dashboard CMS di dalam aplikasi:
- Nama Portal / Aplikasi: Ruang Belajar Ceria (Dapat diubah sesuai jenjang)
- Nama Guru: Nama Guru
- Nama Sekolah: (Nama Sekolah)
- Jenjang / Kelas / Fase: SD / Kelas 5 / Fase C (Sediakan opsi switch jenjang: SD, SMP, SMA/SMK)
- Mata Pelajaran: Ilmu Pengetahuan Alam (IPA)
- Topik / Materi Utama: Metamorfosis Kupu-Kupu
- PIN Akses Dashboard Guru Default: 1234
**Sistem Adaptasi Jenjang Otomatis (Theme & Tone Switcher):**
Buat fitur di Dashboard Guru untuk memilih "Mode Jenjang" yang secara otomatis mengubah variabel CSS dan gaya antarmuka:
1. **Mode SD (Fase A-C):** Desain *colorful*, palet warna cerah ceria, sudut membulat besar (`rounded-3xl`), ilustrasi kartu visual/emoji interaktif, animasi *bounce/float* halus, dan sapaan ramah anak.
2. **Mode SMP (Fase D):** Desain *modern gamified*, kombinasi warna vibrant-clean (indigo/teal), badge pencapaian, dan tata letak eksploratif.
3. **Mode SMA/SMK (Fase E-F):** Desain *academic minimalist & futuristic*, tipografi tegas, fokus pada analitik data, studi kasus mendalam, dan tampilan bersih profesional.
---
### 2. ARSITEKTUR DATA & VALIDASI FITUR (WAJIB BERFUNGSI 100%)
Jangan pernah membuat tombol palsu atau klaim fitur yang tidak terimplementasi. Terapkan pengelolaan data *client-side* yang nyata dengan spesifikasi berikut:
1. **Local Storage Persistence:**
- Simpan seluruh perubahan konten guru pada key `EDU_APP_CONFIG`.
- Simpan sesi belajar, jawaban LKPD, skor praktik, hasil kuis, dan refleksi siswa pada key `EDU_STUDENT_SESSION`.
- Simpan daftar riwayat ketuntasan siswa pada perangkat tersebut di key `EDU_SCORE_HISTORY`.
2. **Mekanisme "Berbagi Link & Distribusi Materi" yang Valid:**
- Karena berjalan tanpa backend eksternal, fitur **"Bagikan Link Materi ke Siswa"** di Dashboard Guru WAJIB mengompresi/mengenkode objek `EDU_APP_CONFIG` ke dalam parameter URL (`?data=Base64EncodedJSON`) menggunakan `btoa(encodeURIComponent(JSON.stringify(config)))`. Saat URL tersebut dibuka di perangkat siswa, aplikasi otomatis mendeteksi parameter `?data=`, mendekodenya, dan memuat materi versi guru tersebut.
- Sediakan juga tombol **"Ekspor File Materi (.json)"** dan **"Impor File Materi (.json)"** sebagai cadangan jika konten materi terlalu besar untuk URL, serta tombol **"Unduh Rekap Nilai Siswa (.csv)"** yang benar-benar men-generate file CSV.
3. **Validasi Input Ketat:**
- Siswa wajib mengisi **Nama Lengkap** dan **Kelas/Absen** di layar masuk sebelum memulai pembelajaran.
- Tombol kirim pada LKPD, Kuis, dan Refleksi harus memvalidasi bahwa seluruh kolom/soal telah dijawab (tampilkan notifikasi *toast* atau *modal* interaktif jika masih ada yang kosong, JANGAN gunakan `alert()` bawaan browser).
---
### 3. ALUR PEMBELAJARAN SEKUENSIAL (8 TAHAP TERINTEGRASI)
Sediakan Sidebar/Top Navigation Bar dengan **Indikator Progres Persentase (0% - 100%)** serta tombol **Sebelumnya** dan **Selanjutnya** di bagian bawah setiap halaman:
1. **Tahap 1: Eksplorasi & Apersepsi (Mindful Learning)**
- Menampilkan kartu Identitas Pembelajaran, **Tujuan Pembelajaran (TP)** yang dinamis, pertanyaan pemantik interaktif (siswa dapat mengetik pendapat awal mereka), dan fakta unik pembuka rasa ingin tahu.
2. **Tahap 2: Materi Interaktif & Video Pembelajaran (Meaningful Learning)**
- Sajikan materi dalam bentuk modul tab/kartu interaktif yang mudah dicerna (untuk data awal: 4 fase metamorfosis kupu-kupu: Telur -> Ulat/Larva -> Kepompong/Pupa -> Kupu-Kupu/Imago beserta perbandingan metamorfosis sempurna vs tidak sempurna).
- Sediakan pemutar **Video Pembelajaran (YouTube Embed)** yang memiliki *URL Parser* otomatis (mampu mengubah link `youtube.com/watch?v=...` atau `youtu.be/...` dari input guru menjadi format `youtube.com/embed/...`), dilengkapi fallback ilustrasi visual interaktif jika siswa belajar tanpa koneksi internet.
3. **Tahap 3: Contoh Kontekstual & Studi Kasus**
- Kartu perbandingan visual (Bandingkan konsep/proses secara berdampingan dengan fitur *flip card* atau *tab switcher*) yang relevan dengan kehidupan sehari-hari.
4. **Tahap 4: Zona Praktik / Simulasi Interaktif (Joyful Learning)**
- Bangun mini-game **Urutkan & Pasangkan Konsep (Interactive Sequencing / Matching Activity)** yang berfungsi penuh menggunakan klik atau *drag-and-drop* (kompatibel untuk layar sentuh HP/Tablet maupun mouse PC).
- Siswa mengurutkan tahapan atau mencocokkan pasangan konsep, lalu menekan tombol **"Periksa Hasil Praktik"** untuk mendapatkan skor praktik dan umpan balik instan. Item praktik ini harus bisa diedit dari Dashboard Guru.
5. **Tahap 5: LKPD Digital (Lembar Kerja Peserta Didik)**
- Form lembar kerja terstruktur berisi tabel pengamatan/analisis dan pertanyaan esai terarah (3-4 pertanyaan analisis).
- Jawaban siswa tersimpan otomatis (*auto-save* ke LocalStorage saat mengetik), dilengkapi indikator status ("Tersimpan") dan ringkasan jawaban.
6. **Tahap 6: Kuis Evaluasi Formatif (Skor Otomatis & Pembahasan)**
- Minimal 5 soal pilihan ganda (A, B, C, D) yang dapat ditambah/diedit/dihapus oleh guru.
- Fitur penilaian otomatis: Setelah siswa menyelesaikan semua soal dan klik **"Kumpulkan Jawaban"**, tampilkan skor akhir (skala 0-100), rincian jawaban benar/salah, **kotak pembahasan lengkap untuk setiap soal**, dan tombol **"Ulangi Kuis"** jika nilai di bawah KKM.
7. **Tahap 7: Refleksi Pembelajaran**
- Pemilih perasaan/emoji setelah belajar, skala tingkat pemahaman (1-5 bintang), serta input teks: *"Hal paling menarik yang saya pelajari hari ini"* dan *"Hal yang masih ingin saya tanyakan"*.
8. **Tahap 8: Evaluasi Akhir & E-Sertifikat Hasil Belajar**
- Menampilkan **Rapor Mini Siswa** berisi: Nama Siswa, Kelas, Skor Praktik, Status & Jawaban LKPD, Nilai Kuis Evaluasi, Status Ketuntasan, dan Hasil Refleksi.
- **Generator Sertifikat Kelulusan Digital:** Desain sertifikat elegan dan siap cetak yang menampilkan Nama Siswa, Predikat, Judul Materi, Nama Sekolah, Nama Guru, Tanggal Otomatis, serta tombol **"Cetak / Simpan PDF Sertifikat"** (gunakan CSS `@media print` khusus agar saat dicetak hanya menampilkan sertifikat dan rapor hasil belajar secara rapi tanpa elemen navigasi).
---
### 4. DASHBOARD GURU (CMS PANEL LENGKAP)
Buat tombol **"Mode Guru"** di pojok kanan atas yang meminta PIN (`1234`). Setelah terbuka, tampilkan antarmuka pengelolaan konten dengan tab berikut:
- **Tab Identitas & Tema:** Edit Nama Aplikasi, Guru, Sekolah, Mapel, Kelas/Fase, KKM, Tujuan Pembelajaran, dan **Pemilih Mode Jenjang (SD / SMP / SMA)**.
- **Tab Kelola Materi & Praktik:** Edit judul & isi kartu materi, link YouTube, contoh kasus, item simulasi urutan/pencocokan, dan instruksi pertanyaan LKPD.
- **Tab Bank Soal Kuis:** Tambah, edit, dan hapus soal pilihan ganda beserta kunci jawaban dan teks pembahasannya.
- **Tab Data & Berbagi:**
- Tombol **Generate Link Berbagi Siswa** (menyalin URL terenkode Base64 beserta notifikasi sukses).
- Tombol **Ekspor Konfigurasi (.json)** & **Impor Konfigurasi (.json)**.
- Tabel **Rekap Nilai & Jawaban Siswa** pada perangkat tersebut lengkap dengan tombol **Unduh CSV** dan **Reset Data**.
Pastikan kode ditulis secara utuh, bersih, terstruktur, tanpa pemotongan kode (`// ... kode lainnya`), dan langsung dapat dijalankan secara interaktif di Gemini Canvas.
Petunjuk Lengkap Pembuatan Website Pembelajaran
Ikuti langkah-langkah praktis berikut untuk mengubah prompt di atas menjadi aplikasi website pembelajaran interaktif yang siap digunakan di kelas:
Tekan tombol Salin Prompt pada kotak di atas hingga status tombol berubah menjadi "Berhasil Disalin!". Anda dapat langsung menggunakan prompt tersebut apa adanya, atau menyesuaikan bagian 1. Konfigurasi Awal (Nama Guru, Sekolah, Mapel, dan Materi) terlebih dahulu.
Kunjungi gemini.google.com melalui browser laptop atau komputer. Pada kolom pengetikan pesan, pilih atau aktifkan opsi Canvas, lalu tempelkan (Paste / Ctrl + V) seluruh prompt dan tekan Kirim (Enter).
Tunggu beberapa saat hingga Gemini selesai menulis kode di panel Canvas. Setelah selesai, klik tab Pratinjau (Preview) di pojok kanan atas panel Canvas. Uji coba alur masuk siswa, navigasi 8 tahap belajar, simulasi praktik, LKPD, kuis, hingga cetak sertifikat.
Tanpa perlu menyentuh kode pemrograman, klik tombol Mode Guru di pojok kanan atas aplikasi, lalu masukkan PIN standar 1234. Di dalam dashboard ini Anda bisa mengganti Mode Jenjang (SD / SMP / SMA), mengubah materi, menempelkan link video YouTube pembelajaran, mengedit LKPD, serta mengelola bank soal kuis.
Anda dapat membagikan aplikasi langsung menggunakan fitur Share / Bagikan Canvas di Gemini, atau menyalin kode HTML utuhnya untuk di-hosting secara gratis di GitHub Pages, Vercel, Netlify, Google Apps Script Web App, maupun halaman khusus di blog sekolah. Gunakan tombol Generate Link Berbagi Siswa di tab Data & Berbagi agar perubahan materi yang Anda buat ikut terbawa ke perangkat siswa.
Tips Optimasi & Tanya Jawab (FAQ)
Bagaimana jika saya mengajar di SMP atau SMA/SMK?
Bagaimana jika Gemini berhenti di tengah jalan saat menulis kode yang panjang?
</html>, cukup ketik instruksi: "Lanjutkan dan lengkapi sisa kode di dalam Canvas hingga tuntas tanpa memotong fungsi yang sudah ada".
Apakah website hasil prompt ini bisa dijalankan secara offline di kelas?
index.html di laptop Anda. Selama perangkat terhubung sekali untuk memuat aset ikon/gaya awal (atau menggunakan fallback visual yang sudah diinstruksikan pada prompt), simulasi, LKPD, kuis, dan penyimpanan data nilai tetap berjalan lancar melalui penyimpanan lokal browser (LocalStorage).