Spaces:
Sleeping
Sleeping
File size: 3,315 Bytes
737784d 28b33ff 4476161 c322193 99ddf7a 737784d 3038601 737784d e3deb89 c322193 4476161 28b33ff 4476161 28b33ff 4476161 28b33ff 4476161 737784d 28b33ff 737784d 67db981 737784d 28b33ff 737784d 28b33ff c322193 28b33ff c322193 28b33ff c322193 737784d 28b33ff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE 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>English:</strong> {{ english }}</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>
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> |