Real-Time Test Management Interface¶

Role Sole Frontend Architect & Developer

Architecture Modular Vanilla JavaScript (ES6 Modules)

Data Persistence Local-First Schema Serialization (localStorage)

Libraries Bootstrap 5, PapaParse, XLSX.js, Plotly

Zero-Backend Prototyping: Demonstrates complete test creation, timed execution, real-time scoring, and historical result visualization purely client-side.

Architecture & State Lifecycle¶

graph TD
    A["User Authentication &amp; Profile Setup"] --> B["Test Catalog &amp; CSV/XLSX Upload Engine"]
    B --> C["Dynamic DOM Hydration &amp; Fragment Caching"]
    C --> D["Timed Test Session Engine (Timer Sync &amp; Auto-Submit)"]
    D --> E["Client-Side Scoring &amp; State Persistence ('localStorage')"]
    E --> F["Interactive Analytical Dashboards &amp; Result Export"]

Executive Overview¶

The Real-Time Test Management Interface is a client-side web application built with vanilla JavaScript (ES6+), HTML5, and Bootstrap. It demonstrates full test administration workflows without requiring server-side infrastructure:

Dynamic creation, updating, and deletion (CRUD) of multi-question exams.
Timed examination sessions with auto-submission triggers.
In-browser file parsing for bulk question import via CSV and Excel workbooks.
Historical score tracking and visual performance analytics.

Technical Challenges & Architectural Solutions¶

1. Dynamic View Hydration Without Full Page Reloads¶

Challenge: Creating a seamless Single-Page Application (SPA) experience without heavy frontend frameworks.
Solution: Implemented a lightweight client-side router leveraging the Fetch API, modular template fragments, and targeted DOM reconciliation.

2. Reliable Client-Side State Persistence¶

Challenge: Preventing data loss when students refresh the browser mid-examination.
Solution: Engineered a robust serialization wrapper around localStorage and sessionStorage with schema versioning and auto-save timer checkpoints.

3. Responsive Multi-Device UI¶

Challenge: Ensuring consistent test-taking controls across desktop monitors and mobile devices.
Solution: Utilized fluid CSS Grid, modern Flexbox components, and Bootstrap 5 responsive utility classes.

Application Interface Gallery¶

1. Test Taking View

Real-Time Test Management Interface¶

Client-Side Examination Platform