NEESHANT | Interactive Physics E-Book System 2026

"Study smarter. Score higher. JEE Physics — reimagined."

Comment

The Story Behind NEESHANT | Interactive Physics E-Book

💡 Inspiration

Preparing for JEE Main & Advanced Physics is often an uphill battle of memorizing abstract concepts, complex dimensional formulas, and intricate derivations. A student reading about the Permittivity of Free Space \([\epsilon_0]\) or trying to calculate the error propagation in a division equation like: $$z = \frac{x}{y} \implies \frac{\Delta z}{z} = \frac{\Delta x}{x} + \frac{\Delta y}{y}$$ is often left staring at static pages. Traditional textbooks can't talk, they can't calculate, and they certainly cannot answer custom doubts when a student is stuck at 2 AM.

We were inspired to build a living, breathing e-book—a unified digital cockpit that transforms passive reading into an active, intelligent learning experience. We wanted to package a personal physics tutor, a mathematical calculator, practice tools, and ambient focus synthesizers into a single, beautiful Coursera-like dashboard.

🛠️ How We Built It

The platform is built entirely using semantic HTML5, clean Vanilla CSS, and robust JavaScript to guarantee near-instantaneous load times and lightweight performance on any device.

  1. Intelligent Text-To-Speech (TTS) Narration: Built using the Web Speech API with real-time text-highlight tracking. As the voice reads, the page smoothly scrolls to keep the active text block in view.
  2. Interactive Formula Calculators: Rather than just showing formulas, we scanned the book's key equations (e.g., Vernier Caliper Least Count, Screw Gauge, Searle's Modulus) and injected interactive calculators. They accept user input variables, evaluate the result, and display step-by-step arithmetic substitution.
  3. AI Doubt Solver Sidebar: A context-aware chatbot drawer. Highlighting any text on the page displays a floating bubble option: Ask AI. This auto-fills the chatbot with the highlighted question, providing instant, detailed concept breakdowns.
  4. Persistent Range Highlighting: Users can select text and highlight it in three distinct colors. We serialized these selections and saved them to localStorage so they stay saved even after closing the tab.
  5. Zen Focus Mode & Binaural Beats: To help students concentrate, we leveraged the HTML5 Web Audio API to procedurally synthesize a low-frequency binaural concentration wave:
    • Left Oscillator: \(100\text{ Hz}\) sine wave
    • Right Oscillator: \(104\text{ Hz}\) sine wave
    • Resulting Beat Frequency: \(\Delta f = 4\text{ Hz}\) (Theta brainwave state for deep focus)

🚧 Challenges We Faced

  • DOM Range Serialization: Standard browser selections are highly volatile. When wrapping selected text inside highlight <span> tags, it changes the DOM tree, which can corrupt subsequent highlights. We designed a path-offset serialization utility to stably save and restore highlights.
  • Pagination System Refactoring: Converting a legacy, simulated 2200-page layout into a strict, actual 40-page workbook structure. We had to ensure all table-of-contents hooks, page boundaries, and scroll controllers stayed perfectly synchronized.
  • Step-by-Step Solver Rendering: Building a flexible mathematical substitution renderer that shows how the formula variables evaluate (e.g., calculating Least Count \(LC = \frac{\text{Pitch}}{\text{Number of divisions}}\)) with nice typography.

🎓 What We Learned

  • Web Audio Synthesis: Gained deep knowledge of Web Audio API node connections, routing oscillators to stereo panners, and handling system volume gains safely.
  • Complex Selection Handling: Learned how to parse and manipulate DOM Ranges across multiple block-level paragraphs without breaking layout structures.
  • Education-First UX Design: Discovered how subtle color palettes (like deep navy and slate blue) and glassmorphism elements help reduce cognitive fatigue for students studying for hours.

🛠️ Built With

  • HTML5 & CSS3: For structuring and styling the entire responsive book layout, custom sidebar menus, glassmorphism overlays, sliding drawers, and transitions.
  • Vanilla JavaScript (ES6+): Handles all core application states including client-side pagination, custom quiz correction flows, formula engines, and bookmark indexing.
  • Web Audio API: Procedurally synthesizes real-time left and right channel audio frequencies (100Hz & 104Hz oscillators) to produce binaural beats without using static sound files.
  • Web Speech API (SpeechSynthesis): Powers the narration engine, parsing punctuation and paragraphs to read content with adjustable speech rates and automated voice selection.
  • Local Storage API: Provides lightweight client-side persistence for keeping track of pages bookmarked, color-coded highlights, and completion progress.
  • FontAwesome: Used for premium, modern utility controls and dashboard icons.
  • Google Fonts (Inter & Outfit): Curated typeface combination ensuring maximum interface readability and elegant presentation for physics theory.

Built With

Share this project:

Updates