The Instant Temporary 5 Lines with Continuations - Phonographic (IT5L+continue-Phono) template is an interactive web-based vocabulary learning tool designed for phonographic languages (those using Roman alphabet systems like English, Spanish, French, etc.). It provides a geometric visualization system where vocabulary items are positioned along a five-segment zigzag path, with optional extension paths for advanced vocabulary.
The template displays a five-line zigzag path consisting of:
Line 1: Horizontal segment (left side, bottom level, y=40)
Line 2: Vertical segment (ascending from bottom to top)
Line 3: Horizontal segment (top level, y=20) - the longest segment
Line 4: Vertical segment (descending from top to bottom)
Line 5: Horizontal segment (right side, bottom level, y=40)
Three cyan dotted extension lines provide additional vocabulary capacity:
Line 1+: Horizontal continuation from Line 1 (at y=40)
Line 3+: Horizontal continuation from Line 3 (at y=20)
Line 5+: Positioned on Line 5 toward the right edge
Purpose: Learn discrete vocabulary items positioned at specific locations along the path.
Features:
Draggable blue frame: Users drag this rectangular frame along all paths (main and extensions)
5 main textboxes: Positioned at the midpoint of each of the 5 lines
3 extension textboxes:
TL+1 at 50% x-axis (center of screen) on Line 1+
TL+3 at midpoint of Line 3+ extension
TL+5 at 90% x-axis (far right) on Line 5
Activation system: Textboxes become visible when the frame is dragged within the activation distance (11.4 units)
Learning progression: Target Language (TL) → Source Language (SL) → Quiz
Purpose: Learn phrases or expressions describing transitions between states.
Features:
Draggable sliding text: Users drag text along the paths to explore different transition phrases
Path switching: Click cyan dotted extension lines to switch between main path and extension paths
Path indicator: Shows which path is currently active (Main, Extension 1, or Extension 2)
Learning progression: TL → SL → Quiz
Both modes follow the same three-level progression for phonographic languages:
Level 1 - Target Language (TL): Display the word/phrase in the target language
Level 2 - Source Language (SL): Display the translation in the source language
Level 3 - Quiz: User must type the TL word/phrase correctly
Once learned (quiz passed), items can cycle between TL and SL display.
The template maintains separate tracking for States Mode and Transitions Mode:
States Mode: Tracks learning of the 8 vocabulary items (5 main + 3 extensions)
Transitions Mode: Tracks learning of transition phrases independently
No cross-contamination: Learning items in one mode doesn't affect the other mode's textbox visibility
Two scrollable vocabulary panels display learned items:
Increasing Progression Array (left side): Shows items learned on main path and extension 1
Decreasing Progression Array (right side): Shows items learned on extension 2
Each entry shows: Target Language (bold blue) and Source Language (gray)
Click individual text items to hide/reveal them
"Hide All" / "Show All" toggle buttons for each array
Click to cycle through three title variations:
States Mode: "Instant Change Template - Phonographic 5-Box" / "Target Language View" / "Source Language View"
Transitions Mode: "Instant Change Transitions - Phonographic" / "Dynamic Changes" / "Temporal Progression"
Displays the current SL word when frame is positioned near a textbox
Shows extension labels (e.g., "SL+1 (Line 1+)") when on extension paths
Shows current display level: "Target Language", "Source Language", or "Quiz Mode"
Three utility functions accessible via dropdown:
Load Concept: Placeholder for API integration
Start Random Quiz: Launches quiz for random vocabulary item
Toggle Vocabulary Arrays: Show/hide the vocabulary panels
Switches between States Mode and Transitions Mode
Preserves learned items for each mode separately
ViewBox: -30 to 130 (x-axis), 0 to 50 (y-axis)
Total viewBox width: 160 units
Path consists of 5 segments totaling ~200 units in length
Main textboxes: Precisely positioned at geometric midpoints of each line segment
Extension textboxes: Strategically placed for optimal spatial distribution
Activation distance: 11.4 units radius from frame center
Each vocabulary item contains:
Index 0: Target Language text
Index 1: Source Language text
Index 2: Quiz question prompt
Index 3: Position percentage along path (for States Mode only)
This template is ideal for teaching:
States concepts: Individual vocabulary items representing discrete states (e.g., times of day, temperatures, emotions)
Transition concepts: Phrases describing changes between states (e.g., "from morning to noon", "getting warmer")
Progressive scales: Concepts that increase/decrease along a continuum
The template embodies Alan's core pedagogical principle: vocabulary organized by conceptual relationships rather than alphabetical order. The geometric path provides a spatial metaphor where position conveys meaning—items that are conceptually related are positioned near each other, creating memorable visual associations that enhance retention.