Hugging Face's logo

Spaces:
OzoneAsai
/
CnJaFlashC-1
Sleeping

App Files Community
OzoneAsai commited on
Commit
a2618a8
·
verified ·
1 Parent(s): 5fbc846

Create flashcards.html

Browse files
Files changed (1) hide show
  1. templates/flashcards.html +116 -0
templates/flashcards.html ADDED
@@ -0,0 +1,116 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- templates/flashcards.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Flashcards</title>
8
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
9
+ </head>
10
+ <body>
11
+ <div class="flashcard" id="flashcard">
12
+ <div class="content">
13
+ <h2 id="card-header">Set: {{ set_name }} ({{ index + 1 }}/{{ total }})</h2>
14
+ <p id="card-text"><strong>English:</strong> {{ english }}</p>
15
+ <audio controls id="audioPlayer">
16
+ <source src="{{ audio_url }}" type="audio/mp3">
17
+ Your browser does not support the audio element.
18
+ </audio>
19
+ </div>
20
+ <div class="navigation">
21
+ <button id="prevBtn">Previous</button>
22
+ <button id="flipBtn">Flip</button>
23
+ <button id="nextBtn">Next</button>
24
+ </div>
25
+ </div>
26
+
27
+ <script>
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
+ const flipBtn = document.getElementById('flipBtn');
36
+ const prevBtn = document.getElementById('prevBtn');
37
+ const nextBtn = document.getElementById('nextBtn');
38
+ const cardText = document.getElementById('card-text');
39
+ const cardHeader = document.getElementById('card-header');
40
+ const audioPlayer = document.getElementById('audioPlayer');
41
+
42
+ // Function to fetch and update flashcard data
43
+ function updateFlashcard(setName, newIndex) {
44
+ fetch(`/api/flashcards?set=${setName}&index=${newIndex}`)
45
+ .then(response => {
46
+ if (!response.ok) {
47
+ throw new Error('Network response was not ok');
48
+ }
49
+ return response.json();
50
+ })
51
+ .then(data => {
52
+ if (data.error) {
53
+ alert(data.error);
54
+ return;
55
+ }
56
+
57
+ englishText = data.english;
58
+ japaneseText = data.japanese;
59
+ currentIndex = data.index;
60
+
61
+ // Update header
62
+ cardHeader.innerHTML = `Set: ${data.set_name} (${currentIndex + 1}/${data.total})`;
63
+
64
+ // Update text
65
+ if (showingEnglish) {
66
+ cardText.innerHTML = "<strong>English:</strong> " + englishText;
67
+ } else {
68
+ cardText.innerHTML = "<strong>Japanese:</strong> " + japaneseText;
69
+ }
70
+
71
+ // Update audio
72
+ audioPlayer.src = data.audio_url;
73
+ audioPlayer.play();
74
+
75
+ // Update URL without reloading the page
76
+ const newUrl = `/flashcards?set=${data.set_name}&index=${data.index}`;
77
+ window.history.pushState(null, '', newUrl);
78
+ })
79
+ .catch(error => {
80
+ console.error('Error fetching flashcard data:', error);
81
+ });
82
+ }
83
+
84
+ // Flip button event
85
+ flipBtn.addEventListener('click', function() {
86
+ if (showingEnglish) {
87
+ cardText.innerHTML = "<strong>Japanese:</strong> " + japaneseText;
88
+ showingEnglish = false;
89
+ } else {
90
+ cardText.innerHTML = "<strong>English:</strong> " + englishText;
91
+ showingEnglish = true;
92
+ }
93
+ });
94
+
95
+ // Previous button event
96
+ prevBtn.addEventListener('click', function() {
97
+ let newIndex = (currentIndex - 1 + total) % total;
98
+ updateFlashcard(setName, newIndex);
99
+ });
100
+
101
+ // Next button event
102
+ nextBtn.addEventListener('click', function() {
103
+ let newIndex = (currentIndex + 1) % total;
104
+ updateFlashcard(setName, newIndex);
105
+ });
106
+
107
+ // Handle browser navigation (back/forward)
108
+ window.addEventListener('popstate', function() {
109
+ const urlParams = new URLSearchParams(window.location.search);
110
+ const setName = urlParams.get('set') || 'A';
111
+ const index = parseInt(urlParams.get('index')) || 0;
112
+ updateFlashcard(setName, index);
113
+ });
114
+ </script>
115
+ </body>
116
+ </html>