Create and Study Flashcards Online Create and study digital flashcards with flip animation and progress tracking.

The tool's core functionality relies on React state management, specifically the useState hook, to store and update flashcard data, mode, and user progress. When a user creates a new card, the addCard function is triggered, which uses the Date.now() method to generate a unique id for each card. The cards are stored in an array of Flashcard objects, defined by the interface Flashcard with properties id, front, and back.

The Fisher-Yates shuffle algorithm is used to randomize the order of the flashcards when the user switches to study mode, implemented through the startStudy function and the sort method with a compare function that generates a random number between -0.5 and 0.5. This shuffled array is then stored in the shuffled state variable. The nextCard function updates the currentIndex, known, and unknown state variables based on user input, and also flips the card using the setFlipped function.

The tool uses CSS 3D flip animation to display the front and back of each flashcard, providing a visually engaging way to study. When importing flashcards in bulk, the doImport function splits the input text into individual lines, filters out lines that do not contain the | character, and maps each line to a new Flashcard object with the front and back properties populated accordingly. The importText state variable stores the user's input, which is then cleared after successful import.

The tool tracks progress by calculating the percentage of known cards out of the total number of shuffled cards, displayed as a visual bar using CSS. This progress tracking feature allows users to focus on reviewing difficult material and makes it easy to monitor their learning progress over time. The use of React's useCallback hook ensures that functions like addCard and nextCard are only recreated when necessary, improving performance by preventing unnecessary re-renders.