Hugging Face's logo

Spaces:
OzoneAsai
/
CnJaFlashC-1
Sleeping

App Files Community
OzoneAsai commited on
Commit
7a33557
·
verified ·
1 Parent(s): 28b33ff

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +15 -35
templates/index.html CHANGED
@@ -9,7 +9,7 @@
9
  <body>
10
  <div class="flashcard" id="flashcard">
11
  <div class="content">
12
- <h2 id="card-header">Set: {{ set_name }} ({{ index + 1 }}/{{ total }})</h2>
13
  <p id="card-text"><strong>English:</strong> {{ english }}</p>
14
  <audio controls id="audioPlayer">
15
  <source src="{{ audio_url }}" type="audio/mp3">
@@ -26,11 +26,8 @@
26
  <script>
27
  const flipBtn = document.getElementById('flipBtn');
28
  let showingEnglish = true;
29
- let currentIndex = {{ index }};
30
- const setName = '{{ set_name }}';
31
- const total = {{ total }};
32
- let englishText = "{{ english }}";
33
- let japaneseText = "{{ japanese }}";
34
 
35
  flipBtn.addEventListener('click', function() {
36
  const cardText = document.getElementById('card-text');
@@ -43,40 +40,23 @@
43
  }
44
  });
45
 
 
46
  document.getElementById('prevBtn').addEventListener('click', function() {
47
- currentIndex = (currentIndex - 1 + total) % total;
48
- updateFlashcard(setName, currentIndex);
 
 
 
49
  });
50
 
 
51
  document.getElementById('nextBtn').addEventListener('click', function() {
52
- currentIndex = (currentIndex + 1) % total;
53
- updateFlashcard(setName, currentIndex);
 
 
 
54
  });
55
-
56
- function updateFlashcard(setName, newIndex) {
57
- fetch(`/flashcards?set=${setName}&index=${newIndex}`)
58
- .then(response => response.json())
59
- .then(data => {
60
- englishText = data.english;
61
- japaneseText = data.japanese;
62
- const cardHeader = document.getElementById('card-header');
63
- const cardText = document.getElementById('card-text');
64
- const audioPlayer = document.getElementById('audioPlayer');
65
-
66
- // カード内容を更新
67
- cardHeader.innerHTML = `Set: ${setName} (${newIndex + 1}/${total})`;
68
- cardText.innerHTML = "<strong>English:</strong> " + englishText;
69
- showingEnglish = true;
70
-
71
- // 音声ファイルの更新
72
- fetch(`/whereAudio?set=${setName}&index=${newIndex}`)
73
- .then(response => response.json())
74
- .then(data => {
75
- audioPlayer.src = data.audio_url;
76
- audioPlayer.play();
77
- });
78
- });
79
- }
80
  </script>
81
  </body>
82
  </html>
 
9
  <body>
10
  <div class="flashcard" id="flashcard">
11
  <div class="content">
12
+ <h2>Set: {{ set_name }} ({{ index + 1 }}/{{ total }})</h2>
13
  <p id="card-text"><strong>English:</strong> {{ english }}</p>
14
  <audio controls id="audioPlayer">
15
  <source src="{{ audio_url }}" type="audio/mp3">
 
26
  <script>
27
  const flipBtn = document.getElementById('flipBtn');
28
  let showingEnglish = true;
29
+ const englishText = "{{ english }}";
30
+ const japaneseText = "{{ japanese }}";
 
 
 
31
 
32
  flipBtn.addEventListener('click', function() {
33
  const cardText = document.getElementById('card-text');
 
40
  }
41
  });
42
 
43
+ // Previousボタンをクリックしたときの動作
44
  document.getElementById('prevBtn').addEventListener('click', function() {
45
+ let newIndex = {{ index }} - 1;
46
+ if (newIndex < 0) {
47
+ newIndex = {{ total }} - 1;
48
+ }
49
+ window.location.href = `/flashcards?set={{ set_name }}&index=` + newIndex;
50
  });
51
 
52
+ // Nextボタンをクリックしたときの動作
53
  document.getElementById('nextBtn').addEventListener('click', function() {
54
+ let newIndex = {{ index }} + 1;
55
+ if (newIndex >= {{ total }}) {
56
+ newIndex = 0;
57
+ }
58
+ window.location.href = `/flashcards?set={{ set_name }}&index=` + newIndex;
59
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </script>
61
  </body>
62
  </html>