<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../accpdbk.ico" type="image/x-icon">
    <title>ACC PDBK - Evaluasi</title>

    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: #f0f8ff;
            margin: 0;
            padding: 0;
        }

        header {
            background: linear-gradient(90deg, #87CEEB, #4682B4);
            color: white;
            padding: 20px;
            text-align: center;
        }

        header h1 {
            font-size: 2em;
        }

        main {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #4682B4;
            text-align: center;
        }

        .question-box {
            margin-bottom: 30px;
            padding: 20px;
            border: 2px solid #4682B4;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background-color: #f9f9f9;
        }

        .question {
            margin-bottom: 20px;
            font-size: 1.3em;
            text-align: center;
            color: #333;
        }

        .options {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .btn-option {
            width: 80%;
            padding: 12px;
            background-color: #4682B4;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1em;
        }

        .btn-option:hover {
            background-color: #87CEEB;
            transform: translateY(-2px);
        }

        .btn-option.selected {
            background-color: #2E8B57;
            transform: scale(1.05);
        }

        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .navigation button {
            padding: 10px 20px;
            background-color: #4682B4;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .navigation button:hover {
            background-color: #87CEEB;
        }

        .navigation button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .progress-bar {
            position: fixed; /* Tetap di posisi layar */
            top: 0; /* Letakkan di bagian paling atas layar */
            left: 0; /* Mulai dari sisi kiri layar */
            width: 100%; /* Lebar penuh */
            background-color: #e0e0e0; /* Warna latar belakang progress bar */
            height: 10px; /* Tinggi progress bar */
            z-index: 1000; /* Pastikan berada di atas elemen lainnya */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
        }
    
        .progress-bar-fill {
            width: 0%; /* Lebar awal progress */
            height: 100%; /* Tinggi penuh untuk isi */
            background-color: #4caf50; /* Warna progress */
            transition: width 0.3s ease; /* Animasi lebar saat progress berubah */
        }
    
        /* Tambahkan padding di atas konten untuk menghindari overlap */
        #question-page {
            padding-top: 20px; /* Ruang untuk progress bar */
        }

        form {
            max-width: 600px; /* Batas lebar maksimal form */
            margin: 20px auto; /* Margin atas/bawah 20px, kiri/kanan auto */
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border: 2px solid #4682B4;
        }

        form input, form select, form button {
            width: calc(100% - 24px); /* Kurangi lebar untuk memberikan margin */
            margin: 12px auto; /* Jarak konsisten atas/bawah 12px */
            padding: 12px;
            font-size: 1em;
            border: 2px solid #4682B4;
            border-radius: 8px;
            outline: none;
            display: block;
        }

        form input:focus, form select:focus {
            border-color: #2E8B57;
            box-shadow: 0 0 5px rgba(46, 139, 87, 0.5);
        }

        form button {
            width: calc(100% - 24px);
            margin: 12px auto;
            background-color: #4682B4;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        form button:hover {
            background-color: #87CEEB;
        }

        /* Responsive untuk layar kecil seperti HP */
        @media screen and (max-width: 768px) {
            body {
                font-size: 14px; /* Ukuran font dasar lebih kecil */
                padding: 10px;
            }

            header {
                padding: 10px;
            }

            header h1 {
                font-size: 1.5em;
            }

            main {
                padding: 15px;
                margin: 10px;
            }

            h2 {
                font-size: 1.2em;
            }

            .question-box {
                padding: 15px;
                font-size: 0.9em; /* Ukuran font lebih kecil */
            }

            .btn-option {
                width: 100%; /* Tombol memenuhi lebar layar */
                font-size: 0.9em; /* Ukuran font tombol lebih kecil */
                padding: 10px;
            }

            .navigation {
                flex-direction: column; /* Susun tombol navigasi vertikal */
                align-items: center;
                gap: 10px;
            }

            .navigation button {
                width: 100%; /* Tombol navigasi memenuhi lebar */
                font-size: 0.9em; /* Ukuran font lebih kecil */
                padding: 10px;
            }

            .progress-bar {
                height: 8px; /* Lebar progress bar lebih kecil */
            }

            form {
                max-width: 100%; /* Form memenuhi layar */
                padding: 15px;
                margin: 10px;
            }

            form input, form select, form button {
                font-size: 0.9em; /* Ukuran font input lebih kecil */
                padding: 10px;
            }

            form button {
                font-size: 0.9em;
            }
        }
        
        /* Tata letak horizontal */
        .options {
            display: flex;
            justify-content: center;
            gap: 15px; /* Jarak antar lingkaran */
            margin-top: 20px;
            flex-direction: row;
        }
        
        /* Desain lingkaran */
        .option-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
            font-weight: bold;
            color: white;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        /* Warna untuk masing-masing opsi */
        .option-circle.option-5 { background-color: #7BAF9E; } /* Hijau Gelap Pastel */
        .option-circle.option-4 { background-color: #A3D7BF; } /* Hijau Pastel */
        .option-circle.option-3 { background-color: #D3D3D3; } /* Abu-abu Lembut */
        .option-circle.option-2 { background-color: #F5B7B1; } /* Merah Muda Pastel */
        .option-circle.option-1 { background-color: #E57373; } /* Merah Lembut */
        
        /* Efek hover */
        .option-circle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }
        
        /* Efek untuk opsi yang dipilih */
        .option-circle.selected {
            border: 3px solid #4682B4; /* Garis tepi biru lembut */
            transform: scale(1.15);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
        }

    </style>
</head>
<body>
    <header>
        <h1>ACC PDBK - Tes</h1>
    </header>

    <main>
        <!-- Bagian Identitas Pengisi -->
        <div id="identity-page">
            <h2>Identitas Pengisi</h2>
            <form id="identity-form" action="../hasil/" method="POST">
                <label for="name">Nama:</label>
                <input type="text" id="name" name="name" required><br>
                <label for="age">Usia:</label>
                <input type="number" id="age" name="age" required><br>
                <label for="gender">Jenis Kelamin:</label>
                <select id="gender" name="gender" required>
                    <option value="">-- Pilih --</option>
                    <option value="Laki-laki">Laki-laki</option>
                    <option value="Perempuan">Perempuan</option>
                </select><br>
                <label for="class">Kelas:</label>
                <input type="text" id="class" name="class" required><br><br>
                <button type="submit">Simpan</button>
            </form>
        </div>

            <!-- Bagian Pertanyaan -->
            <div id="question-page" style="display: none;">
                <h2>Bagian Pertanyaan</h2>
                <div class="progress-bar">
                    <div class="progress-bar-fill" id="progress-bar-fill"></div>
                </div>
                <div id="questions-container"></div>
                <div class="navigation">
                    <button hidden id="prev-btn" onclick="prevPage()">Sebelumnya</button>
                    <button id="next-btn" onclick="nextPage()">Selanjutnya</button>
                </div>
            </div>
    </main>

    <script>
    
        (function checkHash() {
            const urlParams = new URLSearchParams(window.location.search); // Mendapatkan semua parameter di URL
            const hash = urlParams.get('code'); // Ambil nilai 'enc'
        
            if (!hash || hash.trim() === '') {
                // Jika hash tidak ada atau kosong, arahkan ke ../
                window.location.href = '../';
            }
        })();

        const questions = [
            // 1.1.1
            "Apakah kamu merasa wajar jika teman sekelasmu yang berbeda kadang-kadang merasa sedih atau marah?",
            "Apakah kamu akan menghindari teman sekelasmu jika dia terlihat sedih atau murung?",
            "Apakah kamu akan menghakimi teman sekelasmu jika dia melakukan kesalahan?",
            "Apakah kamu berusaha memahami mengapa teman sekelasmu yang berbeda merasa seperti itu, meskipun kamu tidak merasakan hal yang sama?",

            // 1.1.2
            "Apakah kamu merasa senang jika ada teman sekelasmu yang berbeda dari yang lain?",
            "Apakah kamu merasa terganggu jika teman sekelasmu yang berbeda membutuhkan bantuan lebih banyak?",
            "Apakah kamu akan berusaha menghindari bermain dengan teman sekelasmu yang berbeda?",
            "Apakah kamu berpikir bahwa semua teman sekelasmu berhak diperlakukan sama baiknya?",

            // 1.1.3
            "Apakah kamu sering berusaha menghindari teman sekelasmu yang berbeda ketika kamu merasa kesal atau marah padanya?",
            "Apakah kamu merasa tidak nyaman jika harus berinteraksi dengan teman sekelasmu yang berbeda ketika kamu sedang dalam suasana hati yang buruk?",
            "Apakah kamu lebih memilih untuk bermain sendiri daripada bermain dengan teman sekelasmu yang berbeda jika kamu merasa tidak mood?",
            "Apakah kamu merasa sulit untuk fokus pada pelajaran jika teman sekelasmu yang berbeda sedang berbuat gaduh?",

            // 1.1.4
            "Apakah kamu sering memperhatikan perasaanmu ketika berinteraksi dengan teman sekelasmu yang berbeda?",
            "Apakah kamu berusaha untuk memahami mengapa kamu merasa senang, sedih, atau marah ketika bersama teman sekelasmu yang berbeda?",
            "Apakah kamu sering berpikir tentang apa yang dirasakan teman sekelasmu yang berbeda?",
            "Apakah kamu merasa lebih mudah untuk mengendalikan perasaanmu ketika berinteraksi dengan teman sekelasmu yang berbeda setelah kamu memahami apa yang kamu rasakan?",

            // 1.1.5
            "Apakah kamu sering menyalahkan diri sendiri jika terjadi kesalahan ketika berinteraksi dengan teman sekelasmu yang berbeda?",
            "Apakah kamu merasa tidak kompeten jika tidak dapat membantu teman sekelasmu yang berbeda dengan baik?",
            "Apakah kamu sering merasa malu jika melakukan kesalahan di depan teman sekelasmu yang berbeda?",
            "Apakah kamu merasa bahwa kamu tidak cukup baik untuk menjadi teman bagi teman sekelasmu yang berbeda?",

            // Tambahan kelompok lainnya
            // Kelompok pertanyaan lainnya dapat dilanjutkan dalam format serupa...

            // 1.2.1
            "Apakah kamu sering berpikir bahwa teman sekelasmu yang berbeda marah padamu, padahal sebenarnya dia hanya terlihat sedang fokus pada sesuatu?",
            "Apakah kamu yakin bahwa teman sekelasmu yang berbeda tidak menyukai kamu, meskipun dia sering tersenyum padamu?",
            "Apakah kamu sering merasa bahwa teman sekelasmu yang berbeda sengaja membuat kamu marah?",
            "Apakah kamu menyadari bahwa pikiran negatif tentang teman sekelasmu yang berbeda tidak selalu sesuai dengan kenyataan?",

            // 1.2.2
            "Apakah kamu sering membiarkan pikiran negatif tentang teman sekelasmu yang berbeda menghalangimu untuk berinteraksi dengannya?",
            "Apakah kamu berusaha untuk mengganti pikiran negatif tentang teman sekelasmu yang berbeda dengan pikiran yang lebih positif?",
            "Apakah kamu merasa lebih tenang setelah berhasil mengubah pikiran negatif menjadi pikiran positif tentang teman sekelasmu yang berbeda?",
            "Apakah kamu merasa lebih nyaman berinteraksi dengan teman sekelasmu yang berbeda setelah mengurangi pikiran negatif tentangnya?",
            
            // 1.2.3
            "Apakah kamu sering berusaha memahami mengapa teman sekelasmu yang berbeda berperilaku seperti itu?",
            "Apakah kamu mencoba membayangkan bagaimana perasaan teman sekelasmu yang berbeda ketika kamu melakukan sesuatu?",
            "Apakah kamu berpikir bahwa teman sekelasmu yang berbeda memiliki perasaan dan pikiran yang sama seperti kamu?",
            "Apakah kamu lebih sabar dan toleran terhadap teman sekelasmu yang berbeda setelah mencoba memahami sudut pandangnya?",
            
            // 1.2.4
            "Apakah kamu sering mencoba mencari cara baru untuk berinteraksi dengan teman sekelasmu yang berbeda?",
            "Apakah kamu sering mengajukan ide-ide baru untuk kegiatan bersama dengan teman sekelasmu yang berbeda?",
            "Apakah kamu merasa senang ketika berhasil menemukan cara baru untuk membantu teman sekelasmu yang berbeda?",
            "Apakah kamu merasa lebih percaya diri ketika berhasil menghasilkan ide-ide yang unik dalam berinteraksi dengan teman sekelasmu yang berbeda?",
            
            // 1.2.5
            "Apakah kamu merasa sulit untuk mencoba cara baru dalam berinteraksi dengan teman sekelasmu yang berbeda ketika cara lama tidak berhasil?",
            "Apakah kamu merasa tidak nyaman jika teman sekelasmu yang berbeda memiliki cara yang berbeda untuk menyelesaikan tugas?",
            "Apakah kamu sering merasa bahwa hanya ada satu cara yang benar untuk melakukan sesuatu?",
            "Apakah kamu merasa sulit untuk menerima perubahan dalam rutinitas kelas ketika teman sekelasmu yang berbeda membutuhkan penyesuaian?",

            // 1.3.1
            "Apakah kamu sering merasa khawatir tentang kesalahan yang mungkin kamu lakukan saat berinteraksi dengan teman sekelasmu yang berbeda?",
            "Apakah kamu sering membandingkan dirimu dengan teman sekelasmu yang berbeda dan merasa tidak sebaik mereka?",
            "Apakah kamu merasa sulit untuk menikmati momen saat ini ketika sedang bersama teman sekelasmu yang berbeda karena terus memikirkan hal-hal lain?",
            "Apakah kamu sering menyalahkan diri sendiri atas hal-hal yang tidak berjalan sesuai rencana ketika berinteraksi dengan teman sekelasmu yang berbeda?",

            // 1.3.2
            "Apakah kamu sering kesulitan untuk menjelaskan bagaimana perasaanmu ketika berinteraksi dengan teman sekelasmu yang berbeda?",
            "Apakah kamu sering merasa bahwa perasaanmu tidak penting atau tidak valid?",
            "Apakah kamu sering mencoba untuk menekan atau menyembunyikan perasaanmu ketika berinteraksi dengan teman sekelasmu yang berbeda?",
            "Apakah kamu merasa bahwa pikiran dan perasaanmu adalah bagian normal dari dirimu?",
            
            // 1.3.3
            "Apakah kamu sering merasa kesulitan untuk tetap fokus pada percakapan dengan teman sekelasmu yang berbeda ketika ada suara bising di sekitar?",
            "Apakah kamu sering terganggu oleh pikiran lain ketika sedang berinteraksi dengan teman sekelasmu yang berbeda?",
            "Apakah kamu merasa sulit untuk menyelesaikan tugas bersama dengan teman sekelasmu yang berbeda karena mudah teralihkan perhatiannya?",
            "Apakah kamu merasa lebih tenang dan fokus setelah melakukan kegiatan yang membutuhkan konsentrasi penuh, seperti membaca atau bermain game yang menuntut pemikiran?",

            // 1.3.4
            "Apakah kamu menyadari sikap teman yang memiliki kebutuhan khusus nyaman belajar bersamamu?",
            "Pernahkan kamu mencoba mengajak teman untuk sadar kalau peserta didik berkebutuhan khusus juga butuh bantuan dalam proses belajarnya?",
            "Apakah kamu juga berusaha membantu PDBK  dengan kesadaran dalam dirimu sendiri?",
            "Pernahkah kamu dengan sadar mengabaikan siswa berkebutuhan khusus yang sebenarnya butuh bantuan orang lain untuk melakukan sesuatu?",

            // 1.3.5
            "Apakah kamu sering berbagi ide dengan teman-temanmu tentang cara kita semua dapat menjadi teman yang lebih baik bagi teman sekelas kita yang memiliki kebutuhan khusus?",
            "Apakah kamu sering mencoba mencari informasi tentang kondisi teman sekelasmu yang memiliki kebutuhan khusus?",
            "Apakah kamu sering merencanakan kata-kata yang akan kamu gunakan saat berbicara dengan teman sekelasmu yang memiliki kebutuhan khusus?",
            "Apakah kamu sering membayangkan bagaimana kehidupan teman sekelasmu yang memiliki kebutuhan khusus di luar sekolah?",

            // 1.4.1
            "Apakah menurutmu teman dengan kebutuhan khusus juga merupakan teman yang punya peran penting untukmu?",
            "Apakah memberikan bantuan kepada siswa kebutuhan khusus juga menjadi nilai penting dalam dirimu?",
            "Apakah memberikan bantuan kepada siswa kebutuhan khusus bukanlah suatu nilai penting dalam dirimu?",
            "ketika kamu dihadapkan dalam situasi darurat bersama dengan siswa disabilitas apakah  kamu akan menyelamatkan diri dan meninggalkan siswa disabilitas?",

            // 1.4.2
            "Apakah kamu pernah berusaha untuk memahami kesulitan yang dialami teman sekelasmu yang berkebutuhan khusus?",
            "Apakah kamu sering membantu teman sekelasmu yang berkebutuhan khusus dalam mengerjakan tugas atau memahami pelajaran?",
            "Apakah kamu pernah mencoba mencari tahu lebih, bagaimana cara membantu teman berkebutuhan khusus dalam belajarnya?",
            "Apakah kamu ingin temanmu yang berkebutuhan khusus juga memiliki banyak teman di kelas?",

            // 1.4.3
            "Apakah kamu merasa bahwa kamu belajar hal-hal baru dari teman sekelasmu yang berkebutuhan khusus?",
            "Apakah kamu pernah menjadikan siswa yang berkebutuhan khusus sebagai motivasimu untuk terus membantunya?",
            "Jika kamu satu kelompok dengan anak disabilitas di luar sekolah apakah kamu  akan membantu ketika dia menemui kesulitan?",
            "Apakah karena perilaku dari siswa berkebutuhan khusus membuatmu tidak semangat dalam mengikuti pembelajaran?",

            // 1.4.4
            "Apakah kamu pernah merasa iri atau kesal karena guru lebih memperhatikan teman sekelas yang memiliki kebutuhan khusus?",
            "Apakah kamu merasa beruntung menjadi bagian dari kelas inklusi?",
            "Apakah kamu merasa dirugikan karena belajarmu terhambat oleh siswa berkebutuhan khusus?",
            "Apakah kamu pernah mencoba untuk memahami sudut pandang teman sekelas dengan kebutuhan khusus ketika terjadi konflik?",

            // 1.4.5
            "Apakah kamu menyadari bahwa perkataan atau tindakanmu dapat memengaruhi perasaan teman sekelas yang memiliki kebutuhan khusus?",
            "Apakah kamu merasa bahwa teman sekelas yang memiliki kebutuhan khusus juga berhak mendapatkan perlakuan yang sama seperti teman lainnya?",
            "Apakah kamu berpikir bahwa nilai diri yang positif dapat membantu teman sekelas yang memiliki kebutuhan khusus untuk lebih percaya diri?",
            "Apakah kamu merasa bahwa membantu teman sekelas dengan kebutuhan khusus adalah tanggung jawab kita bersama?"
        ];

        let currentPage = 0;
        const questionsPerPage = Math.ceil(questions.length / 3);
        let answers = Array(questions.length).fill(null);
        
        // Cek apakah ada data jawaban di localStorage
        const savedAnswers = localStorage.getItem("answers");
        if (savedAnswers) {
            answers = JSON.parse(savedAnswers);
        } else {
            answers = new Array(questions.length).fill(null);
        }

        const form = document.getElementById('identity-form');
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            const name = document.getElementById('name').value;
            const age = document.getElementById('age').value;
            const gender = document.getElementById('gender').value;
            const classValue = document.getElementById('class').value;

            // Simpan ke localStorage
            localStorage.setItem('name', name);
            localStorage.setItem('age', age);
            localStorage.setItem('gender', gender);
            localStorage.setItem('class', classValue);

            // Tampilkan halaman pertanyaan
            document.getElementById('identity-page').style.display = 'none';
            document.getElementById('question-page').style.display = 'block';

            // Scroll ke atas
            window.scrollTo(0, 0);

            // Render pertanyaan pertama
            renderQuestions();
        });

        function renderQuestions() {
            const container = document.getElementById("questions-container");
            container.innerHTML = "";
            const start = currentPage * questionsPerPage;
            const end = Math.min(start + questionsPerPage, questions.length);
        
            for (let i = start; i < end; i++) {
                const selectedAnswer = answers[i] || null;
                
                const questionHTML = `
                    <div class="question-box">
                        <div class="question">
                            ${questions[i]}
                        </div>
                        <div class="options">
                            <div class="option-circle option-5 ${selectedAnswer === 5 ? 'selected' : ''}" id="setuju-${i}" onclick="selectAnswer(${i}, 5, 'setuju-${i}')"></div>
                            <div class="option-circle option-4 ${selectedAnswer === 4 ? 'selected' : ''}" id="cukupsetuju-${i}" onclick="selectAnswer(${i}, 4, 'cukupsetuju-${i}')"></div>
                            <div class="option-circle option-3 ${selectedAnswer === 3 ? 'selected' : ''}" id="netral-${i}" onclick="selectAnswer(${i}, 3, 'netral-${i}')"></div>
                            <div class="option-circle option-2 ${selectedAnswer === 2 ? 'selected' : ''}" id="kurangsetuju-${i}" onclick="selectAnswer(${i}, 2, 'kurangsetuju-${i}')"></div>
                            <div class="option-circle option-1 ${selectedAnswer === 1 ? 'selected' : ''}" id="tidaksetuju-${i}" onclick="selectAnswer(${i}, 1, 'tidaksetuju-${i}')"></div>
                        </div>
                    </div>`;
                container.innerHTML += questionHTML;
            }
        
            updateButtons();
        }
        
        function selectAnswer(index, score, buttonId) {
            answers[index] = score;
            localStorage.setItem("answers", JSON.stringify(answers)); // Simpan ke localStorage
        
            // Hapus kelas 'selected' dari semua lingkaran jawaban pada pertanyaan ini
            document.querySelectorAll(`#setuju-${index}, #cukupsetuju-${index}, #netral-${index}, #kurangsetuju-${index}, #tidaksetuju-${index}`)
                .forEach(circle => circle.classList.remove('selected'));
        
            // Tambahkan kelas 'selected' pada lingkaran yang dipilih
            document.getElementById(buttonId).classList.add('selected');
        
            updateButtons();
            updateProgressBar();
        }

        function updateProgressBar() {
            const totalAnswered = answers.filter(a => a !== null).length;
            const progress = (totalAnswered / questions.length) * 100;
            document.getElementById("progress-bar-fill").style.width = progress + "%";
        }

        function updateButtons() {
            const start = currentPage * questionsPerPage;
            const end = Math.min(start + questionsPerPage, questions.length);
            const allAnswered = answers.slice(start, end).every(a => a !== null);

            document.getElementById("next-btn").disabled = !allAnswered;
            document.getElementById("prev-btn").disabled = currentPage === 0;
        }

        function nextPage() {
            if (currentPage < Math.ceil(questions.length / questionsPerPage) - 1) {
                currentPage++;
                renderQuestions();
                window.scrollTo(0, 0); // Scroll ke atas
            } else {
                sendToAPI();
            }
        }

        function prevPage() {
            if (currentPage > 0) {
                currentPage--;
                renderQuestions();
                window.scrollTo(0, 0); // Scroll ke atas
            }
        }
        
        function sendToAPI() {
            // Ambil data dari localStorage
            const name = localStorage.getItem("name") || "";
            const age = localStorage.getItem("age") || "";
            const gender = localStorage.getItem("gender") || "";
            const userClass = localStorage.getItem("class") || "";
            const answers = JSON.parse(localStorage.getItem("answers")) || [];
        
            // Pastikan answers tidak kosong
            if (answers.length === 0) {
                alert("Jawaban tidak ditemukan! Pastikan Anda telah menjawab semua pertanyaan.");
                return;
            }
        
            // Hitung total skor
            const totalScore = answers.reduce((a, b) => a + (b || 0), 0);
        
            // Rentang skor
            const minScore = 80;
            const maxScore = 400;
            const range = (maxScore - minScore) / 5;
        
            // Ambang batas kategori
            const veryLowThreshold = minScore + range;
            const lowThreshold = minScore + 2 * range;
            const mediumThreshold = minScore + 3 * range;
            const highThreshold = minScore + 4 * range;
        
            // Tentukan kategori
            let category, categoryColor;
            if (totalScore < veryLowThreshold) {
                category = "Sangat Rendah";
                categoryColor = "#E57373";
            } else if (totalScore < lowThreshold) {
                category = "Rendah";
                categoryColor = "#F5B7B1";
            } else if (totalScore < mediumThreshold) {
                category = "Sedang";
                categoryColor = "#D3D3D3";
            } else if (totalScore < highThreshold) {
                category = "Tinggi";
                categoryColor = "#A3D7BF";
            } else {
                category = "Sangat Tinggi";
                categoryColor = "#7BAF9E";
            }
        
            // Siapkan data dalam format x-www-form-urlencoded
            const requestData = new URLSearchParams();
            requestData.append("name", name);
            requestData.append("age", age);
            requestData.append("gender", gender);
            requestData.append("class", userClass);
            requestData.append("score", totalScore);
            requestData.append("category", category);
            requestData.append("categoryColor", categoryColor);
            
            // Konversi array answers menjadi format yang bisa dikirim
            answers.forEach((answer, index) => {
                requestData.append(`answers[${index}]`, answer);
            });
        
            // Kirim data ke API
            fetch("https://avalyn.pw/api/accpdbk/", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: requestData
            })
            .then(response => response.json())
            .then(data => {
                console.log("Berhasil dikirim:", data);
                submitAnswers();
                // Bersihkan jawaban setelah sukses dikirim
                localStorage.removeItem("answers");
            })
            .catch(error => {
                console.error("Gagal mengirim data:", error);
                alert("Terjadi kesalahan saat mengirim jawaban.");
            });
        }

        function submitAnswers() {
            const totalScore = answers.reduce((a, b) => a + b, 0);

            // Buat input tersembunyi untuk skor dan jawaban
            const form = document.getElementById("identity-form");
            const scoreInput = document.createElement("input");
            scoreInput.type = "hidden";
            scoreInput.name = "score";
            scoreInput.value = totalScore;
            form.appendChild(scoreInput);

            // Tambahkan identitas dari localStorage ke dalam form
            const nameInput = document.createElement("input");
            nameInput.type = "hidden";
            nameInput.name = "name";
            nameInput.value = localStorage.getItem("name");
            form.appendChild(nameInput);

            const ageInput = document.createElement("input");
            ageInput.type = "hidden";
            ageInput.name = "age";
            ageInput.value = localStorage.getItem("age");
            form.appendChild(ageInput);

            const genderInput = document.createElement("input");
            genderInput.type = "hidden";
            genderInput.name = "gender";
            genderInput.value = localStorage.getItem("gender");
            form.appendChild(genderInput);

            const classInput = document.createElement("input");
            classInput.type = "hidden";
            classInput.name = "class";
            classInput.value = localStorage.getItem("class");
            form.appendChild(classInput);

            // Submit formulir
            form.submit();
        }

    </script>
</body>
</html>