CnJaFlashC-1

Sleeping

App Files Files Community

OzoneAsai commited on Sep 19, 2024

Commit

b5d252d

verified ·

1 Parent(s): 671ed40

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +47 -16

templates/index.html CHANGED Viewed

@@ -9,7 +9,7 @@
 <body>
     <div class="flashcard" id="flashcard">
         <div class="content">
-            <h2>Set: {{ set_name }} ({{ index + 1 }}/{{ total }})</h2>
             <p id="card-text"><strong>English:</strong> {{ english }}</p>
             <audio controls id="audioPlayer">
                 <source src="{{ audio_url }}" type="audio/mp3">
@@ -24,11 +24,15 @@
     </div>
     <script>
-        const flipBtn = document.getElementById('flipBtn');
         let showingEnglish = true;
-        const englishText = "{{ english }}";
-        const japaneseText = "{{ japanese }}";
         flipBtn.addEventListener('click', function() {
             const cardText = document.getElementById('card-text');
             if (showingEnglish) {
@@ -40,22 +44,49 @@
             }
         });
-        // Previousボタンをクリックしたときの動作
         document.getElementById('prevBtn').addEventListener('click', function() {
-            let newIndex = {{ index }} - 1;
-            if (newIndex < 0) {
-                newIndex = {{ total }} - 1;
-            }
-            window.location.href = `/flashcards?set={{ set_name }}&index=` + newIndex;
         });
-        // Nextボタンをクリックしたときの動作
         document.getElementById('nextBtn').addEventListener('click', function() {
-            let newIndex = {{ index }} + 1;
-            if (newIndex >= {{ total }}) {
-                newIndex = 0;
-            }
-            window.location.href = `/flashcards?set={{ set_name }}&index=` + newIndex;
         });
     </script>
 </body>

 <body>
     <div class="flashcard" id="flashcard">
         <div class="content">
+            <h2 id="card-header">Set: {{ set_name }} ({{ index + 1 }}/{{ total }})</h2>
             <p id="card-text"><strong>English:</strong> {{ english }}</p>
             <audio controls id="audioPlayer">
                 <source src="{{ audio_url }}" type="audio/mp3">
     </div>
     <script>
         let showingEnglish = true;
+        let currentIndex = {{ index }};
+        const setName = '{{ set_name }}';
+        let total = {{ total }};
+        const flipBtn = document.getElementById('flipBtn');
+        let englishText = "{{ english }}";
+        let japaneseText = "{{ japanese }}";
+        // フリップボタンで英語と日本語の表示を切り替え
         flipBtn.addEventListener('click', function() {
             const cardText = document.getElementById('card-text');
             if (showingEnglish) {
             }
         });
+        // Previous ボタンでインデックスを更新
         document.getElementById('prevBtn').addEventListener('click', function() {
+            currentIndex = (currentIndex - 1 + total) % total;
+            updateFlashcard(setName, currentIndex);
         });
+        // Next ボタンでインデックスを更新
         document.getElementById('nextBtn').addEventListener('click', function() {
+            currentIndex = (currentIndex + 1) % total;
+            updateFlashcard(setName, currentIndex);
+        });
+        // フラッシュカードの内容を更新
+        function updateFlashcard(setName, newIndex) {
+            fetch(`/flashcards?set=${setName}&index=${newIndex}`)
+                .then(response => response.json())
+                .then(data => {
+                    englishText = data.english;
+                    japaneseText = data.japanese;
+                    const cardHeader = document.getElementById('card-header');
+                    const cardText = document.getElementById('card-text');
+                    const audioPlayer = document.getElementById('audioPlayer');
+                    // カード内容の更新
+                    cardHeader.innerHTML = `Set: ${data.set_name} (${data.index + 1}/${data.total})`;
+                    cardText.innerHTML = "<strong>English:</strong> " + englishText;
+                    showingEnglish = true;
+                    // 音声ファイルの更新
+                    audioPlayer.src = data.audio_url;
+                    audioPlayer.play();
+                    // URLを更新して履歴に残す (リロードしても正しいカードが表示されるように)
+                    history.pushState(null, '', `/flashcards?set=${data.set_name}&index=${data.index}`);
+                });
+        }
+        // ブラウザの「戻る」ボタンなどに対応
+        window.addEventListener('popstate', function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const setName = urlParams.get('set') || 'A';
+            const index = parseInt(urlParams.get('index')) || 0;
+            updateFlashcard(setName, index);
         });
     </script>
 </body>