FSOC-OSS / FSOC-OSS/Fsoc-level-hard
Create Quiz Categories Page with Custom Category Cards
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 21
- PR merge metrics
- No merged PRs in 30d
Description
**Title:** Design Interactive Category Selection Page with Preview and Filtering
## Problem Statement
Users currently have limited visibility into available quiz categories and cannot easily browse or discover new topics. A dedicated categories page would improve navigation, discoverability, and user engagement with different quiz topics.
## Proposed Solution
Build a comprehensive categories page featuring:
* Grid layout of category cards with images/icons
* Category descriptions and metadata (question count, difficulty)
* Filter and search capabilities
* Hover effects with preview information
* Popular/trending categories section
* Recently attempted categories
## Acceptance Criteria
### ✅ Category Card Design
* Card with category icon/image, title, description
* Display number of available questions
* Show difficulty levels available in category
* Hover effect revealing more details
* Click action to start quiz in that category
* Responsive grid layout (1/2/3/4 columns)
### ✅ Category Metadata
* Category name and short description
* Icon or representative image
* Question count indicator
* Difficulty distribution (Easy/Medium/Hard percentages)
* Average completion time
* User's best score in that category (if attempted)
### ✅ Search and Filter
* Search bar to find categories by name
* Filter by difficulty availability
* Sort options (A-Z, Most Popular, Recently Added)
* "Clear filters" button
* Show filtered result count
### ✅ Featured Sections
* "Popular Categories" section at top
* "New Categories" for recently added
* "Your Recent" showing last attempted categories
* "Recommended" based on past performance
* Carousel or grid for each section
### ✅ Category Preview
* Hover over card shows sample questions
* Quick start button on hover
* Show category statistics
* "Learn More" link to detailed category page
### ✅ Loading States
* Skeleton loaders for cards
* Smooth transition when data loads
* Error handling for failed category fetch
* Empty state if no categories match filters
Contributor guide
Assessment
This issue has not been assessed yet.