Quis bahasa Sunda.HTML

Pasted Sep 29, 2026, 10:03 AM1 file752 lines

Scan to open on your phone

Point a camera at the QR code - it opens this exact paste, no app needed.

https://codepastes.com/zzgt7xd9h3stef8w
Quis bahasa Sunda.HTML
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kuis Interaktif Bahasa Sunda Kelas 7 SMP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Poppins', sans-serif; }
    </style>
</head>
<body class="bg-emerald-50 text-slate-800 min-h-screen">

    <!-- Header / Navbar -->
    <header class="bg-emerald-700 text-white shadow-lg sticky top-0 z-50">
        <div class="max-w-5xl mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i class="fa-solid fa-graduation-cap text-2xl text-emerald-300"></i>
                <div>
                    <h1 class="text-xl font-bold leading-tight">Kuis Bahasa Sunda Kelas 7</h1>
                    <p class="text-xs text-emerald-200">Materi: Paguneman, Undak-Usuk Basa, & Vokal Aksara Sunda</p>
                </div>
            </div>
            <div id="quiz-progress" class="hidden text-right">
                <span class="text-xs text-emerald-200">Progress</span>
                <p class="font-bold text-sm text-emerald-100" id="progress-text">Soal 1 / 45</p>
            </div>
        </div>
    </header>

    <!-- Main Container -->
    <main class="max-w-4xl mx-auto p-4 md:p-6">

        <!-- Welcome Screen -->
        <div id="welcome-screen" class="bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-emerald-100 mt-4">
            <div class="text-center max-w-2xl mx-auto">
                <div class="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl">
                    <i class="fa-solid fa-book-open"></i>
                </div>
                <h2 class="text-2xl font-bold text-emerald-800 mb-2">Wilujeng Sumping! (Selamat Datang!)</h2>
                <p class="text-gray-600 mb-6">Uji pemahaman basa Sunda anjeun dina materi Paguneman, Undak-usuk Basa, jeung Vokal Aksara Sunda.</p>
                
                <div class="bg-emerald-50 rounded-xl p-4 text-left mb-6 border border-emerald-200">
                    <h3 class="font-semibold text-emerald-800 mb-2 flex items-center gap-2">
                        <i class="fa-solid fa-list-check"></i> Rincian Soal (45 Soal):
                    </h3>
                    <ul class="text-sm text-gray-700 space-y-1 ml-6 list-disc">
                        <li><strong>Bagian A:</strong> 25 Pilihan Ganda biasa</li>
                        <li><strong>Bagian B:</strong> 5 Pilihan Ganda Kompleks (Bisa milih >1 jawaban)</li>
                        <li><strong>Bagian C:</strong> 5 Benar / Salah</li>
                        <li><strong>Bagian D:</strong> 5 Isian Singkat</li>
                        <li><strong>Bagian E:</strong> 5 Uraian / Essai (Latihan Mandiri)</li>
                    </ul>
                </div>

                <button onclick="startQuiz()" class="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 transform hover:-translate-y-0.5">
                    Mulai Kuis
                </button>
            </div>
        </div>

        <!-- Quiz Container -->
        <div id="quiz-container" class="hidden space-y-6">
            <!-- Navigation Category Tabs -->
            <div class="flex overflow-x-auto gap-2 pb-2 scrollbar-none text-xs font-semibold">
                <span id="badge-pg" class="px-3 py-1.5 rounded-lg bg-emerald-100 text-emerald-800 whitespace-nowrap">PG (1-25)</span>
                <span id="badge-pgk" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 whitespace-nowrap">PG Kompleks (26-30)</span>
                <span id="badge-bs" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 whitespace-nowrap">Benar/Salah (31-35)</span>
                <span id="badge-isian" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 whitespace-nowrap">Isian (36-40)</span>
                <span id="badge-uraian" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 whitespace-nowrap">Uraian (41-45)</span>
            </div>

            <!-- Card Soal -->
            <div class="bg-white rounded-2xl shadow-xl p-6 border border-emerald-100">
                <div class="flex justify-between items-center mb-4 pb-3 border-b border-gray-100">
                    <span id="question-type-label" class="text-xs font-bold uppercase tracking-wider text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">
                        Pilihan Ganda
                    </span>
                    <span id="question-number-badge" class="text-xs font-semibold text-gray-500">
                        Soal 1 ti 45
                    </span>
                </div>

                <!-- Teks Soal -->
                <div class="mb-6">
                    <h3 id="question-text" class="text-lg font-bold text-gray-800 mb-2"></h3>
                    <p id="question-translate" class="text-sm text-gray-500 italic bg-gray-50 p-3 rounded-lg border border-gray-200"></p>
                </div>

                <!-- Options / Answers Input Container -->
                <div id="answer-options-container" class="space-y-3 mb-6"></div>

                <!-- Navigation Buttons -->
                <div class="flex justify-between items-center pt-4 border-t border-gray-100">
                    <button id="btn-prev" onclick="prevQuestion()" class="px-5 py-2.5 rounded-xl border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium text-sm flex items-center gap-2">
                        <i class="fa-solid fa-arrow-left"></i> Sateuacanna
                    </button>
                    <button id="btn-next" onclick="nextQuestion()" class="px-6 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-medium text-sm flex items-center gap-2">
                        Salajengna <i class="fa-solid fa-arrow-right"></i>
                    </button>
                    <button id="btn-submit" onclick="finishQuiz()" class="hidden px-6 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-medium text-sm flex items-center gap-2">
                        Atosan / Selesai <i class="fa-solid fa-check"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Result Screen -->
        <div id="result-screen" class="hidden bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-emerald-100">
            <div class="text-center max-w-xl mx-auto">
                <div class="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl">
                    <i class="fa-solid fa-trophy"></i>
                </div>
                <h2 class="text-2xl font-bold text-emerald-800 mb-1">Hasil Kuis Anjeun</h2>
                <p class="text-gray-500 text-sm mb-6">(Hasil Kuis Anda - Otomatis Menilai Soal Objektif)</p>

                <!-- Score Badge -->
                <div class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-2xl p-6 mb-6 shadow-md">
                    <p class="text-xs uppercase tracking-widest text-emerald-100 mb-1">Skor Otomatis (Soal 1 - 40)</p>
                    <h3 class="text-5xl font-extrabold mb-2" id="score-text">0 / 40</h3>
                    <p id="score-percentage" class="text-sm font-medium text-emerald-100"></p>
                </div>

                <p class="text-xs text-gray-500 mb-6 italic">*Catatan: Soal 41-45 (Uraian) diperiksa secara mandiri oleh Guru / Siswa.</p>

                <div class="flex justify-center gap-4">
                    <button onclick="restartQuiz()" class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2.5 px-6 rounded-xl transition">
                        Cobian Deui (Coba Lagi)
                    </button>
                </div>
            </div>
        </div>

    </main>

    <script>
        const quizData = [
            // --- 25 PILIHAN GANDA (1-25) ---
            {
                type: 'pg',
                q: '1. Naon nu dimaksud ku paguneman téh?',
                t: '1. Apa yang dimaksud dengan paguneman (percakapan)?',
                options: [
                    'Kegiatan ngobrol sorangan di hareup kaca',
                    'Kegiatan ngobrol dua urang atawa leuwih saling nembalan',
                    'Nulis karangan dina buku tulis',
                    'Maca sajak di hareup kelas'
                ],
                correct: 1,
                explanation: 'Paguneman nyaéta kagiatan ngobrol/saling tukar pikiran antara dua urang atawa leuwih (dialog/diskusi).'
            },
            {
                type: 'pg',
                q: '2. Kagiatan paguneman antara dua urang disebut ogé...',
                t: '2. Kegiatan percakapan antara dua orang disebut juga...',
                options: ['Monolog', 'Dialog', 'Epilog', 'Prolog'],
                correct: 1,
                explanation: 'Obrolan antara dua urang disebut dialog.'
            },
            {
                type: 'pg',
                q: '3. Di handap ieu nu henteu kaasup kana étika dina paguneman nyaéta...',
                t: '3. Di bawah ini yang tidak termasuk etika dalam percakapan yaitu...',
                options: [
                    'Ngadéngékeun nu keur ngomong',
                    'Motong pembicaraan batur sateuacan réngsé',
                    'Ngaluyukeun basa jeung lawan bicara',
                    'Sopan dina sikep jeung rengkuh'
                ],
                correct: 1,
                explanation: 'Motong pembicaraan batur kaasup sikep nu teu sopan.'
            },
            {
                type: 'pg',
                q: '4. Nalika urang paguneman jeung guru, basa nu dipaké nyaéta...',
                t: '4. Ketika kita bercakap-cakap dengan guru, bahasa yang digunakan adalah...',
                options: ['Basa loma', 'Basa lemes', 'Basa kasar', 'Basa gaul'],
                correct: 1,
                explanation: 'Sangkan sopan, ka guru kedah nganggó basa lemes/hormat.'
            },
            {
                type: 'pg',
                q: '5. "Wilujeng enjang" dina basa Indonesia hartina nyaéta...',
                t: '5. "Wilujeng enjang" dalam bahasa Indonesia artinya yaitu...',
                options: ['Selamat siang', 'Selamat sore', 'Selamat pagi', 'Selamat malam'],
                correct: 2,
                explanation: 'Wilujeng enjang = Selamat pagi.'
            },
            {
                type: 'pg',
                q: '6. Kalimah nu biasa dipaké pikeun pamitan dina paguneman nyaéta...',
                t: '6. Kalimat yang biasa digunakan untuk berpamitan dalam percakapan yaitu...',
                options: [
                    'Sampurasun',
                    'Sapun nyagakeun',
                    'Tepang deui énjing, nya!',
                    'Hapunten nu kasuhun'
                ],
                correct: 2,
                explanation: '"Tepang deui énjing" dipaké nalika rék perpisahan/pamitan.'
            },
            {
                type: 'pg',
                q: '7. Paguneman nu dilakukeun ku loba urang pikeun ngabahas hiji masalah disebut...',
                t: '7. Percakapan yang dilakukan oleh banyak orang untuk membahas suatu masalah disebut...',
                options: ['Silih témpas', ' Sawala (diskusi)', 'Ceramah', 'Debat kusir'],
                correct: 1,
                explanation: 'Sawala hartina diskusi ngabahas hiji jejer/topik.'
            },
            {
                type: 'pg',
                q: '8. Naon tujuan utama tina undak-usuk basa Sunda?',
                t: '8. Apa tujuan utama dari undak-usuk bahasa Sunda?',
                options: [
                    'Sangkan bisa ngaréka-réka basa',
                    'Pikeun ngajénan (menghormati) lawan bicara',
                    'Pikeun ngabédakeun kasta sosial',
                    'Sangkan dianggap jalma pinter'
                ],
                correct: 1,
                explanation: 'Undak usuk basa ditujukeun pikeun rasa hormat jeung ngajénan ka batur.'
            },
            {
                type: 'pg',
                q: '9. Basa lemes pikeun diri sorangan tina kecap "makan" nyaéta...',
                t: '9. Bahasa halus untuk diri sendiri dari kata "makan" yaitu...',
                options: ['Neda', 'Tuang', 'Dahar', 'Nyatu'],
                correct: 0,
                explanation: 'Neda (lemes keur sorangan), Tuang (lemes keur batur), Dahar (loma).'
            },
            {
                type: 'pg',
                q: '10. Kecap "tuang" dina tatakrama basa Sunda dipaké pikeun...',
                t: '10. Kata "tuang" dalam tata krama bahasa Sunda digunakan untuk...',
                options: [
                    'Diri sorangan',
                    'Batur / Saluhureun',
                    'Saha waé bebas',
                    'Sasatoan'
                ],
                correct: 1,
                explanation: 'Tuang dipaké pikeun batur/saluhureun (orang lain/yang lebih tua).'
            },
            {
                type: 'pg',
                q: '11. Kecap loma tina "neda/tuang" nyaéta...',
                t: '11. Kata loma (akrab) dari "neda/tuang" yaitu...',
                options: ['Ngaleueut', 'Dahar', 'Korsi', 'Mios'],
                correct: 1,
                explanation: 'Basa loma tina neda/tuang nyaéta dahar.'
            },
            {
                type: 'pg',
                q: '12. "Abdi mios ka sakola, panjenengan rék ... ka mana?" Ragam basa lemes nu tepat nyaéta...',
                t: '12. "Saya pergi ke sekolah, Anda mau ... ke mana?" Ragam bahasa halus yang tepat adalah...',
                options: ['Mios', 'Angkat', 'Balik', 'Indit'],
                correct: 1,
                explanation: 'Keur sorangan: mios. Keur batur/saluhureun: angkat.'
            },
            {
                type: 'pg',
                q: '13. Kecap "Imah" ragam basa lemesna pikeun batur nyaéta...',
                t: '13. Kata "Imah" ragam bahasa halusnya untuk orang lain yaitu...',
                options: ['Rorompok', 'Bumi', 'Gubuk', 'Istana'],
                correct: 1,
                explanation: 'Bumi (lemes keur batur), Rorompok (lemes keur sorangan).'
            },
            {
                type: 'pg',
                q: '14. "Pun bapa nembe mupus tina padamelan." Kecap mupus nu tepat gantina nyaéta...',
                t: '14. "Pun bapa nembe mupus tina padamelan." Kata mupus (salah) yang tepat menggantikannya adalah...',
                options: ['Ulang', 'Mulang', 'Puwang', 'Pangsiun / Mulang'],
                correct: 3,
                explanation: 'Mupus hartina meninggal. Dina konteks gawe nyaeta purna tugas/pangsiun.'
            },
            {
                type: 'pg',
                q: '15. Sabaraha jumlah vokal mandiri (vokal ngalagena/huruf vokal) dina Aksara Sunda Kaganga?',
                t: '15. Berapa jumlah vokal mandiri dalam Aksara Sunda Kaganga?',
                options: ['5', '6', '7', '8'],
                correct: 2,
                explanation: 'Vokal dina Aksara Sunda aya 7 (a, i, u, é, o, e, eu).'
            },
            {
                type: 'pg',
                q: '16. Di handap ieu nu kaasup 7 vokal dina basa Sunda nyaéta...',
                t: '16. Di bawah ini yang termasuk 7 vokal dalam bahasa Sunda yaitu...',
                options: [
                    'a, i, u, e, o, ai, au',
                    'a, i, u, é, o, e, eu',
                    'a, b, c, d, e, f, g',
                    'a, i, u, e, o, ng, ny'
                ],
                correct: 1,
                explanation: '7 vokal Sunda: a, i, u, é, o, e, eu.'
            },
            {
                type: 'pg',
                q: '17. Vokal dina basa Sunda nu dibaca siga dina kecap "Eunteung" atawa "Beureum" nyaéta...',
                t: '17. Vokal dalam bahasa Sunda yang dibaca seperti pada kata "Eunteung" atau "Beureum" yaitu...',
                options: ['é', 'e', 'eu', 'u'],
                correct: 2,
                explanation: 'Kecap eunteung jeung beureum ngagunakeun vokal "eu".'
            },
            {
                type: 'pg',
                q: '18. Bédana lafal vokal /é/ (e taling) jeung /e/ (e pepet) dina basa Sunda nyaéta...',
                t: '18. Perbedaan lafal vokal /é/ (e taling) dan /e/ (e pepet) dalam bahasa Sunda yaitu...',
                options: [
                    '/é/ siga dina "béla", /e/ siga dina "sepi"',
                    '/é/ siga dina "sepi", /e/ siga dina "béla"',
                    Dua-duana dibaca sarua',
                    Henteu aya bédana'
                ],
                correct: 0,
                explanation: 'é (taling) dipaké dina "béla/séréh", e (pepet) dipaké dina "sepi/saha".'
            },
            {
                type: 'pg',
                q: '19. Contoh kecap nu ngagunakeun vokal /é/ (taling) nyaéta...',
                t: '19. Contoh kata yang menggunakan vokal /é/ (taling) yaitu...',
                options: ['Séréh', 'Saha', 'Sangu', 'Susu'],
                correct: 0,
                explanation: 'Séréh ngagunakeun vokal é.'
            },
            {
                type: 'pg',
                q: '20. Rarangkén dina Aksara Sunda nu fungsimina nga-vokalkan jadi huruf "i" nyaéta...',
                t: '20. Rarangkén dalam Aksara Sunda yang fungsinya mengubah vokal menjadi huruf "i" yaitu...',
                options: ['Panghulu', 'Pamepet', 'Paneuleung', 'Panglayar'],
                correct: 0,
                explanation: 'Panghulu nyaéta rarangkén di luhur pikeun ngarobah vokal jadi /i/.'
            },
            {
                type: 'pg',
                q: '21. "Kuring sarapan ku bubur." Basa lemesna kalimah di gigir nyaéta...',
                t: '21. "Saya sarapan dengan bubur." Bahasa halusnya kalimat di samping yaitu...',
                options: [
                    'Abdi sarapan ku bubur',
                    'Abdi neda sarapan ku bubur',
                    'Abdi nujul tuang bubur',
                    'Abdi neda ku bubur'
                ],
                correct: 3,
                explanation: 'Kuring -> abdi, sarapan/dahar -> neda.'
            },
            {
                type: 'pg',
                q: '22. Naon kecap lemesna "Waktu/Jam"?',
                t: '22. Apa kata halus dari "Waktu/Jam"?',
                options: ['Tabuh', 'Siga', 'Dina', 'Kira-kira'],
                correct: 0,
                explanation: 'Jam/Waktu dina basa lemes disebut "Tabuh".'
            },
            {
                type: 'pg',
                q: '23. Dina aksara Sunda, vokal "U" ditulis make rarangkén...',
                t: '23. Dalam aksara Sunda, vokal "U" ditulis menggunakan rarangkén...',
                options: ['Panyuku', 'Panghulu', 'Pamepet', 'Paneuleung'],
                correct: 0,
                explanation: 'Panyuku nyaéta rarangkén di ubub/handap pikeun bunyi /u/.'
            },
            {
                type: 'pg',
                q: '24. Contoh kecap nu bener ngagunakeun vokal /eu/ nyaéta...',
                t: '24. Contoh kata yang benar menggunakan vokal /eu/ yaitu...',
                options: ['Geulis', 'Gelis', 'Gélis', 'Gulis'],
                correct: 0,
                explanation: 'Penulisan baku nyaéta "Geulis".'
            },
            {
                type: 'pg',
                q: '25. Paguneman téh kaasup kana kaparigel (keterampilan) basa...',
                t: '25. Paguneman termasuk ke dalam keterampilan berbahasa...',
                options: ['Maca', 'Nulis', 'Ngarungu jeung Ngabasa/Ngarembug (Berbicara)', 'Nonton'],
                correct: 2,
                explanation: 'Paguneman mangrupa kaparigel berbicara (ngomong/lisan).'
            },

            // --- 5 PILIHAN GANDA KOMPLEKS (26-30) ---
            {
                type: 'pgk',
                q: '26. Pilih 2 (dua) jawaban nu kaasup vokal khas basa Sunda (nu henteu aya dina vokal basa Indonesia baku)!',
                t: '26. Pilih 2 (dua) jawaban yang termasuk vokal khas bahasa Sunda (yang tidak ada dalam vokal bahasa Indonesia baku)!',
                options: ['a', 'eu', 'e (pepet / eunteung)', 'o'],
                correct: [1, 2],
                explanation: 'Vokal /eu/ jeung vokal /e/ (pepet) mangrupa ciri khas vokal dina basa Sunda.'
            },
            {
                type: 'pgk',
                q: '27. Pilih 2 (dua) kecap nu kaasup ragam basa lemes pikeun batur/saluhureun!',
                t: '27. Pilih 2 (dua) kata yang termasuk ragam bahasa halus untuk orang lain/lebih tua!',
                options: ['Tuang', 'Neda', 'Angkat', 'Mios'],
                correct: [0, 2],
                explanation: 'Tuang jeung Angkat dipaké pikeun batur/saluhureun. (Neda & Mios keur sorangan).'
            },
            {
                type: 'pgk',
                q: '28. Pilih 2 (dua) unsur nu kudu diperhatikeun nalika ngalakukan paguneman!',
                t: '28. Pilih 2 (dua) unsur yang harus diperhatikan saat melakukan percakapan!',
                options: [
                    'Lentong (intonasi) suara',
                    'Sikep atawa rengkuh awak',
                    'Warna baju nu dipaké',
                    'Merk HP nu dicepeng'
                ],
                correct: [0, 1],
                explanation: 'Lentong jeung sikep awak (tata krama) penting pisan dina paguneman.'
            },
            {
                type: 'pgk',
                q: '29. Pilih 2 (dua) rupa rarangkén Aksara Sunda nu ditulis di LUHUR huruf ngalagena!',
                t: '29. Pilih 2 (dua) jenis rarangkén Aksara Sunda yang ditulis di ATAS huruf ngalagena!',
                options: ['Panghulu (i)', 'Panyuku (u)', 'Pamepet (e)', 'Panyakat (r)'],
                correct: [0, 2],
                explanation: 'Panghulu jeung Pamepet posisina ada di luhureun aksara.'
            },
            {
                type: 'pgk',
                q: '30. Pilih 2 (dua) kecap nu bener dina penulisan vokal basa Sunda!',
                t: '30. Pilih 2 (dua) kata yang benar dalam penulisan vokal bahasa Sunda!',
                options: ['Leungit', 'Léungit', 'Béda', 'Beda'],
                correct: [0, 2],
                explanation: 'Penulisan nu bener nyaéta "Leungit" jeung "Béda".'
            },

            // --- 5 BENAR / SALAH (31-35) ---
            {
                type: 'bs',
                q: '31. Kecap "Rorompok" nyaéta basa lemes pikeun imah batur.',
                t: '31. Kata "Rorompok" adalah bahasa halus untuk rumah orang lain.',
                options: ['Bener (Benar)', 'Salah'],
                correct: 1,
                explanation: 'Salah. Rorompok dipaké pikeun imah sorangan. Imah batur mah dipaké kecap "Bumi".'
            },
            {
                type: 'bs',
                q: '32. Jumlah vokal mandiri dina Aksara Sunda nyaéta 7 huruf.',
                t: '32. Jumlah vokal mandiri dalam Aksara Sunda adalah 7 huruf.',
                options: ['Bener (Benar)', 'Salah'],
                correct: 0,
                explanation: 'Bener. Nyaéta: a, i, u, é, o, e, eu.'
            },
            {
                type: 'bs',
                q: '33. Paguneman henteu merlukeun aturan tata krama atawa undak-usuk basa.',
                t: '33. Percakapan tidak memerlukan aturan tata krama atau undak-usuk bahasa.',
                options: ['Bener (Benar)', 'Salah'],
                correct: 1,
                explanation: 'Salah. Paguneman dina basa Sunda tetep kedah merhatikeun undak-usuk basa.'
            },
            {
                type: 'bs',
                q: '34. Vokal "é" (taling) jeung "e" (pepet) miboga sora nu béda dina basa Sunda.',
                t: '34. Vokal "é" (taling) dan "e" (pepet) memiliki suara yang berbeda dalam bahasa Sunda.',
                options: ['Bener (Benar)', 'Salah'],
                correct: 0,
                explanation: 'Bener. Contoh: "béla" (taling) jeung "sepi" (pepet).'
            },
            {
                type: 'bs',
                q: '35. Kecap "Wangsul" dipaké pikeun basa lemes puli/pulang keur diri sorangan.',
                t: '35. Kata "Wangsul" digunakan untuk bahasa halus pulang untuk diri sendiri.',
                options: ['Bener (Benar)', 'Salah'],
                correct: 0,
                explanation: 'Bener. Keur sorangan: wangsul. Keur batur: uih.'
            },

            // --- 5 ISIAN SINGKAT (36-40) ---
            {
                type: 'isian',
                q: '36. Sebutkeun basa lemesna kecap "Makan" pikeun batur/guru!',
                t: '36. Sebutkan bahasa halusnya kata "Makan" untuk orang lain/guru!',
                correctKeywords: ['tuang'],
                explanation: 'Kecap lemes makan keur batur/guru nyaéta "Tuang".'
            },
            {
                type: 'isian',
                q: '37. Tuliskeun vokal Sunda nu aya dina kecap "Beureum"!',
                t: '37. Tuliskan vokal Sunda yang ada pada kata "Beureum"!',
                correctKeywords: ['eu'],
                explanation: 'Vokal dina kecap beureum nyaéta "eu".'
            },
            {
                type: 'isian',
                q: '38. Basa lemesna kecap "Imah" pikeun diri sorangan nyaéta...',
                t: '38. Bahasa halusnya kata "Imah" untuk diri sendiri yaitu...',
                correctKeywords: ['rorompok'],
                explanation: 'Imah keur sorangan nyaéta "Rorompok".'
            },
            {
                type: 'isian',
                q: '39. Kalimah pamuka sateuacan ngamutugkeun paguneman biasana ngucapkeun...',
                t: '39. Kalimat pembuka sebelum memulai percakapan biasanya mengucapkan...',
                correctKeywords: ['sampurasun', 'wilujeng', 'assalamualaikum'],
                explanation: 'Salam pamuka contona Sampurasun atawa Wilujeng.'
            },
            {
                type: 'isian',
                q: '40. Rarangkén penanda vokal "i" dina Aksara Sunda nyaéta...',
                t: '40. Rarangkén penanda vokal "i" dalam Aksara Sunda yaitu...',
                correctKeywords: ['panghulu'],
                explanation: 'Panghulu ngarobah sora jadi /i/.'
            },

            // --- 5 URAIAN (41-45) ---
            {
                type: 'uraian',
                q: '41. Jelaskeun naon bedana basa loma jeung basa lemes dina undak-usuk basa Sunda!',
                t: '41. Jelaskan apa bedanya bahasa loma (akrab) dan bahasa lemes (halus) dalam undak-usuk bahasa Sunda!',
                modelAnswer: 'Basa loma dipaké pikeun ngobrol jeung babaturan akrab atawa ka nu leuwih ngora. Sedengkeun basa lemes dipaké pikeun ngobrol jeung nu leuwih kolot, guru, atawa jalma nu anyar dipikawanoh pikeun rasa ngajénan (menghormati).',
                explanation: 'Perhatikan perbedaan penggunaan berdasarkan kawan bicara/hubungan sosial.'
            },
            {
                type: 'uraian',
                q: '42. Tuliskeun 7 vokal nu aya dina Aksara/Basa Sunda lengkap jeung contoh kecapna masing-masing!',
                t: '42. Tuliskan 7 vokal yang ada dalam Aksara/Bahasa Sunda lengkap dengan contoh katanya masing-masing!',
                modelAnswer: '1) a (sangu), 2) i (sami), 3) u (suku), 4) é (béda), 5) o (toko), 6) e (sepi), 7) eu (geulis).',
                explanation: 'Pastikan menyebutkan 7 vokal beserta contoh kata bahasa Sunda yang benar.'
            },
            {
                type: 'uraian',
                q: '43. Jieun hiji contoh dialog (paguneman) pondok antara siswa jeung guru nalika pamitan rék wangsul ti sakola!',
                t: '43. Buatlah satu contoh dialog (percapan) pendek antara siswa dan guru ketika berpamitan mau pulang dari sekolah!',
                modelAnswer: 'Siswa: "Bapak/Ibu, abdi widang wangsul heula nya. Wilujeng siang." \nGuru: "Muhun, kade di jalan ngati-ngati nya!" \nSiswa: "Hatur nuhun, Pak/Bu."',
                explanation: 'Dialog harus menggunakan ragam basa lemes dari siswa kepada guru.'
            },
            {
                type: 'uraian',
                q: '44. Kunaon urang kudu ngagunakeun undak-usuk basa nalika paguneman jeung saluhureun?',
                t: '44. Mengapa kita harus menggunakan undak-usuk bahasa ketika bercakap-cakap dengan orang yang lebih tua?',
                modelAnswer: 'Sangkan nembongkeun rasa sopan santun, ngajénan (menghormati) ka nu leuwih kolot, jeung ngajaga étika tatakrama dina kehidupanna rukun babarengan.',
                explanation: 'Tujuan utama undak usuk basa adalah kesopanan dan saling menghargai.'
            },
            {
                type: 'uraian',
                q: '45. Jelaskeun perbedaan penulisan jeung lafal vokal /e/, /é/, jeung /eu/ dina basa Sunda!',
                t: '45. Jelaskan perbedaan penulisan dan lafal vokal /e/, /é/, dan /eu/ dalam bahasa Sunda!',
                modelAnswer: '/e/ (pepet) dibaca pendek siga pada kata "sepi", /é/ (taling) dibaca miring siga pada kata "béla", sedengkeun /eu/ dibaca dalam tenggorokan siga pada kata "beureum".',
                explanation: 'Ketiga vokal ini membedakan arti dalam bahasa Sunda.'
            }
        ];

        let currentQuestion = 0;
        let userAnswers = {};

        function startQuiz() {
            document.getElementById('welcome-screen').classList.add('hidden');
            document.getElementById('quiz-container').classList.remove('hidden');
            document.getElementById('quiz-progress').classList.remove('hidden');
            renderQuestion();
        }

        function updateBadges() {
            const badges = [
                { id: 'badge-pg', range: [0, 24] },
                { id: 'badge-pgk', range: [25, 29] },
                { id: 'badge-bs', range: [30, 34] },
                { id: 'badge-isian', range: [35, 39] },
                { id: 'badge-uraian', range: [40, 44] }
            ];

            badges.forEach(b => {
                const el = document.getElementById(b.id);
                if (currentQuestion >= b.range[0] && currentQuestion <= b.range[1]) {
                    el.className = 'px-3 py-1.5 rounded-lg bg-emerald-600 text-white font-bold whitespace-nowrap shadow-sm';
                } else {
                    el.className = 'px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 whitespace-nowrap';
                }
            });
        }

        function renderQuestion() {
            const qData = quizData[currentQuestion];
            
            // Progress Text
            document.getElementById('progress-text').innerText = `Soal ${currentQuestion + 1} / 45`;
            document.getElementById('question-number-badge').innerText = `Soal ${currentQuestion + 1} ti 45`;
            
            // Type Label
            const typeLabels = {
                'pg': 'Pilihan Ganda',
                'pgk': 'Pilihan Ganda Kompleks (Pilih >1)',
                'bs': 'Benar / Salah',
                'isian': 'Isian Singkat',
                'uraian': 'Uraian / Essai'
            };
            document.getElementById('question-type-label').innerText = typeLabels[qData.type];

            // Teks & Translate
            document.getElementById('question-text').innerText = qData.q;
            document.getElementById('question-translate').innerText = qData.t;

            // Render Options Container
            const container = document.getElementById('answer-options-container');
            container.innerHTML = '';

            if (qData.type === 'pg' || qData.type === 'bs') {
                qData.options.forEach((opt, idx) => {
                    const isChecked = userAnswers[currentQuestion] === idx;
                    const btn = document.createElement('div');
                    btn.className = `p-4 rounded-xl border-2 cursor-pointer transition flex items-center justify-between ${
                        isChecked ? 'border-emerald-600 bg-emerald-50 text-emerald-900 font-semibold' : 'border-gray-200 hover:border-emerald-300 bg-white'
                    }`;
                    btn.onclick = () => selectSingleOption(idx);
                    btn.innerHTML = `
                        <span>${opt}</span>
                        <div class="w-5 h-5 rounded-full border-2 ${isChecked ? 'border-emerald-600 bg-emerald-600' : 'border-gray-300'} flex items-center justify-center">
                            ${isChecked ? '<i class="fa-solid fa-check text-white text-xs"></i>' : ''}
                        </div>
                    `;
                    container.appendChild(btn);
                });
            } else if (qData.type === 'pgk') {
                const currentSelections = userAnswers[currentQuestion] || [];
                qData.options.forEach((opt, idx) => {
                    const isChecked = currentSelections.includes(idx);
                    const btn = document.createElement('div');
                    btn.className = `p-4 rounded-xl border-2 cursor-pointer transition flex items-center justify-between ${
                        isChecked ? 'border-emerald-600 bg-emerald-50 text-emerald-900 font-semibold' : 'border-gray-200 hover:border-emerald-300 bg-white'
                    }`;
                    btn.onclick = () => toggleMultipleOption(idx);
                    btn.innerHTML = `
                        <span>${opt}</span>
                        <div class="w-5 h-5 rounded border-2 ${isChecked ? 'border-emerald-600 bg-emerald-600' : 'border-gray-300'} flex items-center justify-center">
                            ${isChecked ? '<i class="fa-solid fa-check text-white text-xs"></i>' : ''}
                        </div>
                    `;
                    container.appendChild(btn);
                });
            } else if (qData.type === 'isian') {
                const val = userAnswers[currentQuestion] || '';
                container.innerHTML = `
                    <input type="text" id="input-isian" value="${val}" oninput="saveIsianAnswer(this.value)" placeholder="Tulis jawaban singkat di sini..." 
                           class="w-full p-4 border-2 border-gray-300 rounded-xl focus:border-emerald-600 focus:outline-none text-gray-800">
                `;
            } else if (qData.type === 'uraian') {
                const val = userAnswers[currentQuestion] || '';
                container.innerHTML = `
                    <textarea id="input-uraian" rows="4" oninput="saveUraianAnswer(this.value)" placeholder="Tuliskan jawaban uraian secara lengkap di sini..." 
                              class="w-full p-4 border-2 border-gray-300 rounded-xl focus:border-emerald-600 focus:outline-none text-gray-800 mb-2">${val}</textarea>
                    <button onclick="toggleModelAnswer()" class="text-xs text-emerald-700 hover:underline font-semibold flex items-center gap-1">
                        <i class="fa-solid fa-lightbulb"></i> Tampilkan Kunci/Jawaban Acuan
                    </button>
                    <div id="model-answer-box" class="hidden mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-800">
                        <strong>Jawaban Acuan:</strong><br>${qData.modelAnswer}
                    </div>
                `;
            }

            // Button visibility
            document.getElementById('btn-prev').style.visibility = currentQuestion === 0 ? 'hidden' : 'visible';
            if (currentQuestion === quizData.length - 1) {
                document.getElementById('btn-next').classList.add('hidden');
                document.getElementById('btn-submit').classList.remove('hidden');
            } else {
                document.getElementById('btn-next').classList.remove('hidden');
                document.getElementById('btn-submit').classList.add('hidden');
            }

            updateBadges();
        }

        function selectSingleOption(index) {
            userAnswers[currentQuestion] = index;
            renderQuestion();
        }

        function toggleMultipleOption(index) {
            let currentSelections = userAnswers[currentQuestion] || [];
            if (currentSelections.includes(index)) {
                currentSelections = currentSelections.filter(i => i !== index);
            } else {
                currentSelections.push(index);
            }
            userAnswers[currentQuestion] = currentSelections;
            renderQuestion();
        }

        function saveIsianAnswer(val) {
            userAnswers[currentQuestion] = val;
        }

        function saveUraianAnswer(val) {
            userAnswers[currentQuestion] = val;
        }

        function toggleModelAnswer() {
            const box = document.getElementById('model-answer-box');
            box.classList.toggle('hidden');
        }

        function nextQuestion() {
            if (currentQuestion < quizData.length - 1) {
                currentQuestion++;
                renderQuestion();
            }
        }

        function prevQuestion() {
            if (currentQuestion > 0) {
                currentQuestion--;
                renderQuestion();
            }
        }

        function finishQuiz() {
            let correctCount = 0;

            // Calculate Score for Objective Questions (0-39 / 40 Questions)
            for (let i = 0; i < 40; i++) {
                const q = quizData[i];
                const userAns = userAnswers[i];

                if (q.type === 'pg' || q.type === 'bs') {
                    if (userAns === q.correct) correctCount++;
                } else if (q.type === 'pgk') {
                    if (Array.isArray(userAns)) {
                        const isSame = userAns.length === q.correct.length && 
                                       userAns.every(val => q.correct.includes(val));
                        if (isSame) correctCount++;
                    }
                } else if (q.type === 'isian') {
                    if (typeof userAns === 'string' && userAns.trim() !== '') {
                        const cleaned = userAns.trim().toLowerCase();
                        const isCorrect = q.correctKeywords.some(kw => cleaned.includes(kw));
                        if (isCorrect) correctCount++;
                    }
                }
            }

            document.getElementById('quiz-container').classList.add('hidden');
            document.getElementById('quiz-progress').classList.add('hidden');
            document.getElementById('result-screen').classList.remove('hidden');

            document.getElementById('score-text').innerText = `${correctCount} / 40`;
            const percentage = Math.round((correctCount / 40) * 100);
            document.getElementById('score-percentage').innerText = `Nilai Akhir Objektif: ${percentage}%`;
        }

        function restartQuiz() {
            currentQuestion = 0;
            userAnswers = {};
            document.getElementById('result-screen').classList.add('hidden');
            document.getElementById('welcome-screen').classList.remove('hidden');
        }
    </script>
</body>
</html>
```eof

39,530 chars · codepastes.com