Web Page

import React, { useState, useEffect } from 'react'; import { BookOpen, Video, Gamepad2, BrainCircuit, FileText, CheckSquare, LayoutDashboard, NotebookPen, CalendarClock, Library, Users, Settings, Timer, Apple, ChevronLeft, ChevronRight, Lock, Plus, Trash2, Send, CheckCircle, Trophy, Pin, Compass, Map, Sliders, Volume2, Play, Pause, RotateCcw, Check } from 'lucide-react'; // === INISIALISASI STATE GLOBAL UNTUK SIMULASI GAME === if (typeof window !== 'undefined') { window.gameState = window.gameState || { players: [], turn: 0, dice: 1, rolling: false, pending: null, map: [], activeSlide: 0 }; } const initPlayers = (type) => { return [ { id: 0, name: "Tim Merah", pos: type === 'ecoPath' ? 0 : 1, hp: 3, active: true, color: "#FF3B30" }, { id: 1, name: "Tim Biru", pos: type === 'ecoPath' ? 0 : 1, hp: 3, active: true, color: "#0071E3" }, { id: 2, name: "Tim Hijau", pos: type === 'ecoPath' ? 0 : 1, hp: 3, active: true, color: "#34C759" }, { id: 3, name: "Tim Kuning", pos: type === 'ecoPath' ? 0 : 1, hp: 3, active: true, color: "#FFCC00" } ]; }; // ========================================================================================= // PANGKALAN DATA SOCIORA (23 SLIDE MATERI & 20 SOAL GAME PER TEMA) // ========================================================================================= const themesData = { tema1: { id: 'tema1', title: "Tema I: Keluarga Awal Kehidupan", shortTitle: "Kehidupan Sosial", desc: "Eksplorasi keberadaan diri, silsilah keluarga, pemahaman lokasi melalui peta, sosialisasi, nilai norma, hingga aktivitas pemenuhan kebutuhan.", videoUrl: "https://www.youtube.com/embed/8ogJl2QfmS8?si=Cwm1UnfT49MguKfw", slides: [ { badge: "Modul 1.1", title: "A. Keberadaan Diri dan Keluarga", desc: "Keluarga merupakan lingkungan pertama dan terdekat bagi sebagian besar kehidupan kita. Keluarga menjadi tempat untuk tumbuh dan berkembang yang disertai dengan cinta dan kasih.

Tahukah Anda apa itu silsilah keluarga? Silsilah keluarga merupakan cerminan dari sejarah. Kata sejarah berasal dari bahasa Arab 'syajarah' yang bermakna pohon." }, { badge: "Modul 1.2", title: "Unsur-Unsur Penting Sejarah", desc: "Silsilah keluarga menggambarkan keterkaitan antara tiga unsur penting sejarah yang tidak dapat dipisahkan dalam ruang dan waktu kehidupan manusia di permukaan bumi.", extra: "Manusia: Pelaku sejarah.
Waktu: Periode berlangsungnya perjalanan kisah.
Ruang: Tempat di permukaan bumi di mana aktivitas terjadi." }, { badge: "Modul 1.3", title: "B. Mengenal Lokasi Tempat Tinggal", desc: "Lokasi merupakan letak objek di permukaan bumi. Lokasi terbagi menjadi dua konsep utama yang sangat mendasar:

1. Lokasi Absolut: Letak berdasarkan titik koordinat garis astronomis yang bersifat mutlak dan tidak berubah.
2. Lokasi Relatif: Letak berdasarkan kondisi wilayah sekitar yang bersifat dinamis." }, { badge: "Modul 1.4", title: "Letak Astronomis Indonesia", desc: "Secara absolut, Indonesia terletak pada koordinat astronomis 6° LU – 11° LS dan 95° BT – 141° BT.

Letak astronomis ini menyebabkan Indonesia berada di wilayah tropis yang mendapatkan sinar matahari sepanjang tahun dan memiliki curah hujan tinggi." }, { badge: "Modul 1.5", title: "Letak Geografis Indonesia", desc: "Secara relatif, Indonesia berada di posisi silang yang sangat strategis, yaitu di antara dua benua (Asia dan Australia) serta di antara dua samudra (Hindia dan Pasifik).", extra: "Keuntungan Geografis: Menjadi jalur lalu lintas perdagangan internasional, mempermudah ekspor-impor, dan kaya akan asimilasi budaya dunia." }, { badge: "Modul 1.6", title: "Pembagian Wilayah Waktu Indonesia", desc: "Akibat letak astronomis dan bentang wilayah bujur yang luas, Indonesia memiliki 3 zona pembagian waktu sejak 1 Januari 1988:

1. WIB (Waktu Indonesia Barat): GMT+7 (Sumatra, Jawa, Kalbar, Kalteng).
2. WITA (Waktu Indonesia Tengah): GMT+8 (Kaltim, Kalsel, Bali, Nusa Tenggara, Sulawesi).
3. WIT (Waktu Indonesia Timur): GMT+9 (Maluku, Papua)." }, { badge: "Modul 1.7", title: "Cuaca dan Iklim di Indonesia", desc: "Cuaca adalah kondisi rata-rata udara pada wilayah yang sempit dan waktu singkat. Sedangkan Iklim adalah kondisi cuaca rata-rata tahunan pada cakupan wilayah yang luas.

Indonesia beriklim tropis dengan dua musim utama, yaitu musim hujan dan musim kemarau." }, { badge: "Modul 1.8", title: "Unsur-Unsur Iklim & Pengaruhnya", desc: "Berbagai unsur iklim sangat memengaruhi kehidupan makhluk hidup dan pertanian:

- Suhu Udara: Memengaruhi penguapan air tanaman.
- Kelembaban: Membatasi hilangnya air.
- Curah Hujan: Sumber pasokan air tanah alami.
- Sinar Matahari: Membantu proses fotosintesis vegetasi." }, { badge: "Modul 1.9", title: "Letak Geologis Indonesia", desc: "Secara geologis, Indonesia berada pada daerah pertemuan tiga lempeng tektonik besar dunia (Indo-Australia, Eurasia, dan Pasifik) serta dilalui dua jalur pegunungan api muda (Sirkum Pasifik dan Sirkum Mediterania)." }, { badge: "Modul 1.10", title: "Pemahaman Lokasi Melalui Peta", desc: "Peta adalah gambaran permukaan bumi pada bidang datar yang diperkecil dengan skala tertentu.

Menurut pakar pemetaan Prihandito, penggunaan peta sangat penting untuk melihat pola sebaran, menghitung jarak nyata, dan memproyeksikan potensi suatu wilayah." }, { badge: "Modul 1.11", title: "Komponen-Komponen Utama Peta", desc: "Peta yang baik wajib mencantumkan komponen standar agar mudah diinterpretasikan:

- Judul Peta: Menunjukkan nama daerah yang digambar.
- Skala: Rasio jarak peta & sebenarnya.
- Simbol: Representasi visual objek nyata (Titik, Garis, Area)." }, { badge: "Modul 1.12", title: "Warna dan Legenda Peta", desc: "Warna pada peta mempermudah identifikasi wilayah secara visual:
- Biru: Perairan (sungai, danau, laut).
- Hijau: Dataran rendah / hutan rindang.
- Kuning/Coklat: Dataran tinggi / pegunungan.
- Merah: Gunung api aktif / jalan raya utama." }, { badge: "Modul 1.13", title: "C. Sosialisasi dalam Masyarakat", desc: "Proses sosialisasi membantu manusia memahami aturan bermasyarakat.

