Qader - Accessible Examination & Learning Diagnostic System

Qader: Accessible Examination & Learning Diagnostic System

Problem & Educational Goals

Students preparing for standardized aptitude and academic assessments require simulated test environments that accurately replicate timed examination conditions. Common issues in web-based test platforms include lost student answers during accidental browser refreshes, timer inaccuracies caused by background tab throttling, and lack of actionable performance feedback after test completion.

I personally implemented the interactive examination runner, the drift-corrected countdown timer engine, LocalStorage recovery hooks, and diagnostic score reporting. The platform delivers realistic timed test simulations, persistent client-side state caching, question navigation tools, and structured skill diagnostic breakdowns.

Architectural & Technical Implementation

1. Timed Exam State Machine

Source: React test runner engine

• Questions move through explicit user interaction states:
  • Unanswered: Default state with no selection.
  • Answered: Selected option recorded with timestamp.
  • Flagged for Review: Marked for quick re-examination before final submission.
• A quick-jump question navigation palette displays real-time color indicators for each question state, enabling students to jump directly to flagged or unanswered items.

2. Drift-Corrected Countdown Timer

• Standard browser setInterval timers drift significantly when users switch tabs due to browser background throttling.
• The timer engine records the absolute target completion timestamp (targetEndTime = startTime + durationMs) and calculates remaining seconds against Date.now() on each animation tick.
• Automatically triggers atomic test submission when remaining time reaches zero, preventing unauthorized extra time.

3. LocalStorage Session Resilience

Source: useExamPersistence hook

• Every answer selection and flag state immediately serializes to localStorage.
• If a student accidentally reloads the page, experiences a brief power outage, or closes the tab, the test runner detects the active session and restores question responses and remaining time.

4. Diagnostic Performance Analytics

• Upon submission, the engine calculates raw scores and groups results by academic skill domain (e.g. quantitative reasoning, verbal comprehension, analytical problem solving).
• Renders visual strength and weakness charts to help students identify specific areas requiring further study.

5. Accessibility & Responsive Design

• Built with semantic HTML elements, full keyboard navigation support (shortcuts for Next, Previous, Flag, and Option Select), and high-contrast color tokens to ensure accessibility across student devices.

Technical Challenges & Trade-offs

• Timer Drift in Background Tabs: Replaced simple incremental counters with absolute timestamp delta calculations to keep countdowns accurate even when browser tabs are throttled in the background.
• Client-Side State Storage vs. Latency: Saving test state locally eliminates network latency during rapid answer switching while ensuring no answers are lost before final submission.

Related Resources

• Technologies: REReact, TYTypeScript, TATailwind Css
• Direct Contact: Contact Me