script.js

document.addEventListener('DOMContentLoaded', () => {
    const scenarioText = document.getElementById('scenario-text');
    const eyeResponseSelect = document.getElementById('eye-response');
    const verbalResponseSelect = document.getElementById('verbal-response');
    const motorResponseSelect = document.getElementById('motor-response');
    const totalScoreSpan = document.getElementById('total-score');
    const submitBtn = document.getElementById('submit-btn');
    const nextBtn = document.getElementById('next-btn');
    const resultContainer = document.getElementById('result-container');
    const showTableBtn = document.getElementById('show-table-btn');
    const gcsTableContainer = document.getElementById('gcs-table-container');
    const hintToggle = document.getElementById('hint-toggle');

    const gcsOptions = {
        eye: [
            { value: 4, text: "自動張眼" },
            { value: 3, text: "對呼喚張眼" },
            { value: 2, text: "對疼痛刺激張眼" },
            { value: 1, text: "沒有反應" }
        ],
        verbal: [
            { value: 5, text: "回答完整且正確" },
            { value: 4, text: "回答錯誤、文不對題" },
            { value: 3, text: "只能說出單詞" },
            { value: 2, text: "只能發出聲音" },
            { value: 1, text: "沒有反應" }
        ],
        motor: [
            { value: 6, text: "遵從指令" },
            { value: 5, text: "對痛刺激能定位" },
            { value: 4, text: "對痛刺激有正常屈曲" },
            { value: 3, text: "對痛刺激有病態屈曲" },
            { value: 2, text: "對痛刺激有伸張反應" },
            { value: 1, text: "沒有反應" }
        ]
    };

    let currentScenario = null;

    function populateSelectWithOptions(selectElement, options, showHints) {
        while (selectElement.options.length > 1) {
            selectElement.remove(1);
        }
        options.forEach(option => {
            const optionElement = document.createElement('option');
            optionElement.value = option.value;
            optionElement.textContent = showHints ? `${option.value} - ${option.text}` : option.value;
            selectElement.appendChild(optionElement);
        });
    }

    function updateAllDropdowns() {
        const showHints = hintToggle.checked;
        populateSelectWithOptions(eyeResponseSelect, gcsOptions.eye, showHints);
        populateSelectWithOptions(verbalResponseSelect, gcsOptions.verbal, showHints);
        populateSelectWithOptions(motorResponseSelect, gcsOptions.motor, showHints);
    }

    function loadScenario() {
        let newScenario;
        do {
            newScenario = scenarios[Math.floor(Math.random() * scenarios.length)];
        } while (scenarios.length > 1 && newScenario === currentScenario);
        currentScenario = newScenario;
        scenarioText.textContent = currentScenario.description;
        resetForm();
    }

    function resetForm() {
        eyeResponseSelect.value = "0";
        verbalResponseSelect.value = "0";
        motorResponseSelect.value = "0";
        updateTotalScore();
        resultContainer.innerHTML = '';
        submitBtn.classList.remove('hidden');
        nextBtn.classList.add('hidden');
        eyeResponseSelect.disabled = false;
        verbalResponseSelect.disabled = false;
        motorResponseSelect.disabled = false;
    }

    function updateTotalScore() {
        const e = parseInt(eyeResponseSelect.value) || 0;
        const v = parseInt(verbalResponseSelect.value) || 0;
        const m = parseInt(motorResponseSelect.value) || 0;
        totalScoreSpan.textContent = e + v + m;
    }

    function checkAnswer() {
        const userE = parseInt(eyeResponseSelect.value) || 0;
        const userV = parseInt(verbalResponseSelect.value) || 0;
        const userM = parseInt(motorResponseSelect.value) || 0;
        const userTotal = userE + userV + userM;
        if (userE === 0 || userV === 0 || userM === 0) {
            resultContainer.innerHTML = `<p class="text-yellow-600 dark:text-yellow-400 font-bold">請完成 E、V、M 三項評估！</p>`;
            return;
        }
        const isCorrect = (userE === currentScenario.e && userV === currentScenario.v && userM === currentScenario.m);
        let resultHTML = '';
        if (isCorrect) {
            resultHTML = `
                <div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-300 p-4 rounded-md shadow-md">
                    <p class="font-bold text-lg">完全正確！</p>
                    <p>你的評估: E${userE} V${userV} M${userM}，總分 ${userTotal}</p>
                </div>
            `;
        } else {
            resultHTML = `
                <div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-4 rounded-md shadow-md">
                    <p class="font-bold text-lg">評估有誤</p>
                    <p>你的評估: E${userE} V${userV} M${userM}，總分 ${userTotal}</p>
                    <p class="mt-2 font-semibold">正確評估: E${currentScenario.e} V${currentScenario.v} M${currentScenario.m}，總分 ${currentScenario.total}</p>
                </div>
            `;
        }
        resultContainer.innerHTML = resultHTML;
        submitBtn.classList.add('hidden');
        nextBtn.classList.remove('hidden');
        eyeResponseSelect.disabled = true;
        verbalResponseSelect.disabled = true;
        motorResponseSelect.disabled = true;
    }

    function toggleGcsTable() {
        gcsTableContainer.classList.toggle('hidden');
    }

    eyeResponseSelect.addEventListener('change', updateTotalScore);
    verbalResponseSelect.addEventListener('change', updateTotalScore);
    motorResponseSelect.addEventListener('change', updateTotalScore);
    submitBtn.addEventListener('click', checkAnswer);
    nextBtn.addEventListener('click', loadScenario);
    showTableBtn.addEventListener('click', toggleGcsTable);
    hintToggle.addEventListener('change', () => {
        const selectedE = eyeResponseSelect.value;
        const selectedV = verbalResponseSelect.value;
        const selectedM = motorResponseSelect.value;
        updateAllDropdowns();
        eyeResponseSelect.value = selectedE;
        verbalResponseSelect.value = selectedV;
        motorResponseSelect.value = selectedM;
    });

    updateAllDropdowns();
    loadScenario();
});