1. Sejarah Lisan: Bentuk penyampaian adat, kisah masa lalu, dan tradisi secara lisan dari generasi ke generasi melalui cerita rakyat (mitos, legenda, dongeng)." }, { badge: "Modul 1.14", title: "Jenis-Jenis Cerita Rakyat", desc: "- Mitos: Cerita yang dianggap sakral, memiliki muatan religius/suci, dan sering dikaitkan dengan makhluk halus atau dewa.
- Legenda: Kisah masa lalu yang dipercaya benar-benar terjadi oleh penduduk, biasanya dikaitkan dengan asal-usul daerah.
- Dongeng: Cerita fiktif yang tidak benar-benar terjadi." }, { badge: "Modul 1.15", title: "Manusia: Makhluk Sosial & Ekonomi", desc: "2. Peran Ganda Manusia:
- Makhluk Sosial (Zoon Politikon): Manusia tidak dapat hidup sendiri dan selalu membutuhkan bantuan dari sesama.
- Makhluk Ekonomi Bermoral: Selalu berusaha memenuhi kebutuhannya secara rasional, namun wajib mengikuti nilai & norma moral agar tidak merugikan orang lain." }, { badge: "Modul 1.16", title: "3. Sosialisasi", desc: "Sosialisasi adalah proses sosial seumur hidup di mana seorang individu mempelajari kebiasaan, aturan, perilaku, dan nilai-nilai sosial masyarakat sekitarnya.

Agen Sosialisasi Utama: Keluarga (primer), Sekolah, Teman Sebaya, dan Media Massa." }, { badge: "Modul 1.17", title: "Tahapan Kognitif Sosialisasi", desc: "Sosiolog Jean Piaget membagi tahapan tumbuh kembang pemahaman kognitif sosial anak menjadi empat fase:

1. Sensorimotor (0-2 th)
2. Pra-operasional (2-7 th)
3. Operasional Konkret (7-11 th)
4. Operasional Formal (11-15 th)." }, { badge: "Modul 1.18", title: "4. Nilai dan Norma", desc: "Nilai (Value): Anggapan masyarakat mengenai apa yang berharga, baik, dan buruk.
Norma (Norm): Aturan resmi atau tidak tertulis yang disertai sanksi nyata bagi pelanggarnya agar nilai tersebut tetap terjaga." }, { badge: "Modul 1.19", title: "Macam Nilai & Norma", desc: "Menurut Notonagoro, Nilai terbagi atas: Material, Vital, dan Kerohanian.

Sedangkan Norma terbagi atas: Norma Agama (Tuhan), Norma Kesusilaan (Hati nurani), Norma Kesopanan (Tata krama pergaulan), dan Norma Hukum (Aturan tertulis resmi)." }, { badge: "Modul 1.20", title: "5. Interaksi Antarwilayah", desc: "Setiap wilayah di bumi memiliki potensi sumber daya alam dan kebutuhan penduduk yang berbeda. Hal ini melahirkan adanya ketergantungan dan interaksi antarwilayah.

