<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title>CBL AC Tidak Dingin</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f3f4f6;
            margin: 0;
            padding: 30px;
        }

        .container {
            max-width: 900px;
            margin: auto;
        }

        .card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }

        h1 {
            margin-top: 0;
        }

        .choice {
            width: 100%;
            text-align: left;
            border: none;
            background: #2563eb;
            color: white;
            padding: 14px;
            margin-top: 10px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 15px;
        }

        .choice:hover {
            background: #1d4ed8;
        }

        .feedback {
            background: #eef2ff;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
        }

        .back-btn {
            background: #dc2626;
            margin-top: 20px;
        }

        .result-option {
            width: 100%;
            text-align: left;
            border: 1px solid #ccc;
            background: white;
            padding: 12px;
            margin-top: 10px;
            border-radius: 8px;
            cursor: pointer;
        }

        .score-box {
            background: #ecfccb;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        ul {
            padding-left: 20px;
        }

        .debug {
            background: #111827;
            color: white;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 13px;
            overflow: auto;
        }
    </style>
</head>

<body>

    <div class="container">

        <div id="app"></div>

        <div class="debug">

            <h3>DEBUG MEMORY</h3>

            <pre id="debug"></pre>

        </div>

    </div>

    <script>

        /*
        |--------------------------------------------------------------------------
        | MEMORY ONLY
        |--------------------------------------------------------------------------
        |
        | Refresh browser = reset otomatis
        |
        */

        let quiz = {

            /*
            |--------------------------------------------------------------------------
            | JEJAK KEPUTUSAN
            |--------------------------------------------------------------------------
            |
            | Tidak dihapus walaupun user back.
            |
            */

            activePath: [],

            /*
            |--------------------------------------------------------------------------
            | HISTORY UI
            |--------------------------------------------------------------------------
            */

            historyStack: [],

            /*
            |--------------------------------------------------------------------------
            | CURRENT STEP
            |--------------------------------------------------------------------------
            */

            currentStep: 'START'

        };

        /*
        |--------------------------------------------------------------------------
        | APP
        |--------------------------------------------------------------------------
        */

        const app =
            document.getElementById('app');

        /*
        |--------------------------------------------------------------------------
        | DEBUG
        |--------------------------------------------------------------------------
        */

        function renderDebug() {
            document.getElementById('debug').innerHTML =
                JSON.stringify(
                    quiz,
                    null,
                    4
                );
        }

        /*
        |--------------------------------------------------------------------------
        | CASE DATA
        |--------------------------------------------------------------------------
        */

        const CASE = {

            START: {

                question: `

            <div class="card">

                <h1>AC Tidak Dingin Sama Sekali</h1>

                <p>
                Seorang pelanggan melaporkan bahwa AC split di ruang tamu
                tidak lagi menghasilkan udara dingin.
                </p>

                <ul>
                    <li>Suhu ruangan: 31°C</li>
                    <li>Setpoint AC: 20°C</li>
                    <li>Udara keluar: terasa seperti suhu ruangan</li>
                    <li>Outdoor unit aktif</li>
                    <li>Tidak ada bunyi aneh</li>
                </ul>

                <h3>
                Apa kemungkinan penyebab awal dari kondisi ini?
                </h3>

            </div>

        `,

                choices: [

                    {
                        code: 'A',
                        text: 'Mengukur Tekanan Refrigeran',
                        feedback:
                            'Tepat. Anda langsung mengarah ke sistem utama pendinginan.',
                        next: 'A_BRANCH'
                    },

                    {
                        code: 'B',
                        text: 'Mengecek Arus Kompresor',
                        feedback:
                            'Cukup tepat. Arus rendah dapat disebabkan oleh dua kemungkinan.',
                        next: 'B_BRANCH'
                    },

                    {
                        code: 'C',
                        text: 'Membersihkan Filter Udara',
                        feedback:
                            'Kurang tepat. Filter kotor biasanya tidak menyebabkan AC tidak dingin total.',
                        next: null
                    },

                    {
                        code: 'D',
                        text: 'Mengecek Sensor Suhu',
                        feedback:
                            'Kurang tepat. Sensor suhu biasanya memengaruhi siklus kerja.',
                        next: null
                    }

                ]
            },

            A_BRANCH: {

                question: `

            <div class="card">

                <h3>Cabang A</h3>

                <p>
                Tekanan refrigeran berada di bawah standar.
                </p>

            </div>

        `,

                choices: [

                    {
                        code: 'A1',
                        text: 'Cek kebocoran sistem',
                        feedback:
                            'Tepat. Kebocoran adalah penyebab paling umum.',
                        final: true
                    },

                    {
                        code: 'A2',
                        text: 'Tambah refrigeran langsung',
                        feedback:
                            'Tidak tepat. Menambah refrigeran tanpa mencari kebocoran hanya sementara.',
                        final: true
                    }

                ]
            },

            B_BRANCH: {

                question: `

            <div class="card">

                <h3>Cabang B</h3>

                <p>
                Arus kompresor lebih rendah dari normal.
                </p>

            </div>

        `,

                choices: [

                    {
                        code: 'B1',
                        text: 'Ukur tekanan refrigeran',
                        feedback:
                            'Tepat. Anda melakukan verifikasi data.',
                        next: 'A_BRANCH'
                    },

                    {
                        code: 'B2',
                        text: 'Ganti kompresor',
                        feedback:
                            'Tidak tepat. Penggantian kompresor terlalu cepat.',
                        final: true
                    }

                ]
            }

        };

        /*
        |--------------------------------------------------------------------------
        | EVALUATION
        |--------------------------------------------------------------------------
        */

        const EVALUATION = {

            'A-A1': {
                score: 10,
                answer: 'A',
                explanation:
                    'Tekanan rendah dan kebocoran menunjukkan refrigeran berkurang akibat kebocoran.'
            },

            'A-A2': {
                score: 4,
                answer: 'A',
                explanation:
                    'Menambah refrigeran tanpa mencari kebocoran bukan solusi utama.'
            },

            'B-B1-A1': {
                score: 9,
                answer: 'A',
                explanation:
                    'Arus rendah lalu tekanan rendah dan kebocoran menunjukkan masalah refrigeran.'
            },

            'B-B2': {
                score: 2,
                answer: 'B',
                explanation:
                    'Arus rendah belum cukup menyatakan kompresor rusak.'
            },

            'C-A-A1': {
                score: 7,
                answer: 'B',
                explanation:
                    'Filter sedikit kotor bukan penyebab utama.'
            },

            'D-A-A1': {
                score: 7,
                answer: 'B',
                explanation:
                    'Sensor normal sehingga bukan penyebab utama.'
            },

            'C': {
                score: 3,
                answer: 'D',
                explanation:
                    'Data belum cukup.'
            },

            'D': {
                score: 3,
                answer: 'D',
                explanation:
                    'Data belum cukup.'
            }

        };

        /*
        |--------------------------------------------------------------------------
        | RENDER STEP
        |--------------------------------------------------------------------------
        */

        function renderStep(stepKey) {
            quiz.currentStep =
                stepKey;

            renderDebug();

            const step =
                CASE[stepKey];

            let html =
                step.question;

            step.choices.forEach(choice => {

                html += `

            <button
                class="choice"
                onclick="
                    choose(
                        '${choice.code}',
                        '${stepKey}'
                    )
                "
            >

                ${choice.code}.
                ${choice.text}

            </button>

        `;
            });

            app.innerHTML =
                html;
        }

        /*
        |--------------------------------------------------------------------------
        | CHOOSE
        |--------------------------------------------------------------------------
        */

        function choose(code, fromStep) {
            /*
            |--------------------------------------------------------------------------
            | SIMPAN UI HISTORY
            |--------------------------------------------------------------------------
            */

            quiz.historyStack.push(
                app.innerHTML
            );

            /*
            |--------------------------------------------------------------------------
            | SIMPAN JEJAK KEPUTUSAN
            |--------------------------------------------------------------------------
            |
            | Tidak dihapus walaupun back.
            |
            */

            quiz.activePath.push(code);

            renderDebug();

            const step =
                CASE[fromStep];

            const selected =
                step.choices.find(
                    c => c.code === code
                );

            let html = `

        <div class="card">

            <div class="feedback">

                <strong>
                    ${code}
                </strong>

                <br><br>

                ${selected.feedback}

            </div>

    `;

            /*
            |--------------------------------------------------------------------------
            | NEXT
            |--------------------------------------------------------------------------
            */

            if (selected.next) {

                html += `

            <button
                class="choice"
                onclick="
                    renderNext(
                        '${selected.next}'
                    )
                "
            >
                Lanjut
            </button>

        `;
            }

            /*
            |--------------------------------------------------------------------------
            | FINAL
            |--------------------------------------------------------------------------
            */

            if (selected.final || !selected.next) {

                html += `

            <button
                class="choice"
                onclick="
                    showFinalEvaluation()
                "
            >
                Evaluasi Akhir
            </button>

        `;
            }

            /*
            |--------------------------------------------------------------------------
            | BACK
            |--------------------------------------------------------------------------
            */

            html += `

        <button
            class="choice back-btn"
            onclick="goBack()"
        >
            ← Kembali
        </button>

    `;

            html += `</div>`;

            app.innerHTML =
                html;
        }

        /*
        |--------------------------------------------------------------------------
        | NEXT
        |--------------------------------------------------------------------------
        */

        function renderNext(step) {
            renderStep(step);
        }

        /*
        |--------------------------------------------------------------------------
        | BACK
        |--------------------------------------------------------------------------
        |
        | BACK HANYA UNTUK UI
        | TIDAK MENGHAPUS activePath
        |
        */

        function goBack() {
            if (quiz.historyStack.length > 0) {

                app.innerHTML =
                    quiz.historyStack.pop();
            }

            renderDebug();
        }

        /*
        |--------------------------------------------------------------------------
        | FINAL EVALUATION
        |--------------------------------------------------------------------------
        */

        function showFinalEvaluation() {
            const path =
                quiz.activePath.join('-');

            const evalData =
                EVALUATION[path];

            if (!evalData) {

                app.innerHTML = `

            <div class="card">

                <h2>
                    Evaluasi Tidak Ditemukan
                </h2>

                <p>
                    Jalur:
                    ${path}
                </p>

            </div>

        `;

                return;
            }

            let html = `

        <div class="card">

            <h2>
                Evaluasi Akhir
            </h2>

            <div class="score-box">

                <h3>
                    Jalur:
                    ${path}
                </h3>

                <h3>
                    Skor:
                    ${evalData.score}
                </h3>

                <p>
                    ${evalData.explanation}
                </p>

            </div>

            <h3>
                Apa penyebab utama?
            </h3>

    `;

            const options = {

                A: 'Refrigeran berkurang akibat kebocoran sistem',

                B: 'Kompresor rusak',

                C: 'Filter udara kotor',

                D: 'Sensor suhu rusak'

            };

            Object.entries(options).forEach(([key, text]) => {

                html += `

            <button
                class="result-option"
                onclick="
                    checkFinalAnswer(
                        '${key}',
                        '${evalData.answer}'
                    )
                "
            >

                ${key}.
                ${text}

            </button>

        `;
            });

            html += `</div>`;

            app.innerHTML =
                html;
        }

        /*
        |--------------------------------------------------------------------------
        | CHECK ANSWER
        |--------------------------------------------------------------------------
        */

        function checkFinalAnswer(answer, correct) {
            if (answer === correct) {

                alert('✔ Jawaban Tepat');

            } else {

                alert('❌ Jawaban Belum Tepat');
            }
        }

        /*
        |--------------------------------------------------------------------------
        | START
        |--------------------------------------------------------------------------
        */

        renderStep('START');

        renderDebug();

    </script>

</body>

</html><?php /**PATH D:\Yudi\WEB\project\a\project_learning\resources\views/quiz2.blade.php ENDPATH**/ ?>