← Back to Projects

All Verb Form Master

Practice V1, V1‑3rd, V1‑ing, V2, and V3 with adaptive blanks and instant feedback

Role: Designer & Frontend Developer
Timeline: 2024-2025
Users: ESOL learners and teachers
Status: Active
React Vite React Router Google Sheets CSS3

The Problem

ESOL learners struggle to master the five core English verb forms (V1, V1‑3rd, V1‑ing, V2, V3), especially distinguishing V1 vs. V1‑3rd and memorizing irregular V2/V3. Worksheets provide delayed feedback and low engagement. Teachers need a quick way to target weak forms without heavy prep.

Key Pain Points

  • Confusion between near forms: V1 vs. V1‑3rd distinctions are difficult to master
  • Irregular V2/V3 memorization: Learners struggle without contextual practice
  • No instant feedback: Worksheets provide delayed corrections, slowing learning
  • One-size-fits-all drills: No targeted practice for specific weak forms
  • Fragmented experiences: No keyboard flow or input focus for rapid practice

The Solution

A browser-based game that presents a verb and adaptive blanks for its forms. Learners fill missing forms, receive immediate correctness feedback with labeled form references (V1, V2, V3), and progress via keyboard. Difficulty scales from one to four blanks, or focuses on a single form (e.g., Only V3).

Key Features

📚 Adaptive Blanks

Difficulty levels (Easy/Medium/Hard) control how many forms are blank—scales cognitive load and retention

🎯 Single-Form Focus

Practice only V1, V1‑3rd, V1‑ing, V2, or V3 for targeted remediation

💡 Instant Feedback

Shows which forms were incorrect and the correct forms labeled with V1/V2/V3 tags

⌨️ Keyboard-First Flow

Autofocus and Enter/ArrowRight navigation for rapid practice without mouse dependency

📊 Google Sheets Source

Update the verb bank without redeploying the app—content managed by teachers in spreadsheets

🏫 Pedagogical Alignment

Form-based pedagogy aligned with classroom notation (V1, V2, V3) used in ESOL instruction

Screenshots & Walkthrough

Start screen for All Verb Form Master

Start screen: Select difficulty or single-form mode and begin

Verb form grid with adaptive blanks

Verb form grid: A 5-card grid for V1, V1‑3rd, V1‑ing, V2, V3 with adaptive blanks

Feedback panel with instant corrections

Feedback panel: Instant feedback with correct answers labeled by form

Technical Implementation

Architecture

Client-only SPA with React state orchestrating question generation, input tracking, and feedback. The game fetches a public CSV once, parses to an in-memory verb list, and uses fixed field order (V1, V1‑3rd, V1‑ing, V2, V3) for rendering and validation. Difficulty determines which fields render as static vs. blanks.

Tech Stack

  • Frontend: React, React Router, Vite
  • Backend: None (fully client-side)
  • Database: Google Sheets (published CSV)
  • Icons: lucide-react
  • Deployment: Static SPA

Key Challenges & Solutions

Challenge: Reliable Content Updates Without Deploys

Teachers need to add/curate verbs easily without developer involvement.

Solution: Use a published Google Sheet (CSV). Parse client-side and tolerate missing columns gracefully. Teachers update content in spreadsheets, not code.

Challenge: Multi-Field Validation and UX Order

Checking multiple blanks in a consistent UI order, then reporting precise corrections.

Solution: Define a fixed field order (V1, V1‑3rd, V1‑ing, V2, V3) for both rendering and validation; label feedback with V1/V2/V3 tags.

Challenge: Reducing Input Friction

Switching between inputs slows practice and breaks flow, reducing engagement.

Solution: Autofocus first blank field on each question; support Enter to submit and ArrowRight to advance. Keyboard-first flow for rapid practice.

Results & Impact

5 forms
V1, V1‑3rd, V1‑ing, V2, V3
Instant
Form-labeled feedback
Keyboard
First flow design
Google Sheets
Teacher-editable content

Faster recognition of form labels (V1/V2/V3) through immediate, tagged feedback. Improved engagement via adaptive blanks and keyboard-first flow. Reduced teacher overhead—verb list managed in Google Sheets without code changes. Clear alignment with tense formulas across the broader site resources.

Lessons Learned

Align UI Language with Pedagogy

Using V1/V2/V3 labels in UI and feedback increases transfer from class to app. Learners recognize classroom notation immediately, reducing cognitive load.

Input Flow Matters

Autofocus and keyboard controls significantly improve practice cadence. Removing mouse dependency enables rapid drills and sustained focus.

Keep Content Editable

A teacher-friendly content pipeline (Google Sheets) sustains the tool long-term. Non-technical users can update verb lists without developer involvement.

Specific Feedback Wins

Form-specific corrections (e.g., "V2 incorrect: should be 'went'") accelerate learning more than generic right/wrong. Learners know exactly what to fix.