Contoh: Wilayah perdesaan agraris menghasilkan padi yang disuplai ke wilayah perkotaan padat penduduk." }, { badge: "Modul 1.21", title: "D. Aktivitas Memenuhi Kebutuhan", desc: "Kebutuhan: Keinginan manusia terhadap barang/jasa yang wajib dipenuhi demi menjaga kelangsungan hidup.
Keinginan: Kebutuhan berlebih yang dipengaruhi oleh preferensi kebudayaan, selera, dan kepribadian seseorang." }, { badge: "Modul 1.22", title: "Klasifikasi Macam-Macam Kebutuhan", desc: "- Berdasarkan Intensitas: Kebutuhan Primer (mutlak), Sekunder (pelengkap), Tersier (barang mewah).
- Berdasarkan Sifat: Jasmani (fisik) dan Rohani (psikis/mental).
- Berdasarkan Waktu: Sekarang, Masa Depan, Mendesak, Sepanjang Waktu." }, { badge: "Review", title: "Rangkuman Total Tema I", desc: "Alat pemuas kebutuhan digolongkan atas:
- Cara Perolehan: Bebas, Ekonomis, Illith (jika berlebih jadi bencana).
- Hubungan: Substitusi (pengganti) & Komplementer (pelengkap).
- Proses Pembuatan: Barang Mentah, Setengah Jadi, Barang Jadi.", extra: "Selamat! Anda telah menuntaskan seluruh rangkuman materi Tema I dengan sangat baik." } ], kasus: { title: "Pergeseran Kebutuhan Remaja", context: "Di era media sosial saat ini, sering kita jumpai fenomena FOMO (Fear Of Missing Out). Banyak siswa memaksakan diri membeli sepatu bermerek atau ponsel edisi terbatas seharga belasan juta rupiah demi status sosial di mata teman-temannya. Padahal, keluarganya secara ekonomi masih berjuang keras untuk memenuhi biaya sekolah dan makanan bergizi sehari-hari.", tasks: [ "Berdasarkan modul kebutuhan, masuk ke dalam kategori apakah sepatu dan ponsel mahal tersebut? Mengapa?", "Jelaskan bagaimana agen sosialisasi 'Media Massa' dan 'Teman Sebaya' memengaruhi perilaku konsumtif remaja tersebut!", "Sebagai pelajar IPS yang kritis, susunlah Skala Prioritas yang seharusnya diterapkan oleh remaja tersebut!" ] }, projek: { title: "Pohon Keluarga & Peta Navigasi", category: "Observasi Lapangan", tasks: [ "Bentuk tim kolaborasi yang terdiri atas 3-4 orang.", "Mewawancarai kakek/nenek mengenai asal usul leluhur. Gambarkan silsilah dalam bentuk Family Tree di atas media digital atau karton dengan desain rapi.", "Buatlah Denah Lokasi Geografis (rute dari sekolah menuju rumah ketua kelompok). Wajib mencantumkan komponen peta lengkap (Judul, Skala, Legenda, Mata Angin).", "Presentasikan mahakarya tim kalian di hadapan kelas!" ] }, game: { type: "ulartangga", title: "Ekspedisi Praaksara" }, quiz: [ { q: "Menurut modul, kata 'sejarah' berasal dari kata Arab 'syajarah' yang bermakna...", options: ["Batu", "Pohon", "Awan", "Buku"], a: 1 }, { q: "Makan bergizi, pakaian pelindung, dan rumah berteduh mutlak termasuk pemenuhan kebutuhan...", options: ["Tersier", "Sekunder", "Primer", "Hiburan"], a: 2 }, { q: "Skala peta yang ditunjukkan dengan garis atau grafik disebut...", options: ["Skala Verbal", "Skala Numerik", "Skala Grafis", "Skala Area"], a: 2 }, { q: "Kebutuhan yang pemenuhannya tidak mungkin ditunda dan sangat mendesak (insidental), seperti musibah, disebut kebutuhan...", options: ["Sekarang", "Mendesak", "Masa Mendatang", "Rohani"], a: 1 }, { q: "Garis astronomis (bujur) 105°BT di Indonesia merupakan pangkal untuk zona waktu...", options: ["WIT", "WITA", "WIB", "Greenwich"], a: 2 }, { q: "Cerita rakyat jaman dahulu yang dianggap benar-benar terjadi oleh pemilik cerita disebut...", options: ["Mitos", "Legenda", "Dongeng", "Prasasti"], a: 1 }, { q: "Tahap sosialisasi menurut Jean Piaget di mana anak mulai menguasai bahasa dan simbol (umur 2-7 tahun) adalah tahap...", options: ["Sensorimotor", "Operasional Konkret", "Pra-operasional", "Operasional Formal"], a: 2 }, { q: "Barang pemuas kebutuhan yang apabila jumlahnya berlimpah justru menyebabkan bencana (seperti api) disebut barang...", options: ["Ekonomis", "Bebas", "Substitusi", "Illith"], a: 3 }, { q: "Kondisi di mana ketersediaan Sumber Daya Alam sangat sedikit, sedangkan jumlah kebutuhan manusia terus bertambah disebut masalah...", options: ["Inflasi", "Kelangkaan (Scarcity)", "Kemiskinan", "Keseimbangan Pasar"], a: 1 }, { q: "Nilai-nilai kebenaran bersumber dari unsur...", options: ["Hati nurani", "Perasaan", "Akal manusia", "Tuhan"], a: 2 } ], qGame: [ { q: "Kata 'sejarah' berasal dari bahasa Arab 'syajarah' yang secara harfiah bermakna...", options: ["Batu", "Pohon", "Awan", "Buku"], a: 1 }, { q: "Makan bergizi, pakaian pelindung, dan rumah berteduh mutlak diklasifikasikan ke dalam pemenuhan kebutuhan...", options: ["Tersier", "Sekunder", "Primer", "Hiburan"], a: 2 }, { q: "Skala peta yang digambarkan dengan sebuah garis atau batang grafis proporsional disebut skala...", options: ["Skala Verbal", "Skala Numerik", "Skala Grafis", "Skala Area"], a: 2 }, { q: "Kebutuhan yang pemenuhannya tidak mungkin ditunda dan sangat mendesak (misal: musibah), disebut kebutuhan...", options: ["Sekarang", "Mendesak", "Masa Mendatang", "Rohani"], a: 1 }, { q: "Garis astronomis (bujur) 105°BT di Indonesia merupakan patokan utama untuk penentuan zona waktu...", options: ["WIT", "WITA", "WIB", "GMT"], a: 2 }, { q: "Letak suatu tempat yang digambarkan berdasarkan sistem garis lintang dan garis bujur disebut letak...", options: ["Relatif", "Geografis", "Absolut", "Geologis"], a: 2 }, { q: "Letak geografis Indonesia sangat strategis karena diapit oleh dua benua besar, yaitu benua...", options: ["Asia dan Eropa", "Asia dan Australia", "Australia dan Afrika", "Amerika dan Asia"], a: 1 }, { q: "Angin periodik yang berhembus setiap enam bulan sekali dan menyebabkan pergantian musim di Indonesia dinamakan angin...", options: ["Puting Beliung", "Muson", "Pasat", "Siklon Tropis"], a: 1 }, { q: "Komponen peta yang berfungsi memberikan keterangan mengenai arti dari simbol-simbol yang digunakan adalah...", options: ["Skala", "Orientasi", "Legenda", "Inset"], a: 2 }, { q: "Pertemuan tiga lempeng tektonik raksasa yang menjadikan wilayah Indonesia sangat rawan gempa adalah...", options: ["Eurasia, Pasifik, Indo-Australia", "Eurasia, Atlantik, Pasifik", "Pasifik, Indo-Australia, Antartika", "Eurasia, Hindia, Pasifik"], a: 0 }, { q: "Warna biru pada peta secara universal selalu disepakati untuk melambangkan bentuk wilayah...", options: ["Pegunungan", "Dataran rendah", "Hutan Rawa", "Perairan / Laut"], a: 3 }, { q: "Cerita fiktif imajinatif masa lalu yang tidak benar-benar terjadi namun sarat akan pesan moral disebut...", options: ["Mitos", "Legenda", "Dongeng", "Sejarah Tertulis"], a: 2 }, { q: "Agen sosialisasi primer yang paling pertama dan sentral bagi seorang anak untuk membentuk kepribadiannya adalah...", options: ["Sekolah Formal", "Teman Sebaya", "Keluarga", "Media Massa"], a: 2 }, { q: "Tahap sosialisasi kognitif menurut Jean Piaget di mana bayi (0-2 tahun) berinteraksi menggunakan indera dan gerak refleks disebut tahap...", options: ["Pra-operasional", "Operasional Konkret", "Sensorimotor", "Operasional Formal"], a: 2 }, { q: "Aturan hidup bermasyarakat yang bersumber murni dari hati nurani mengenai nilai baik dan buruk disebut norma...", options: ["Agama", "Hukum Formal", "Kesopanan", "Kesusilaan"], a: 3 }, { q: "Alat pemuas kebutuhan yang apabila jumlahnya berlebihan justru akan memicu malapetaka (contoh: banjir, kebakaran) disebut barang...", options: ["Ekonomis", "Bebas", "Illith", "Substitusi"], a: 2 }, { q: "Beras dan jagung memiliki fungsi karbohidrat yang sama dan dapat saling menggantikan. Keduanya termasuk komoditas barang...", options: ["Komplementer", "Substitusi", "Mewah", "Setengah Jadi"], a: 1 }, { q: "Kendaraan bermotor dan bensin yang penggunaannya mutlak harus saling melengkapi agar dapat beroperasi dinamakan barang...", options: ["Substitusi", "Illith", "Komplementer", "Bebas"], a: 2 }, { q: "Fungsi keluarga yang memberikan curahan kasih sayang, kehangatan, dan rasa aman secara psikologis adalah fungsi...", options: ["Ekonomi", "Sosialisasi Budaya", "Afeksi", "Proteksi Fisik"], a: 2 }, { q: "Keinginan impulsif untuk membeli barang mewah (mobil sport, perhiasan) demi mendongkrak status sosial masuk ke dalam kategori kebutuhan...", options: ["Primer Pokok", "Sekunder", "Tersier", "Mendesak"], a: 2 } ] }, tema2: { id: 'tema2', title: "Tema II: Keberagaman Lingkungan Sekitar", shortTitle: "Lingkungan Sekitar", desc: "Pelajari pembagian zaman geologi, polusi lingkungan, manusia praaksara, dan Pembangunan Berkelanjutan (SDGs).", videoUrl: "https://www.youtube.com/embed/l00nIpCl4oM", slides: [ { badge: "Modul 2.1", title: "A. Berkenalan dengan Lingkungan Alam", desc: "Bumi kita sudah sangat tua dan banyak mengalami kerusakan. Pemanasan global (global warming), efek rumah kaca, polusi udara, air, dan tanah merupakan contoh kerusakan bumi yang disebabkan oleh perilaku konsumtif manusia." }, { badge: "Modul 2.2", title: "Pembabakan Sejarah Perkembangan Bumi", desc: "Proses perkembangan bumi berdasarkan ilmu geologi dibagi ke dalam 4 zaman besar:", extra: "

Zaman Arkaekum: Zaman tertua, bumi panas, belum ada kehidupan.
Zaman Paleozoikum: Kehidupan tua, muncul organisme bersel satu & ikan purba.
Zaman Mesozoikum: Era dinosaurus merajai bumi.
Zaman Neozoikum: Mamalia berkembang pesat dan manusia purba muncul.

" }, { badge: "Modul 2.3", title: "Berkenalan dengan Masyarakat", desc: "Interaksi sosial adalah hubungan timbal balik berupa aksi saling memengaruhi antara individu dengan individu, individu dengan kelompok, serta kelompok dengan kelompok.

Syarat Interaksi Sosial: Adanya Kontak Sosial dan Komunikasi." }, { badge: "Modul 2.4", title: "Kontak Sosial dan Komunikasi", desc: "Kontak sosial dibedakan menjadi Kontak Primer (bertatap muka langsung) dan Kontak Sekunder (melalui perantara).

