Spaces:

rein0421
/

Braincast

Sleeping

App Files Files Community

rein0421 commited on Apr 6

Commit

0758a11

verified ·

1 Parent(s): ed7749b

Update templates/learning.html

Browse files

Files changed (1) hide show

templates/learning.html +154 -23

templates/learning.html CHANGED Viewed

@@ -4,23 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>学習画面</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
-<!-- 例: フッターナビゲーション (各HTMLの </body> の直前に追加) -->
-<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>
-</footer>
 <body>
     <div class="screen">
         <header class="header">
@@ -30,32 +16,177 @@
             <button class="action-btn" aria-label="アクション"></button>
         </header>
         <main>
             <p style="text-align: center; color: #555; font-size: 14px; margin-bottom: 10px;" id="mode-indicator">クイズモード</p>
             <div class="card" id="learning-card" onclick="revealAnswer()">
                 <p class="main-text" id="card-text">ここに表示される問題文または要約テキストはカードの中心に来るように調整されます。(サンプルテキスト)</p>
                 <p class="answer-text" id="answer-text" style="display: none;">答え: 正解の選択肢</p>
             </div>
             <p class="tap-to-show" id="tap-to-show" onclick="revealAnswer()">タップして解答を表示</p>
             <!-- クイズの選択肢表示エリア (JSで動的に生成) -->
             <div id="options-area" style="margin-top: 15px;">
-                <!-- 例:
-                <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>
                 <button id="next-button" aria-label="次へ" onclick="goToNext()">></button>
             </div>
         </main>
-    </div>
     <script src="{{ url_for('static', filename='script.js') }}"></script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>学習画面</title>
+    <!-- CSSファイルの読み込み -->
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
     <div class="screen">
         <header class="header">
             <button class="action-btn" aria-label="アクション"></button>
         </header>
         <main>
+            <!-- YouTubeリンク入力欄と生成ボタン -->
+            <div style="margin-bottom: 20px; text-align: center;">
+                <input id="youtube-url" type="text" placeholder="YouTubeリンクを入力してください" style="padding: 5px; width: 70%;">
+                <button id="generate-button" style="padding: 5px 10px; margin-left: 5px;">生成する</button>
+                <p id="error-message" style="color: red; font-size: 14px; margin-top: 10px;"></p>
+            </div>
+            <!-- モード表示 -->
             <p style="text-align: center; color: #555; font-size: 14px; margin-bottom: 10px;" id="mode-indicator">クイズモード</p>
+            <!-- 学習カード -->
             <div class="card" id="learning-card" onclick="revealAnswer()">
                 <p class="main-text" id="card-text">ここに表示される問題文または要約テキストはカードの中心に来るように調整されます。(サンプルテキスト)</p>
                 <p class="answer-text" id="answer-text" style="display: none;">答え: 正解の選択肢</p>
             </div>
+            <!-- タップして解答を表示 -->
             <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" data-correct="true" onclick="handleOptionClick(this)">A: 正解</button>
+                <button class="option-button" data-correct="false" onclick="handleOptionClick(this)">B: 不正解</button>
+                <button class="option-button" data-correct="false" onclick="handleOptionClick(this)">C: 不正解</button>
+                <!-- JavaScriptによって動的に選択肢がここに追加されます -->
             </div>
+            <!-- 正解時のエフェクトボタンとエフェクトコンテナ -->
+            <!-- 注意: このボタンはデバッグ用かもしれません。通常は選択肢をクリックした結果としてエフェクトが表示されます -->
+            <button id="correctAnswer" onclick="showEffect()" style="display: block; margin: 10px auto;">（デバッグ用）正解エフェクト表示</button>
+            <div id="effect" style="display: none; text-align: center; font-size: 50px; color: red; margin-top: 10px;">〇</div>
+            <!-- ページネーション -->
             <div class="pagination">
                 <button id="prev-button" aria-label="前へ" onclick="goToPrev()"><</button>
+                <span id="page-info">5 / 10</span> <!-- この表示もJSで更新される想定 -->
                 <button id="next-button" aria-label="次へ" onclick="goToNext()">></button>
             </div>
         </main>
+    </div> <!-- screen -->
+    <!-- フッターナビゲーション -->
+    <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>
+    </footer>
+    <!-- JavaScriptファイルの読み込み -->
     <script src="{{ url_for('static', filename='script.js') }}"></script>
