ESOL Sentence Builder
Interactive drag-and-drop game for English language learners
The Problem
Adult ESOL students needed an interactive way to practice sentence structure. Traditional worksheets weren't engaging, and students needed immediate feedback to reinforce correct grammar patterns.
Specific Pain Points
- Passive learning: Worksheets don't provide immediate feedback or interactivity
- Confidence issues: Students feared making mistakes in front of classmates
- Limited practice time: Needed a tool students could use independently at home
- Accessibility: Needed to work on any device (phone, tablet, computer)
The Solution
Interactive drag-and-drop game where students arrange words to build grammatically correct sentences. Instant feedback helps reinforce learning, and the game-like format reduces anxiety about making mistakes.
Key Features
Drag & Drop Interface
Intuitive word tiles that students drag to build sentences
Instant Feedback
Immediate validation of sentence structure with clear error messages
Mobile-Friendly
Works seamlessly on phones, tablets, and desktops
Self-Paced Learning
Students practice independently without teacher supervision
Screenshots & Walkthrough
Main game interface for practicing gerunds vs infinitives
Interactive feedback showing correct grammar usage
Examples and explanations helping students understand the rules
Technical Implementation
Architecture Decisions
I used vanilla JavaScript and the native Drag and Drop API to keep the app lightweight and fast. No frameworks meant faster load times and better performance on older devices.
Core Features
- HTML5 Drag and Drop API for word tile interaction
- JavaScript validation logic to check sentence correctness
- CSS animations for smooth drag interactions and feedback
- Responsive design with mobile touch support
Interesting Challenges
Challenge: Mobile Touch Support
The HTML5 Drag and Drop API doesn't work well on mobile touch devices. Many students use phones.
Solution: Added touch event handlers to detect drag gestures on mobile. The game now works seamlessly on both desktop and mobile.
Challenge: Grammar Validation
How do you programmatically check if a sentence is grammatically correct?
Solution: Pre-defined correct answers with flexible matching. Students might arrange words in slightly different valid orders, so I check against multiple acceptable patterns.
Results & Impact
Lessons Learned
Keep it simple
I initially wanted to add complex features like scoring and leaderboards. Students just wanted to practice sentences. Simple won.
Mobile-first matters
Most of my students access learning tools on their phones. Designing for mobile first ensured the widest reach.
Immediate feedback accelerates learning
The instant feedback from the game helps students learn faster than traditional worksheets where they might not know they made a mistake until days later.