Komunikasi memiliki 5 unsur penting: Komunikator, Komunikan, Pesan, Media, dan Efek komunikasi." }, { badge: "Modul 2.5", title: "Karakteristik Interaksi Sosial", desc: "Sebuah interaksi sosial memiliki ciri-ciri sebagai berikut:
1. Jumlah pelaku lebih dari satu orang.
2. Adanya komunikasi menggunakan simbol-simbol tertentu.
3. Adanya dimensi waktu (masa lalu, sekarang, masa depan).
4. Adanya tujuan tertentu yang ingin dicapai." }, { badge: "Modul 2.6", title: "B. Pembiasaan Melestarikan Lingkungan", desc: "Manusia wajib membiasakan diri untuk melestarikan sumber daya yang ada di sekitarnya guna mencegah kepunahan ekologis secara global.", extra: "1. Pelestarian Udara: Mengurangi emisi gas buang kendaraan berbahaya, menanam pohon peneduh, beralih ke energi alternatif yang ramah lingkungan." }, { badge: "Modul 2.7", title: "Pelestarian Sumber Daya Air", desc: "Air adalah sumber kehidupan utama bagi seluruh flora, fauna, dan manusia yang harus dijaga dari kontaminasi limbah kimia industri berbahaya.", extra: "2. Pelestarian Air: Tidak membuang sampah ke badan sungai, membuat sumur resapan air (biopori) di rumah, dan menggunakan air bersih secara bijaksana." }, { badge: "Modul 2.8", title: "Pelestarian Sumber Daya Tanah", desc: "Tanah yang subur dan sehat menjamin ketersediaan ketahanan pangan bagi seluruh populasi manusia di bumi.", extra: "3. Pelestarian Tanah: Mengurangi penggunaan pupuk kimia pestisida berlebih, melakukan rotasi tanaman, mencegah erosi dengan membuat terasering." }, { badge: "Modul 2.9", title: "4. Aktivitas Manusia Zaman Praaksara", desc: "Zaman praaksara (nirleka) merupakan masa saat leluhur peradaban manusia belum mengenal tulisan. Pola perkembangannya terbagi atas tiga fase utama berdasarkan sistem mata pencahariannya." }, { badge: "Modul 2.10", title: "Masa Berburu & Mengumpulkan Makanan", desc: "Zaman ini terbagi atas Tingkat Sederhana dan Tingkat Lanjut. Ciri utamanya adalah hidup berpindah-pindah tempat (nomaden) mengikuti pergerakan hewan buruan dan pasokan mata air, serta bergantung sepenuhnya pada kemurahan alam semesta (food gathering)." }, { badge: "Modul 2.11", title: "Masa Bercocok Tanam & Perundagian", desc: "- Masa Bercocok Tanam: Mulai hidup menetap secara berkelompok (sedenter), mampu memproduksi cadangan makanan sendiri dengan berladang, dan mengenal sistem kepemimpinan.

- Masa Perundagian: Munculnya teknologi peleburan logam keras (perunggu & besi) oleh golongan pekerja terampil (undagi)." }, { badge: "Modul 2.12", title: "5. Mengenal Leluhur Bangsa Indonesia", desc: "Asal-usul nenek moyang bangsa Indonesia dapat dijelaskan melalui proses rute migrasi besar purba yang didukung oleh berbagai teori ilmiah antropologi terkemuka dunia.", extra: "Teori Out of Taiwan: Leluhur bermigrasi dari kepulauan Formosa.
Teori Out of Africa: Manusia modern bermigrasi dari Afrika sekitar 200.000 tahun lalu." }, { badge: "Modul 2.13", title: "Proto Melayu & Deutro Melayu", desc: "Gelombang kedatangan nenek moyang ke wilayah Nusantara terbagi atas dua periode:

- Proto Melayu (Melayu Tua): Bermigrasi sekitar 1500 SM, membawa kebudayaan batu muda (Neolitikum).
- Deutro Melayu (Melayu Muda): Bermigrasi sekitar 500 SM, membawa kebudayaan logam (perunggu) peninggalan Dongson." }, { badge: "Modul 2.14", title: "6. Diaspora Bangsa Indonesia", desc: "Ketangguhan leluhur Nusantara dalam menguasai laut terbukti dari kepiawaian sistem navigasi rasi bintang laut dan penciptaan perahu bercadik yang mampu mengarungi samudra lepas hingga menyeberang mencapai Madagaskar di Afrika." }, { badge: "Modul 2.15", title: "C. Pembangunan Berkelanjutan", desc: "1. Pembangunan Berkelanjutan (SDGs):
Konsep pembangunan formal yang diperkenalkan oleh PBB sebagai upaya nyata memenuhi kebutuhan masa kini tanpa mengorbankan atau merampas kelangsungan hak hidup generasi mendatang." }, { badge: "Modul 2.16", title: "2. Karakteristik Pembangunan Berkelanjutan", desc: "Sebuah pembangunan berkelanjutan wajib memiliki karakteristik mutlak:
- Menjamin pemerataan keadilan sosial antar generasi.
- Menghargai dan menjaga kelestarian daya dukung ekosistem bumi.
- Menggunakan sumber daya alam yang terbatas secara sangat bijaksana & efisien." }, { badge: "Modul 2.17", title: "3. Pilar Tujuan SDGs", desc: "PBB menetapkan 17 sasaran global yang wajib dicapai bersama demi pembangunan berkelanjutan yang damai dan setara, meliputi agenda krusial penghapusan kemiskinan, pendidikan bermutu, kesetaraan gender, penanganan iklim ekstrem, dan kelestarian ekosistem laut." }, { badge: "Modul 2.18", title: "4. Kelangkaan Sumber Daya", desc: "Kelangkaan (Scarcity) merupakan sebuah kondisi krusial di mana alat pemuas kebutuhan tidak sebanding dengan kebutuhan umat manusia yang tidak terbatas.

Kelangkaan dalam struktur ekonomi dibagi atas empat jenis: Kelangkaan Sumber Daya Alam, Tenaga Kerja terampil (SDM), Modal, dan Kewirausahaan." }, { badge: "Modul 2.19", title: "5. Faktor Penyebab Kelangkaan", desc: "Penyebab utama timbulnya kelangkaan di lingkungan masyarakat luas:
- Pertumbuhan jumlah penduduk dunia yang meningkat terlalu pesat.
- Keterbatasan cadangan pasokan sumber daya dari alam.
- Perusakan keseimbangan ekosistem alamiah oleh ulah eksploitasi manusia.
- Perkembangan teknologi yang belum merata." }, { badge: "Modul 2.20", title: "6. Dampak Ekonomi Atas Kelangkaan", desc: "Konsekuensi kelangkaan berimbas langsung dan berbahaya pada stabilitas pergerakan ekonomi nasional:
1. Produksi jumlah barang menurun drastis.
2. Harga kebutuhan barang pokok melonjak tinggi di pasar (terjadinya inflasi).
3. Pendapatan riil dan daya beli masyarakat merosot tajam." }, { badge: "Modul 2.21", title: "7. Langkah Pencegahan Kelangkaan", desc: "Upaya strategis untuk menghindari datangnya bencana kelangkaan masif:
- Mengelola sumber daya alam secara terukur dan berkelanjutan.
- Meminimalkan penggunaan energi fosil non-renewable yang mencemari udara.
- Mendesain dan menerapkan inovasi teknologi tepat guna yang ramah lingkungan." }, { badge: "Modul 2.22", title: "8. Masalah Pokok Ekonomi Modern", desc: "Ilmu ekonomi modern merumuskan 3 masalah pokok yang sangat fundamental dan wajib dipecahkan secara cerdas oleh setiap negara:

- What (Apa): Barang atau jasa apa yang akan diproduksi?
- How (Bagaimana): Bagaimana cara memproduksi barang tersebut secara efektif & efisien?
- For Whom (Untuk Siapa): Untuk kelompok masyarakat yang mana barang/jasa tersebut diproduksi?" }, { badge: "Review", title: "Rangkuman Total Tema II", desc: "Zaman pembentukan sejarah bumi berdasarkan ilmu geologi terbagi secara runut atas zaman Arkaekum, Paleozoikum, Mesozoikum, dan Neozoikum. Manusia purba melewati evolusi masa berburu, bercocok tanam, hingga tahap perundagian.

