Think & Speak — Technical Workshop for Teachers

Think & Speak™ — Technical Workshop

1 / 18

Technical Architecture
Deep-Dive Workshop

Think & Speak — AI English Learning Platform
Educator Technical Training Session

🏗️

Component Architecture

React/Next.js with TypeScript, CSS Modules, Redux state management

🎯

Assessment Engine

8-dimension learner profiling powering adaptive personalization

🎤

AI Pronunciation

Phoneme-level precision feedback with Azure Speech Services

Think & Speak — Teacher WorkshopClick or press → to continue

Platform Architecture Overview

2 / 18Foundation

Think & Speak: Frontend Technical Foundation

The Think & Speak platform employs a modern, component-based frontend architecture built on React with Next.js, utilizing CSS Modules for scoped, maintainable styling — a critical choice for an educational platform serving diverse age groups from primary to university students with distinct interface requirements.

⚡ Core Technology Stack

Next.js + React + TypeScript — server-side rendering foundation enabling SEO and fast initial load
Redux State Management — application-wide data flow via liveTranslationActions slice for predictable state transitions
Ant Design component library — consistent UI elements (Button, Form, Dropdown, Segmented)
ECharts + react-circular-progressbar — real-time data visualization throughout dashboard
next-i18next — internationalization supporting English, Traditional Chinese (zh-HK), Simplified Chinese (zh-CN)
SCSS Modules with @apply directives — component-scoped styling preventing CSS leakage between modules

🎨 Design Philosophy

Modular component architecture — reusable, maintainable code structure enabling isolated updates
Responsive layouts — Desktop, Tablet, Mobile breakpoints via CSS global classes (:global(.mobile), :global(.tablet))
Real-time data visualization — progress charts, heatmaps, score gauges across all modules
Professional educational deployment — enterprise-grade code with error handling and accessibility

🔗 Core Capabilities

Real-time Progress Tracking — live updates as students learn across all modules
AI-Powered Assessment — phoneme-level pronunciation analysis via Azure Speech Services
Secure Authentication — JWT tokens with role-based access (Teacher vs Student)
Live Translation — English ↔ Mandarin ↔ Cantonese real-time classroom support
Cross-Platform URLs — app.thinkandspeak.com (Production) / uat-app.thinkandspeak.com (UAT)

Think & Speak — Teacher WorkshopClick or press →

Assessment System: 8-Dimension Learner Profiling

3 / 18Personalization

The 8-Question Personalization Engine

The assessment captures 8 dimensions of learner identity. This is NOT a test — students don't "pass" or "fail." It's a preference profile that helps the platform understand how each student learns best.

Age Groups 6-8 · 9-11 · 12-14 · 15-17 · 18+
Adapts content delivery speed, interface complexity, and mascot emotional tone

Gender Preferences
Avatar and content theme customization for personalized visual experience

Interest Topics 11 Categories
Space & Science · Animals · Sports · Travel · Music · Technology · Books · Movies

Learning Personas 9 Types
Debate Hero · Story Explorer · Game Master · Creative Writer · Active Speaker

Motivation Factors 8 Categories
Travel & Explore · Watch Shows · Career Goals · Academic Success · HKDSE Prep

Learning Styles 8 Methods
Play Games · Read Stories · Speak & Act Out · Watch Videos · Listen & Repeat

Proficiency Level 1-10 Scale
Levels 1-3 Beginner → 4-6 Intermediate → 7-8 Advanced → 9-10 Expert

Curious Subjects 22 Topics
Including HKDSE-relevant: Math, Science, History, Geography, Economics, Literature

Think & Speak — Teacher WorkshopClick or press →

Dashboard: Student Learning Command Center

4 / 18Progress Tracking

See Progress Clearly.
Stay Motivated Naturally.

Students see THEIR OWN personal dashboard — creating ownership of learning progress. The gamification elements create dopamine feedback loops that encourage continued practice.

📅

Study Days
Consecutive learning streak tracking

⏱️

Study Minutes
Total time invested across all modules

🎤

Spoken Times
Practice frequency for speaking confidence

📝

Mastered Words
Vocabulary with confirmed long-term retention

📊 Dashboard Technical Architecture

