A sophisticated, library-inspired study tool with 300 questions
You can use it here: https://medtechreviewer.vercel.app/
This isn't just another exam reviewer. It's a premium study companion designed to evoke the atmosphere of a distinguished university library - rich burgundy leather, antique gold accents, and the weight of academic tradition.
- Typography: Cinzel (Display) + Crimson Pro (Body) - elegant, scholarly fonts
- Color Palette: Deep burgundy, antique gold, charcoal, parchment
- Textures: Subtle paper grain, leather embossing effects
- Motion: Staggered fade-ins, typewriter effects, page-turn animations
- Layout: Asymmetric grid with decorative borders and overlapping elements
- [OK] 300 Exam Questions across multiple categories
- [OK] Immediate Feedback with detailed rationalizations
- [OK] Progress Tracking with persistent localStorage
- [OK] Session Timer to track study time
- [OK] Text-to-Speech for auditory learners
- [THEATER MASK] Academic Noir Theme - Dark mode by default with light mode toggle
- [KEYBOARD] Keyboard Shortcuts - Navigate like a pro
←/→orEnter: Navigate questions1-4: Select answers instantlySpace: Reveal answerT: Toggle themeShift+R: Reset score?: Show keyboard shortcuts
- [CLAPPER BOARD] Staggered Animations - Every element reveals with purpose
- [MOBILE PHONE] Touch Gestures - Swipe navigation with visual indicators
- [SPEAKER] Voice Reading - Listen to questions and explanations
- [BULLSEYE] Typewriter Effect - Questions appear character by character
# Clone or download the project
cd ComprehensiveExamReviewer
# Simply open in browser
open index.html
# Or use a local server
python3 -m http.server 8000- Open in Chrome/Edge/Safari
- Install as app (if supported)
- Works offline after first load
--color-ink: #1a0f0f; /* Deep charcoal */
--color-burgundy: #4a0404; /* Rich burgundy */
--color-gold: #d4af37; /* Antique gold */
--color-parchment: #f4e8d0; /* Warm cream */--font-display: 'Cinzel', serif; /* Headers */
--font-body: 'Crimson Pro', serif; /* Body text */
--font-mono: 'Courier New', monospace; /* Numbers */- HTML5: Semantic structure with modern markup
- CSS3: Advanced styling with CSS variables, animations, and responsive design
- JavaScript: ES6 Modules architecture for better maintainability and concern separation
- JSON: 300+ carefully curated exam questions with detailed rationalizations
- Web Fonts: Cinzel + Crimson Pro from Google Fonts
- PWA: Web manifest for standalone installation
ComprehensiveExamReviewer/
├── index.html # Main HTML structure
├── css/ # Modular CSS styles
│ ├── base.css
│ ├── components.css
│ ├── layout.css
│ ├── utilities.css
│ └── variables.css
├── js/ # ES6 JavaScript Modules
│ ├── main.js # Entry point
│ ├── data.js # Data fetching
│ ├── dom.js # DOM elements
│ ├── quiz.js # Core quiz logic
│ └── ... # Other modules (tts, theme, etc.)
├── questions.json # 300+ questions
├── assets/
│ ├── site.webmanifest # PWA configuration
│ ├── favicon-*.png # Icons
│ └── android-chrome-*.png # App icons
└── README.md # This file
- Loading overlay with spinner
- Font loading detection
- Questions fetch from JSON
- Staggered reveal animations
- First question with typewriter effect
- Question appears with character-by-character animation
- Options fade in with stagger (80ms delay each)
- User selects answer → immediate feedback
- Rationalization panel slides down
- Correct answer glows with success color
- Score updates with subtle scale animation
- Session timer continues running
| Key | Action |
|---|---|
← / → |
Previous / Next question |
Enter |
Next question |
1-4 |
Select answer 1-4 |
Space |
Reveal answer |
T |
Toggle theme |
Shift+R |
Reset score |
? |
Show shortcuts guide |
| Device | Layout |
|---|---|
| Desktop (>=768px) | Two-column: Question + Rationalization |
| Tablet (480-767px) | Single column, stacked navigation |
| Mobile (<480px) | Compact, swipe indicators, touch-friendly |
- Noise Texture: Subtle grain overlay (SVG filter)
- Ornaments: Circular decorative borders in corners
- Gradient Border: 3px gold gradient on panels
- Hover: Translate Y(-2px), shadow glow
- Focus: Gold outline with offset
- Active: Scale down slightly
- Disabled: 30% opacity, no pointer events
- Correct: Green background + border + left accent
- Wrong: Red background + border + left accent
- Selected: Gold border + translate X(6px)
- Disabled: Grayed out, no interaction
- Preconnect to Google Fonts
font-display: optionalprevents invisible text- System font fallback during load
- Font detection adds
.fonts-loadedclass
- Preload critical fonts
- Inline critical CSS
- SVG data URIs for small graphics
- CSS transforms (GPU accelerated)
- Opacity changes (no layout recalc)
- Reduced motion support for accessibility
<main>,<nav>,<section>,<footer>- ARIA labels on interactive elements
- Proper heading hierarchy
- Full keyboard support
- Focus indicators
- Logical tab order
@media (prefers-reduced-motion: reduce) {
/* Disable animations */
}- WCAG AA compliant
- High contrast in both themes
- Name: "Academic Reviewer"
- Short name: "Reviewer"
- Theme color: Deep burgundy (#1a0f0f)
- Background color: Deep burgundy (#1a0f0f)
- Display: Standalone (no browser chrome)
- 192x192 (Android home screen)
- 512x512 (Splash screen)
- Apple touch icon (iOS)
- Favicon (browser tab)
- Questions cached in memory
- Progress stored in localStorage
- Works without internet after load
- Check internet connection
- Clear browser cache
- Check console for CORS errors
- Verify
questions.jsonexists - Check file paths
- Look for JSON syntax errors
- Clear localStorage:
localStorage.clear() - Check browser privacy settings
- Category selection screen
- Quiz vs Review modes
- Bookmark favorite questions
- Export results as PDF
- Search functionality
- Statistics dashboard
This project is open source and available under the MIT License.
Juan Teodoro De Vera 📧 juanteodoro.devera@gmail.com Building tools for academic excellence
Thank you for using Academic Reviewer. May your studies be productive and your exams successful!
"The beautiful thing about learning is that no one can take it away from you." — B.B. King
- Complete visual redesign
- Premium typography (Cinzel + Crimson Pro)
- Enhanced animations and micro-interactions
- Keyboard shortcuts
- Session timer
- Improved accessibility
- PWA improvements
- Basic functionality
- Simple UI
- Score tracking
- Text-to-speech
Built with heart and coffee for serious students