Pembangunan berkelanjutan dan pelestarian keseimbangan lingkungan alam melalui prinsip 3R sangat krusial dilakukan pada era modern guna mencegah timbulnya malapetaka kelangkaan.", extra: "Selamat! Anda telah menguasai keseluruhan teori keberagaman lingkungan sekitar dengan brilian." } ], kasus: { title: "Dilema Pabrik vs Ekosistem Sungai", context: "Sebuah konsorsium investor asing berniat membangun pabrik pengolahan kulit raksasa di daerah pedesaan yang asri dan dilewati aliran sungai yang sangat jernih. Pihak investor berjanji akan menyerap 1000 pemuda desa untuk dipekerjakan. Namun, pabrik kulit sering kali membuang limbah cair bahan kimia berbahaya langsung ke sungai, yang meracuni ekosistem perairan dan sumber air tanah.", tasks: [ "Apa keuntungan langsung dari pilar Ekonomi dan Sosial bagi masyarakat desa jika pabrik tersebut diizinkan berdiri?", "Ancaman pencemaran fatal apa yang paling menakutkan bagi pilar Lingkungan Alam (Ekologi) sungai beserta biota di dalamnya?", "Sebagai otoritas daerah (Bupati), syarat penggunaan teknologi atau regulasi hukum apa yang wajib ditegakkan ke pihak pabrik agar izinnya dapat keluar namun keseimbangan alam tetap lestari?" ] }, projek: { title: "Detektif Satgas Ekologi", category: "Investigasi Lapangan", tasks: [ "Bentuk tim investigasi lingkungan yang beranggotakan 4-5 orang siswa.", "Identifikasi secara langsung 'Titik Kritis' di lingkungan tempat tinggal kalian yang mengalami masalah penumpukan sampah liar atau saluran air yang tersumbat. Ambil dokumentasi visual pada kondisi awal.", "Lakukan sesi wawancara singkat kepada 2 orang warga setempat mengenai keluhan kesehatan, dampak bau tidak sedap, atau potensi bahaya dari titik kritis tersebut.", "Lakukan aksi nyata pembersihan area bersama anggota tim atau buat spanduk kampanye kebersihan yang edukatif.", "Susun laporan presentasi yang berisi analisis penyebab dan rancangan solusi pelestarian Pembangunan Berkelanjutan (SDGs)." ] }, game: { type: "ecoPath", title: "Ekspedisi Ekosistem Lestari", tiles: [ { name: "MARKAS UTAMA", type: "start", effect: 0 }, { name: "Hutan Hujan Amazon", type: "property", price: 100, owner: null }, { name: "Sabana Afrika", type: "property", price: 120, owner: null }, { name: "Gurun Sahara", type: "property", price: 150, owner: null }, { name: "Tundra Kutub", type: "property", price: 180, owner: null }, { name: "Zona Limbah Beracun", type: "penalty", effect: -200 }, { name: "Terumbu Karang", type: "property", price: 200, owner: null }, { name: "Hutan Mangrove", type: "property", price: 220, owner: null }, { name: "Ngarai Gunung", type: "property", price: 250, owner: null }, { name: "Denda Polusi Plastik", type: "penalty", effect: -300 }, { name: "Padang Rumput Hijau", type: "property", price: 300, owner: null }, { name: "Pegunungan Kapur", type: "property", price: 320, owner: null }, { name: "Hutan Lindung", type: "property", price: 350, owner: null }, { name: "Bonus Reboisasi", type: "bonus", effect: 200 }, { name: "Lahan Rawa Gambut", type: "property", price: 400, owner: null }, { name: "Jalur Cincin Api", type: "property", price: 450, owner: null } ] }, quiz: [ { q: "Segala sesuatu yang berada di sekitar manusia, baik yang terbentuk alami maupun buatan dinamakan...", options: ["Ekosistem buatan", "Lingkungan", "Dinamika sosiologis", "Pembangunan fisik"], a: 1 }, { q: "Berikut ini yang diklasifikasikan sebagai bentuk bentang alam perairan alami adalah...", options: ["Pegunungan Jayawijaya", "Hutan tropis", "Sungai Kapuas dan Laut Jawa", "Kebun sawit"], a: 2 }, { q: "Pembangunan yang dilakukan untuk memenuhi kebutuhan saat ini tanpa mengurangi kemampuan generasi mendatang disebut...", options: ["Pembangunan Gedung", "Pembangunan Berkelanjutan", "Revolusi Pabrik", "Eksploitasi Alam"], a: 1 }, { q: "Masa di mana manusia praaksara memiliki ciri hidup berpindah-pindah (nomaden) dan bergantung pada alam disebut...", options: ["Perundagian", "Bercocok Tanam", "Paleolitikum", "Berburu dan Meramu"], a: 3 }, { q: "Salah satu upaya untuk menjaga pelestarian tanah agar tetap subur adalah...", options: ["Membuang sampah ke sungai", "Membakar hutan", "Mengurangi penggunaan pestisida kimia", "Membangun pabrik"], a: 2 }, { q: "Masa praaksara di mana manusia mulai hidup menetap permanen dan mengenal pertanian sederhana adalah...", options: ["Berburu dan Meramu", "Bercocok Tanam", "Perundagian", "Masa Logam"], a: 1 }, { q: "Dampak buruk dari aktivitas penebangan hutan secara liar membabi buta tanpa reboisasi adalah...", options: ["Tanah subur", "Terjadi banjir bandang dan longsor", "Udara bersih", "Panen meningkat"], a: 1 }, { q: "Kondisi di mana alat pemuas kebutuhan (SDA) jumlahnya lebih sedikit dibandingkan kebutuhan manusia disebut...", options: ["Inflasi", "Kemiskinan", "Distribusi", "Kelangkaan (Scarcity)"], a: 3 }, { q: "Cara cerdas bagi siswa untuk membantu mengatasi masalah kelangkaan barang dan sampah adalah...", options: ["Mendaur ulang barang bekas", "Membuang makanan", "Membeli barang mewah", "Membakar daun kering"], a: 0 }, { q: "Lingkungan sosial pertama kali yang dikenal oleh manusia sejak dilahirkan dan berperan memberikan kasih sayang adalah...", options: ["Masyarakat", "Keluarga", "Sekolah", "Teman Sebaya"], a: 1 } ], qGame: [ { q: "Prinsip Pembangunan Berkelanjutan (SDGs) yang digaungkan oleh PBB mewajibkan keseimbangan mutlak dari 3 pilar utama kehidupan di bumi, yaitu mencakup elemen pilar...", options: ["Ekonomi, Sosial, dan Ekologi (Lingkungan Alam)", "Politik kekuasaan, Militer, dan Keamanan Nasional", "Budaya murni, Kepercayaan Agama, dan Tradisi Leluhur", "Pabrik industri, Uang pasar, dan Mesin Teknologi"], a: 0 }, { q: "Mendaur ulang tumpukan sampah plastik botol air mineral bekas dengan cara meleburnya kembali di pabrik besar menjadi bijih plastik padat sebagai bahan baku perakitan pembuatan jaket atau karpet sintetis disebut dengan penerapan prinsip pelestarian...", options: ["Reduce (Mengurangi jumlah material plastik)", "Reuse (Memakai ulang tanpa merubah bentuk)", "Recycle (Daur Ulang mengubah susunan material)", "Replant (Menanam kembali)"], a: 2 }, { q: "Program terencana resmi dari kementerian pemerintah pusat untuk memecahkan masalah kepadatan populasi dengan cara memindahkan penduduk dari Pulau Jawa dan Bali yang sudah sangat sesak menuju bentangan lahan kosong luas di Pulau Papua atau Kalimantan disebut...", options: ["Tindakan Urbanisasi", "Program Transmigrasi Nasional", "Wisata Turisme", "Aktivitas Eksodus Pengungsi"], a: 1 }, { q: "Penumpukan gas CO2 (karbon dioksida) dari knalpot kendaraan dan asap hitam pabrik di perisai atmosfer yang memicu terperangkapnya panas matahari, sehingga temperatur iklim bumi memanas dan mencairkan es abadi kutub bumi merupakan bentuk ancaman horor ekologis dari...", options: ["Pemanasan Global (Efek Rumah Kaca)", "Penipisan fatal Lapisan Ozon", "Hujan Belerang Beracun (Acid Rain)", "Tragedi Eutrofikasi Danau"], a: 0 }, { q: "Kemampuan evolusi nenek moyang bangsa manusia purba Nusantara untuk mulai hidup menetap permanen secara berdekatan (komunal sedenter) serta mengakhiri masa nomaden pertama kali terjadi sejak dimulainya fase peradaban...", options: ["Masa Perundagian Logam Perunggu", "Masa Bercocok Tanam (Bertani untuk produksi makanan)", "Masa Berburu tingkat sederhana", "Zaman Arkaekum saat permukaan bumi penuh letusan gas panas"], a: 1 }, { q: "Zaman geologi tertua di mana planet bumi masih berwujud bola gas yang sangat panas dan sama sekali belum ada tanda kehidupan dinamakan zaman...", options: ["Paleozoikum", "Arkaekum", "Mesozoikum", "Neozoikum"], a: 1 }, { q: "Zaman geologi pertengahan yang sering dijuluki oleh para ilmuwan sebagai era kehidupan reptil raksasa atau Dinosaurus adalah...", options: ["Mesozoikum", "Paleozoikum", "Kuartier", "Arkaekum"], a: 0 }, { q: "Interaksi sosial memiliki prasyarat mutlak yang harus terpenuhi agar dapat terjadi dalam sebuah masyarakat, yaitu adanya...", options: ["Uang dan Barang Ekonomi", "Kontak Sosial dan Komunikasi Interaktif", "Konflik dan Persaingan Ras", "Asimilasi dan Akulturasi Budaya"], a: 1 }, { q: "Sebuah kontak sosial yang terjadi melalui perantara alat atau pihak ketiga, seperti bertukar pesan melalui surel elektronik (email), disebut kontak sosial...", options: ["Primer", "Langsung Bebas", "Sekunder", "Tersier"], a: 2 }, { q: "Di bawah ini, manakah yang TIDAK termasuk ke dalam unsur penting dalam kerangka proses komunikasi...", options: ["Komunikator (Pengirim Pesan)", "Pesan yang Disampaikan", "Media Komunikasi", "Harga Ekonomi Media"], a: 3 }, { q: "Langkah rasional dalam pelestarian topografi tanah di area pegunungan yang kuram agar tidak mudah mengalami erosi saat curah hujan tinggi adalah dengan...", options: ["Penebangan liar massif", "Membuat terasering atau sengkedan", "Menanam satu jenis tumbuhan rawa", "Membuat biopori beton"], a: 1 }, { q: "Polusi perairan akibat limbah kimia cair pabrik dapat menyebabkan matinya biota laut secara masif. Upaya pelestarian yang paling tepat dan berkelanjutan adalah...", options: ["Mewajibkan pabrik mengolah limbah sebelum dibuang", "Membuang limbah langsung ke palung laut dalam", "Menutup seluruh aliran sungai", "Menebang vegetasi pohon mangrove"], a: 0 }, { q: "Fase masa praaksara di mana leluhur manusia masih sangat bergantung mutlak pada ketersediaan alam dan hidup secara berpindah-pindah dinamakan masa...", options: ["Masa Perundagian Tingkat Lanjut", "Masa Nomaden (Berburu & Meramu)", "Masa Sedenter Pertanian", "Masa Bercocok Tanam Kering"], a: 1 }, { q: "Inovasi pesat penciptaan dan peleburan alat-alat canggih dari bahan baku logam perunggu serta besi mulai berkembang luas pada era...", options: ["Masa berburu tingkat awal", "Masa bercocok tanam sederhana", "Masa Perundagian", "Zaman batu tua (Paleolitikum)"], a: 2 }, { q: "Teori antropologi yang menyatakan bahwa nenek moyang asli bangsa Indonesia bermigrasi dari wilayah Kepulauan Formosa berdasarkan argumen kesamaan rumpun bahasa adalah teori...", options: ["Teori Out of Africa", "Teori Out of Taiwan", "Teori Nusantara Murni", "Teori Dataran Yunnan"], a: 1 }, { q: "Gelombang pelayaran dan kedatangan bangsa Deutro Melayu (Melayu Muda) ke perairan Nusantara membawa warisan mahakarya kebudayaan logam yang berpusat dari daerah...", options: ["Dongson (Vietnam)", "Bacson-Hoabinh", "Paparan Sahul Barat", "Semenanjung Eropa"], a: 0 }, { q: "Keberadaan teknologi pembuatan perahu bercadik yang kokoh merupakan bukti kuat autentik bahwa nenek moyang bangsa Indonesia memiliki keahlian unggul dalam bidang...", options: ["Sistem Pertanian Agraris", "Sistem Peternakan Darat", "Navigasi Kemaritiman (Laut)", "Teknik Pengecoran Logam"], a: 2 }, { q: "Kondisi ekonomi krusial di mana ketersediaan sumber daya alam atau alat pemuas tidak lagi sebanding dengan membludaknya jumlah kebutuhan manusia disebut fenomena...", options: ["Pemerataan Kemakmuran", "Kelangkaan Ekonomi (Scarcity)", "Inflasi Moneter", "Distribusi Tidak Merata"], a: 1 }, { q: "Salah satu dari tiga permasalahan pokok pada teori ekonomi modern yang secara spesifik mempertanyakan 'Barang atau jasa apa sajakah yang akan diproduksi?' dirumuskan dalam istilah...", options: ["How (Bagaimana)", "For Whom (Untuk Siapa)", "What (Apa)", "When (Kapan)"], a: 2 }, { q: "Masalah inti pokok ekonomi modern 'For Whom' (Untuk Siapa) memiliki tujuan konseptual utama dalam rangka menjawab problematika...", options: ["Pemilihan teknologi mesin pabrik", "Distribusi, segmentasi, dan sasaran pasar konsumen", "Pemetaan stok ketersediaan bahan baku alam", "Sistem efisiensi pengolahan limbah pabrik"], a: 1 } ] } }; // ========================================================================================= // PURE REACT COMPONENTS UNTUK INTERAKTIVITAS YANG BEBAS BUG // ========================================================================================= // --- KOMPONEN KASUS MURNI REACT --- const CaseComponent = ({ data }) => { const [text, setText] = useState(''); const [submitted, setSubmitted] = useState(false); if(submitted) { return (

Data Direkam Berhasil

Laporan analisis komprehensif Anda yang memuat kerangka solusi logis telah terenkripsi secara aman di pusat pangkalan data komunal Sociora.

); } return (

Studi Kasus

{data.title}

{data.context}

Tugas Analisis Anda:

); }; // --- KOMPONEN PROJEK MURNI REACT --- const ProjectComponent = ({ data }) => { return (

Proyek Kolaborasi

{data.title}

Kategori: {data.category}

); }; // --- KOMPONEN KUIS MURNI REACT --- const QuizComponent = ({ quizData, onFinish }) => { const [currentQuestion, setCurrentQuestion] = useState(0); const [score, setScore] = useState(0); const [showResult, setShowResult] = useState(false); const [selectedAnswer, setSelectedAnswer] = useState(null); if(!quizData || quizData.length === 0) return

Kuis Belum Tersedia

; const handleAnswerClick = (index) => { if (selectedAnswer !== null) return; setSelectedAnswer(index); if (index === quizData[currentQuestion].a) setScore(score + 10); setTimeout(() => { if (currentQuestion + 1 < quizData.length) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(null); } else { setShowResult(true); } }, 1500); }; const restartQuiz = () => { setCurrentQuestion(0); setScore(0); setShowResult(false); setSelectedAnswer(null); }; if (showResult) { const lulus = score >= 70; return (

{lulus ? 'Kompetensi Tercapai' : 'Perlu Evaluasi Ulang'}

Nilai Akhir

{score}

{lulus ? "Pemahaman materi Anda sudah memenuhi standar kompetensi yang ditetapkan. Silakan melangkah ke modul pembelajaran berikutnya." : "Perolehan persentase evaluasi Anda belum mencapai batas ambang minimum kelulusan kurikulum. Silakan tinjau kembali rangkuman materi dan ulangi kuis secara seksama."}

); } const q = quizData[currentQuestion]; return (

Pertanyaan Formatif {currentQuestion + 1} / 10 Skor Terkumpul: {score}

{q.q}

{q.options.map((opt, i) => { let styleClass = "flex items-center w-full text-left p-5 rounded-[20px] border-2 transition-all duration-200 text-[15px] font-bold font-body "; if (selectedAnswer === null) { styleClass += "border-[#D2D2D7]/60 bg-white hover:border-[#0071E3] hover:bg-[#0071E3]/5 cursor-pointer text-[#1D1D1F] shadow-[0_2px_10px_rgba(0,0,0,0.02)]"; } else if (i === q.a) { styleClass += "border-green-500 bg-green-50 text-green-700 font-bold shadow-md scale-[1.01]"; } else if (i === selectedAnswer && selectedAnswer !== q.a) { styleClass += "border-red-400 bg-red-50 text-red-600 font-bold"; } else { styleClass += "border-[#D2D2D7]/40 bg-[#F5F5F7] opacity-50 grayscale"; } const abc = String.fromCharCode(65 + i); return ( ); })}

); }; // --- SISTEM GAME KELOMPOK MULTIPLAYER --- const UlarTanggaGame = ({ data, onFinish }) => { const [players, setPlayers] = useState(initPlayers(data.type)); const [turn, setTurn] = useState(0); const [diceValue, setDiceValue] = useState(1); const [isRolling, setIsRolling] = useState(false); const [modal, setModal] = useState(null); const [pendingPos, setPendingPos] = useState(null); const nextTurnLocal = (newPlayers) => { let nextT = (turn + 1) % 4; let attempts = 0; while (!(newPlayers || players)[nextT].active && attempts < 4) { nextT = (nextT + 1) % 4; attempts++; } if(attempts >= 4) { setModal({ type: 'win', title: 'Simulasi Berakhir', message: 'Semua regu telah tereliminasi.' }); return; } setTurn(nextT); }; const handleRollUT = () => { setIsRolling(true); let r = 0; const iv = setInterval(() => { setDiceValue(Math.floor(Math.random() * 6) + 1); r++; if (r > 8) { clearInterval(iv); const finalDice = Math.floor(Math.random() * 6) + 1; setDiceValue(finalDice); let nextPos = players[turn].pos + finalDice; if(nextPos > 36) nextPos = 36 - (nextPos - 36); setPendingPos(nextPos); if([4,9,20,17,28,34,12,26].includes(nextPos)) { const q = data.questions[Math.floor(Math.random() * data.questions.length)]; if(!q) return; setModal({ type: 'quizUT', targetPos: nextPos, q: q }); } else { movePlayerUT(nextPos); } setIsRolling(false); } }, 80); }; const movePlayerUT = (pos) => { let newP = [...players]; newP[turn].pos = pos; setPlayers(newP); if(pos === 36) { setModal({ type: 'win', title: 'Tujuan Tercapai', message: `Tim ${newP[turn].name} telah membuktikan keunggulan kolaborasinya pada simulasi ini.` }); } else { nextTurnLocal(newP); } }; const handleAnswerUT = (isCorrect) => { let target = pendingPos; if(isCorrect) { if(target===4) target=14; else if(target===9) target=31; else if(target===20) target=35; } else { if([4,9,20].includes(target)) { /* Gagal naik */ } else if(target===17) target=7; else if(target===28) target=5; else if(target===34) target=15; else if(target===12 || target===26) target = Math.max(1, target-3); } setModal(null); movePlayerUT(target); }; const gridMap = [ 36,35,34,33,32,31, 25,26,27,28,29,30, 24,23,22,21,20,19, 13,14,15,16,17,18, 12,11,10, 9, 8, 7, 1, 2, 3, 4, 5, 6 ]; return (

