Quiz Mode

​

Quiz Types

​

Multiple Choice

• One correct answer (the vocabulary term that matches the definition)
• Three wrong answers randomly selected from other terms
• Options are shuffled each time for variety

// Wrong answers generated from other terms
const wrongOptions = getWrongAnswers(term, 3);
const options = shuffleArray([term.term, ...wrongOptions]);

​

Type Answer

• Flexible matching: Accepts exact matches or close variations
• Case insensitive: “API” and “api” both work
• Partial matching: Partial correct answers are accepted
• Press Enter to submit your answer

// Flexible answer checking
const normalizedAnswer = typedAnswer.trim().toLowerCase();
const normalizedCorrect = correctAnswer.toLowerCase();

if (normalizedAnswer === normalizedCorrect ||
    normalizedCorrect.includes(normalizedAnswer) ||
    normalizedAnswer.includes(normalizedCorrect)) {
  // Correct!
}

​

How Quizzes Work

​

Starting a Quiz

1. Select a category from the home screen
2. Tap the “Quiz” button
3. Choose your quiz type (multiple choice or type answer)
4. Quiz begins with 10 randomly selected questions

​

Question Format

• Progress indicator: Dots showing which question you’re on (e.g., “3 / 10”)
• Definition card: The definition you need to match
• Hint button: Click to see the first letter of the answer
• Answer options or input field depending on quiz type

​

Answering Questions

• Click any option (A, B, C, or D)
• Correct answers show green with a checkmark ✓
• Wrong answers show red with an X
• The correct answer is always highlighted in green

• Type your answer in the input field
• Click “Submit Answer” or press Enter
• Input border turns green (correct) or red (incorrect)
• If wrong, the correct answer is displayed below

​

Hints

<button onClick={() => setShowHint(true)}>
  {showHint ? `Starts with "${correctAnswer[0]}"` : 'Show hint'}
</button>

​

Results & Scoring

​

Score Breakdown

• Total correct answers out of 10
• Percentage score
• Animated progress bar

​

Performance Feedback

• 80%+ (8-10 correct): “Excellent!” with trophy icon 🏆
• 50-79% (5-7 correct): “Good Job!” with thumbs up 👍
• Below 50% (0-4 correct): “Keep Practicing!” with study icon 📚

const percentage = Math.round((score / questions.length) * 100);

// Color-coded progress bar
className={percentage >= 80 ? 'bg-green-500' : 
           percentage >= 50 ? 'bg-yellow-500' : 
           'bg-orange-500'}

​

Post-Quiz Actions

​

Review Mode

{wrongAnswers.length > 0 && !reviewMode && (
  <button onClick={() => setReviewMode(true)}>
    Review {wrongAnswers.length} Mistake{wrongAnswers.length > 1 ? 's' : ''}
  </button>
)}

• Focuses study time on weak areas
• Uses the same quiz format you were using
• Tracks performance separately
• Can be retried until mastered

​

Progress Tracking Integration

onComplete={(correct, total) => {
  // Results are logged for progress tracking
}}

• Quiz completion counts toward daily study streaks
• Results are factored into category progress percentages
• May unlock achievements based on performance

​

Share Your Score

const handleShareScore = () => {
  shareQuizScore(score, questions.length);
};

​

Keyboard Shortcuts

• Enter: Submit answer (when unanswered)
• Enter: Next question (after answering)

window.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !isAnswered) {
    handleTypeSubmit();
  } else if (e.key === 'Enter' && isAnswered) {
    handleNext();
  }
});

​

Best Practices

​

Technical Details

​

Question Generation

1. Shuffling available terms from the selected category
2. Selecting the first 10 terms (or all terms in review mode)
3. Generating 3 wrong answers from other terms in the entire vocabulary set
4. Shuffling the 4 options so the correct answer isn’t always in the same position

​

State Management

const [currentIndex, setCurrentIndex] = useState(0);
const [score, setScore] = useState(0);
const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null);
const [isAnswered, setIsAnswered] = useState(false);
const [wrongAnswers, setWrongAnswers] = useState<Term[]>([]);