Practice Flow Templates in TypeWords: The Complete Guide to Built-in Step Types
TypeWords provides five practice flow templates—Follow‑Write, Spell, Listen, Dictation, and Identify—defined in the STEP_TEMPLATE_META configuration object that maps each template ID to a specific WordPracticeType enum value.
The zyronon/TypeWords repository implements a structured vocabulary learning system through configurable practice flow templates. These templates standardize how users interact with words during study sessions, ensuring consistent UI behavior and progress tracking across different exercise types.
The Five Built-in Practice Flow Templates
According to the source code in app/core/composables/practice-words/practice-flow-config.ts, TypeWords exposes exactly five step templates through the STEP_TEMPLATE_META constant. Each entry pairs a unique template identifier with a display label and a corresponding WordPracticeType enum value.
Follow-Write
The followWrite template presents users with the target word and requires them to type it exactly as shown. This template uses WordPracticeType.FollowWrite and serves as the foundational copying exercise for muscle memory development.
Spell
The spell template tests recall by requiring users to type the word from memory, typically after seeing the definition or hearing the pronunciation. It maps to WordPracticeType.Spell and represents the standard production-focused assessment.
Listen
The listen template focuses on auditory recognition, playing the word's pronunciation and requiring text input. Associated with WordPracticeType.Listen, this template strengthens the connection between phonetic sounds and written forms.
Dictation
The dictation template presents words in a listening comprehension format similar to traditional spelling tests. Using WordPracticeType.Dictation, it challenges users to transcribe heard words without visual prompts.
Identify
The identify template requires users to select or type the correct word based on definitions, synonyms, or context clues. It employs WordPracticeType.Identify for receptive vocabulary assessment rather than productive spelling.
Configuration Architecture and Type Safety
The practice flow system relies on strict typing to prevent invalid template references at compile time.
Template Metadata Registry
In app/core/composables/practice-words/practice-flow-config.ts, the STEP_TEMPLATE_META object serves as the single source of truth for template definitions. Each property key represents a valid templateId, while the value contains the human-readable label and the internal practiceType discriminator used by components to render appropriate input interfaces.
TypeScript Type Definitions
The PracticeStepTemplateId union type, declared in app/core/composables/practice-words/practice-flow-types.ts, explicitly lists all five template IDs as string literals. This ensures that functions accepting template identifiers can only receive 'followWrite', 'spell', 'listen', 'dictation', or 'identify', catching typos during development.
Working with Practice Flow Templates Programmatically
Developers can enumerate and invoke templates using the exported configuration object.
Listing Available Templates
To retrieve all valid template identifiers for a settings menu or debug panel, access the keys of the metadata object:
import { STEP_TEMPLATE_META } from '@/app/core/composables/practice-words/practice-flow-config'
const availableTemplates = Object.keys(STEP_TEMPLATE_META) as Array<keyof typeof STEP_TEMPLATE_META>
console.log(availableTemplates)
// Output: [ 'followWrite', 'spell', 'listen', 'dictation', 'identify' ]
Starting a Practice Step
When initiating a learning session, reference the template metadata to determine which practice logic to execute:
function startPracticeStep(templateId: keyof typeof STEP_TEMPLATE_META) {
const meta = STEP_TEMPLATE_META[templateId]
console.log(`Loading ${meta.label} mode with type ${meta.practiceType}`)
// Component uses meta.practiceType to render correct input method
}
// Example usage
startPracticeStep('dictation')
Summary
- TypeWords defines five practice flow templates: Follow‑Write, Spell, Listen, Dictation, and Identify.
- Template definitions reside in
STEP_TEMPLATE_METAinsideapp/core/composables/practice-words/practice-flow-config.ts. - Each template maps to a specific
WordPracticeTypeenum value controlling UI behavior. - The
PracticeStepTemplateIdtype inpractice-flow-types.tsprovides compile-time safety for template references. - Access templates programmatically using
Object.keys(STEP_TEMPLATE_META)for dynamic enumeration.
Frequently Asked Questions
What are the exact names of the practice flow template IDs in TypeWords?
The five template IDs are 'followWrite', 'spell', 'listen', 'dictation', and 'identify'. These string literals are defined as keys in the STEP_TEMPLATE_META constant and are valid values for the PracticeStepTemplateId TypeScript type.
How does TypeWords determine which UI to show for different practice steps?
The system checks the practiceType property from STEP_TEMPLATE_META, which contains values from the WordPracticeType enum. Components switch rendering logic based on whether the type is FollowWrite, Spell, Listen, Dictation, or Identify.
Can I add custom practice flow templates to TypeWords?
The current implementation in the zyronon/TypeWords repository uses a fixed enumeration via STEP_TEMPLATE_META and the PracticeStepTemplateId type. Adding new templates would require extending both the configuration object in practice-flow-config.ts and the union type in practice-flow-types.ts, then implementing corresponding logic in the practice components.
Where is the practice flow template configuration stored?
Template metadata is stored in app/core/composables/practice-words/practice-flow-config.ts, while type definitions are located in app/core/composables/practice-words/practice-flow-types.ts within the repository root.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →