First

static/script.js

@@ -6,6 +6,8 @@
 let learningData = null;    // 学習データ (learning.html用)
 let currentItemIndex = 0;   // 現在表示中のアイテムインデックス (learning.html用)
 let currentMode = 'quiz';   // 現在のモード 'quiz' or 'summary' (learning.html用)
+let correctEffectTimeout;   // 正解エフェクト非表示用のタイマーID (learning.html用)
+let correctEffect = null;   // 正解エフェクト要素 (learning.html用)
 
 // --- 共通関数 ---
 
@@ -23,28 +25,43 @@ function navigateTo(url) {
  */
 function openMenu() {
     console.log("Menu button clicked. Implement menu display logic here.");
-    // 例: サイドバーメニューを表示する、モーダルを表示するなど
     alert("メニュー機能は未実装です。\nフッターのナビゲーションを使用してください。");
 }
 
 /**
  * ローディングスピナーを表示/非表示します。
  * @param {boolean} show - trueで表示、falseで非表示
+ * @param {string} buttonId - 操作対象のボタンID (input.html用)
  */
-function toggleLoading(show) {
-    const spinner = document.querySelector('.loading-spinner'); // input.html用
-    const buttonText = document.querySelector('.button-text'); // input.html用
-    const generateButton = document.getElementById('generate-button'); // input.html用
-
-    if (spinner && buttonText && generateButton) {
-        spinner.style.display = show ? 'inline-block' : 'none';
-        buttonText.textContent = show ? '生成中...' : '生成する';
-        generateButton.disabled = show;
+function toggleLoading(show, buttonId = 'generate-button') {
+    const generateButton = document.getElementById(buttonId);
+    if (!generateButton) return;
+
+    const spinner = generateButton.querySelector('.loading-spinner');
+    const buttonText = generateButton.querySelector('.button-text');
+
+    if (show) {
+        generateButton.disabled = true;
+        if (spinner) spinner.style.display = 'inline-block';
+        if (buttonText) buttonText.textContent = '生成中...';
+    } else {
+        generateButton.disabled = false;
+        if (spinner) spinner.style.display = 'none';
+        if (buttonText) buttonText.textContent = '生成する'; // 元のテキストに戻す
     }
-    // learning.html 用のローディング表示/非表示も必要に応じて追加
-    const loadingCard = document.getElementById('loading-card-indicator'); // 仮のID
-    if (loadingCard) {
-        loadingCard.style.display = show ? 'block' : 'none';
+
+    // learning.html 用のローディング表示/非表示
+    const loadingIndicator = document.getElementById('mode-indicator');
+    const cardElement = document.getElementById('learning-card');
+    const paginationElement = document.querySelector('.pagination');
+    const optionsArea = document.getElementById('options-area');
+
+    if (pathname === '/learning') { // learning.htmlの場合のみ
+        if (loadingIndicator) loadingIndicator.textContent = show ? '読み込み中...' : ''; // モード表示はdisplayCurrentItemで行う
+        if (loadingIndicator) loadingIndicator.classList.toggle('loading', show);
+        if (cardElement) cardElement.style.opacity = show ? '0.5' : '1';
+        if (paginationElement) paginationElement.style.display = show ? 'none' : 'flex';
+        if (optionsArea) optionsArea.style.display = show ? 'none' : 'block'; // 初期はblockだがdisplayCurrentItemで調整
     }
 }
 
@@ -96,23 +113,40 @@ async function handleGenerateSubmit() {
 
     if (!youtubeUrl) {
         displayErrorMessage('YouTubeリンクを入力してください。');
-        return false; // prevent default form submission
+        return false;
     }
 
-    // 簡単なURL形式チェック（より厳密なチェックも可能）
-    if (!youtubeUrl.includes('youtube.com/') && !youtubeUrl.includes('youtu.be/')) {
-         displayErrorMessage('有効なYouTubeリンクを入力してください。');
+    // 簡単なURL形式チェック
+    try {
+        const urlObj = new URL(youtubeUrl);
+        if (!['www.youtube.com', 'youtube.com', 'youtu.be'].includes(urlObj.hostname)) {
+            throw new Error('Invalid hostname');
+        }
+        // youtu.be/XXX または youtube.com/watch?v=XXX の形式を期待
+        if (urlObj.hostname === 'youtu.be' && !urlObj.pathname.substring(1)) {
+             throw new Error('Missing video ID for youtu.be');
+        }
+        if (urlObj.hostname.includes('youtube.com') && urlObj.pathname === '/watch' && !urlObj.searchParams.get('v')) {
+            throw new Error('Missing video ID for youtube.com/watch');
+        }
+         if (urlObj.hostname.includes('youtube.com') && urlObj.pathname.startsWith('/shorts/') && !urlObj.pathname.substring(8)) {
+             throw new Error('Missing video ID for youtube.com/shorts');
+         }
+
+    } catch (e) {
+         displayErrorMessage('有効なYouTube動画リンクを入力してください。(例: https://www.youtube.com/watch?v=...)');
          return false;
     }
 
 
-    toggleLoading(true); // ローディング開始
+    toggleLoading(true, 'generate-button'); // ローディング開始
 
     try {
         const response = await fetch('/api/generate', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
+                'Accept': 'application/json', // サーバーがJSONを返すことを期待
             },
             body: JSON.stringify({ url: youtubeUrl }),
         });
@@ -121,19 +155,29 @@ async function handleGenerateSubmit() {
 
         if (response.ok && result.success && result.data && result.data.id) {
             // 成功したら学習画面へ遷移
-            alert('生成に成功しました！学習画面に移動します。');
+            // alert('生成に成功しました！学習画面に移動します。'); // すぐ遷移するので不要かも
             goToLearning(result.data.id);
         } else {
             // 失敗したらエラーメッセージ表示
             console.error('Generation failed:', result);
-            displayErrorMessage(result.message || '生成中にエラーが発生しました。');
+            // サーバーからのメッセージがあれば表示、なければ汎用メッセージ
+            const serverMessage = result.message || (result.error ? result.error.message : null);
+            displayErrorMessage(serverMessage || '生成中に不明なエラーが発生しました。');
         }
 
     } catch (error) {
         console.error('Error during generation request:', error);
-        displayErrorMessage('通信エラーが発生しました。');
+        // ネットワークエラーか、JSONパースエラーか
+        if (error instanceof SyntaxError) {
+             displayErrorMessage('サーバーからの応答形式が不正です。');
+        } else if (error instanceof TypeError) {
+            displayErrorMessage('通信エラーが発生しました。ネットワーク接続を確認してください。');
+        }
+         else {
+            displayErrorMessage(`通信エラーが発生しました: ${error.message}`);
+        }
     } finally {
-        toggleLoading(false); // ローディング終了
+        toggleLoading(false, 'generate-button'); // ローディング終了
     }
 
     return false; // prevent default form submission
@@ -149,9 +193,9 @@ async function initializeLearningScreen() {
     console.log('Initializing Learning Screen...');
     const params = new URLSearchParams(window.location.search);
     const contentId = params.get('id');
-    const loadingIndicator = document.getElementById('mode-indicator'); // 仮にモード表示部を使う
-    const cardElement = document.getElementById('learning-card');
-    const paginationElement = document.querySelector('.pagination');
+
+    // ★★★ 正解エフェクト要素を取得 ★★★
+    correctEffect = document.getElementById('correct-effect');
 
     if (!contentId) {
         displayLearningError('コンテンツIDが指定されていません。');
@@ -159,17 +203,20 @@ async function initializeLearningScreen() {
     }
     console.log('Content ID:', contentId);
 
-    // ローディング表示（簡易版）
-    if (loadingIndicator) loadingIndicator.textContent = '読み込み中...';
-    if (cardElement) cardElement.style.opacity = '0.5'; // 少し薄くする
-    if (paginationElement) paginationElement.style.display = 'none';
-
+    toggleLoading(true); // ローディング表示開始
 
     try {
         const response = await fetch(`/api/learning/${contentId}`);
         if (!response.ok) {
-            const errorData = await response.json().catch(() => ({ message: `HTTPエラー: ${response.status}` }));
-            throw new Error(errorData.message || `サーバーからのデータ取得に失敗しました (${response.status})`);
+            // エラーレスポンスがJSON形式でない場合も考慮
+            let errorMessage = `サーバーからのデータ取得に失敗しました (${response.status})`;
+            try {
+                const errorData = await response.json();
+                errorMessage = errorData.message || errorMessage;
+            } catch (e) {
+                // JSONパース失敗時はそのままのエラーメッセージを使う
+            }
+            throw new Error(errorMessage);
         }
 
         const result = await response.json();
@@ -177,8 +224,8 @@ async function initializeLearningScreen() {
 
         if (result.success && result.data) {
             learningData = result.data; // グローバル変数に格納
-            if (!learningData.items || learningData.items.length === 0) {
-                 throw new Error('学習データが空です。');
+            if (!learningData.items || !Array.isArray(learningData.items) || learningData.items.length === 0) {
+                 throw new Error('学習データが見つからないか、形式が正しくありません。');
             }
             // タイトルを設定
             const titleElement = document.getElementById('learning-title');
@@ -189,7 +236,6 @@ async function initializeLearningScreen() {
             // 最初のアイテムを表示
             currentItemIndex = 0;
             displayCurrentItem();
-             if (paginationElement) paginationElement.style.display = 'flex'; // ページネーション表示
 
         } else {
             throw new Error(result.message || '学習データの読み込みに失敗しました。');
@@ -199,9 +245,7 @@ async function initializeLearningScreen() {
         console.error('Error initializing learning screen:', error);
         displayLearningError(`読み込みエラー: ${error.message}`);
     } finally {
-        // ローディング表示終了（簡易版）
-        if (cardElement) cardElement.style.opacity = '1';
-        // mode-indicatorはdisplayCurrentItemで更新される
+        toggleLoading(false); // ローディング表示終了
     }
 }
 
@@ -209,6 +253,10 @@ async function initializeLearningScreen() {
  * 現在の学習アイテムをカードに表示
  */
 function displayCurrentItem() {
+    // ★★★ 最初にエフェクトを隠し、タイマーもクリア ★★★
+    hideCorrectEffect();
+    clearTimeout(correctEffectTimeout);
+
     if (!learningData || !learningData.items || currentItemIndex < 0 || currentItemIndex >= learningData.items.length) {
         console.error('Invalid learning data or index');
         displayLearningError('学習データを表示できません。');
@@ -216,6 +264,7 @@ function displayCurrentItem() {
     }
 
     const item = learningData.items[currentItemIndex];
+    const cardElement = document.getElementById('learning-card');
     const cardTextElement = document.getElementById('card-text');
     const answerTextElement = document.getElementById('answer-text');
     const tapToShowElement = document.getElementById('tap-to-show');
@@ -227,52 +276,100 @@ function displayCurrentItem() {
     answerTextElement.style.display = 'none';
     tapToShowElement.style.display = 'none';
     optionsArea.innerHTML = '';
-    optionsArea.style.display = 'none';
+    optionsArea.style.display = 'none'; // デフォルトは非表示
+    modeIndicator.classList.remove('loading'); // ローディングクラス除去
 
-    if (item.type === 'question') {
+    if (item.type === 'question' && item.question && item.answer) { // question と answer が存在するかチェック
         currentMode = 'quiz';
         modeIndicator.textContent = 'クイズモード';
-        cardTextElement.textContent = item.text; // 質問文
+        cardTextElement.textContent = item.question; // question プロパティを使用
         answerTextElement.textContent = `答え: ${item.answer}`; // 答えを事前に設定（非表示）
         tapToShowElement.style.display = 'block'; // タップして表示を表示
 
-        // 選択肢ボタンを生成（解答チェックはここではしない）
-        if (item.options && Array.isArray(item.options)) {
-            optionsArea.style.display = 'block';
-            item.options.forEach(option => {
+        // 選択肢ボタンを生成
+        if (item.options && Array.isArray(item.options) && item.options.length > 0) {
+            optionsArea.style.display = 'block'; // 選択肢があれば表示
+            // 選択肢をシャッフルする場合（任意）
+            // const shuffledOptions = [...item.options].sort(() => Math.random() - 0.5);
+            const optionsToDisplay = item.options; // シャッフルしない場合
+
+            optionsToDisplay.forEach(option => {
                 const button = document.createElement('button');
                 button.classList.add('option-button');
                 button.textContent = option;
-                // ★★★ 選択肢クリック時の動作を変更: 正誤判定ではなく解答表示 ★★★
-                button.onclick = revealAnswer; // どのボタンを押しても解答表示
+                // ★★★ 選択肢クリック時の動作を変更 ★★★
+                button.onclick = () => handleOptionClick(option); // クリックされた選択肢を渡す
                 optionsArea.appendChild(button);
             });
+        } else {
+             console.warn(`Item ${currentItemIndex} is a question but has no options.`);
+             // 選択肢がないクイズの場合の表示（例：自由記述？）
+             tapToShowElement.style.display = 'block'; // 答え表示はできるようにしておく
         }
+        // カード自体のクリックでも解答表示できるようにする
+        cardElement.onclick = revealAnswer;
+        tapToShowElement.onclick = revealAnswer;
 
-    } else if (item.type === 'summary') {
+    } else if (item.type === 'summary' && item.text) { // summary と text が存在するかチェック
         currentMode = 'summary';
         modeIndicator.textContent = '要約モード';
-        cardTextElement.innerHTML = item.text.replace(/\n/g, '<br>'); // 要約文（改行対応）
+        // 改行を<br>に変換し、安全にHTMLとして設定（XSS対策のためtextContent推奨だが、改行表示のためにinnerHTMLを使用）
+        // サニタイズが必要な場合はライブラリ(DOMPurifyなど)を使うこと
+        cardTextElement.innerHTML = item.text.replace(/\n/g, '<br>');
 
-        // 要約モードでは答えも選択肢も不要
+        // 要約モードでは答えも選択肢も不要、カードクリックも不要
+        cardElement.onclick = null;
+        tapToShowElement.style.display = 'none';
     } else {
-        console.warn('Unknown item type:', item.type);
-        cardTextElement.textContent = `[不明なデータタイプ: ${item.type}] ${item.text || ''}`;
-        modeIndicator.textContent = '不明モード';
+        console.warn('Unknown or invalid item type:', item.type, item);
+        modeIndicator.textContent = '不明なデータ';
+        cardTextElement.textContent = `[データ形式エラー] ${item.text || item.question || '内容なし'}`;
+        cardElement.onclick = null; // クリック動作無効
+        tapToShowElement.style.display = 'none';
     }
 
     updatePagination();
 }
 
+// ★★★ 選択肢クリック時の処理を追加 ★★★
+function handleOptionClick(selectedOption) {
+    if (currentMode !== 'quiz') return; // クイズモード以外では何もしない
+
+    const currentItem = learningData.items[currentItemIndex];
+    const correctAnswer = currentItem.answer;
+    const isCorrect = selectedOption === correctAnswer;
+
+    // --- 正解だった場合の処理 ---
+    if (isCorrect) {
+        console.log("正解！");
+        showCorrectEffect(); // ★★★ 正解エフェクトを表示 ★★★
+    } else {
+        console.log("不正解...");
+        // 不正解時のエフェクトなどが必要ならここに追加
+    }
+
+    // 選択肢ボタンの状態更新と解答表示
+    revealAnswer(selectedOption); // 選んだ選択肢を渡してスタイルを設定
+}
+
+
 /**
- * クイズの解答を表示する
+ * クイズの解答を表示する（選択肢クリックまたはカードタップ時）
+ * @param {string|null} selectedOption - ユーザーが選択した選択肢 (選択肢クリック時のみ渡される)
  */
-function revealAnswer() {
+function revealAnswer(selectedOption = null) {
     // クイズモードの場合のみ動作
     if (currentMode === 'quiz') {
         const answerTextElement = document.getElementById('answer-text');
         const tapToShowElement = document.getElementById('tap-to-show');
         const optionsArea = document.getElementById('options-area');
+        const cardElement = document.getElementById('learning-card');
+
+        // 既に表示済みなら何もしない（二重実行防止）
+        if (answerTextElement && answerTextElement.style.display === 'block') {
+            return;
+        }
+
 
         if (answerTextElement) {
             answerTextElement.style.display = 'block'; // 答えを表示
@@ -280,20 +377,26 @@ function revealAnswer() {
         if (tapToShowElement) {
             tapToShowElement.style.display = 'none'; // 「タップして表示」を隠す
         }
+        // カード自体のクリックイベントを解除（解答表示後は不要）
+        if (cardElement) {
+             cardElement.onclick = null;
+        }
 
         // 選択肢ボタンを正解・不正解で色付け＆無効化
         if (optionsArea && learningData && learningData.items[currentItemIndex]) {
              const correctAnswer = learningData.items[currentItemIndex].answer;
              const buttons = optionsArea.getElementsByTagName('button');
              for (let btn of buttons) {
-                btn.disabled = true; // ボタンを無効化
+                btn.disabled = true; // すべてのボタンを無効化
+                btn.onclick = null; // クリックイベントも削除
+
                 if (btn.textContent === correctAnswer) {
-                    btn.classList.add('correct'); // 正解スタイル
+                    btn.classList.add('correct'); // 正解ボタン
+                } else if (btn.textContent === selectedOption) {
+                    btn.classList.add('incorrect'); // 選択された不正解ボタン
                 } else {
-                    btn.classList.add('disabled'); // 不正解または他の選択肢スタイル
+                    btn.classList.add('other-disabled'); // 選ばれなかった他の選択肢
                 }
-                // クリックイベントを削除（任意）
-                btn.onclick = null;
             }
         }
     }
@@ -330,9 +433,21 @@ function updatePagination() {
 
     if (pageInfo && prevButton && nextButton && learningData && learningData.items) {
         const totalItems = learningData.items.length;
-        pageInfo.textContent = `${currentItemIndex + 1} / ${totalItems}`;
-        prevButton.disabled = currentItemIndex === 0;
-        nextButton.disabled = currentItemIndex === totalItems - 1;
+        // totalItemsが0の場合のエラーを防ぐ
+        if (totalItems > 0) {
+            pageInfo.textContent = `${currentItemIndex + 1} / ${totalItems}`;
+            prevButton.disabled = currentItemIndex === 0;
+            nextButton.disabled = currentItemIndex === totalItems - 1;
+        } else {
+            pageInfo.textContent = `0 / 0`;
+            prevButton.disabled = true;
+            nextButton.disabled = true;
+        }
+    } else {
+         // 要素がないかデータがない場合
+         if(pageInfo) pageInfo.textContent = '- / -';
+         if(prevButton) prevButton.disabled = true;
+         if(nextButton) nextButton.disabled = true;
     }
 }
 
@@ -348,13 +463,44 @@ function displayLearningError(message) {
     const tapToShow = document.getElementById('tap-to-show');
 
     if (titleElement) titleElement.textContent = 'エラー';
-    if (cardElement) cardElement.innerHTML = `<p class="main-text" style="color: red; text-align: center;">${message}</p>`;
+    if (modeIndicator) modeIndicator.textContent = 'エラー';
+    if (cardElement) {
+        cardElement.innerHTML = `<p class="main-text" style="color: red; text-align: center; padding: 20px;">${message}</p>`;
+        cardElement.onclick = null; // クリック無効
+    }
     if (paginationElement) paginationElement.style.display = 'none';
+    if (optionsArea) optionsArea.innerHTML = ''; // オプションクリア
     if (optionsArea) optionsArea.style.display = 'none';
-    if (modeIndicator) modeIndicator.style.display = 'none';
     if (tapToShow) tapToShow.style.display = 'none';
 }
 
+// --- ★★★ 正解エフェクト表示関数を追加 ★★★ ---
+function showCorrectEffect() {
+    if (correctEffect) {
+        // 既存のタイムアウトがあればクリア
+        clearTimeout(correctEffectTimeout);
+
+        correctEffect.classList.add('show'); // 表示用クラスを追加
+
+        // 1秒後 (1000ms) に非表示処理を開始
+        correctEffectTimeout = setTimeout(() => {
+            hideCorrectEffect();
+        }, 1000); // 表示時間はここで調整 (ミリ秒)
+    }
+}
+
+// --- ★★★ 正解エフェクト非表示関数を追加 ★★★ ---
+function hideCorrectEffect() {
+    if (correctEffect && correctEffect.classList.contains('show')) {
+        correctEffect.classList.remove('show');
+        // アニメーション完了後に display: none に戻したい場合は transitionend イベントを使う
+        // correctEffect.addEventListener('transitionend', () => {
+        //     correctEffect.style.display = 'none';
+        // }, { once: true }); // 一度だけ実行
+        // ただし、クラスの付け外しだけで opacity と transform を制御する方がシンプル
+    }
+}
+
 
 // --- settings.html 用の処理 ---
 
@@ -380,9 +526,11 @@ function handleToggleChange(checkbox, type) {
 function handleLogout() {
     console.log("Logout clicked");
     // TODO: 実際のログアウト処理（API呼び出し、セッションクリアなど）
-    alert("ログアウト機能は未実装です。");
+    alert("ログアウトしました。(機能は未実装)");
     // 必要であればログイン画面などに遷移
     // navigateTo('/login');
+    // 例として入力画面に戻る
+     goToInput();
 }
 
 /**
@@ -393,10 +541,8 @@ function applyDarkModePreference() {
         const darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
         document.body.classList.toggle('dark-mode', darkModeEnabled);
         // 設定画面のトグルスイッチの状態も合わせる
-        const toggle = document.querySelector('input[onchange*="handleToggleChange"][onchange*="dark"]');
-        if (toggle) {
-            toggle.checked = darkModeEnabled;
-        }
+        // DOMContentLoaded より前に実行される場合があるので、
+        // settings.htmlの初期化時にスイッチの状態を更新する方が確実
     } catch (e) {
         console.warn('Could not load dark mode preference from localStorage.');
     }
@@ -404,30 +550,54 @@ function applyDarkModePreference() {
 
 
 // --- ページの初期化処理 ---
-document.addEventListener('DOMContentLoaded', () => {
-    const pathname = window.location.pathname;
+const pathname = window.location.pathname; // グローバルスコープで取得
+
+// ダークモード設定を最初に適用 (FOUC対策)
+applyDarkModePreference();
 
-    applyDarkModePreference(); // 全ページでダークモード設定を適用
+document.addEventListener('DOMContentLoaded', () => {
 
-    if (pathname === '/' || pathname === '/input') {
-        // input.html の初期化（特に不要かもしれないが、フォームイベントリスナーなど）
+    if (pathname === '/' || pathname === '/input' || pathname === '/input.html') { // input.html のパスパターンを考慮
         const form = document.getElementById('generate-form');
         if (form) {
             form.addEventListener('submit', (event) => {
-                 event.preventDefault(); // デフォルトの送信をキャンセル
+                 event.preventDefault();
                  handleGenerateSubmit();
             });
         }
-    } else if (pathname === '/learning') {
+         // input.html 専用の初期化があればここに追加
+         // 例: URLパラメータから初期値を設定するなど
+         const urlParams = new URLSearchParams(window.location.search);
+         const initialUrl = urlParams.get('url');
+         if (initialUrl) {
+             const urlInput = document.getElementById('youtube-url');
+             if (urlInput) {
+                 urlInput.value = initialUrl;
+             }
+         }
+
+    } else if (pathname === '/learning' || pathname === '/learning.html') {
         initializeLearningScreen();
-    } else if (pathname === '/history') {
+    } else if (pathname === '/history' || pathname === '/history.html') {
         // history.html の初期化（動的にリストを生成する場合など）
-        // このサンプルでは静的なので特に不要
-    } else if (pathname === '/settings') {
-        // settings.html の初期化（ダークモードの適用は applyDarkModePreference で実施済み）
+        console.log("History page loaded.");
+        // loadHistoryData(); // 仮の関数呼び出し
+    } else if (pathname === '/settings' || pathname === '/settings.html') {
+        // settings.html の初期化
+        console.log("Settings page loaded.");
+        // ダークモードトグルの状態をlocalStorageに合わせて更新
+        try {
+            const darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
+            const toggle = document.querySelector('input[onchange*="handleToggleChange"][onchange*="dark"]');
+            if (toggle) {
+                toggle.checked = darkModeEnabled;
+            }
+        } catch (e) {
+             console.warn('Could not set dark mode toggle state.');
+        }
     }
 
-    // フッターナビゲーションのアクティブ状態設定（任意）
+    // フッターナビゲーションのアクティブ状態設定
     updateFooterNavActiveState(pathname);
 });
 
@@ -435,7 +605,7 @@ document.addEventListener('DOMContentLoaded', () => {
 /**
  * フッターナビゲーションのアクティブ状態を更新
  */
- function updateFooterNavActiveState(pathname) {
+ function updateFooterNavActiveState(currentPath) {
     const footerNav = document.querySelector('.footer-nav');
     if (!footerNav) return;
 
@@ -444,19 +614,25 @@ document.addEventListener('DOMContentLoaded', () => {
         button.classList.remove('active'); // Reset all
         const onclickAttr = button.getAttribute('onclick');
         if (onclickAttr) {
-            if ((pathname === '/' || pathname === '/input') && onclickAttr.includes('goToInput')) {
+            // パスの末尾が一致するか、またはルートパスの場合を確認
+            if ((currentPath === '/' || currentPath.endsWith('/input') || currentPath.endsWith('/input.html')) && onclickAttr.includes('goToInput')) {
                 button.classList.add('active');
-            } else if (pathname === '/history' && onclickAttr.includes('goToHistory')) {
+            } else if ((currentPath.endsWith('/history') || currentPath.endsWith('/history.html')) && onclickAttr.includes('goToHistory')) {
                 button.classList.add('active');
-            } else if (pathname === '/settings' && onclickAttr.includes('goToSettings')) {
+            } else if ((currentPath.endsWith('/settings') || currentPath.endsWith('/settings.html')) && onclickAttr.includes('goToSettings')) {
                 button.classList.add('active');
             }
+            // learning ページの場合はどのフッターもアクティブにしない (任意)
+             else if ((currentPath.endsWith('/learning') || currentPath.endsWith('/learning.html'))) {
+                  // 何もしない（アクティブにならない）
+             }
         }
     });
 }
 
 
 // デバッグ用に一部関数をグローバルスコープに公開（開発中のみ推奨）
+// 本番環境では削除またはコメントアウトすること
 window.debug = {
     navigateTo,
     goToInput,
@@ -466,9 +642,16 @@ window.debug = {
     openMenu,
     handleGenerateSubmit,
     initializeLearningScreen,
+    handleOptionClick, // handleOptionClick を公開
     revealAnswer,
     goToNext,
     goToPrev,
     handleToggleChange,
-    handleLogout
-};
+    handleLogout,
+    showCorrectEffect, // デバッグ用にエフェクト表示関数も公開
+    hideCorrectEffect, // デバッグ用にエフェクト非表示関数も公開
+    learningData,      // 現在の学習データ確認用
+    currentItemIndex   // 現在のインデックス確認用
+};
+
+// --- END OF FILE script.js ---

static/style.css

@@ -1,3 +1,5 @@
+/* --- START OF FILE style.css --- */
+
 /* 基本スタイル */
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -21,6 +23,7 @@ body {
     display: flex;
     flex-direction: column; /* 子要素を縦に並べる */
     overflow: hidden; /* はみ出しを隠す */
+    position: relative; /* Correct Effectの基準になるかも */
 }
 
 .header {
@@ -39,23 +42,36 @@ body {
     font-size: 24px;
     cursor: pointer;
     padding: 5px;
+    color: #007bff; /* ボタンの色も少し設定 */
+}
+.header .menu-btn:active, .header .action-btn:active {
+    opacity: 0.7;
 }
 
+
 .header .action-btn {
-    width: 30px;
+    /* 右上のボタンのデザイン例 (不要なら削除) */
+    /* visibility: hidden; */ /* 表示しない場合はこれ */
+    width: 30px; /* サイズ調整 */
     height: 30px;
-    background-color: #007bff; /* 青い丸 */
-    border-radius: 50%;
-    padding: 0; /* 内側の余白を削除 */
+    color: #007bff; /* アイコンの色 */
+    /* background-color: #007bff; */ /* 背景色なし */
+    /* border-radius: 50%; */
+    /* padding: 0; */
     /* 必要ならアイコンや文字を配置 */
 }
 
+
 .header .title {
     font-size: 18px;
     font-weight: bold;
     margin: 0;
     text-align: center;
     flex-grow: 1; /* 中央に配置するために */
+    padding: 0 5px; /* 左右ボタンとの間隔 */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 main {
@@ -104,6 +120,7 @@ li.list-item:last-child {
     align-items: center;
     flex-grow: 1; /* テキスト部分が幅を取るように */
     margin-right: 10px; /* 矢印とのスペース */
+    overflow: hidden; /* はみ出し防止 */
 }
 
 .list-item-icon {
@@ -112,8 +129,14 @@ li.list-item:last-child {
     color: #007bff; /* アイコンの色 */
     width: 24px; /* 幅を固定して揃える */
     text-align: center;
+    flex-shrink: 0;
+}
+
+.list-item-text {
+    overflow: hidden; /* はみ出し防止 */
 }
 
+
 .list-item-text h3 {
     font-size: 16px;
     margin: 0 0 4px 0;
@@ -127,6 +150,9 @@ li.list-item:last-child {
     font-size: 13px;
     color: #777;
     margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .list-arrow {
@@ -148,18 +174,26 @@ li.list-item:last-child {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center; /* 中央揃え */
     cursor: pointer; /* タップ可能を示す */
+    transition: background-color 0.2s; /* 背景色変更アニメーション */
+}
+.card:active {
+    background-color: #f0f0f0; /* タップ時のフィードバック */
 }
+
 .card p.main-text {
     margin: 0;
     line-height: 1.7; /* 行間調整 */
     font-size: 16px;
+    max-width: 100%; /* はみ出し防止 */
 }
 .card p.answer-text {
     margin-top: 15px;
     font-size: 18px;
     font-weight: bold;
     color: #007bff;
+    max-width: 100%; /* はみ出し防止 */
 }
 .tap-to-show {
     text-align: center;
@@ -167,6 +201,7 @@ li.list-item:last-child {
     font-size: 14px;
     margin-top: 10px;
     cursor: pointer; /* タップ可能を示す */
+    padding: 5px; /* タップしやすく */
 }
 
 /* Pagination */
@@ -184,7 +219,13 @@ li.list-item:last-child {
     color: #007bff;
     cursor: pointer;
     padding: 5px 15px; /* タップしやすく */
+    border-radius: 8px; /* 視覚的フィードバック用 */
+    transition: background-color 0.2s;
 }
+.pagination button:active:not(:disabled) {
+     background-color: rgba(0, 123, 255, 0.1); /* タップフィードバック */
+}
+
 .pagination button:disabled {
     color: #ccc;
     cursor: default;
@@ -213,6 +254,7 @@ li.list-item:last-child {
     width: 50px;
     height: 24px;
     cursor: pointer;
+    flex-shrink: 0; /* 縮まないように */
 }
 .toggle-switch input {
     opacity: 0;
@@ -294,27 +336,25 @@ input:checked + .slider:before {
     align-items: center;
     justify-content: center;
     margin: 0 auto 25px auto;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s, opacity 0.2s;
 }
 .input-area .generate-button:hover {
     background-color: #e03024;
 }
 .input-area .generate-button:disabled {
-    background-color: #fca9a4;
+    background-color: #ff3b30; /* 色は変えず */
+    opacity: 0.6; /* 薄くする */
     cursor: not-allowed;
 }
+.input-area .generate-button .button-text {
+    /* display: inline-block; */ /* 縦中央揃えのためFlexで十分 */
+}
 .input-area .generate-button .icon { /* 再生ボタン風アイコン */
     margin-left: 8px;
     font-size: 14px;
 }
 .input-area .loading-spinner {
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    border-top-color: #fff;
-    width: 16px;
-    height: 16px;
-    animation: spin 1s linear infinite;
-    margin-right: 8px; /* テキストとのスペース */
+    /* Spinnerは下の共通スタイルで定義 */
 }
 @keyframes spin {
     to { transform: rotate(360deg); }
@@ -347,6 +387,8 @@ input:checked + .slider:before {
     margin-top: -15px; /* ボタンとの間を詰める */
     margin-bottom: 15px;
     min-height: 1em; /* エラーなくても高さを確保 */
+    text-align: center; /* 中央揃え */
+    padding: 0 15px; /* 左右に余白 */
 }
 /* static/style.css に追加 */
 
@@ -360,9 +402,9 @@ input:checked + .slider:before {
     border-top: 1px solid #e0e0e0;
     display: flex;
     justify-content: space-around;
-    padding: 4px 0 8px 0; /* 上下少し調整 */
+    padding: 4px 0 calc(env(safe-area-inset-bottom, 0px) + 8px) 0; /* iPhone下部対応 + 少し余白 */
     box-shadow: 0 -1px 4px rgba(0,0,0,0.08);
-    z-index: 1000;
+    z-index: 100; /* Correct Effectより下 */
 }
 
 .footer-nav button {
@@ -378,6 +420,9 @@ input:checked + .slider:before {
     flex-grow: 1; /* ボタンが均等に幅を取るように */
     transition: color 0.2s ease;
 }
+.footer-nav button:active {
+    opacity: 0.7;
+}
 
 .footer-nav .nav-icon {
     font-size: 22px;
@@ -391,21 +436,26 @@ input:checked + .slider:before {
 /* --- main要素の底上げ --- */
 /* フッターにコンテンツが隠れないように */
 main {
-   padding-bottom: 70px; /* フッターの高さに応じて調整 */
+   padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); /* フッターの高さ + iPhone下部 + 余白 */
 }
 
-/* --- ローディングスピナー (input.html用) --- */
+/* --- ローディングスピナー (共通) --- */
 .loading-spinner {
-    border: 3px solid rgba(0, 0, 0, 0.1);
-    border-left-color: #fff; /* スピナーの色 */
+    border: 3px solid rgba(0, 0, 0, 0.1); /* generate button以外でのデフォルト */
+    border-left-color: #007bff; /* デフォルトの色 */
     border-radius: 50%;
     width: 16px;
     height: 16px;
     animation: spin 1s linear infinite;
     display: inline-block; /* ボタン内で表示 */
-    margin-left: 8px; /* ボタンテキストとの間隔 */
+    margin-right: 8px; /* ボタンテキストとの間隔 */
     vertical-align: middle;
 }
+/* input.html の generate-button 内のスピナー */
+.generate-button .loading-spinner {
+    border-color: rgba(255, 255, 255, 0.3);
+    border-left-color: #fff;
+}
 
 @keyframes spin {
     0% { transform: rotate(0deg); }
@@ -413,53 +463,138 @@ main {
 }
 
 /* --- learning.html のローディング（簡易版）--- */
-/* 必要であれば .loading-spinner-large などを定義 */
-
+/* 必要であれば .loading-indicator-large などを定義 */
+#mode-indicator.loading {
+    color: #888;
+}
 
 /* --- learning.html の解答ボタン スタイル --- */
+.option-button {
+    display: block;
+    width: calc(100% - 20px); /* 左右の余白を考慮 */
+    margin: 10px auto; /* 中央寄せ */
+    padding: 15px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #fff;
+    color: #333;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
+    text-align: left; /* テキスト左寄せ */
+}
+.option-button:hover:not(:disabled) {
+     background-color: #f0f0f0;
+}
+.option-button:active:not(:disabled) {
+    background-color: #e0e0e0;
+}
+
+
 .option-button.correct {
     background-color: #d4edda; /* 緑系 */
     color: #155724;
     border-color: #c3e6cb;
+    font-weight: bold; /* 正解を強調 */
 }
 
-.option-button.incorrect { /* これは revealAnswer では使わないかも */
+.option-button.incorrect { /* 不正解を選んだ場合のスタイル */
     background-color: #f8d7da; /* 赤系 */
     color: #721c24;
     border-color: #f5c6cb;
+    opacity: 0.8; /* 少し薄く */
 }
 
-.option-button.disabled {
+.option-button:disabled { /* 正解・不正解表示後の状態 */
+    cursor: default;
+    opacity: 0.7; /* すべての無効ボタンを少し薄く */
+}
+.option-button.correct:disabled {
+    opacity: 1; /* 正解ボタンは薄くしない */
+}
+.option-button.incorrect:disabled {
+     opacity: 0.7; /* 不正解ボタンは薄くする */
+}
+/* 選ばれなかった他の選択肢（不正解）のスタイル */
+.option-button.other-disabled:disabled {
     background-color: #e9ecef;
     color: #6c757d;
     border-color: #ced4da;
-    opacity: 0.7;
+    opacity: 0.6;
+}
+
+
+/* --- ★★★ 正解エフェクトのスタイルを追加 ★★★ --- */
+.correct-effect {
+    position: fixed; /* 画面に固定 */
+    top: 45%; /* 少し上に調整 (フッターを考慮) */
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.8); /* 中央揃え & 少し小さめから開始 */
+    font-size: 15rem; /* 〇の大きさ */
+    color: rgba(0, 190, 0, 0.8); /* 〇の色 (例: 少し透明な明るい緑) */
+    font-weight: bold;
+    display: none; /* 初期状態では非表示 */
+    align-items: center;
+    justify-content: center;
+    z-index: 1001; /* フッターより手前に表示 */
+    opacity: 0; /* 初期状態では透明 */
+    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* フェードインと拡大のアニメーション */
+    pointer-events: none; /* エフェクトがクリック操作を妨げないように */
+    width: 20rem; /* 幅と高さを指定 */
+    height: 20rem;
+    /* background-color: rgba(255, 255, 255, 0.1); */ /* 必要なら背景 */
+    /* border-radius: 50%; */ /* 円形背景にしたい場合 */
+    line-height: 1; /* 〇の縦位置調整 */
 }
 
+/* エフェクト表示時のスタイル */
+.correct-effect.show {
+    display: flex; /* 表示状態にする (flexで中央揃え) */
+    opacity: 1; /* 不透明にする */
+    transform: translate(-50%, -50%) scale(1); /* 元のサイズに戻す */
+}
+/* --- ★★★ ここまで追加 ★★★ --- */
+
 
 /* --- ダークモード用スタイル (一部) --- */
 body.dark-mode {
     background-color: #121212;
     color: #e0e0e0;
 }
-body.dark-mode .screen { background-color: #1e1e1e; }
+body.dark-mode .screen { background-color: #1e1e1e; border-color: #333; }
 body.dark-mode .header { background-color: #1f1f1f; border-bottom-color: #333; }
-body.dark-mode .header .title, body.dark-mode .header .menu-btn { color: #e0e0e0; }
+body.dark-mode .header .title, body.dark-mode .header .menu-btn, body.dark-mode .header .action-btn { color: #e0e0e0; }
 body.dark-mode .footer-nav { background-color: #1f1f1f; border-top-color: #333; }
 body.dark-mode .footer-nav button { color: #888; }
 body.dark-mode .footer-nav button.active { color: #58a6ff; } /* ダークモードでのアクティブ色 */
 body.dark-mode .card { background-color: #2c2c2c; border-color: #444; color: #e0e0e0; }
-body.dark-mode .list-item-button { background-color: #2c2c2c; border-bottom-color: #444; }
-body.dark-mode .list-item-text h3, body.dark-mode .list-item-text p { color: #e0e0e0; }
+body.dark-mode .card:active { background-color: #3a3a3a; }
+body.dark-mode .list-item-button:hover { background-color: #3a3a3a; }
+body.dark-mode li.list-item { border-bottom-color: #444; }
+body.dark-mode .list-item-text h3 { color: #e0e0e0; }
+body.dark-mode .list-item-text p { color: #aaa; }
 body.dark-mode .list-arrow { color: #aaa; }
 body.dark-mode .settings-item span { color: #e0e0e0; }
 body.dark-mode .section-title { color: #aaa; }
 body.dark-mode input[type="text"] { background-color: #333; border-color: #555; color: #e0e0e0; }
-body.dark-mode .generate-button { background-color: #3081d8; color: white; }
+body.dark-mode .generate-button { background-color: #e53e3e; color: white; } /* 少し調整した赤 */
+body.dark-mode .generate-button:hover { background-color: #c53030; }
+body.dark-mode .generate-button:disabled { background-color: #e53e3e; opacity: 0.6; }
+body.dark-mode .error-message { color: #ff7f7f; }
 body.dark-mode .option-button { background-color: #444; color: #e0e0e0; border-color: #666; }
+body.dark-mode .option-button:hover:not(:disabled) { background-color: #555; }
+body.dark-mode .option-button:active:not(:disabled) { background-color: #666; }
 body.dark-mode .option-button.correct { background-color: #2a6831; color: #e0e0e0; border-color: #41984b; }
-body.dark-mode .option-button.disabled { background-color: #333; color: #888; border-color: #555; opacity: 0.7; }
+body.dark-mode .option-button.incorrect { background-color: #8b3a3e; color: #ffdddd; border-color: #a85055; opacity: 0.8; }
+body.dark-mode .option-button.other-disabled:disabled { background-color: #333; color: #888; border-color: #555; opacity: 0.6; }
+body.dark-mode .pagination button { color: #58a6ff; }
+body.dark-mode .pagination button:active:not(:disabled) { background-color: rgba(88, 166, 255, 0.15); }
 body.dark-mode .pagination button:disabled { color: #666; }
+body.dark-mode .tap-to-show { color: #aaa; }
+body.dark-mode .mode-indicator { color: #bbb; }
 body.dark-mode .toggle-switch .slider { background-color: #555; }
 body.dark-mode .toggle-switch input:checked + .slider { background-color: #58a6ff; }
-/* 他の要素も必要に応じてダークモードスタイルを追加 */
+/* ダークモードの正解エフェクトの色 */
+body.dark-mode .correct-effect { color: rgba(50, 220, 50, 0.85); }
+
+/* --- END OF FILE style.css --- */

templates/learning.html

@@ -11,6 +11,7 @@
         <header class="header">
             <button class="menu-btn" aria-label="メニュー" onclick="openMenu()">☰</button>
             <h1 class="title" id="learning-title">学習セット: 面白い動画の分析</h1>
+            <!-- 右上のボタンは不要なら削除 -->
             <button class="action-btn" aria-label="アクション"></button>
         </header>
         <main>
@@ -23,37 +24,43 @@
 
             <p class="tap-to-show" id="tap-to-show" onclick="revealAnswer()">タップして解答を表示</p>
 
+            <!-- クイズの選択肢表示エリア (JSで動的に生成) -->
             <div id="options-area" style="margin-top: 15px;">
-                <!-- クイズの選択肢がJSでここに追加されます -->
+                <!-- 例:
+                <button class="option-button">A: 選択肢A</button>
+                <button class="option-button">B: 選択肢B</button>
+                ...
+                -->
             </div>
 
             <div class="pagination">
                 <button id="prev-button" aria-label="前へ" onclick="goToPrev()"><</button>
-                <span id="page-info">5 / 10</span>
+                <span id="page-info">? / ?</span> <!-- 初期表示 -->
                 <button id="next-button" aria-label="次へ" onclick="goToNext()">></button>
             </div>
         </main>
     </div>
 
-    <!-- ここから追加 -->
+    <!-- ★★★ ここから追加 ★★★ -->
     <div id="correct-effect" class="correct-effect">〇</div>
-    <!-- ここまで追加 -->
+    <!-- ★★★ ここまで追加 ★★★ -->
 
     <script src="{{ url_for('static', filename='script.js') }}"></script>
 
+    <!-- 例: フッターナビゲーション -->
     <footer class="footer-nav">
-         <button onclick="goToInput()" aria-label="入力">
-              <span class="nav-icon">➕</span>
-              <span class="nav-text">入力</span>
-         </button>
-         <button onclick="goToHistory()" aria-label="履歴">
-              <span class="nav-icon">🕒</span>
-              <span class="nav-text">履歴</span>
-         </button>
-         <button onclick="goToSettings()" aria-label="設定">
-              <span class="nav-icon">⚙️</span>
-              <span class="nav-text">設定</span>
-         </button>
+        <button onclick="goToInput()" aria-label="入力">
+             <span class="nav-icon">➕</span> <!-- アイコンは好みで変更 -->
+             <span class="nav-text">入力</span>
+        </button>
+        <button onclick="goToHistory()" aria-label="履歴">
+             <span class="nav-icon">🕒</span>
+             <span class="nav-text">履歴</span>
+        </button>
+        <button onclick="goToSettings()" aria-label="設定">
+             <span class="nav-icon">⚙️</span>
+             <span class="nav-text">設定</span>
+        </button>
     </footer>
 </body>
 </html>