FSOC-OSS / FSOC-OSS/Fsoc-level-hard

Create Quiz Categories Page with Custom Category Cards

Open
#47 6 comments 0 reactions 1 assignee Assigned to @DevKan009 View on GitHub
enhancement good first issue hacktoberfest ui/ux
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.