Implement JEE quiz interface with navigation and answer handling

[ABHISHEKUPAI]

Overview

Implemented the JEE-style quiz interface.

Features

• Question navigation component
• Answer selection logic
• Skip question functionality
• Mark for review functionality
• Timer integration

Components Added

• QuestionNavigation
• QuestionCard
• Timer
• ProgressBar

UI Improvements Update

Refined the quiz interface design to improve usability and visual consistency.

• Improved layout and spacing
• Updated component styling
• Added modern scrollbar styling
• Minor UI refinements across quiz components

copilot review resolved except

-Question navigation part as the expected behavior was raised as a suggestion
-hard coding the number of questions , answers , and total questions will be resolved in future after backed integration

Closes #4

[ItsAbhinavM]

@ABHISHEKUPAI which issue are you referring to ?
Please link the issue in ur PR

[Copilot]

Pull request overview

This PR implements a JEE-style quiz interface for the Retentia app. It introduces a Retentiaquiz page component along with several supporting UI components (Timer, QuestionNavigation, ProgressBar, Card), updates the Button component, and applies global scrollbar styling. The main route is updated to render the new quiz page in place of the old Sidebar placeholder.

Changes:

• Added new quiz page and UI components (Retentiaquiz, Timer, QuestionNavigation, ProgressBar, Card)
• Updated Button component with new opt_btn variant and onClick prop support
• Configured CSS design tokens for quiz states and applied global custom scrollbar styling

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
app/page.tsx	Swaps the Sidebar import for the new Retentiaquiz page component
app/globals.css	Adds CSS variables for quiz answer states; adds custom scrollbar styles
app/components/ui/Timer.tsx	New countdown timer component driven by total question count
app/components/ui/QuestionNavigation.tsx	New paginated question-number navigation with status coloring
app/components/ui/Progressbar.tsx	New answered/total progress bar component
app/components/ui/Card.tsx	New card container component with primary/secondary variants
app/components/ui/Button.tsx	Adds opt_btn variant and onClick handler; reformats code
app/components/pages/Retentiaquiz.tsx	New main quiz page wiring all components together with state management

Comments suppressed due to low confidence (1)

app/page.tsx:6

• The import in app/page.tsx imports Retentiaquiz from the pages directory but assigns it to a variable named Sidebar. This is a misleading name that doesn't reflect what the imported component actually is (Retentiaquiz). The import alias should be updated to match the component being imported, e.g., import Retentiaquiz from "./components/pages/Retentiaquiz"; and the JSX usage below should also be updated to <Retentiaquiz />.

import Sidebar from "./components/pages/Retentiaquiz";

export default function Home() {
  return (
    <main>
      <Sidebar />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ItsAbhinavM]

LGTM