Spaces:
Sleeping
Sleeping
| <!-- templates/flashcards.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flashcards</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| </head> | |
| <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>Japanese:</strong> {{ japanese }}</p> | |
| <audio controls id="audioPlayer"> | |
| <source src="{{ audio_url }}" type="audio/mp3"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </div> | |
| <div class="navigation"> | |
| <button id="prevBtn">Previous</button> | |
| <button id="flipBtn">Flip</button> | |
| <button id="nextBtn">Next</button> | |
| </div> | |
| </div> | |
| <script> | |
| let showingJapanese = true; | |
| let currentIndex = {{ index }}; | |
| const setName = '{{ set_name }}'; | |
| const total = {{ total }}; | |
| let japaneseText = "{{ japanese }}"; | |
| let chineseText = "{{ chinese }}"; | |
| const flipBtn = document.getElementById('flipBtn'); | |
| const prevBtn = document.getElementById('prevBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| const cardText = document.getElementById('card-text'); | |
| const cardHeader = document.getElementById('card-header'); | |
| const audioPlayer = document.getElementById('audioPlayer'); | |
| // Function to fetch and update flashcard data | |
| function updateFlashcard(setName, newIndex) { | |
| fetch(`/api/flashcards?set=${setName}&index=${newIndex}`) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| if (data.error) { | |
| alert(data.error); | |
| return; | |
| } | |
| japaneseText = data.japanese; | |
| chineseText = data.chinese; | |
| currentIndex = data.index; | |
| // Update header | |
| cardHeader.innerHTML = `Set: ${data.set_name} (${currentIndex + 1}/${data.total})`; | |
| // Update text | |
| if (showingJapanese) { | |
| cardText.innerHTML = "<strong>Japanese:</strong> " + japaneseText; | |
| } else { | |
| cardText.innerHTML = "<strong>Chinese:</strong> " + chineseText; | |
| } | |
| // Update audio | |
| audioPlayer.src = data.audio_url; | |
| audioPlayer.play(); | |
| // Update URL without reloading the page | |
| const newUrl = `/flashcards?set=${data.set_name}&index=${data.index}`; | |
| window.history.pushState(null, '', newUrl); | |
| }) | |
| .catch(error => { | |
| console.error('Error fetching flashcard data:', error); | |
| }); | |
| } | |
| // Flip button event | |
| flipBtn.addEventListener('click', function() { | |
| if (showingJapanese) { | |
| cardText.innerHTML = "<strong>Chinese:</strong> " + chineseText; | |
| showingJapanese = false; | |
| } else { | |
| cardText.innerHTML = "<strong>Japanese:</strong> " + japaneseText; | |
| showingJapanese = true; | |
| } | |
| }); | |
| // Previous button event | |
| prevBtn.addEventListener('click', function() { | |
| let newIndex = (currentIndex - 1 + total) % total; | |
| updateFlashcard(setName, newIndex); | |
| }); | |
| // Next button event | |
| nextBtn.addEventListener('click', function() { | |
| let newIndex = (currentIndex + 1) % total; | |
| updateFlashcard(setName, newIndex); | |
| }); | |
| // Handle browser navigation (back/forward) | |
| 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> | |
| </html> | |