+    <script>
+        // learning.html 固有の初期化処理やイベントリスナー設定
+        document.addEventListener('DOMContentLoaded', function() {
+            // initializeLearningScreen のような初期化関数があればここで呼び出す
+            // 例: initializeLearningScreen();
+            // YouTube生成ボタンのイベントリスナー
+            const generateButton = document.getElementById('generate-button');
+            const youtubeUrlInput = document.getElementById('youtube-url');
+            const errorMessage = document.getElementById('error-message');
+            if (generateButton) {
+                generateButton.addEventListener('click', () => {
+                    const url = youtubeUrlInput.value.trim();
+                    if (url) {
+                        console.log("生成ボタンがクリックされました。URL:", url);
+                        errorMessage.textContent = ''; // エラーメッセージをクリア
+                        // ここで実際にYouTubeリンクからデータを生成する処理を呼び出す
+                        // 例: generateContentFromYouTube(url);
+                    } else {
+                        errorMessage.textContent = 'YouTubeリンクを入力してください。';
+                        console.log("YouTubeリンクが入力されていません。");
+                    }
+                });
+            }
+            // 他の learning.html 固有の初期化処理があればここに追加
+        });
+        // --- script.js に含まれる想定の関数 (ここでは例として定義) ---
+        function openMenu() { console.log("メニューを開く"); }
+        function revealAnswer() {
+            console.log("解答を表示/非表示");
+            const answerText = document.getElementById('answer-text');
+            const tapToShow = document.getElementById('tap-to-show');
+            if (answerText) {
+                answerText.style.display = answerText.style.display === 'none' ? 'block' : 'none';
+            }
+             if (tapToShow) {
+                 // 解答が表示されたら「タップして非表示」などに変えることも可能
+                 tapToShow.textContent = answerText.style.display === 'none' ? 'タップして解答を表示' : 'タップして解答を隠す';
+             }
+        }
+        function handleOptionClick(buttonElement) {
+            console.log("選択肢クリック:", buttonElement.textContent);
+            const isCorrect = buttonElement.getAttribute('data-correct') === 'true';
+             // 正誤判定とフィードバック表示
+             if (isCorrect) {
+                 console.log("正解！");
+                 showEffect(); // 正解エフェクト表示
+                 // 正解時のスタイル変更など
+                 buttonElement.classList.add('correct');
+             } else {
+                 console.log("不正解...");
+                 // 不正解時のスタイル変更など
+                 buttonElement.classList.add('incorrect');
+                 // 正解の選択肢をハイライトするなど（オプション）
+                 const correctButton = document.querySelector('#options-area .option-button[data-correct="true"]');
+                 if(correctButton) correctButton.classList.add('correct');
+             }
+             // 一度選択したら他のボタンは無効化するなどの処理
+             const allOptions = document.querySelectorAll('#options-area .option-button');
+             allOptions.forEach(btn => btn.disabled = true);
+             // 解答テキストも表示する
+             const answerText = document.getElementById('answer-text');
+             if (answerText) answerText.style.display = 'block';
+             const tapToShow = document.getElementById('tap-to-show');
+             if (tapToShow) tapToShow.style.display = 'none'; // 選択肢を選んだらタップ表示は不要かも
+        }
+        function showEffect() {
+            console.log("正解エフェクト表示");
+            const effectElement = document.getElementById('effect');
+            if (effectElement) {
+                effectElement.style.display = 'block';
+                // 一定時間後に非表示にする
+                setTimeout(() => {
+                    effectElement.style.display = 'none';
+                }, 1500); // 1.5秒後に消える
+            }
+        }
+        function goToPrev() { console.log("前のカードへ"); /* 実際の処理 */ }
+        function goToNext() { console.log("次のカードへ"); /* 実際の処理 */ }
+        function goToInput() { console.log("入力画面へ"); window.location.href = '/input'; /* Flaskのルーティングに合わせる */ }
+        function goToHistory() { console.log("履歴画面へ"); window.location.href = '/history'; /* Flaskのルーティングに合わせる */ }
+        function goToSettings() { console.log("設定画面へ"); window.location.href = '/settings'; /* Flaskのルーティングに合わせる */ }
+        // ページ読み込み時に関数を実行する場合（例）
+        // function initializeLearningScreen() {
+        //     console.log("学習画面の初期化処理");
+        //     // カードの内容やページネーションの表示を更新する処理など
+        //     updateCardContent(currentCardIndex); // 仮の関数
+        //     updatePagination(); // 仮の関数
+        // }
+        // let currentCardIndex = 0; // 現在表示しているカードのインデックス（仮）
+        // const cardsData = [ /* カードデータの配列 */ ]; // 仮のデータ
+        // function updateCardContent(index) {
+        //     // 実際のカードデータを表示する処理
+        // }
+        // function updatePagination() {
+        //     // ページネーション表示を更新する処理
+        //     const pageInfo = document.getElementById('page-info');
+        //     if(pageInfo) pageInfo.textContent = `${currentCardIndex + 1} / ${cardsData.length}`;
+        //     // 前へ/次へボタンの有効/無効化
+        // }
+    </script>
 </body>
 </html>