<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow" />
    <title>小羊單字練習系統</title>
    <script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-database-compat.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

    <style>
      * { box-sizing: border-box; }
      :root {
          --primary-color: #4a90e2;
          --secondary-color: #50e3c2;
          --accent-color: #f5a623;
          --background-overlay: rgba(255, 255, 255, 0.8);
          --card-bg: #ffffff; 
          --modal-bg: #ffffff;
          --text-color: #333333;
          --secondary-text: #555555;
          --button-hover: #357ABD;
          --button-active: #2A62A8;
          --correct-color: #28a745;
          --wrong-color: #dc3545;
          --transition-speed: 0.3s;
          --font-family: 'Poppins', sans-serif;
          --border-radius: 10px;
          --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }
      body {
          font-family: var(--font-family);
          margin: 0;
          padding: 0;
          background:
              linear-gradient(var(--background-overlay), var(--background-overlay)),
              url('https://i.imgur.com/acJoGx7.jpeg') no-repeat center center fixed;
          background-size: cover;
          color: var(--text-color);
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          overflow: auto;
      }
      .container {
          width: 90%;
          max-width: 700px;
          background-color: var(--card-bg);
          border-radius: 20px;
          box-shadow: var(--box-shadow);
          padding: 2.5rem 1.875rem;
          box-sizing: border-box;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(0, 0, 0, 0.05);
          animation: fadeIn 0.8s ease-out;
      }
      @keyframes fadeIn {
          from { opacity: 0; transform: scale(0.95); }
          to { opacity: 1; transform: scale(1); }
      }
      header {
          text-align: center;
          margin-bottom: 1.875rem;
      }
      header h1 {
          font-size: 2rem;
          font-weight: 700;
          color: var(--accent-color);
          margin: 0 0 0.625rem 0;
          text-transform: uppercase;
          letter-spacing: 0.125rem;
      }
      main {
          color: var(--text-color);
      }
      #settings {
          margin-bottom: 1.875rem;
      }
      #settings h2 {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          color: var(--text-color);
          text-align: center;
      }
      #settings label {
          font-size: 1rem;
          font-weight: 600;
          color: var(--text-color);
          display: block;
          margin-bottom: 0.5rem;
      }
      #settings select,
      #settings input[type="number"] {
          width: 100%;
          padding: 0.75rem 0.9375rem;
          border: 1px solid #ccc;
          border-radius: var(--border-radius);
          font-size: 1rem;
          margin-bottom: 1.25rem;
          background: #f9f9f9;
          color: var(--text-color);
          outline: none;
          transition: background var(--transition-speed), transform 0.2s, border-color var(--transition-speed);
      }
      #settings select:focus,
      #settings input[type="number"]:focus {
          background: #ffffff;
          border-color: var(--primary-color);
          transform: translateY(-2px);
      }
      #settings button {
          width: 100%;
          padding: 0.875rem;
          background: var(--primary-color);
          color: #fff;
          font-size: 1rem;
          font-weight: 600;
          text-transform: uppercase;
          border: none;
          border-radius: var(--border-radius);
          cursor: pointer;
          transition: background var(--transition-speed), transform 0.2s, box-shadow var(--transition-speed);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      #settings button:hover {
          background: var(--button-hover);
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }
      #settings button:active,
      #settings button:focus {
          background: var(--button-active);
          transform: translateY(0);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }
      #wordInfo {
          font-size: 0.9rem;
          color: var(--secondary-text);
          margin-top: -1rem;
          margin-bottom: 1.25rem;
      }
      #quiz {
          margin-top: 1.875rem;
          display: none;
      }
      #question {
          font-size: 1.375rem;
          font-weight: 700;
          margin-bottom: 1.5625rem;
          text-align: center;
          color: var(--accent-color);
      }
      #options {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 0.9375rem;
      }
      #options button {
          padding: 0.75rem 1.25rem;
          font-size: 1rem;
          font-weight: 600;
          background: #f0f0f0;
          color: var(--text-color);
          border: 1px solid #ccc;
          border-radius: var(--border-radius);
          cursor: pointer;
          transition: background var(--transition-speed), transform 0.2s, box-shadow var(--transition-speed), border-color var(--transition-speed);
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      #options button:hover {
          background: #e6e6e6;
          transform: translateY(-2px);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          border-color: var(--primary-color);
      }
      #options button:active {
          background: #d9d9d9;
          transform: translateY(0);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }
      button.correct {
          background-color: var(--correct-color) !important;
          color: #fff;
          border-color: var(--correct-color) !important;
      }
      button.wrong {
          background-color: var(--wrong-color) !important;
          color: #fff;
          border-color: var(--wrong-color) !important;
      }
      #next {
          width: 100%;
          padding: 0.875rem;
          margin-top: 1.875rem;
          background: var(--secondary-color);
          color: #fff;
          font-size: 1rem;
          font-weight: 600;
          text-transform: uppercase;
          border: none;
          border-radius: var(--border-radius);
          cursor: pointer;
          transition: background var(--transition-speed), transform 0.2s, box-shadow var(--transition-speed);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      #next:disabled {
          background-color: rgba(80, 227, 194, 0.6);
          cursor: not-allowed;
          box-shadow: none;
      }
      #next:hover:not(:disabled) {
          background: #38b48b;
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }
      #next:active:not(:disabled),
      #next:focus:not(:disabled) {
          transform: translateY(0);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }
      #skipToPart2 {
          width: 100%;
          padding: 0.875rem;
          margin-top: 1.875rem;
          background: var(--secondary-color);
          color: #fff;
          font-size: 1rem;
          font-weight: 600;
          text-transform: uppercase;
          border: none;
          border-radius: var(--border-radius);
          cursor: pointer;
          transition: background var(--transition-speed), transform 0.2s, box-shadow var(--transition-speed);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          display: none;
      }
      #skipToPart2:hover {
          background: #38b48b;
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }
      #skipToPart2:active,
      #skipToPart2:focus {
          transform: translateY(0);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }
      #result {
          text-align: center;
          margin-top: 1.875rem;
          display: none;
      }
      #result h2 {
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--accent-color);
          margin-bottom: 0.9375rem;
      }
      #result p {
          font-size: 1rem;
          color: var(--secondary-text);
          margin-bottom: 1.5625rem;
      }
      #restart {
          width: 100%;
          padding: 0.875rem;
          background: #e53935;
          color: #fff;
          font-size: 1rem;
          font-weight: 600;
          text-transform: uppercase;
          border: none;
          border-radius: var(--border-radius);
          cursor: pointer;
          transition: background var(--transition-speed), transform 0.2s, box-shadow var(--transition-speed);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      #restart:hover {
          background: #c62828;
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }
      #restart:active,
      #restart:focus {
          transform: translateY(0);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }
      @media (max-width: 768px) {
          .container {
              padding: 2rem 1.5rem;
          }
          header h1 {
              font-size: 1.75rem;
          }
          #question {
              font-size: 1.25rem;
          }
          #options {
              grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
              gap: 0.625rem;
          }
      }
      @media (max-width: 480px) {
          .container {
              padding: 1.875rem 1rem;
          }
          header h1 {
              font-size: 1.5rem;
          }
          #question {
              font-size: 1.125rem;
          }
          #settings label,
          #settings select,
          #settings input[type="number"],
          #settings button,
          #next,
          #restart,
          #skipToPart2 {
              font-size: 0.875rem;
              padding: 0.625rem;
          }
          #options {
              grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
              gap: 0.625rem;
          }
      }
      button:focus {
          outline: 2px dashed var(--accent-color);
          outline-offset: 4px;
      }
      .modal {
          position: fixed;
          top: 0; left: 0;
          width: 100%; height: 100%;
          background-color: rgba(0, 0, 0, 0.4);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
      }
      .modal-content {
          background-color: var(--modal-bg);
          color: #000;
          padding: 2rem;
          border-radius: var(--border-radius);
          box-shadow: var(--box-shadow);
          text-align: center;
          position: relative;
          width: 90%;
          max-width: 500px;
      }
      .modal-content button {
          margin: 0.5rem;
          padding: 0.5rem 1rem;
          background: var(--primary-color);
          color: #fff;
          border: none;
          border-radius: var(--border-radius);
          cursor: pointer;
          transition: background var(--transition-speed), transform 0.2s, box-shadow var(--transition-speed);
      }
      .modal-content button:hover {
          background: var(--button-hover);
          transform: translateY(-2px);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      }
      .modal-content button:active {
          background: var(--button-active);
          transform: translateY(0);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }
      .modal-content .close {
          position: absolute;
          top: 10px;
          right: 15px;
          font-size: 1.5rem;
          cursor: pointer;
          color: #000;
      }
      .modal-content h3 {
          margin-bottom: 1.5rem;
      }
    </style>