useCallGetUserDashboard — Custom API hook for real-time data fetching
Redux Store Synchronization — State consistency across all components
useModuleGuardian — Access control ensuring proper module sequencing
Responsive Sidebar — Adaptive layout for Desktop / Tablet / Mobile

🏆 Gamification Elements

Points System — Earned through completing lessons, maintaining streaks, high scores
Achievement Badges — Unlockable milestones for sustained motivation
Streak Rewards — Bonus points for consecutive day participation
Progress Streaks — Leverages loss aversion (don't want to break chain)

🧠 Visual Feedback Psychology

Circular Progress — Satisfies completion drive, shows distance to goal
Color Coding — Instant recognition of performance status (green/yellow/red)
Points Animation — Dopamine hit on achievement unlock
Dashboard adapts based on the 8-dimension assessment from onboarding

Think & Speak — Teacher WorkshopClick or press →

EnglishAssessment: Onboarding Module Architecture

5 / 18Personalization

The Intelligent Onboarding Entry Point

🔒 Iframe Sandboxing Architecture

Assessment forms embedded via secure iframes enabling flexible content delivery:

${origin}/english-assessment/form/${selectedLevel}/${selectedFormId}.html

Encrypted authentication tokens (t: btoa(token)) passing Base64-encoded JWT
Cross-origin communication via window.postMessage API
Environment variables transmitted for Production/UAT differentiation
Strict origin checking prevents XSS injection attacks

📡 Bi-Directional Data Flow

window.addEventListener('message', handleMessage)

Structured englishAssessment payload with selectedLevelId, selectedFormId, formData
Strict origin checking through payload destructuring
Immutability creates audit trail for academic integrity in HKDSE contexts
Results dispatched to Redux store for persistence across modules

🎭 Progressive Disclosure UI

"Welcome → Assessment → Results" flow via React useState for isDialogOpen
Mascot-driven narrative (blue "Go For It" mascot) psychologically prepares learners
Reduces test anxiety — critical UX consideration per Krashen's Affective Filter
Smooth transitions prevent cognitive overload during profiling

🎨 Login Interface: Psychological Onboarding

Layered mountain silhouettes create forced perspective communicating "progression" and "ascending difficulty." Soft, rounded contours reduce anxiety during assessment.

Blue gradient (#E6F7FF to #3695E5) triggers neurological associations with calm, focus, and trustworthiness — priming students for learning readiness.

🔄 Multi-Role Authentication

Teacher accounts: Dashboard analytics, Broadcast tools, Student oversight

Student accounts: Personalized learning, Vocabulary bank, Progress tracking

Role detection via invitationType === 'School Program' routes to appropriate interface

⚡ Dynamic Avatar Rendering

Mascot variants selected based on user type (Teacher = glasses Image 13, Student = backpack Image 16), browser language (Image 19/20 for Chinese), or time of day

Think & Speak — Teacher WorkshopClick or press →

Visual Identity: The Mascot Character System

6 / 18Affective Design

20 Mascot Variants = Functional UI Components

The mascot system is not decorative — each variant is a functional UI component that communicates learning modes and emotional states in real-time, reducing cognitive load through consistent visual cues.

MEDIA & ACTIVE

🟢 Green Characters

Image 1 — Live Translation (🎧🎤🎬)
Image 6 — VR Training (🥽🎮)
Image 10 — Gamification (🎧💰)
Image 16 — Student Onboarding (🎒✏️📱)

ANALYTICAL

🔵 Blue Characters

Image 2 — Exam Simulation (🔍🕵️)
Image 3 — Vocabulary (📖💡)
Image 13 — Teacher Dashboard (👓)
Image 18 — Confidence (💪)
Image 19 — 简体中文 · Image 20 — 繁體中文

CREATIVE & STEM

🟡 Yellow Characters

Image 5 — Higher-Order Thinking (🧠🚀)
Image 9 — Creative Expression (🎨⚙️)
Image 15 — Speaking Performance (🎤⭐)

COMMUNICATION

🟠 Orange Characters

Image 8 — Global Classroom (🌐)
Image 10 — Public Speaking & Debate (🎤🗣️)

EXPLORATION

🟣 Purple Characters

Image 12 — Research & Discovery (🔭📓)
Image 14 — Struggling Learner (😔 → AI Coach intervention)
Image 4 — Collaborative Learning (👥)

Think & Speak — Teacher WorkshopClick or press →

Reading Comprehension: HKDSE Exam Preparation

7 / 18Exam Simulation

Exam Simulation Mode + Guided Learning with AI Coach

⏱️ Exam Simulation Mode

Timed reading tasks building speed and focus under pressure
Exam-authentic passages aligned to HKDSE standards
90-minute countdown via EXAM_DURATION_MS
Disabled AI hints — authentic exam conditions
Forced submission when time expires

🤖 AI Coach Support (Guide Mode)

Ask questions anytime during practice sessions
Receive mentor-style strategic hints for DSE strategy
Build exam thinking, not just memorize answers
Word-level, sentence-level, paragraph-level hints available
Real-time feedback on each question attempt

📋 9 Question Types for HKDSE

TrueOrFalse — Three-state logic (T/F/NG) with TRUE_OR_FALSE_OPTIONS
TextInput — Free-text with AI semantic evaluation (evaluateAnswerWithAI)
MCQ — Multiple choice supporting text-only and card-with-icon formats
InteractiveWordBuilder — Gamified word construction from button arrays
DragTheWords / FillInTheBlanks — Cloze test with drag-drop interaction
DragAndDrop / Classification — Matching exercises for main ideas
TableCompletion — Structured data entry with fuzzy matching
ReferentMatching — Anaphora resolution connecting pronouns to referents
TimelineMatching — Chronological ordering (vertical or horizontal)

📊 Dual-Mode Architecture

Feature	Exam Mode	Guide Mode
Timer	90-minute countdown	Hidden
Hints	Disabled	AI Coach enabled
Scoring	Immediate on submit	Real-time feedback
Color	Orange accent	Green accent
Use Case	HKDSE simulation	Learning & practice

Think & Speak — Teacher WorkshopClick or press →

AI Pronunciation Assessment Engine

8 / 18Speech Analysis

Phoneme-Level Precision Feedback System

The system provides granular, phoneme-by-phoneme feedback enabling precise articulation improvement — students identify EXACTLY which sound needs work, not just "right" or "wrong."

🎯 Four-Dimensional Scoring

Accuracy — Phonetic precision92%

Fluency — Rhythm and prosody78%

Completeness — Lexical coverage95%

Pronunciation — Overall quality85%

🔤 Traffic-Light Color Coding

🟢 91-100: Mastery 🔵 71-90: Proficient 🟡 61-70: Developing 🟠 51-60: Emerging 🔴 1-50: Needs Work

🎤 Recording Pipeline

RecordRTC with StereoAudioRecorder at 16kHz (optimal for speech recognition)
15-second safety timeout prevents excessive dead air
FormData multipart upload to backend via callUploadScriptPractice()
Azure Speech Services for speech-to-text and phoneme analysis
Forced alignment and phoneme evaluation returning PhonemeScores[]

🔊 Word-Level Audio Playback

Each word token includes clickable audio replay via callGetWordVoice()
TTS-generated pronunciation for reference alongside user recording comparison
Toggle between "listen to model" and "listen to your recording"
Practice history with chronological score tracking per word

Think & Speak — Teacher WorkshopClick or press →

Multi-Tab Reporting & Analytics Suite

9 / 18Analytics

Data-Driven Teaching — Not Gut Feeling, Actual Metrics

📚 Courses Report

Course enrollment tracking
Completion rates per course
Skill development across 4 dimensions: Fluency, Accuracy, Completeness, Intonation
Time range filtering: 7d / 30d / 90d / All-time
Period comparison (current vs. previous)

🎤 Scripts Report

Conversation Role Play — Structured academic speaking
Read & Speak — Input-to-output transformation
Scripts completed, time spent, practice frequency
Best performance highlighting with timestamps
Improvement trend analysis

📝 VocabBank Report

5-Skill Radar Chart: Vocab Guide, Spelling L1/L2, Usage, Dictation
AI-Powered Insights with personalized recommendations
Progressive learning path visualization
Category-based mastery percentages
Auto flashcard conversion for spaced repetition

📊 Dashboard Metrics Tracked

Metric	What It Measures	Why It Matters
Study Days	Consecutive learning streak	Habit formation and consistency tracking
Study Minutes	Cumulative time across modules	Effort investment and engagement level
Spoken Times	Total pronunciation recordings	Speaking confidence development
Mastered Words	Confirmed long-term retention	Vocabulary depth and spaced repetition success
Points	Gamification currency	Motivation and achievement tracking

Think & Speak — Teacher WorkshopClick or press →

Vocabulary Mastery: Spaced Repetition & Auto-Extraction

10 / 18Vocabulary

From Listening to Mastering — 3× Better Retention

Vocabulary Trainer uses SPACED REPETITION — a scientifically-proven learning technique based on Ebbinghaus's forgetting curve. Students who use it consistently retain vocabulary 3× better than those who don't.

🔄 Spaced Repetition Algorithm

New words appear frequently initially
Correct answers extend review intervals exponentially
Incorrect answers reset to shorter intervals
Intervals: 1d → 3d → 1w → 2w → 1mo → 3mo

📊 Mastery vs. Exposure

"Words Learned" = First-time successful recall
"Words Mastered" = Retention across 4+ review cycles
Key insight: mass exposure ≠ long-term retention
Spaced repetition optimizes WHEN you review

🎯 5 Training Task Types

Learn & Read — Listen, read, record pronunciation
Scoring: Pronunciation only

Spelling Check I — Identify correctly spelled sentence
Scoring: Pronunciation + Attempt

Spelling Check II — New spelling example
Scoring: Pronunciation + Attempt

Word Usage — Choose correct sentence and read aloud
Scoring: Pronunciation + Attempt

Picture Dictation — Listen and spell the word shown
Scoring: Attempt only

📝 Auto Vocabulary Extraction

Unicode-aware tokenization: /[\p{L}]/gu
Cross-reference against taggedWordListData
Green = known words, Blue = new words
Default "To Practice" tag for zero-friction capture

Think & Speak — Teacher WorkshopClick or press →

Live Translation: Break Language Barriers

11 / 18Real-Time

Turn Every Class Into a Structured, Reusable Learning Ecosystem

🌐 Real-Time Bilingual Subtitles

English ↔ Mandarin ↔ Cantonese real-time support
WebSocket communication for instant subtitle distribution
Azure Speech SDK integration with redundant connection architecture
Exponential backoff reconnection (max 3 attempts, 10s delays)
Automatic token refresh at 10-minute intervals

📝 Smart Note Capture

Save key sentences to My Notes with personal remarks
Category-based organization (Lecture, Questions, Discussion)
250-character limit enforces concise summarization
Auto-complete suggestions for metacognitive annotations

⚡ Auto Vocabulary → Flashcards

Saved words automatically convert to AI flashcards
Phonetic transcription, part-of-speech, and definition retrieved
Spaced repetition scheduling for after-class review
Gamified card stack metaphor with progress tracking

📡 WebSocket Architecture

NEXT_PUBLIC_WS_ROOM_URL

Chat Channel — transports transcribed speech and translations
Room Channel — manages student entry/exit events separately
Message Thread Architecture: translationText: Record<string, string>
History Persistence via StorageKey.historyMessages
Translation Caching with pre-computed translations reducing latency

🎧
Listen
Real-time subtitles

→

✏️
Capture
Save to Notes

→

🔄
Review
Vocabulary Extraction

→

🏆
Master
Spaced Repetition

Think & Speak — Teacher WorkshopClick or press →

Conversation Role Play: Academic Speaking with AI Feedback

12 / 18Speaking

Structured Academic Speaking Builds Confidence

🎤

Presentations

Structured academic speaking contexts with AI feedback on clarity, pacing, and vocal confidence. Practice persuasive speaking before real classroom presentations.

Public Speaking

⚔️

Debates

AI Debate Tutor (RAG Model) provides structured argumentation training with HKDSE-aligned content. Practice rebuttal skills and evidence-based reasoning.

Critical Thinking

💬

Discussions

AI persona roles (Facilitator, Starter, Builder, Challenger) simulate real group dynamics. Students practice turn-taking and collaborative communication.

Collaboration

🎯 4 Learning Tracks

Public Speaking Track — Presentation skills, vocal clarity, audience engagement
Debate & Argumentation — Evidence-based reasoning, rebuttal strategies, DSE Paper 3
Leadership Communication — Meeting facilitation, consensus building, persuasive discourse
English Fluency — General conversation confidence, real-world communication scenarios

👥 6 AI Persona Roles

🎯 Facilitator — Guides discussion flow for quieter groups
⚡ Starter — Initiates topics preventing awkward silences
🔧 Builder — Develops ideas already raised by students
🔥 Challenger — Questions assumptions for deeper analysis
🔗 Connector — Links disparate concepts together
💡 Clarifier — Explains complex points when confusion detected

Think & Speak — Teacher WorkshopClick or press →

AI Tutor: Intelligent Learning Companion

13 / 18AI Support

Your Personal Learning Companion — Available Anytime

💬 General English Conversation

Model.GPT "AI Tutor"

Casual dialogue practice for fluency development
Everyday vocabulary and natural conversation
Pronunciation focus with immediate feedback
Text-to-Speech, Speech-to-Text, Speech-to-Speech modes

⚔️ AI Debate Tutor (RAG Model)

Model.RAG "AI Debate Tutor"

Academic/Exam preparation with HKDSE-aligned content
Structured arguments and evidence-based reasoning
Rebuttal skill development for competitive debate
Access to academic debate curricula via RAG retrieval

🎨 Emotional Intelligence: ARI Mascot Feedback

Score Range	Mascot Response	Message
0-50%	Sad but encouraging 🥺	"Keep trying!"
51-60%	Hopeful thumbs up 👍	"Making progress!"
61-70%	Encouraging wave 👋	"Getting there!"
71-90%	Happy celebrating 🎉	"Great pronunciation!"
91-100%	Excited confetti 🎊	"Perfect score!"

Affective Filter Reduction: Anxiety reduction through friendly, non-textual feedback. Blue ARI mascot creates emotional safety — no harsh red X marks for mistakes.

🧠 3-Layer Personalization Architecture

Layer 1 — Assessment-Driven Onboarding: Invitation code routing ensures appropriate learning track
Layer 2 — Adaptive AI Interaction: Dual-model system adapts to proficiency levels
Layer 3 — Affective Feedback Loops: Mascot system maintains engagement without human teachers

Think & Speak — Teacher WorkshopClick or press →

Course Adventure: Structured Learning Paths

14 / 18Gamification

Learning Feels Purposeful, Motivating, Game-Like

🎮 5-Task Lesson Structure

🎬
Video Lesson
Watch & learn key topic

→

✅
Comprehension
Answer questions

→

📚
Glossary
Match terms & defs

→

📥
Download
Printable PDF

→

🎤
Speaking
Practice speech

🧠 Vocabulary Trainer: 10-Level Progression

Lv 1
First Words

Lv 2
Simple

Lv 3
Basic

Lv 4
Learning

Lv 5
Intermediate

Lv 6
Advanced

Lv 7
Expert

Lv 8
Master

Lv 9
Specialist

Lv 10
Extreme 🏆

🔑 Key Features

Progressive Disclosure — Icons shift opacity: full color (available) → 30% (locked)
Role-Based Scaling — Teacher: 40×40px primary icons; Student: 16×16px dense
WCAG 2.1 AA — aria-hidden="true" on decorative SVGs
SVG-Based Iconography — No icon fonts, preventing FOIT during Exam Mode

📊 AI Smart Tips

Personalized suggestions based on performance patterns
Identifies weak areas and recommends targeted practice
Tracks progress across all vocabulary dimensions
Connects vocabulary difficulty to assessment proficiency

📱 Cross-Device Continuity

Start on school computer, continue on tablet at home
Review on phone during commute
Progress syncs in real-time across all devices
Mobile experience is FULLY functional — not degraded

Think & Speak — Teacher WorkshopClick or press →

Group Discussion: DSE Paper 4 Exam Simulation

15 / 18Exam Preparation

100% DSE Paper 4 Format Compliance — Authentic Exam Preparation

Part A: Preparation
10 minutes — Review stimulus documents, organize talking points

→

Part A: Discussion
8 minutes — Real-time conversation with AI personas (4 phases)

→

Part B: Individual Response
10 questions × 60 seconds each — AI evaluation

🎯 4 Discussion Phases

Phase 1
Opening
Introduce perspectives

Phase 2
Exploration
Develop arguments

Phase 3
Challenge
Question assumptions

Phase 4
Synthesis
Conclude & unify

📊 Assessment Metrics

Interruption Count — Measures turn-taking etiquette (DSE grading criterion)
Phase-Based Analysis — Evaluation across all 4 discussion phases
Part A + Part B Separation — Mirrors official DSE scoring criteria
Rank Badge — Overall performance level indicator

Think & Speak — Teacher WorkshopClick or press →

UI Design System & Component Architecture

16 / 18Engineering

Designed for Language Learning Efficiency

📐 Cognitive Load Management

24px font size for bilingual reading (EN + ZH simultaneously)
75% max-width mimics optimal line length (~66 chars)
Expanded line-height 1.6+ prevents visual crowding
Generous desktop spacing creates "whiteboard" separation

🧠 AI Presence Indicators

@keyframes nodRocket { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

Blue ARI mascot physically "nods" while processing
Mimics human teacher non-verbal cues during wait time
Addresses "uncanny valley" — students KNOW the AI is thinking

🎯 Interruptibility as Pedagogy

.skipButton { opacity: 0; } &:hover { opacity: 100; }

Students can interrupt AI mid-explanation
Builds speaking confidence through student agency
Removes passive waiting periods of traditional language labs

📊 Message Component Responsive Strategy

Component	Desktop	Mobile	Rationale
ChatMessageSystem	75% width, visible avatar	90% width, hidden avatar	Max text real estate on small screens
ChatFooter	64px height, 24px font	48px height, 16px font	Thumb-friendly recording buttons
Login	540px centered card	Full-width stack	One-handed phone registration
Dashboard	Sidebar + full content	Single column swipe	Touch-optimized analytics

Think & Speak — Teacher WorkshopClick or press →

Cross-Platform Responsive Design

17 / 18Accessibility

Learning Doesn't Stop at the Classroom Door — It Continues Everywhere

🖥️

Desktop

Full 1920px layouts with multi-column information grids, 40×40px primary action icons, sidebar navigation, heatmap visualizations

Classroom Projection

📱

Tablet

Balanced density with 2-column grids, collapsible sidebar, touch-optimized controls at 24×24px, gesture support for drag-and-drop

Group Activities

📲

Mobile

Full-screen immersive interface with single-column layouts, 32px minimum touch targets, bottom-sheet modals, native iOS/Android feel

Commute Study

🎨 CSS Modules with SCSS

Scoped styling prevents cross-component conflicts
Global class composition via @apply directives
Responsive breakpoints: :global(.mobile), :global(.tablet)
Smooth transitions between layouts on orientation change

🔤 CJK Typography Engineering

Font Stack: system-ui, "Noto Sans CJK SC", "Noto Sans CJK TC"
Line Height: 1.6-1.8 for CJK glyph vertical complexity
Font Scaling: clamp() for fluid responsive typography
RTL Support: [dir="rtl"] qualifications for future Arabic/Hebrew

Think & Speak — Teacher WorkshopClick or press →

Key Takeaways & Next Steps

18 / 18Conclusion

Teach with Confidence.
Learn Without Limits.

👩‍🏫 For Teachers

Real-time engagement monitoring — see student understanding instantly
Automated vocabulary extraction — reduces preparation time
Multilingual classroom support — English ↔ Chinese without language barriers
Comprehensive analytics — data-driven teaching decisions

🎓 For Students

Personalized learning paths — assessment-driven content customization
Immediate AI feedback — phoneme-level pronunciation improvement
Gamified progression — 10 vocabulary levels, achievement badges
Cross-device continuity — learn anywhere, anytime

Every component — from mascot state management to phoneme-level scoring — serves one goal: transforming English language learning into adaptive, AI-driven personalized education.

Platform URL

app.thinkandspeak.com

Teacher Account

test_teacher@seechange-edu.com

Password

Aa123456