How to Use Flashcards
Click on the flashcard to flip it and see the translation. Use the navigation buttons to move between cards. Try to memorize the vocabulary!
Visual Dictionary
Browse through different clothing accessories. Click on any item to hear the pronunciation.
Vocabulary Quiz
Test your knowledge by selecting the correct translation for each clothing accessory. You need to get at least 7 out of 10 correct to pass.
Clothing Accessories Quiz
Quiz Completed!
Your Learning Progress
Track your progress as you learn clothing accessories vocabulary.
Explore more by reading vocabulary blog.
β How This Tool Works (Simple Explanation)
Your tool has 4 main learning modes:
1οΈβ£ Flashcards β Learn Words Quickly
β Shows one vocabulary word at a time
β Front side = English word + icon
β Back side = Spanish translation
How it works:
- Click the card β it flips
- Click Next / Previous β move through all words
- Counter (1/15) shows your progress
β¨ Best for quick memory practice.
2οΈβ£ Visual Dictionary β Browse & Learn
β Shows all vocabulary words in a grid
β Each item has:
- An icon
- English word
- Spanish translation
How it works:
- Click any item β you get pronunciation (currently an alert, can be upgraded to audio)
- Scroll to explore all terms
β¨ Best for visual learners.
3οΈβ£ Quiz β Test Your Knowledge
β 10 questions
β Multiple-choice format
β Must score 7/10 to pass
How it works:
- You see a question
- Example: “What is the Spanish word for Hat?”
- Choose an answer from 4 options
- Click Submit
- Correct answer = green
- Wrong answer = red
- Click Next Question
- Final screen shows:
- Your score
- Result message
- “Try again” button
β¨ Best for testing how much you learned.
4οΈβ£ Progress Tracker β See Your Improvement
β Stores your learning data inside localStorage (on the user’s browser)
It shows:
- Words Learned
- Quizzes Passed
- Day Streak
- Mastery Level
How it works:
- Every time you pass a quiz (7/10), “Quizzes Passed” increases
- The data stays saved even after you close the website
- Clicking Reset Progress clears all saved data
β¨ Helps learners stay motivated.
π§ Behind the Scenes (How the Code Works)
Your script does these tasks:
β Stores all vocabulary in one array:
{ english: “Scarf”, spanish: “Bufanda”, icon: “𧣔 }
β Flashcards:
- Updates card content based on current index
- Flips by adding/removing .flipped CSS class
β Visual Dictionary:
- Loops through vocabulary
- Creates items dynamically
- Adds click events
β Quiz:
- Randomly chooses question type
- Generates 4 options (1 correct + 3 incorrect)
- Tracks score
- Highlights results
β Stats:
- Loads from localStorage
- Saves updates
- Refreshes display