</head>
<body>
    <script>
      const firebaseConfig = {
        apiKey: "AIzaSyCknahg0vqFDiFYDQM1YkS4Sa6j4Eth7ro",
        authDomain: "nasirsweb.firebaseapp.com",
        databaseURL: "https://nasirsweb-default-rtdb.firebaseio.com",
        projectId: "nasirsweb",
        storageBucket: "nasirsweb.firebasestorage.app",
        appId: "1:472577461049:web:00b9cab35ce7b7401bf6e8",
        measurementId: "G-7HZ5KWXJGP"
      };
      firebase.initializeApp(firebaseConfig);
      const db = firebase.database();
    </script>

    <div class="container">
        <header>
            <h1>小羊多益單字練習系統</h1>
        </header>

        <main>
            <div id="settings">
                <h2>測驗設定</h2>
                <label for="testMode">選擇測驗模式：</label>
                <select id="testMode">
                    <option value="vocabulary">單字測驗</option>
                    <option value="reading">閱讀單字</option>
                    <option value="listening">英文聽力測驗</option>
                </select>

                <label for="chapter">選擇章節：</label>
                <select id="chapter">
                </select>

                <label for="wordCount">選擇單字數量：</label>
                <input type="number" id="wordCount" min="1" placeholder="1-10" />
                <div id="wordInfo">可用單字數量：<span id="availableWords">0</span></div>

                <button id="startTest">開始測驗</button>
            </div>

            <div id="quiz">
                <div id="question"></div>
                <div id="options"></div>
                <button id="next" disabled>下一題</button>
                <button id="skipToPart2">跳過第一部分</button>
            </div>

            <div id="result">
                <h2>測驗結果</h2>
                <p id="score"></p>
                <button id="restart">重新測驗</button>
            </div>
        </main>
    </div>
    <div id="readingModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="readingContent"></div>
            <div>
                <button id="readEnglish">朗讀英文</button>
                <button id="readChinese">朗讀中文</button>
            </div>
            <div>
                <button id="prevWord">上一個</button>
                <button id="nextWord">下一個</button>
            </div>
        </div>
    </div>

    <script>
      const chapterSelect = document.getElementById("chapter");
      const wordCountInput = document.getElementById("wordCount");
      const availableWordsEl = document.getElementById("availableWords");

      function loadChapters() {
        db.ref('chapters').once('value').then(snapshot => {
          const chaptersData = snapshot.val() || {};
          chapterSelect.innerHTML = '<option value="">選擇章節</option>';
          Object.entries(chaptersData).forEach(([chapterId, obj]) => {
            const opt = document.createElement('option');
            opt.value = chapterId;
            opt.textContent = obj.name || chapterId;
            chapterSelect.appendChild(opt);
          });
        }).catch(err => console.error(err));
      }
      loadChapters();

      let currentChapterWords = [];

      function loadChapterWords(chapterId) {
        return db.ref(`chapters/${chapterId}/words`).once('value')
          .then(snapshot => {
            const wordsData = snapshot.val() || {};
            currentChapterWords = Object.values(wordsData); 
            return currentChapterWords;
          });
      }

      chapterSelect.addEventListener("change", async () => {
        const chapterId = chapterSelect.value;
        if (chapterId) {
          const words = await loadChapterWords(chapterId);
          const count = words.length;
          availableWordsEl.textContent = count;
          wordCountInput.max = count;
          wordCountInput.placeholder = `1-${count}`;
          wordCountInput.value = Math.min(wordCountInput.value || 1, count);
        } else {
          availableWordsEl.textContent = 0;
          wordCountInput.max = 100;
          wordCountInput.placeholder = "1-100";
          wordCountInput.value = '';
        }
      });

      const state = {
        questions: [],
        currentQuestion: 0,
        score: 0,
        totalQuestions: 0,
        testMode: 'vocabulary',
        currentReadingWordIndex: 0,
      };

      const settingsEl = document.getElementById("settings");
      const quizEl = document.getElementById("quiz");
      const resultEl = document.getElementById("result");
      const questionEl = document.getElementById("question");
      const optionsEl = document.getElementById("options");
      const nextButton = document.getElementById("next");
      const skipButton = document.getElementById("skipToPart2");
      const scoreEl = document.getElementById("score");

      const readingModal = document.getElementById("readingModal");
      const readingContent = document.getElementById("readingContent");
      const closeModalBtn = document.querySelector(".modal-content .close");
      const prevWordBtn = document.getElementById("prevWord");
      const nextWordBtn = document.getElementById("nextWord");
      const readEnglishBtn = document.getElementById("readEnglish");
      const readChineseBtn = document.getElementById("readChinese");

      const testModeSelect = document.getElementById("testMode");
      const startTestBtn = document.getElementById("startTest");
      const restartBtn = document.getElementById("restart");

      startTestBtn.addEventListener("click", startTest);
      nextButton.addEventListener("click", nextQuestion);
      skipButton.addEventListener("click", skipToPart2);
      restartBtn.addEventListener("click", restartTest);

      closeModalBtn.addEventListener("click", closeReadingModal);
      prevWordBtn.addEventListener("click", () => navigateReadingWord(-1));
      nextWordBtn.addEventListener("click", () => navigateReadingWord(1));
      readEnglishBtn.addEventListener("click", () => readWord('en'));
      readChineseBtn.addEventListener("click", () => readWord('zh'));

      async function startTest() {
        const testMode = testModeSelect.value;
        const chapterId = chapterSelect.value;
        if (!chapterId) {
          alert('請先選擇章節');
          return;
        }
        let wordCount = parseInt(wordCountInput.value);
        const maxWords = parseInt(wordCountInput.max);
        if (isNaN(wordCount) || wordCount < 1) {
          alert("請輸入有效的單字數量！");
          return;
        }
        if (wordCount > maxWords) {
          alert(`單字數量不能超過 ${maxWords}！`);
          return;
        }

        const words = currentChapterWords;
        if (words.length === 0) {
          alert("此章節暫無單字可測驗！");
          return;
        }

        wordCount = Math.min(wordCount, words.length);

        const shuffled = shuffleArray([...words]);
        state.questions = shuffled.slice(0, wordCount);

        state.currentQuestion = 0;
        state.score = 0;
        state.testMode = testMode;
        state.totalQuestions = wordCount;

        settingsEl.style.display = "none";

        if (testMode === "vocabulary" || testMode === "listening") {
          quizEl.style.display = "block";
          skipButton.style.display = "inline-block";
          loadQuestion();
        } else if (testMode === "reading") {
          state.currentReadingWordIndex = 0;
          readingModal.style.display = "flex";
          document.body.style.overflow = 'hidden';
          displayReadingWord();
        }
      }

      function loadQuestion() {
        if (state.currentQuestion >= state.totalQuestions) {
          return showResult();
        }
        const current = state.questions[state.currentQuestion];
        if (!current) return;

        if (state.testMode === "vocabulary") {
          questionEl.textContent = `請翻譯以下英文單字： ${current.en}`;
          const options = generateOptions(current.zh, 'zh', state.questions);
          renderOptions(options, current.zh);
        } else if (state.testMode === "listening") {
          questionEl.textContent = "請聽下方中文並選擇正確英文單字：";
          playSound(current.zh, "zh-TW");
          const options = generateOptions(current.en, 'en', state.questions);
          renderOptions(options, current.en);
        }
      }

      function renderOptions(options, correctAnswer) {
        optionsEl.innerHTML = "";
        options.forEach(option => {
          const btn = document.createElement("button");
          btn.textContent = option;
          btn.className = "option-btn";
          btn.addEventListener("click", () => handleAnswer(btn, option, correctAnswer));
          optionsEl.appendChild(btn);
        });
        nextButton.disabled = true;
      }

      function handleAnswer(button, selected, correctAnswer) {
        const correct = selected === correctAnswer;
        const allButtons = optionsEl.getElementsByTagName("button");
        for (let i = 0; i < allButtons.length; i++) {
          allButtons[i].disabled = true;
        }
        if (correct) {
          button.classList.add("correct");
          state.score += 100 / state.totalQuestions;
        } else {
          button.classList.add("wrong");
          for (let i = 0; i < allButtons.length; i++) {
            if (allButtons[i].textContent.trim() === correctAnswer) {
              allButtons[i].classList.add("correct");
              break;
            }
          }
        }
        nextButton.disabled = false;
      }

      function nextQuestion() {
        state.currentQuestion++;
        loadQuestion();
      }

      function skipToPart2() {
        if (state.testMode === "vocabulary" || state.testMode === "listening") {
          state.currentQuestion = state.totalQuestions;
          loadQuestion();
          skipButton.style.display = "none";
        }
      }

      function showResult() {
        quizEl.style.display = "none";
        resultEl.style.display = "block";
        scoreEl.textContent = `總分：${Math.round(state.score)}/100`;
      }

      function restartTest() {
        resultEl.style.display = "none";
        settingsEl.style.display = "block";
        document.body.style.overflow = 'auto';
      }

      function displayReadingWord() {
        const currentIndex = state.currentReadingWordIndex;
        const word = state.questions[currentIndex];
        readingContent.innerHTML = `<h3>${word.en} - ${word.zh}</h3>`;
        prevWordBtn.disabled = currentIndex === 0;
        nextWordBtn.disabled = currentIndex === state.questions.length - 1;
      }

      function closeReadingModal() {
        readingModal.style.display = "none";
        settingsEl.style.display = "block";
        document.body.style.overflow = 'auto';
      }

      function navigateReadingWord(direction) {
        const newIndex = state.currentReadingWordIndex + direction;
        if (newIndex >= 0 && newIndex < state.questions.length) {
          state.currentReadingWordIndex = newIndex;
          displayReadingWord();
        }
      }

      function readWord(language) {
        const word = state.questions[state.currentReadingWordIndex];
        if (language === 'en') {
          if (word.en) {
            playSound(word.en, "en-US");
          }
        } else if (language === 'zh') {
          if (word.zh) {
            playSound(word.zh, "zh-TW");
          }
        }
      }

      window.onclick = function(event) {
        if (event.target == readingModal) {
          closeReadingModal();
        }
      };

      function generateOptions(correct, targetLanguage, questionList) {
        const pool = questionList
          .map(word => word[targetLanguage])
          .filter(word => word !== correct);
        const uniquePool = [...new Set(pool)];
        const shuffledPool = shuffleArray(uniquePool);
        const distractors = shuffledPool.slice(0, 2);
        distractors.push(correct);
        return shuffleArray(distractors);
      }
      function playSound(text, lang = "en-US") {
        if (!text) return;
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = lang;
        utterance.rate = 0.9;
        utterance.pitch = 1.0;
        speechSynthesis.speak(utterance);
      }
      function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
      }
    </script>
</body>
</html>
