FSOC-OSS/Fsoc-level-hard

Create Quiz History Page with Filtering and Sorting

Open

#43 opened on Oct 3, 2025

 (8 comments) (0 reactions) (1 assignee)JavaScript (21 forks)auto 404
enhancementfeaturehacktoberfestintermediate

Repository metrics

Stars
 (1 star)
PR merge metrics
 (PR metrics pending)

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