Interactive Elements

[devJasonClarke]

Ticket ID: DICT-04
Status: To Do
Type: Feature
Priority: Medium
Assignee: [Frontend Developer]
Estimate: 2 – 2.5 days

---

🎯 Objective

Build the interactive "Test Your Vocabulary" quiz section on the word detail page. This feature includes a horizontally scrollable carousel of vocabulary quizzes with image cards, interactive navigation arrows, and a “View the Answer” reveal button for fill-in-the-blank questions.

---

✅ Acceptance Criteria

• Carousel displays at least 3 quiz items (cards with images and short descriptions).

• Cards are scrollable horizontally via arrow buttons.

• User can click or tap to select a quiz item.

• "Fill in the blank" quiz card includes a “View the Answer” button.

  • Clicking the button reveals the correct answer inline.

• Section is responsive and consistent with the provided design.

---

📋 Tasks

1. Build Carousel with Image Cards

• Render horizontally scrollable quiz cards
• Each card includes an image and label (e.g., "Guess the Folklore Quiz")
• Use consistent spacing and styling from design

2. Implement Carousel Navigation

• Add left/right arrows to scroll through quiz items
• Ensure smooth scroll behavior on both desktop and mobile
• Optional: Support touch/drag scroll on mobile

3. Add Quiz Interaction & Answer Reveal

• Implement logic for fill-in-the-blank questions
• Add "View the Answer" button
• On click, reveal the answer without page reload

---

🧰 Tools & Resources

• JavaScript/TypeScript + frontend framework (React/Vue)
• Carousel library (e.g., Swiper, Flickity) or custom scroll logic
• HTML/CSS for card layout and responsive behavior

---

🔗 Design Reference

• [View Figma Design](https://www.figma.com/design/CKI7T1PwNzXd1QkWIlY9TC/Patwa-Dictionary?node-id=22-363&t=ON01vPTXfPsV4QcJ-0)