AI ENGLISH LEARNING PLATFORM
A deep dive into the technology that powers personalized vocabulary training,
AI-driven pronunciation coaching, and intelligent learning analytics for modern classrooms.
One platform. One unified experience. From assessment to mastery.
8-dimension profiling captures age, proficiency, interests, motivation, and learning style to personalize every student's journey from the first click.
Structured learning paths with 5-task lesson structure: Video → Quiz → Glossary → Download → Speaking. Progress tracked with milestone achievements.
5-stage mastery pipeline from pronunciation to dictation. Spaced repetition algorithms combat the forgetting curve. Words become flashcards automatically.
Structured academic speaking with AI feedback. Phoneme-level pronunciation analysis identifies specific sound improvements. Scenarios from presentations to debates.
Real-time English ↔ Cantonese/Mandarin classroom support. Bilingual subtitles, smart note capture, automatic flashcard generation from lesson content.
Teacher dashboard with real-time engagement heatmap. Track progress across modules. Identify struggling students before frustration builds. Data-driven instruction.
Key Insight: These are not separate tools — they form an integrated ecosystem. Assessment results drive course recommendations. Speaking practice feeds vocabulary lists. Every interaction trains the AI. Listen → Capture → Review → Master.
Personalized learning starts with understanding the learner
How It Works
Select from groups: 6-8, 9-11, 12-14, 15-17, 18+. Adapts interface complexity and content delivery speed.
1-10 scale with detailed descriptors for accurate placement. Colors adapt per age: gold for 6-8, teal for 9-11, blue for 12-14, orange for 15-17.
11 categories including Space & Science, Animals & Nature, Sports & Games, Technology. Powers personalized content selection across all modules.
8 methods: Play games, Read stories, Speak & act, Watch videos, and more. The AI matches teaching methodology to preferred style.
Technical Implementation
tokenStudentPlatform for authenticationappStudentPlatformActions.setStatelocalStorage or secure cookiesTeacher Insight: This is NOT a test — students don't fail. The system learns preferences to deliver content that fits each learner.
The mascot character guides students through assessment with speech bubbles — white rounded containers with directional tails pointing to the mascot. Generous padding accommodates CJK character sets (Mandarin/Cantonese). First-time users see elaborate animations; returning users skip directly to content.
Every learning modality covered — from watching to producing
Multi-resolution streaming (1080P adaptive). Multilingual subtitle tracks (English, 繁體中文, 簡體中文). Transcript objects with timestamped note capture.
Structured reading with rich text formatting. Comprehension exercises designed for diverse reading abilities. Contextual vocabulary highlighting.
Single-choice (MC) and multiple-select (MCS) formats. Time limits, explanations, immediate validation. isAllQuestionsAnswered gating.
AI pronunciation analysis with phoneme-level feedback. Azure Speech Services integration. Four-dimensional scoring: Fluency, Accuracy, Completeness, Prosody.
Matching and sequencing activities. TaskContentDragAndDropQuestion and TaskContentDragAndDropAnswer interfaces. Kinesthetic learning support.
Interactive written exercises with immediate validation. Vocabulary and grammar practice. AI-tolerance for spelling variations beyond exact matching.
Project submissions and assignment uploads. Portfolio-based learning. Teachers can assign differentiated materials to student subgroups.
API key and callback URL for third-party integration. YouTube, TED talks, interactive grammar exercises — all within the platform's secure iframe sandbox.
Offline resources for homework. PDF viewer with iPad compatibility (pdfjs-dist Canvas API). Activity logging tracks every download interaction.
From receptive understanding → analytical processing → expressive production
Pronunciation
Spelling I
Usage I
Usage II
Dictation
Students listen to and repeat target words. AI analyzes phoneme-level accuracy using Azure Speech Services. This stage establishes the phonetic memory foundation — if students can't say it correctly, they can't use it fluently.
Students identify correct spellings within sentence contexts rather than in isolation. This implements contextual orthography — students learn words as they appear in real reading, improving recall in authentic communication.
SentencePickingPractices configuration supports usage-based learning — students select correct contextual applications rather than memorizing definitions. Stage 3 uses controlled contexts; Stage 4 requires advanced discrimination between similar words.
The capstone task: students listen to audio and type the word from memory. This tests the deepest level of vocabulary retention — orthographic recall without visual cues. Represents the full receptive-to-expressive gradient.
Spaced Repetition Built In: Words not yet mastered automatically surface for review. The WrongWordsList routes struggling students to review before retrying. This implements Ebbinghaus forgetting curve combat — right when students are about to forget, the system brings words back.
5 Dimensions Tracked: Vocab Guide, Spelling Basic, Spelling Advanced, Vocab Usage, Dictation. Radar chart visualization in the dashboard shows students their strengths and weaknesses at a glance.
Phoneme-level precision — not just right or wrong, but exactly what to fix
Four-Dimensional Scoring
Phoneme-by-phoneme precision. Identifies exactly which sounds the student mispronounced. Compare /θ/ vs /s/, /æ/ vs /ɛ/.
Prosodic timing and rhythm. Measures pauses, hesitations, and natural speech flow. Important for sounding like a native speaker.
Did the student say every part of the word? Low completeness indicates rushing or difficulty with the full pronunciation.
Intonation patterns — pitch variation, stress, and overall naturalness. Critical for tonal language learners adapting to English stress patterns.
How It Works
Two implementation paths ensure browser compatibility:
blob generation for backend uploadcallGetTaskPracticeResult API retrieves assessment data. The system parses pronResultObj JSON responses containing phoneme-by-phoneme accuracy scores. Filters for valid assessment data excluding recording errors.
Key Differentiator: Other apps say "Wrong." We say "Your /θ/ needs work — try touching your tongue to your teeth." That's the power of phoneme-level feedback.
isAbleToPracticeAgain disables button when limit reachedcallUpdateTaskWithUserData persists progressReal-time English ↔ Cantonese/Mandarin — turn every class into a learning ecosystem
How It Works for Teachers
Set up room
Speak normally
See engagement
Access analytics
Noto Sans CJK SC/TC for optimal Chinese renderingSmart Capture Pipeline
Real-time bilingual subtitles appear as teacher speaks. Azure Speech Services captures phoneme-level data simultaneously.
Students select important text → Add personal remarks → Categorize by topic. Unicode-aware regex extracts vocabulary automatically.
Captured words auto-convert to flashcards. Spaced repetition brings them back at optimal review intervals. Teachers never manually create vocab lists.
Students track progress through 5-stage vocabulary pipeline. "Every class becomes a structured, reusable learning experience."
Data-driven teaching — see what your students need before they ask
What Teachers See
Real-time visualization of student engagement: Green = Active, Yellow = Distracted, Red = Struggling. Teachers identify problem areas without interrupting the lesson. See who needs help at a glance.
When a student clicks the "Question" button (IconQuestions), teachers see an alert on the dashboard. The AI Coach correlates help-seeking behavior with performance data — frequent help requests + low scores = intervention trigger.
useCallGetUserDashboard fetches real-time data. Tracks: Study Days, Study Minutes, Words Mastered, Spoken Times. Color-coded change metrics (green for positive, red for declining) show trends at a glance.
The Analytics Engine
Every interaction generates telemetry: clicks, filter changes, lesson starts, pronunciation attempts. reportActivityLog captures structured events with module, entity, action, element fields. This data feeds the AI personalization engine.
Exam Mode: 90-minute timer, hidden hints, real HKDSE simulation. Guide Mode: AI Coach available, hints enabled, learning-focused. Students choose their mode — building metacognitive awareness.
Teacher Benefit: The analytics engine means you never teach in the dark. Instead of guessing who's struggling, you see it. Instead of assuming who's bored, you detect it. Data transforms teaching from reactive to proactive.
Progress psychology that keeps students coming back
4 tier visual levels: OOPS (0-50%), GOOD (51-60%), WELL DONE (71-90%), AMAZING (91-100%). Each tier triggers a different mascot expression.
Conic-gradient progress rings show completion at course level. The green-to-blue transition suggests growth becoming mastery. Streak indicators leverage loss aversion psychology — students don't want to break their chain.
The blue droplet character with thumbs-up gesture functions as a non-judgmental learning companion. Provides parasocial companionship during solo study. Non-authoritarian design normalizes mistakes.
The Science: Krashen's Affective Filter theory says anxiety blocks language acquisition. Every gamification element in Think & Speak exists to reduce that filter: friendly mascots (not judgmental teachers), encouraging messages (not red X marks), clear progression (not vague "study more"). The celebration effect on login streaks triggers dopaminergic rewards that reinforce habitual platform usage.
Buttons use box-shadow: 0px 4px 0px 0px #bad6ee creating 3D press effects. The 2px downward translation on :active simulates physical button depression. This skeuomorphic design bridges physical toys and digital interfaces — making the learning platform feel immediately familiar to young learners who associate this feedback with fun.
Learn anywhere — from classroom projector to commute smartphone
1920px+
768px–1919px
<768px
Cross-Device Continuity: Redux state persists via localStorage with debounced writes (500ms). Student starts a lesson on classroom desktop, continues on tablet at home, reviews on phone during commute — progress syncs seamlessly. The platform follows the student, not the other way around.
High contrast ratios for visually impaired learners. Focus states with transition: all 0.2s ease-out. Semantic HTML structure supporting screen readers. prefers-reduced-motion media query respects user preferences. Inclusive design serves Primary through University age ranges in Hong Kong's diverse educational landscape.
Enterprise-grade infrastructure designed for educational environments
React + Next.js + TypeScript
Redux Toolkit
API + Auth
Azure Speech + ML
Database + Analytics
thinkAndSpeakActions patternsnext-i18next for trilingual supportHKDSE-aligned exam simulation with AI Coach support
Dual-Mode Architecture
90-minute countdown. Hints disabled. Real HKDSE pressure. Questions must be answered sequentially. Forced submission when time expires.
AI Coach always available. Sentence-level hints. Strategy tips. Skip allowed. Learning-focused without time pressure. Build confidence gradually.
AI Coach Features
Students click any word, sentence, or paragraph to request AI analysis. Five knowledge domains:
Content prioritizes Chinese explanations for non-English locales, ensuring comprehension before translation.
After each part, students see: Overall score with color-coded icon (trophy 🏆 / rocket 🚀 / target 🎯 based on performance). Per-question breakdown with expandable feedback. Strategic debriefing with AI-generated tips. Next Steps calculation — system identifies which part to tackle next.
Exam Tip: The Reading Comprehension module maps directly to HKDSE Paper 1 formats. Students practicing here are training for the actual exam — not just generic reading exercises.
Structured paths that turn study into purposeful, motivating progression
Watch Video
Take Quiz
Study Glossary
Download PDF
Speaking Practice
How It Works
Students never face a blank page. The Redux state machine tracks practicingCourseId → practicingLessonId → practicingTaskId. If a session is interrupted, students return to their last active checkpoint. The course grid uses gamified status badges (Last Practice, Completed, Premium) to surface relevant content.
isLessonLocked enforces prerequisite completion. Students must pass foundational vocabulary before accessing advanced speaking exercises. This scaffolding prevents overwhelm while giving advanced learners fast-track paths. Course list filtering enables teachers to assign specific courses to student groups.
For Teachers
Teachers can:
Key Design: Course Adventure transforms curriculum delivery from teacher-driven distribution to AI-recommended personalized pathways. Each student's path is unique, but teachers maintain full visibility and control.
Not a collection of tools — an interconnected environment where
assessment, practice, translation, and gamification reinforce each other.
Voice profiles reveal communication strengths. Identify who needs confidence vs. who's ready for challenges.
Class analytics reveal invisible patterns. Spot struggling students early. Track intervention effectiveness in real-time.
AI handles routine personalization. You focus on high-value human interactions that require your expertise.
Ready to explore?
Production: app.thinkandspeak.com
Teacher Account: test_teacher@seechange-edu.com / Password: Aa123456
→ Navigate slides · N Speaker notes · F Fullscreen · Click cards for details