Spaces:
Sleeping
Sleeping
File size: 3,964 Bytes
737784d b5d252d 4476161 c322193 99ddf7a 737784d 3038601 737784d e3deb89 c322193 4476161 b5d252d 4476161 b5d252d 4476161 28b33ff 4476161 28b33ff 4476161 b5d252d 737784d b5d252d 737784d 67db981 b5d252d 737784d b5d252d 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 83 84 85 86 87 88 89 90 91 92 93 |
<!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>
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) {
cardText.innerHTML = "<strong>Japanese:</strong> " + japaneseText;
showingEnglish = false;
} else {
cardText.innerHTML = "<strong>English:</strong> " + englishText;
showingEnglish = true;
}
});
// 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>
</html> |