Projects › BibleWeb › Interlinear › Help/info overlay in popup
Planned

Help/info overlay in popup

Area: Interlinear Milestone: v2

Context

Problem: New users opening the interlinear popup for the first time may not understand what they're seeing — Greek text, transliterations, Strong's numbers, morphology codes. These are unfamiliar concepts for most readers.

Solution: An info icon (?) in the popup that opens a help panel explaining each field: what Greek text is, what transliteration means, what Strong's numbers are for, how morphology codes work, and what the gloss represents.

Not included: Interactive tutorials or guided tours. Just a static help panel.

Functional

Expected user flow:

  1. User opens the interlinear popup
  2. Sees an info icon (?) in the popup header
  3. Clicks it → a help panel appears explaining each field
  4. Clicks again or presses Escape → help panel closes

UX & Design

Info icon: Small ? circle icon in the popup header.

Help panel: Overlay or expandable section with brief explanations:

  • Greek/Hebrew text: The original word as it appears in the manuscript
  • Transliteration: The word spelled out in English letters for pronunciation
  • Strong's number: A reference number linking to a dictionary entry (e.g., G26 = agapē)
  • Morphology: Grammar code showing verb tense, noun case, etc.
  • Gloss: The English translation of the word

Technical

Implementation: Toggle state in InterlinearPopup.svelte showing/hiding a help section.

Files:

  • apps/web/src/lib/components/bible/InterlinearPopup.svelte (modify)

Status

Current: PLANNED Milestone: v2 Priority: Low — onboarding improvement

Dependencies:

  • Requires: interlinear popup (DONE)
← Back to Interlinear features