Flashcard apps are based on the principle of active recall, a proven learning technique.
37 |
Flashcards have historical roots dating back to at least the 19th century.
38 |
Many flashcard apps incorporate spaced repetition algorithms to optimize learning.
39 |
Modern flashcard apps allow multimedia integration, including images, audio, and video.
40 |
Some flashcard apps offer collaborative learning features for sharing and studying with others.
41 |
Gamification elements are often included in flashcard apps to increase engagement and motivation.
42 |
Flashcard apps are versatile and can be used to study a wide range of subjects and topics.
43 |
Developers continually refine flashcard apps based on user feedback and advancements in learning
44 | science.
45 |
46 |
47 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | text-align: center;
4 | padding: 20px;
5 | margin: 0;
6 | box-sizing: border-box;
7 | padding: 0;
8 | display: flex;
9 | flex-direction: column;
10 | align-items: center;
11 | /* Center horizontally */
12 | justify-content: center;
13 | min-height: 100vh;
14 | /* Center vertically */
15 | }
16 |
17 | header {
18 | top: 0;
19 | position: absolute;
20 | }
21 |
22 | header,
23 | footer {
24 | background-color: #22048f;
25 | color: #fff;
26 | padding: 10px 0;
27 | width: 100%;
28 | }
29 |
30 | h1 {
31 | margin: 0;
32 | }
33 |
34 | main {
35 | margin-top: 20px;
36 | }
37 |
38 |
39 | .flashcard-container {
40 | display: flex;
41 | justify-content: center;
42 | align-items: center;
43 | margin-top: 20px;
44 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
45 | /* Add shadow */
46 | border-radius: 20px;
47 | /* Add rounded corners */
48 | background-color: #f0f0f0;
49 | /* Set background color */
50 | padding: 20px;
51 | /* Add padding */
52 | }
53 |
54 |
55 | .flashcard {
56 | width: 300px;
57 | height: 200px;
58 | perspective: 1000px;
59 | position: relative;
60 | background-color: #9206f0;
61 | /* Set background color */
62 | border-radius: 10px;
63 | /* Add rounded corners */
64 | box-shadow: 10px 4px 4px rgba(228, 205, 4, 0.5);
65 | z-index: 1;
66 | /* Add shadow */
67 | }
68 |
69 | .flashcard-front,
70 | .flashcard-back {
71 | width: 100%;
72 | height: 100%;
73 | position: absolute;
74 | backface-visibility: hidden;
75 | display: flex;
76 | justify-content: center;
77 | align-items: center;
78 | }
79 |
80 | .flashcard-front {
81 | background-color: #d005f8bb;
82 | color: #fff;
83 | /* Set text color */
84 | border-radius: 10px;
85 | /* Add rounded corners */
86 | }
87 |
88 | .flashcard-back {
89 | background-color: #0559f7;
90 | color: #212529;
91 | /* Set text color */
92 | border-radius: 10px;
93 | /* Add rounded corners */
94 | transform: rotateY(180deg);
95 | }
96 |
97 | .flashcard p {
98 | font-family: Arial, sans-serif;
99 | /* Set font family */
100 | font-size: 1.2rem;
101 | /* Set font size */
102 | padding: 20px;
103 | /* Add padding */
104 | }
105 |
106 |
107 |
108 |
109 | button {
110 | padding: 10px 20px;
111 | margin: 10px;
112 | background-color: #007bff;
113 | color: #fff;
114 | border: none;
115 | border-radius: 5px;
116 | cursor: pointer;
117 | }
118 |
119 | button:hover {
120 | background-color: #0056b3;
121 | }
122 |
123 |
124 | #interestingFacts {
125 | margin-top: 20px;
126 | /* Add space between the flashcard and the interesting facts section */
127 | }
128 |
129 | #interestingFacts h2 {
130 | color: #22048f;
131 | /* Change the color of the heading */
132 | }
133 |
134 | #interestingFacts ul {
135 | list-style-type: none;
136 | /* Remove bullet points from the list */
137 | padding: 0;
138 | }
139 |
140 | #interestingFacts li {
141 | margin-bottom: 10px;
142 | /* Add space between each fact */
143 | text-align: left;
144 | /* Align text to the left */
145 | }
146 |
147 | #interestingFacts li::before {
148 | content: '\2022';
149 | /* Add a bullet point before each list item */
150 | color: #22048f;
151 | /* Match the color of the bullet point with the heading */
152 | font-weight: bold;
153 | /* Make the bullet point bold */
154 | margin-right: 5px;
155 | /* Add space between the bullet point and the text */
156 | }
157 |
158 |
159 |
160 |
161 | footer {
162 | margin-top: auto;
163 | color: #fff;
164 | padding: 10px 0;
165 | bottom: 0;
166 | position: absolute;
167 | }
168 |
169 | @media (max-width: 600px) {
170 | #interestingFacts {
171 | margin: 20px;
172 | margin-bottom: 100px;
173 |
174 | }
175 |
176 |
177 | footer {
178 | position: fixed;
179 | bottom: 0;
180 | width: 100%;
181 | margin-top: 30px;
182 | }
183 |
184 | .flashcard-container {
185 | margin-top: 50px;
186 | }
187 |
188 |
189 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // Sample flashcard content
2 | const flashcards = [
3 | { front: 'What is the capital of France?', back: 'Paris' },
4 | { front: 'Who wrote "Romeo and Juliet"?', back: 'William Shakespeare' },
5 | { front: 'What is the chemical symbol for gold?', back: 'Au' },
6 | { front: 'What year did World War I begin?', back: '1914' },
7 | { front: 'Who painted the Mona Lisa?', back: 'Leonardo da Vinci' },
8 | { front: 'What is the largest planet in our solar system?', back: 'Jupiter' },
9 | { front: 'What is the square root of 64?', back: '8' },
10 | { front: 'What is the atomic number of carbon?', back: '6' },
11 | { front: 'Who wrote "To Kill a Mockingbird"?', back: 'Harper Lee' },
12 | { front: 'What is the capital of Japan?', back: 'Tokyo' },
13 | { front: 'What is the chemical symbol for water?', back: 'H2O' },
14 | { front: 'Who discovered penicillin?', back: 'Alexander Fleming' },
15 | { front: 'What is the tallest mountain in the world?', back: 'Mount Everest' },
16 | { front: 'What is the boiling point of water in Fahrenheit?', back: '212' },
17 | { front: 'Who composed the "Moonlight Sonata"?', back: 'Ludwig van Beethoven' },
18 | { front: 'What is the capital of Brazil?', back: 'Brasília' },
19 | { front: 'What is the chemical symbol for oxygen?', back: 'O' },
20 | { front: 'Who painted "The Starry Night"?', back: 'Vincent van Gogh' },
21 | { front: 'What is the melting point of iron in Celsius?', back: '1538' },
22 | { front: 'Who wrote "1984"?', back: 'George Orwell' },
23 | { front: 'What is the chemical symbol for sodium?', back: 'Na' },
24 | { front: 'What is the speed of light in meters per second?', back: '299,792,458' },
25 | { front: 'Who composed "Symphony No. 9" (Ode to Joy)?', back: 'Ludwig van Beethoven' },
26 | { front: 'What is the capital of Australia?', back: 'Canberra' },
27 | { front: 'What is the chemical symbol for silver?', back: 'Ag' },
28 | { front: 'Who painted "The Last Supper"?', back: 'Leonardo da Vinci' },
29 | { front: 'What is the freezing point of water in Kelvin?', back: '273.15' },
30 | { front: 'Who wrote "Pride and Prejudice"?', back: 'Jane Austen' },
31 | { front: 'What is the chemical symbol for helium?', back: 'He' },
32 | { front: 'Who invented the telephone?', back: 'Alexander Graham Bell' },
33 | { front: 'What is the deepest ocean in the world?', back: 'Pacific Ocean' },
34 | { front: 'What is the speed of sound in air at room temperature?', back: '343 meters per second' },
35 | { front: 'Who composed "Für Elise"?', back: 'Ludwig van Beethoven' },
36 | { front: 'What is the currency of China?', back: 'Renminbi' },
37 | { front: 'What is the chemical symbol for carbon dioxide?', back: 'CO2' },
38 | { front: 'Who painted "The Creation of Adam"?', back: 'Michelangelo' },
39 | { front: 'What is the circumference of the Earth at the equator?', back: '40,075 kilometers' },
40 | { front: 'Who wrote "The Catcher in the Rye"?', back: 'J.D. Salinger' },
41 | { front: 'What is the chemical symbol for potassium?', back: 'K' },
42 | { front: 'Who invented the light bulb?', back: 'Thomas Edison' },
43 | { front: 'What is the largest ocean on Earth?', back: 'Pacific Ocean' },
44 | { front: 'What is the boiling point of water in Kelvin?', back: '373.15' },
45 | { front: 'Who composed "The Four Seasons"?', back: 'Antonio Vivaldi' },
46 | { front: 'What is the currency of Japan?', back: 'Japanese yen' },
47 | { front: 'What is the chemical symbol for nitrogen?', back: 'N' },
48 | { front: 'Who painted "Guernica"?', back: 'Pablo Picasso' },
49 | { front: 'What is the capital of South Africa?', back: 'Pretoria' },
50 | { front: 'What is the chemical symbol for calcium?', back: 'Ca' },
51 | { front: 'Who discovered gravity?', back: 'Isaac Newton' },
52 | { front: 'What is the deepest lake in the world?', back: 'Lake Baikal' },
53 | { front: 'What is the speed of light in miles per hour?', back: '671 million miles per hour' },
54 | { front: 'Who composed "Swan Lake"?', back: 'Pyotr Ilyich Tchaikovsky' },
55 | { front: 'What is the currency of India?', back: 'Indian rupee' },
56 | { front: 'What is the chemical symbol for iron?', back: 'Fe' },
57 | { front: 'Who discovered America?', back: 'Christopher Columbus' },
58 | { front: 'What is the largest desert in the world?', back: 'Antarctica' },
59 | { front: 'What is the chemical symbol for copper?', back: 'Cu' },
60 | { front: 'Who discovered the theory of relativity?', back: 'Albert Einstein' },
61 | { front: 'What is the boiling point of water in Celsius?', back: '100' },
62 | { front: 'Who painted "The Persistence of Memory"?', back: 'Salvador Dalí' },
63 | { front: 'What is the melting point of gold in Celsius?', back: '1064' },
64 | { front: 'What is the largest continent by land area?', back: 'Asia' },
65 | { front: 'Who wrote "The Odyssey"?', back: 'Homer' },
66 | { front: 'What is the chemical symbol for lead?', back: 'Pb' },
67 | { front: 'Who discovered the law of gravity?', back: 'Isaac Newton' },
68 | { front: 'What is the square root of 144?', back: '12' },
69 | { front: 'What is the currency of Russia?', back: 'Russian ruble' },
70 | { front: 'Who painted "The Scream"?', back: 'Edvard Munch' },
71 | { front: 'What is the boiling point of ethanol in Celsius?', back: '78.37' },
72 | { front: 'Who invented the theory of evolution by natural selection?', back: 'Charles Darwin' },
73 | { front: 'What is the chemical symbol for silicon?', back: 'Si' },
74 | { front: 'Who wrote "War and Peace"?', back: 'Leo Tolstoy' },
75 | { front: 'What is the melting point of ice in Fahrenheit?', back: '32' },
76 | { front: 'What is the capital of Spain?', back: 'Madrid' },
77 | { front: 'Who painted "Starry Night Over the Rhône"?', back: 'Vincent van Gogh' },
78 | { front: 'What is the boiling point of mercury in Celsius?', back: '356.7' },
79 | { front: 'Who discovered the structure of DNA?', back: 'James Watson and Francis Crick' },
80 | { front: 'What is the chemical symbol for uranium?', back: 'U' },
81 | { front: 'Who wrote "The Great Gatsby"?', back: 'F. Scott Fitzgerald' },
82 | { front: 'What is the melting point of sulfur in Celsius?', back: '115.21' },
83 | { front: 'What is the currency of the United Kingdom?', back: 'Pound sterling' },
84 | { front: 'Who painted "Girl with a Pearl Earring"?', back: 'Johannes Vermeer' },
85 | { front: 'What is the boiling point of nitrogen in Celsius?', back: '-196' },
86 | { front: 'Who developed the theory of general relativity?', back: 'Albert Einstein' },
87 | { front: 'What is the chemical symbol for tin?', back: 'Sn' },
88 | { front: 'Who wrote "Don Quixote"?', back: 'Miguel de Cervantes' },
89 | { front: 'What is the melting point of aluminum in Celsius?', back: '660.32' },
90 | { front: 'What is the capital of Italy?', back: 'Rome' },
91 | { front: 'Who painted "The Birth of Venus"?', back: 'Sandro Botticelli' },
92 | { front: 'What is the boiling point of ethanol in Fahrenheit?', back: '173.2' },
93 | { front: 'Who discovered X-rays?', back: 'Wilhelm Conrad Röntgen' },
94 | { front: 'What is the chemical symbol for mercury?', back: 'Hg' },
95 | { front: 'Who wrote "The Iliad"?', back: 'Homer' },
96 | { front: 'What is the melting point of gold in Fahrenheit?', back: '1945' },
97 | { front: 'What is the currency of Canada?', back: 'Canadian dollar' },
98 | { front: 'Who painted "The School of Athens"?', back: 'Raphael' },
99 | { front: 'What is the boiling point of mercury in Fahrenheit?', back: '674' },
100 | { front: 'Who discovered the polio vaccine?', back: 'Jonas Salk' },
101 | { front: 'What is the chemical symbol for zinc?', back: 'Zn' },
102 | { front: 'Who wrote "Moby-Dick"?', back: 'Herman Melville' },
103 | { front: 'What is the melting point of sulfur in Fahrenheit?', back: '239.38' },
104 | { front: 'What is the capital of Germany?', back: 'Berlin' },
105 | { front: 'Who painted "American Gothic"?', back: 'Grant Wood' },
106 | { front: 'What is the boiling point of nitrogen in Fahrenheit?', back: '-321' },
107 | { front: 'Who discovered the theory of general relativity?', back: 'Albert Einstein' },
108 | { front: 'What is the chemical symbol for platinum?', back: 'Pt' },
109 | { front: 'Who wrote "The Divine Comedy"?', back: 'Dante Alighieri' },
110 | { front: 'What is the melting point of aluminum in Fahrenheit?', back: '1220.58' },
111 | { front: 'What is the capital of China?', back: 'Beijing' },
112 | { front: 'Who painted "The Night Watch"?', back: 'Rembrandt' },
113 | { front: 'What is the chemical symbol for sodium?', back: 'Na' },
114 | { front: 'Who composed the "Moonlight Sonata"?', back: 'Ludwig van Beethoven' },
115 | { front: 'What is the boiling point of carbon dioxide in Celsius?', back: '-78.5' },
116 | { front: 'Who painted "Starry Night"?', back: 'Vincent van Gogh' },
117 | { front: 'What is the melting point of iron in Celsius?', back: '1538' },
118 | { front: 'What is the smallest country by land area?', back: 'Vatican City' },
119 | { front: 'Who wrote "1984"?', back: 'George Orwell' },
120 | { front: 'What is the chemical symbol for oxygen?', back: 'O' },
121 | { front: 'Who discovered penicillin?', back: 'Alexander Fleming' },
122 | { front: 'What is the square root of 169?', back: '13' },
123 | { front: 'What is the currency of Japan?', back: 'Japanese yen' },
124 | { front: 'Who painted "The Last Supper"?', back: 'Leonardo da Vinci' },
125 | { front: 'What is the boiling point of ethanol in Celsius?', back: '78.37' },
126 | { front: 'Who developed the theory of relativity?', back: 'Albert Einstein' },
127 | { front: 'What is the chemical symbol for calcium?', back: 'Ca' },
128 | { front: 'Who wrote "The Great Gatsby"?', back: 'F. Scott Fitzgerald' },
129 | { front: 'What is the melting point of copper in Celsius?', back: '1085' },
130 | { front: 'What is the currency of Australia?', back: 'Australian dollar' },
131 | { front: 'Who painted "The Creation of Adam"?', back: 'Michelangelo' },
132 | { front: 'What is the boiling point of water in Fahrenheit?', back: '212' },
133 | { front: 'Who discovered electricity?', back: 'Benjamin Franklin' },
134 | { front: 'What is the chemical symbol for potassium?', back: 'K' },
135 | { front: 'Who wrote "Pride and Prejudice"?', back: 'Jane Austen' },
136 | { front: 'What is the melting point of silver in Celsius?', back: '961.8' },
137 | { front: 'What is the capital of Spain?', back: 'Madrid' },
138 | { front: 'Who painted "The Starry Night"?', back: 'Vincent van Gogh' },
139 | { front: 'What is the boiling point of nitrogen in Fahrenheit?', back: '-321' },
140 | { front: 'Who discovered the theory of general relativity?', back: 'Albert Einstein' },
141 | { front: 'What is the chemical symbol for platinum?', back: 'Pt' },
142 | { front: 'Who wrote "The Divine Comedy"?', back: 'Dante Alighieri' },
143 | { front: 'What is the melting point of aluminum in Fahrenheit?', back: '1220.58' },
144 | { front: 'What is the capital of China?', back: 'Beijing' },
145 | { front: 'Who painted "The Night Watch"?', back: 'Rembrandt' },
146 | { front: 'What is the boiling point of nitrogen in Fahrenheit?', back: '-321' },
147 | { front: 'Who discovered the theory of general relativity?', back: 'Albert Einstein' },
148 | { front: 'What is the chemical symbol for platinum?', back: 'Pt' },
149 | { front: 'Who wrote "The Divine Comedy"?', back: 'Dante Alighieri' },
150 | { front: 'What is the melting point of aluminum in Fahrenheit?', back: '1220.58' },
151 | { front: 'What is the capital of China?', back: 'Beijing' },
152 | { front: 'Who painted "The Night Watch"?', back: 'Rembrandt' },
153 | { front: 'What is the chemical symbol for lithium?', back: 'Li' },
154 | { front: 'Who composed the "Ode to Joy"?', back: 'Ludwig van Beethoven' },
155 | { front: 'What is the capital of Argentina?', back: 'Buenos Aires' },
156 | { front: 'What is the atomic number of hydrogen?', back: '1' },
157 | { front: 'Who painted "The Thinker"?', back: 'Auguste Rodin' },
158 | { front: 'What is the closest planet to the Sun?', back: 'Mercury' },
159 | { front: 'What is the square root of 81?', back: '9' },
160 | { front: 'What is the chemical symbol for nitrogen?', back: 'N' },
161 | { front: 'Who wrote "The Lord of the Rings"?', back: 'J.R.R. Tolkien' },
162 | { front: 'What is the capital of Egypt?', back: 'Cairo' },
163 | { front: 'What is the chemical symbol for carbon?', back: 'C' },
164 | { front: 'Who discovered the theory of evolution?', back: 'Charles Darwin' },
165 | { front: 'What is the tallest building in the world?', back: 'Burj Khalifa' },
166 | { front: 'What is the boiling point of mercury in Kelvin?', back: '629.88' },
167 | { front: 'Who composed "The Magic Flute"?', back: 'Wolfgang Amadeus Mozart' },
168 | { front: 'What is the capital of Canada?', back: 'Ottawa' },
169 | { front: 'What is the chemical symbol for zinc?', back: 'Zn' },
170 | { front: 'Who painted "The Persistence of Memory"?', back: 'Salvador Dalí' },
171 | { front: 'What is the freezing point of water in Fahrenheit?', back: '32' },
172 | { front: 'Who wrote "The Hitchhiker\'s Guide to the Galaxy"?', back: 'Douglas Adams' },
173 | { front: 'What is the chemical symbol for helium?', back: 'He' },
174 | { front: 'Who discovered gravity?', back: 'Isaac Newton' },
175 | { front: 'What is the deepest lake in the United States?', back: 'Crater Lake' },
176 | { front: 'What is the speed of sound in water?', back: '1482 meters per second' },
177 | { front: 'Who composed "La Traviata"?', back: 'Giuseppe Verdi' },
178 | { front: 'What is the currency of Mexico?', back: 'Mexican peso' },
179 | { front: 'What is the chemical symbol for iron?', back: 'Fe' },
180 | { front: 'Who invented the radio?', back: 'Guglielmo Marconi' },
181 | { front: 'What is the largest river in the world by discharge?', back: 'Amazon River' },
182 | { front: 'What is the speed of light in kilometers per second?', back: '299,792 kilometers per second' },
183 | { front: 'Who composed "The Nutcracker"?', back: 'Pyotr Ilyich Tchaikovsky' },
184 | { front: 'What is the currency of South Korea?', back: 'South Korean won' },
185 | { front: 'What is the chemical symbol for aluminum?', back: 'Al' },
186 | { front: 'Who painted "Les Demoiselles d\'Avignon"?', back: 'Pablo Picasso' },
187 | { front: 'What is the capital of India?', back: 'New Delhi' },
188 | { front: 'Who discovered the laws of planetary motion?', back: 'Johannes Kepler' },
189 | { front: 'What is the deepest point in the ocean?', back: 'Mariana Trench' },
190 | { front: 'What is the speed of light in miles per second?', back: '186,282 miles per second' },
191 | { front: 'Who composed "Carmen"?', back: 'Georges Bizet' },
192 | { front: 'What is the currency of Brazil?', back: 'Brazilian real' },
193 | { front: 'What is the chemical symbol for tin?', back: 'Sn' },
194 | { front: 'Who wrote "The War of the Worlds"?', back: 'H.G. Wells' },
195 | { front: 'What is the melting point of ice in Kelvin?', back: '273.15' },
196 | { front: 'What is the capital of Russia?', back: 'Moscow' },
197 | { front: 'Who painted "The Birth of Venus"?', back: 'Sandro Botticelli' },
198 | { front: 'What is the boiling point of ethanol in Fahrenheit?', back: '173.2' },
199 | { front: 'Who discovered X-rays?', back: 'Wilhelm Conrad Röntgen' },
200 | { front: 'What is the chemical symbol for mercury?', back: 'Hg' },
201 | { front: 'Who wrote "The Iliad"?', back: 'Homer' },
202 | { front: 'What is the melting point of gold in Fahrenheit?', back: '1945' },
203 | { front: 'What is the currency of Canada?', back: 'Canadian dollar' },
204 | { front: 'Who painted "The School of Athens"?', back: 'Raphael' },
205 | { front: 'What is the boiling point of mercury in Fahrenheit?', back: '674' },
206 | { front: 'Who discovered the polio vaccine?', back: 'Jonas Salk' },
207 | { front: 'What is the chemical symbol for uranium?', back: 'U' },
208 | { front: 'Who wrote "Moby-Dick"?', back: 'Herman Melville' },
209 | { front: 'What is the melting point of sulfur in Fahrenheit?', back: '239.38' },
210 | { front: 'What is the capital of Germany?', back: 'Berlin' },
211 | { front: 'Who painted "American Gothic"?', back: 'Grant Wood' },
212 | { front: 'What is the boiling point of nitrogen in Fahrenheit?', back: '-321' },
213 | { front: 'Who discovered the theory of general relativity?', back: 'Albert Einstein' },
214 | { front: 'What is the chemical symbol for platinum?', back: 'Pt' },
215 | { front: 'Who wrote "The Divine Comedy"?', back: 'Dante Alighieri' },
216 | { front: 'What is the melting point of aluminum in Fahrenheit?', back: '1220.58' },
217 | { front: 'What is the capital of China?', back: 'Beijing' },
218 | { front: 'Who painted "The Night Watch"?', back: 'Rembrandt' },
219 | { front: 'What is the boiling point of nitrogen in Fahrenheit?', back: '-321' },
220 | { front: 'Who discovered the theory of general relativity?', back: 'Albert Einstein' },
221 | { front: 'What is the chemical symbol for platinum?', back: 'Pt' },
222 | { front: 'Who wrote "The Divine Comedy"?', back: 'Dante Alighieri' },
223 |
224 | ];
225 |
226 | let currentCardIndex = 0;
227 | let isFlipped = false;
228 |
229 | // Function to load the next flashcard
230 | function loadNextFlashcard() {
231 | if (currentCardIndex < flashcards.length) {
232 | const currentCard = flashcards[currentCardIndex];
233 | document.getElementById('flashcardFront').innerText = currentCard.front;
234 | document.getElementById('flashcardBack').innerText = currentCard.back;
235 | isFlipped = false;
236 | updateCardFlip();
237 | currentCardIndex++;
238 | } else {
239 | // No more flashcards, reset to the first card
240 | currentCardIndex = 0;
241 | loadNextFlashcard();
242 | }
243 | }
244 |
245 | // Function to update the flip state of the flashcard
246 | function updateCardFlip() {
247 | const flashcardFront = document.getElementById('flashcardFront');
248 | const flashcardBack = document.getElementById('flashcardBack');
249 |
250 | if (isFlipped) {
251 | flashcardFront.style.transform = 'rotateY(180deg)';
252 | flashcardBack.style.transform = 'rotateY(0deg)';
253 | } else {
254 | flashcardFront.style.transform = 'rotateY(0deg)';
255 | flashcardBack.style.transform = 'rotateY(-180deg)';
256 | }
257 | }
258 |
259 |
260 |
261 | // Event listener for the flip button
262 | document.getElementById('flipButton').addEventListener('click', () => {
263 | isFlipped = !isFlipped;
264 | updateCardFlip();
265 |
266 | });
267 |
268 | // Event listener for the next button
269 | document.getElementById('nextButton').addEventListener('click', loadNextFlashcard)
270 |
271 |
272 |
273 |
274 | // Initial load of the first flashcard
275 | loadNextFlashcard();
276 |
--------------------------------------------------------------------------------