<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TTVS 資科競賽檢定練習系統</title>
    <link rel="icon" href="https://i.imgur.com/P3EVpnQ.png" type="image/png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-database-compat.js"></script>
    <style>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root {
    --primary-color: #3c7a72;
    --secondary-color: #58a794;
    --background-gradient: linear-gradient(135deg, #e0f7fa, #ffffff);
    --button-gradient: linear-gradient(135deg, #3c7a72, #58a794);
    --button-hover-gradient: linear-gradient(135deg, #2b635d, #47a48a);
    --input-border: #16697a33;
    --focus-border: #16697A;
    --shadow-color: rgba(60, 122, 114, 0.3);
    --hover-shadow-color: rgba(60, 122, 114, 0.4);
    --text-color: #2e4744;
    --title-color: #16697A;
    --label-hover-bg: #eef8f6;
    --checked-bg: linear-gradient(135deg, #3c7a72, #58a794);
    --disabled-bg: #c2e7e3;
    --disabled-text: #88bcb1;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; 
    background: 
        url('https://i.imgur.com/mqgSX9L.jpeg') no-repeat center center fixed,
        var(--background-gradient); 
    background-size: cover; 
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background 0.3s ease;
}

.quiz-container {
    width: 90%;
    max-width: 720px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
    overflow: hidden;
    animation: fadeIn 0.7s ease-in-out;
    position: relative;
    line-height: 1.8;
    font-size: 18px;
    backdrop-filter: blur(10px);
}

h1 {
    color: var(--title-color); 
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 1.2px;
}

input[type="text"], input[type="number"], select {
    width: 100%;
    padding: 15px 20px;
    margin: 20px 0;
    font-size: 16px;
    border: 2px solid var(--input-border);
    border-radius: 25px;
    outline: none;
    background: #f7fcfb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus {
    border-color: var(--focus-border);
    box-shadow: 0 4px 12px var(--shadow-color);
}

select {
    appearance: none;
    cursor: pointer;
    background: #f7fcfb url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOCI2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0wLDIgbDQsNEw4LDIgIiBmaWxsPSIjNDQ0Ii8+Cjwvc3ZnPg==') no-repeat right 15px center;
    background-size: 12px;
}

select:hover {
    background-color: var(--label-hover-bg);
}

.start-button, .btn-primary {
    display: block;
    background: var(--button-gradient);
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 15px 30px;
    margin: 30px auto 20px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.start-button:hover, .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--hover-shadow-color);
    background: var(--button-hover-gradient);
}

.question {
    margin-top: 30px;
    font-size: 18px; 
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 20px; 
    line-height: 1.6;
}

.question label {
    display: flex;
    align-items: center;
    gap: 15px; 
    padding: 15px 20px;
    background: #f7fcfb;
    border: 2px solid #c2e7e3;
    border-radius: 20px;
    font-size: 16px;
    color: #444;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s;
    margin-bottom: 10px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.question label:hover {
    background: var(--label-hover-bg);
    border-color: var(--primary-color);
    transform: translateY(-2px); 
}

.question input[type="radio"]:checked + label,
.question input[type="checkbox"]:checked + label {
    background: var(--checked-bg);
    color: #ffffff;
    border-color: var(--primary-color);
}

.question-image, .option-image {
    max-width: 100px;
    max-height: 100px;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.result-section {
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 10px;
    font-size: 16px;
    color: #88bcb1;
    border-top: 1px dashed #c2e7e3;
}

footer a {
    color: #396b65;
    text-decoration: none;
    font-weight: 500;
}

footer a:hover {
    text-decoration: underline;
}

.button {
    display: block; 
    font-family: 'Montserrat', sans-serif;
    font-size: 18px; 
    font-weight: 600;
    color: #ffffff; 
    background: var(--button-gradient);
    border: none;
    border-radius: 30px;
    padding: 15px 30px; 
    margin: 20px auto; 
    cursor: pointer;
    text-align: center; 
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 10px var(--shadow-color); 
}

.button:hover {
    transform: translateY(-3px); 
    box-shadow: 0 6px 15px var(--hover-shadow-color); 
    background: var(--button-hover-gradient); 
}

.button:disabled {
    background: var(--disabled-bg);
    color: var(--disabled-text); 
    cursor: not-allowed; 
    box-shadow: none; 
}

.button:active {
    transform: translateY(1px); 
    box-shadow: 0 2px 6px rgba(60, 122, 114, 0.3); 
}

/* 響應式調整 */
@media (max-width: 600px) {
    .quiz-container {
        padding: 30px 20px;
    }

    h1 {
        font-size: 24px;
    }

    input[type="text"], input[type="number"], select {
        font-size: 14px;
        padding: 12px 16px;
    }

    .start-button, .btn-primary, .button {
        font-size: 16px;
        padding: 12px 25px;
    }

    .question {
        font-size: 16px;
    }

    .question label {
        font-size: 14px;
        padding: 12px 16px;
    }

    .question-image, .option-image {
        max-width: 80px;
        max-height: 80px;
    }
}

        .highlight-correct { color: green; }
        .highlight-incorrect { background-color: yellow; }
        .error-message { color: red; margin-top: 10px; }
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .quiz-container {
            max-width: 600px;
            margin: 0 auto;
        }
        #extraDropdownContainer {
            display: none;
            margin-top: 10px;
        }
        .button {
            margin-top: 10px;
        }
    </style>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XELSWLMFDR"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-XELSWLMFDR');
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (localStorage.getItem('isLoggedIn') !== 'true') {
                alert('由於您尚未登入，按下確定後將返回至首頁進行登入。');
                window.location.href = '../../index.html';
            } else {
                console.log('已登入，用戶可繼續操作');
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const chapterInput = document.getElementById('chapterInput');
            const extraDropdownContainer = document.getElementById('extraDropdownContainer');
            const startQuizBtn = document.getElementById('startQuizBtn');
            const extraChapterInput = document.getElementById('extraChapterInput');
            
            chapterInput.addEventListener('change', function () {
                if (chapterInput.options[chapterInput.selectedIndex].text.includes('[NUTC]金融市場常識與職業道德題庫')) {
                    extraDropdownContainer.style.display = 'block';
                    startQuizBtn.disabled = true;
                } else {
                    extraDropdownContainer.style.display = 'none';
                    startQuizBtn.disabled = false;
                }
            });

            extraChapterInput.addEventListener('change', function () {
                if (extraChapterInput.value !== '') {
                    startQuizBtn.disabled = false;
                } else {
                    startQuizBtn.disabled = true;
                }
            });
        });

        function startQuiz() {
            const chapterInput = document.getElementById('chapterInput');
            const extraChapterInput = document.getElementById('extraChapterInput');
            let selectedChapter;

            if (chapterInput.options[chapterInput.selectedIndex].text.includes('[NUTC]金融市場常識與職業道德題庫')) {
                if (extraChapterInput.value !== '') {
                    selectedChapter = extraChapterInput.value;
                } else {
                    alert('請選擇細分章節');
                    return;
                }
            } else {
                selectedChapter = chapterInput.value;
            }

            console.log('Selected chapter for quiz:', selectedChapter);

            fetchQuestions(selectedChapter);
        }

        function fetchQuestions(chapter) {
            console.log('Fetching questions for chapter:', chapter);
        }
    </script>
</head>
<body>

<div class="quiz-container">
    <h1>自選題測驗系統 🖥️</h1>
    
    <label for="studentIDInput">學號:</label>
    <input type="text" id="studentIDInput" name="studentID" required pattern="\d{6,}" title="學號必須為正確學號" onchange="savePersistentData()">
    
    <label for="nameInput">姓名:</label>
    <input type="text" id="nameInput" name="name" required pattern=".{2,}" title="姓名必須為正確姓名" onchange="savePersistentData()">

    <label for="chapterInput">章節:</label>
    <select id="chapterInput" name="chapter">
        <option value="">請選擇練習內容</option>
        <option value="人工智慧概論國際認證-AI是非題">[國際認證]人工智慧概論國際認證-AI是非題⭕️</option>
        <option value="人工智慧概論國際認證-AI 選擇題">[國際認證]人工智慧概論國際認證-AI 選擇題🔨</option>
        <option value="人工智慧概論國際認證-AI 複選題">[國際認證]人工智慧概論國際認證-AI 複選題🛠️</option>
        <option value="ICT">[國際認證]ICT計算機能力國際認證🖥️</option>
        <option value="分割線">- - - - - 分割線 - - - - - </option>
        <option value="各級共同學科90006~90009">[國家考試勞委會]各級共同學科90006~90009♻️</option>
        <option value="資訊類90011共同學科">[國家考試勞委會]資訊類90011共同學科🖥️</option>
        <option value="分割線">- - - - - 分割線 - - - - - </option>
        <option value="電子商務">[MOCC]電子商務🚚</option>
        <option value="資訊科技">[MOCC]資訊科技🖥️</option>
        <option value="資訊安全">[MOCC]資訊安全ℹ️</option>
        <option value="分割線">- - - - - 分割線 - - - - - </option>
        <option value="">[NUTC]金融市場常識與職業道德題庫</option>
    </select>
    <div id="extraDropdownContainer">
        <label for="extraChapterInput">細分章節:</label>
        <select id="extraChapterInput" name="extraChapter">
            <option value="">請選擇章節</option>
            <option value="1-50題">1到50題</option>
            <option value="51-100">51到100題</option>
            <option value="101-150">101到150題</option>
            <option value="151-200">151到200題</option>
            <option value="201-250">201到250題</option>
            <option value="251-300">251到300題</option>
            <option value="301-350">301到350題</option>
            <option value="351-400">351到400題</option>
            <option value="401-450">401到450題</option>
            <option value="451-500">451到500題</option>
            <option value="501-550">501到550題</option>
            <option value="551-600">551到600題</option>
            <option value="601-650">601到650題</option>
            <option value="651-700">651到700題</option>
            <option value="701-750">701到750題</option>
            <option value="751-800">751到800題</option>
            <option value="801-850">801到850題</option>
            <option value="851-900">851到900題</option>
            <option value="901-950">901到950題</option>
            <option value="951-1000">951到1000題</option>
            <option value="1001-1050">1001到1050題</option>
            <option value="1051-1100">1051到1100題</option>
            <option value="1101-1120">1101到1120題</option>
        </select>
    </div>
    <label for="numQuestionsInput">抽題數:</label>
    <input type="number" id="numQuestionsInput" name="numQuestions" min="20" max="100" placeholder="請輸入抽題數 (至少20題，不超過50題為限)">

    <div id="errorMessage" class="error-message" style="display: none;"></div>

    <form id="quizForm">
        <div id="questionsContainer"></div>
        <button type="button" id="startQuizBtn" class="button btn-primary" onclick="startQuiz()" disabled>開始測驗</button>
        <button type="button" id="submitQuizBtn" class="button btn-success" onclick="completeQuiz()" disabled>完成作答</button>
        <button type="button" id="saveIncorrectBtn" class="button btn-warning" onclick="saveIncorrectQuestions()" style="display:none;">儲存錯題</button>
        <button type="button" id="retakeQuizBtn" class="button btn-secondary" onclick="retakeQuiz()" style="display:none;">重新測驗</button>
    </form>

    <div id="result" class="result-section"></div>

    <footer>
        <p>國立草屯商工 &copy; 2024-2025 <a href="https://www.nasify.org" target="_blank">NasifyTech納啟科技開發</a></p>
    </footer>
</div>
<script>
    (function() {
        let script1 = document.createElement('script');
        script1.src = atob('Li4vLi4vamF2YS9zZWxmdGVzdHN5c2RhdGEuanM=');
        script1.defer = true;
        document.head.appendChild(script1);
    
        let script2 = document.createElement('script');
        script2.src = atob('Li4vLi4vamF2YS9hbnRpRGVidWcuanM=');
        script2.defer = true;
        document.head.appendChild(script2);
    })();
</script>
</body>
</html>
