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

Create Quiz History Page with Filtering and Sorting

Open
#43 8 comments 0 reactions 1 assignee Claimed by @JiteshYadavvvvv View on GitHub
enhancement feature hacktoberfest intermediate
Dominant language
JavaScript
Stars
1
Forks
21
PR merge metrics
No merged PRs in 30d

Description

**Title:** Build Comprehensive Quiz History with Search, Filter, and Sort Capabilities

## Problem Statement

Users have no way to view their past quiz attempts, making it impossible to track progress over time, identify areas for improvement, or retake specific quizzes. A history page is essential for user engagement and learning progression.

## Proposed Solution

Create a quiz history page displaying all past quiz attempts with:

* Chronological list of quizzes with key details
* Search functionality by quiz category/title
* Filter options (date range, score range, category, difficulty)
* Sort options (date, score, category, duration)
* Pagination or infinite scroll
* Quick actions (retake, view details, delete)

## Acceptance Criteria

### ✅ History List Display

* Card-based layout for each quiz attempt
* Show quiz date, category, score, duration
* Display percentage and performance indicator
* Thumbnail or icon for quiz category
* Hover effects with additional details
* Mobile-responsive card design

### ✅ Search Functionality

* Search bar at top of page
* Real-time search as user types
* Search across quiz title, category, tags
* Highlight matching text in results
* Clear search button
* Show "no results" message when applicable

### ✅ Filter System

* Filter by date range (date picker)
* Filter by score range (slider)
* Filter by category (dropdown or chips)
* Filter by difficulty level
* Multiple filters can be active simultaneously
* "Clear all filters" button
* Show active filter count

### ✅ Sort Options

* Sort by date (newest/oldest first)
* Sort by score (highest/lowest)
* Sort by duration (fastest/slowest)
* Sort by category name (A-Z)
* Sort indicator in UI
* Maintain sort preference in localStorage

### ✅ Pagination/Infinite Scroll

* Implement infinite scroll or pagination
* Load 10-20 items initially
* Lazy load more items as user scrolls
* Show loading skeleton during fetch
* "Back to top" button for long lists

### ✅ Quick Actions

* "Retake Quiz" button on each card
* "View Details" to see full results
* "Delete" with confirmation modal
* "Compare" to compare two quiz attempts
* Bulk actions (delete multiple)

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.