CnJaFlashC-1

Sleeping

App Files Files Community

OzoneAsai commited on Sep 19, 2024

Commit

28b33ff

•

1 Parent(s): c322193

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +32 -18

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">
@@ -26,43 +26,57 @@
     <script>
         const flipBtn = document.getElementById('flipBtn');
         let showingEnglish = true;
-        const englishText = "<strong>English:</strong> {{ english }}";
-        const japaneseText = "<strong>Japanese:</strong> {{ japanese }}";
         flipBtn.addEventListener('click', function() {
             const cardText = document.getElementById('card-text');
             if (showingEnglish) {
-                cardText.innerHTML = japaneseText;
                 showingEnglish = false;
             } else {
-                cardText.innerHTML = englishText;
                 showingEnglish = true;
             }
         });
         document.getElementById('prevBtn').addEventListener('click', function() {
-            updateAudio('{{ set_name }}', {{ index }} - 1);
         });
         document.getElementById('nextBtn').addEventListener('click', function() {
-            updateAudio('{{ set_name }}', {{ index }} + 1);
         });
-        function updateAudio(setName, newIndex) {
-            if (newIndex < 0) {
-                newIndex = {{ total }} - 1;
-            } else if (newIndex >= {{ total }}) {
-                newIndex = 0;
-            }
-            fetch(`/whereAudio?set=${setName}&index=${newIndex}`)
                 .then(response => response.json())
                 .then(data => {
                     const audioPlayer = document.getElementById('audioPlayer');
-                    audioPlayer.src = data.audio_url;
-                    audioPlayer.play();
                 });
         }
     </script>
 </body>
-</html>

 <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">
     <script>
         const flipBtn = document.getElementById('flipBtn');
         let showingEnglish = true;
+        let currentIndex = {{ index }};
+        const setName = '{{ set_name }}';
+        const total = {{ total }};
+        let englishText = "{{ english }}";
+        let japaneseText = "{{ japanese }}";
         flipBtn.addEventListener('click', function() {
             const cardText = document.getElementById('card-text');
             if (showingEnglish) {
+                cardText.innerHTML = "<strong>Japanese:</strong> " + japaneseText;
                 showingEnglish = false;
             } else {
+                cardText.innerHTML = "<strong>English:</strong> " + englishText;
                 showingEnglish = true;
             }
         });
         document.getElementById('prevBtn').addEventListener('click', function() {
+            currentIndex = (currentIndex - 1 + total) % total;
+            updateFlashcard(setName, currentIndex);
         });
         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: ${setName} (${newIndex + 1}/${total})`;
+                    cardText.innerHTML = "<strong>English:</strong> " + englishText;
+                    showingEnglish = true;
+                    // 音声ファイルの更新
+                    fetch(`/whereAudio?set=${setName}&index=${newIndex}`)
+                        .then(response => response.json())
+                        .then(data => {
+                            audioPlayer.src = data.audio_url;
+                            audioPlayer.play();
+                        });
                 });
         }
     </script>
 </body>
+</html>