{modal && (

{modal.type === 'win' && ( <>

{modal.title}

{modal.message}

)} {modal.type === 'quizUT' && (

Intervensi Sistemik Petak {modal.targetPos}

{modal.q.q}

{modal.q.options.map((opt, i) => ( ))}

)}

{data.title}

Mekanisme simulasi papan pengujian penguasaan bab secara berkelompok interaktif.

{players.map((p, i) => (

{p.name} | 📍 {p.pos}

))}

{diceValue}

{gridMap.map(num => { let icon = ''; if([4,9,20].includes(num)) icon = '↗️'; if([17,28,34].includes(num)) icon = '↘️'; if([12,26].includes(num)) icon = '⛔'; return (

{num} {icon}

{players.filter(p => p.active && p.pos === num).map(p => (

))}

); })}

); }; const EcoPathGame = ({ data, onFinish }) => { const [players, setPlayers] = useState(initPlayers(data.type)); const [turn, setTurn] = useState(0); const [mapState, setMapState] = useState(data.tiles || []); const [diceValue, setDiceValue] = useState(1); const [isRolling, setIsRolling] = useState(false); const [modal, setModal] = useState(null); const [pendingPos, setPendingPos] = useState(null); const nextTurnLocal = (newPlayers) => { let nextT = (turn + 1) % 4; let attempts = 0; while (!(newPlayers || players)[nextT].active && attempts < 4) { nextT = (nextT + 1) % 4; attempts++; } if(attempts >= 4) { setModal({ type: 'win', title: 'Simulasi Berakhir', message: 'Semua regu telah tereliminasi.' }); return; } setTurn(nextT); }; const handleRollEC = () => { setIsRolling(true); let r = 0; const iv = setInterval(() => { setDiceValue(Math.floor(Math.random() * 4) + 1); // 1-4 r++; if (r > 8) { clearInterval(iv); const finalDice = Math.floor(Math.random() * 4) + 1; setDiceValue(finalDice); let nextPos = (players[turn].pos + finalDice) % 16; let newP = [...players]; newP[turn].pos = nextPos; setPlayers(newP); setPendingPos(nextPos); let tile = mapState[nextPos]; if(['event', 'penalty', 'bonus', 'start'].includes(tile.type)) { setModal({ type: 'alertEC', title: 'Distrik Non-Properti', message: `Tim tiba di stasiun aman/sanksi. Otorisasi pergerakan berikutnya dapat dilanjutkan.` }); } else { const q = data.questions[Math.floor(Math.random() * data.questions.length)]; setModal({ type: 'quizEC', targetPos: nextPos, tile: tile, q: q }); } setIsRolling(false); } }, 100); }; const handleAnswerEC = (isCorrect) => { let newP = [...players]; let newMap = [...mapState]; let tIdx = pendingPos; if(isCorrect) { newMap[tIdx].owner = newP[turn].id; } else { if(newMap[tIdx].owner !== null && newMap[tIdx].owner !== undefined) { newP[turn].hp -= 1; } } if(newP[turn].hp <= 0) { newP[turn].active = false; newMap.forEach(m => { if(m.owner === newP[turn].id) m.owner = null; }); } setPlayers(newP); setMapState(newMap); setModal(null); let activeP = newP.filter(x => x.active); let nullTiles = newMap.filter(x => x.type === 'property' && x.owner === null).length; if(activeP.length === 1 || nullTiles === 0) { let scores = newP.map(pl => ({name: pl.name, count: newMap.filter(mt=>mt.owner===pl.id).length})); scores.sort((a,b) => b.count - a.count); setModal({ type: 'win', title: `Otoritas Tertinggi: ${scores[0].name}`, message: `Manajemen tim telah menguasai portofolio ekosistem dengan akumulasi total ${scores[0].count} blok strategis alam.` }); } else { nextTurnLocal(newP); } }; const gridPositions = [ { r: 1, c: 1 }, { r: 1, c: 2 }, { r: 1, c: 3 }, { r: 1, c: 4 }, { r: 1, c: 5 }, { r: 2, c: 5 }, { r: 3, c: 5 }, { r: 4, c: 5 }, { r: 5, c: 5 }, { r: 5, c: 4 }, { r: 5, c: 3 }, { r: 5, c: 2 }, { r: 5, c: 1 }, { r: 4, c: 1 }, { r: 3, c: 1 }, { r: 2, c: 1 } ]; return (

{modal && (

{modal.type === 'win' && ( <>

{modal.title}

{modal.message}

)} {modal.type === 'alertEC' && ( <>

ℹ️

{modal.title}

{modal.message}

)} {modal.type === 'quizEC' && (

{modal.tile.owner !== null ? "Intervensi Pengambilalihan" : "Pembebasan Ekosistem"}

{modal.tile.name}

{modal.q.q}

{modal.q.options.map((opt, i) => ( ))}

)}

{data.title}

Alokasikan probabilitas rotasi dadu untuk mensimulasikan manajemen perluasan lahan teritorial kelompok.

{players.map((p, i) => (

{p.name} | 🛡️ {p.hp}

))}

{mapState.map((t, idx) => { let pos = gridPositions[idx]; let ownerPlayer = players.find(x => x.id === t.owner); let bgClass = "bg-white"; let borderClass = "border-[#D2D2D7]/50"; if(ownerPlayer) { if(ownerPlayer.id === 0) { bgClass = "bg-red-50"; borderClass = "border-red-200"; } if(ownerPlayer.id === 1) { bgClass = "bg-blue-50"; borderClass = "border-blue-200"; } if(ownerPlayer.id === 2) { bgClass = "bg-green-50"; borderClass = "border-green-200"; } if(ownerPlayer.id === 3) { bgClass = "bg-yellow-50"; borderClass = "border-yellow-200"; } } let label = t.type === 'start' ? 'Start' : t.name; let icon = t.type==='start'?'🏰':t.type==='event'?'🌪️':t.type==='penalty'?'📉':t.type==='bonus'?'📈':'📍'; return (

{label} {ownerPlayer ? '🚩' : icon}

{players.filter(p => p.active && p.pos === idx).map(p => (

))}

); })} {/* Center Panel */}

Dadu Penggerak

{diceValue}

); }; const GameComponent = ({ gameData, questions, onFinish }) => { if (!gameData) return null; const mergedData = { ...gameData, questions }; if (gameData.type === 'ulartangga') return ; if (gameData.type === 'ecoPath') return ; return

Sistem simulasi di luar spesifikasi arsitektur.

; }; // ========================================================================================= // INTERFACE UTAMA APP.JSX (macOS SONOMA & APPLE EDUCATION PREMIUM - KONSISTEN) // ========================================================================================= export default function App() { const [historyStack, setHistoryStack] = useState(['landing']); const [activeTheme, setActiveTheme] = useState('tema1'); const [detailType, setDetailType] = useState(null); const [activeSlide, setActiveSlide] = useState(0); // --- STATS BELAJAR INTERAKTIF --- const [progressValue, setProgressValue] = useState(0); // --- DIGITAL NOTES STATE --- const [notesList, setNotesList] = useState([ { id: 1, title: "Fungsi Primer Keluarga", content: "Keluarga berperan memberikan afeksi, proteksi, serta edukasi awal yang vital bagi perkembangan perilaku bermoral anak.", category: "IPS Bab 1" } ]); const [newNoteTitle, setNewNoteTitle] = useState(''); const [newNoteContent, setNewNoteContent] = useState(''); const [newNoteCategory, setNewNoteCategory] = useState(''); // --- PLANNER TO-DO LIST STATE --- const [tasks, setTasks] = useState([ { id: 1, text: "Read Tema I: Slides 1-10", isDone: true, category: "IPS", color: "bg-blue-50 text-blue-600 border border-blue-200" }, { id: 2, text: "Complete Tema I Quiz", isDone: true, category: "Quiz", color: "bg-purple-50 text-purple-600 border border-purple-200" }, { id: 3, text: "Read Tema II: Slides 1-12", isDone: false, category: "IPS", color: "bg-blue-50 text-blue-600 border border-blue-200" }, { id: 4, text: "Studi Kasus: Dilema Pabrik vs Sungai", isDone: false, category: "Case", color: "bg-amber-50 text-amber-600 border border-amber-200" }, { id: 5, text: "Proyek: Pohon Keluarga", isDone: false, category: "Project", color: "bg-green-50 text-green-600 border border-green-200" } ]); const [newTodoText, setNewTodoText] = useState(''); const [newTodoCategory, setNewTodoCategory] = useState('IPS'); // --- POMODORO TIMER STATE --- const [pomodoroTime, setPomodoroTime] = useState(25 * 60); const [isTimerActive, setIsTimerActive] = useState(false); // --- FORUM DISKUSI KOMUNITAS STATE --- const [communityPosts, setCommunityPosts] = useState([ { id: 1, user: "Ahmad Rifai", text: "Mengapa letak astronomis sangat mutlak pengaruhnya bagi pembagian zona waktu di Indonesia?", likes: 4, comments: 2 }, { id: 2, user: "Siti Rahma", text: "Apakah ada kelompok yang sudah mengamati titik selokan mampet untuk penugasan Projek Ekologi?", likes: 6, comments: 5 } ]); const [newPostText, setNewPostText] = useState(''); // --- macOS SYSTEM SETTINGS STATE --- const [audioFeedback, setAudioFeedback] = useState(true); const [highContrast, setHighContrast] = useState(false); const [username, setUsername] = useState("Siswa Madani"); // Evaluasi Progress Bar Dinamis useEffect(() => { const doneCount = tasks.filter(t => t.isDone).length; const total = tasks.length || 1; setProgressValue(Math.round((doneCount / total) * 100)); }, [tasks]); // Efek Samping Pomodoro Timer useEffect(() => { let interval = null; if (isTimerActive && pomodoroTime > 0) { interval = setInterval(() => { setPomodoroTime(prev => prev - 1); }, 1000); } else if (pomodoroTime === 0) { setIsTimerActive(false); alert("Waktu Pomodoro Selesai! Saatnya istirahat sejenak."); setPomodoroTime(25 * 60); } return () => clearInterval(interval); }, [isTimerActive, pomodoroTime]); const formatTime = (timeInSecs) => { const minutes = Math.floor(timeInSecs / 60).toString().padStart(2, '0'); const seconds = (timeInSecs % 60).toString().padStart(2, '0'); return `${minutes}:${seconds}`; }; // Fungsi Navigasi berbasis History Stack const view = historyStack[historyStack.length - 1]; const navTo = (target) => { setHistoryStack(prev => [...prev, target]); window.scrollTo({ top: 0, behavior: 'smooth' }); }; const goBack = () => { if (historyStack.length > 1) { setHistoryStack(prev => prev.slice(0, -1)); window.scrollTo({ top: 0, behavior: 'smooth' }); } }; const openTheme = (themeId) => { setActiveTheme(themeId); navTo('menu'); }; const openContent = (type) => { setDetailType(type); if(type === 'materi') setActiveSlide(0); navTo('detail'); }; const addNote = () => { if (!newNoteTitle.trim()) return; setNotesList([{ id: Date.now(), title: newNoteTitle, content: newNoteContent, category: newNoteCategory || 'Umum', isPinned: false }, ...notesList]); setNewNoteTitle(''); setNewNoteContent(''); setNewNoteCategory(''); }; const deleteNote = (id) => { setNotesList(notesList.filter(n => n.id !== id)); }; const toggleTask = (id) => { setTasks(tasks.map(t => t.id === id ? { ...t, isDone: !t.isDone } : t)); }; const addTodo = () => { if (!newTodoText.trim()) return; let badgeColor = "bg-blue-50 text-blue-600 border border-blue-200"; if (newTodoCategory === 'Quiz') badgeColor = "bg-purple-50 text-purple-600 border border-purple-200"; if (newTodoCategory === 'Case') badgeColor = "bg-amber-50 text-amber-600 border border-amber-200"; if (newTodoCategory === 'Project') badgeColor = "bg-green-50 text-green-600 border border-green-200"; setTasks([...tasks, { id: Date.now(), text: newTodoText, isDone: false, category: newTodoCategory, color: badgeColor }]); setNewTodoText(''); }; const submitPost = () => { if (!newPostText.trim()) return; setCommunityPosts([{ id: Date.now(), user: username, text: newPostText, likes: 0, comments: 0 }, ...communityPosts]); setNewPostText(''); }; return ( <>