Mobile-First AI-Assisted ESL Listening Feedback
Status: Private beta
Platform: WordPress with LearnPress
AI: Server-side OpenAI API
Access: Login required
Overview
I built a mobile-first AI learning system for ESL listening lessons inside a LearnPress course. The system gives learners immediate, meaning-focused feedback inside the lesson page. The design treats AI as a support tool and not as a grader. The goal is to help learners understand what they heard, see what they missed, and try again with confidence.
The Problem
Many self-paced ESL courses rely on quizzes with right or wrong answers. These quizzes do not show learners what they understood or what they missed. Instructor feedback does not scale well in large or asynchronous courses. Many learners also study on mobile devices, where long explanations and complex layouts cause friction. I needed a solution that could support open-ended learner responses, work well on mobile screens, give fast and useful feedback, respect instructional goals, and fit inside an existing LMS.
The Solution
I created a mobile-first AI-assisted feedback system inside each lesson. Learners respond to short listening prompts and can request feedback right away. The system follows a simple loop. The learner writes a response. The AI checks the response against lesson intent. Feedback points out strengths and missing ideas. The learner retries if needed. This structure supports short study sessions and repeated practice.
How AI Is Used
The AI follows strict rules. It checks idea coverage and not grammar accuracy. It confirms alignment with lesson content. It mentions spelling only when meaning becomes unclear. It uses language suitable for A2 to B1 learners. It keeps feedback short for mobile reading. Prompts limit scope and tone. Responses stay focused on learning goals. The AI acts as a coach and not a judge.
Instructional Design Choices
I made clear instructional design decisions. I focused on meaning before grammar. I kept feedback brief and supportive. I avoided scores and grades. I encouraged retries instead of final answers. This approach reflects how an ESL instructor gives spoken feedback during class.
Technical Implementation
The system fits into LearnPress without heavy customization. AI quiz and feedback elements load inside lesson pages. AJAX handles requests without page reloads. CSS targets dynamic elements with precise selectors. Button size and spacing support touch input. The layout works on small screens first.
Deployment Status and Safeguards
The system runs as a private beta. Only logged-in users can access it. Requests pass through a server-side OpenAI API. No API keys appear in the browser. Access limits prevent misuse. This setup allows safe testing before public release.
Outcomes and Impact
The beta shows clear benefits. Learners receive faster feedback. Learners show more confidence with open responses. Instructors step in less often for basic comprehension checks. The system supports large course groups. AI adds value without replacing teaching judgment.
Why This Case Study Matters
This work shows my ability to build AI-assisted learning systems, apply instructional design to AI prompts, integrate AI into real LMS platforms, and balance learning goals, UX, and safety. The AI serves a clear purpose and supports learning at scale.
Tools and Stack
WordPress, LearnPress, OpenAI API with server-side calls, custom quiz and feedback logic, and mobile-first CSS.