🎯 Workshop Activity: Live Platform Demo Prep
16 / 23
Hands-On: Experience Your Students' Journey
Before we continue the technical deep-dive, let's pause for a live walkthrough. This activity puts you in your students' shoes — experiencing the same onboarding, learning, and feedback systems we've been discussing.
📋 Activity: Assessment Walkthrough
5 minutes
-
▸
Visit
app.thinkandspeak.com
-
▸
Log in with test student account
-
▸
Complete the Assessment flow
-
▸
Observe how the Dashboard adapts
📚 Activity: Vocabulary Capture
5 minutes
-
▸
Enter a Course Adventure lesson
-
▸
Try the Reading Comprehension module
-
▸
Tap on unknown words to capture them
-
▸
Check "My Flashcards" for auto-generated cards
💡 While you explore: Notice how the mascot character changes based on your actions. Notice how the color theme matches the age group you selected during assessment. These are the CSS Module architecture and mascot state systems we discussed in detail earlier.
🔑 Login Credentials
Student Account
test_student1@seechange-edu.com
Aa123456
Teacher Account
test_teacher@seechange-edu.com
Aa123456
🌐 app.thinkandspeak.com
🧪 uat-app.thinkandspeak.com
⏱ Tip: Teachers can log in with the teacher account to see both experiences side by side. Use two browser tabs.
Think & Speak — Workshop Part 2Press → or click to continue
🗣️ Group Discussion Engine — DSE Paper 4 Simulation
17 / 23
Authentic HKDSE Paper 4 Format Replication
The Group Discussion module replicates the exact DSE Paper 4 format — the most anxiety-inducing component for Hong Kong students. By practicing with AI personas in a safe environment, students build confidence and fluency.
A
Preparation
10 minutes reviewing stimulus documents and organizing talking points
B
Group Discussion
8 minutes of real-time conversation with AI personas
C
Individual Response
10 questions × 60 seconds with AI evaluation
🎯 Assessment Metrics: Interruption count (turn-taking etiquette), phase-based analysis (Opening/Exploration/Challenge/Synthesis), Part A + Part B separation mirroring official DSE scoring criteria, and Rank Badge system.
Six AI Persona Roles
🎯
Facilitator
Guides discussion flow
⚡
Starter
Initiates topics
🔥
Challenger
Questions assumptions
🔗
Connector
Links concepts
💡
Clarifier
Explains complexities
Voice Processing Pipeline
▼
🎤 Speech Input
→
☁️ Azure Speech
→
📝 Transcription
→
🌏 Translation
→
💬 Subtitles
WebSocket separates Chat Channel (translations) from Room Channel (presence updates) — subtitle delivery never blocked by student join/leave events.
Think & Speak — Workshop Part 2Press → or click to continue
🎭 Conversation Role Play — Structured Speaking Practice
18 / 23
From Passive Input to Confident Output
The Conversation Role Play module implements the Input → Practice → Feedback → Mastery loop. Students practice structured academic speaking in contexts designed to build real-world communication confidence.
🎤
Public Speaking
Presentation delivery with timer, AI feedback on fluency, pace, and confidence markers. Builds skills for class presentations and university interviews.
Timed
Confidence
⚖️
Debate & Argumentation
Structured argument practice with position statements, evidence presentation, and rebuttal timing. Aligned with HKDSE debate format requirements.
Structured
Evidence
🤝
Leadership Communication
Meeting facilitation, delegation language, and team motivation practice. Prepares students for prefect roles, project leadership, and future workplace scenarios.
Leadership
Real-world
🎯 Phoneme-Level Pronunciation Feedback: Each word scored at the phoneme level — not just "right" or "wrong." Students see exactly which sounds need improvement. The VoiceRecordAndPlay component uses Azure Speech SDK for real-time analysis.
📊 Four Assessment Dimensions:
Fluency — speaking smoothness ·
Accuracy — pronunciation correctness ·
Completeness — lexical coverage ·
Prosody — natural intonation patterns
📋 Choose Scenario
→
🎤 Record Response
→
🔬 AI Analysis
→
📊 Detailed Feedback
→
🏆 Mastery Tracking
Think & Speak — Workshop Part 2Press → or click to continue
🌐 Live Translation Engine — Real-Time Classroom Communication
19 / 23
Turn Any Classroom Into a Bilingual Learning Environment
The Live Translation system is the neural center of real-time classroom communication. When a teacher speaks in English, students see subtitles in Cantonese or Mandarin — in real time.
🇬🇧
English
Source language
🇨🇳
Mandarin
Simplified Chinese
🇭🇰
Cantonese
Traditional Chinese
WebSocket Dual-Channel Architecture
▼
Chat Channel: Transports transcribed speech and translations to all connected students.
Room Channel: Manages student entry/exit events — never blocks translation delivery.
This separation ensures that subtitle synchronization remains fluid even in busy classrooms with students joining and leaving.
Room Management & Attendance
▼
Three attendance states: Attending (WebSocket connected), Invited (authorized), Available (eligible).
Room status: NOT_STARTED → STARTED → IN_PROGRESS → COMPLETED
Student "question" and "understand" signals feed the real-time comprehension heatmap.
The Complete Learning Loop
👂
Listen
Real-time bilingual subtitles
↓
📝
Capture
Save key sentences to My Notes with personal remarks
↓
🔄
Review
Vocabulary auto-extracted and converted to flashcards
↓
🏆
Master
Spaced repetition practice with AI flashcards
Every class becomes a structured, reusable learning asset. Listen → Capture → Review → Master — this isn't a marketing tagline, it's the technical architecture we've built.
Think & Speak — Workshop Part 2Press → or click to continue
📊 Dashboard & Teacher Analytics — Data-Driven Instruction
20 / 23
See Progress Clearly. Stay Motivated Naturally.
The Dashboard transforms raw learning data into visual, actionable insights for both students and teachers. Students see their own progress; teachers see aggregate class data for targeted intervention.
Multi-Tab Reporting System
| Report Tab | Metrics | Key Feature |
|---|
| 📚 Courses | Enrollment, completion, skill dev | ✓ 4D Assessment |
| 🎤 Scripts | Practice count, best score, trends | ✓ Improvement tracking |
| 📖 VocabBank | Words learned, mastered, radar chart | ✓ 5-skill visualization |
| ⏱ Time Range | 7d, 30d, 90d, all-time | ✓ Period comparison |
5-Skill Vocabulary Radar
The VocabBank Report includes a radar chart visualizing 5 skill dimensions: Vocab Guide, Spelling L1, Spelling L2, Vocab Usage, Dictation.
AI-Powered Insights
AI Smart Tips — Personalized suggestions based on performance patterns. "You've mastered 42 words this week! Try focusing on Phonics Level 2 — your spelling accuracy dropped 15%."
Technical: useCallGetUserDashboard
▼
useCallGetUserDashboard — Custom API hook for real-time data fetching. Redux synchronization ensures state consistency across components. useModuleGuardian — Access control for proper module sequencing.
Think & Speak — Workshop Part 2Press → or click to continue
🗺️ Course Adventure & Gamification — Learning That Feels Like Play
21 / 23
From Reluctant Speakers to Confident Communicators
Course Adventure transforms passive content consumption into an engaging progression journey. Students don't just complete exercises — they "level up" through structured learning paths with clear objectives and achievements.
5-Task Lesson Structure
1
Lesson Video
Watch short video introducing key topic or skill
2
Multiple Choice Quiz
Answer comprehension questions about the lesson
3
Drag & Drop Glossary
Match terms with definitions to reinforce vocabulary
4
Glossary Download
Download printable PDF of key words and definitions
5
Speaking Exercise
Practice speaking related sentences or dialogues with AI feedback
10-Level Vocabulary Mastery
Level 1: First Words — Basic vocabulary foundations
Level 3: Basic Words — Expanding word recognition
Level 5: Intermediate Words — Contextual understanding
Level 7: Expert Words — Academic vocabulary
Level 10: Extreme Words — Advanced mastery
5 Training Tasks: Learn & Read (pronunciation) → Spelling I (identification) → Spelling II (dictation) → Word Usage (context) → Picture Dictation (visual association)
Spaced Repetition: Based on Ebbinghaus forgetting curve. Students who use it consistently retain words 3× better than mass exposure.
Think & Speak — Workshop Part 2Press → or click to continue
🔒 Security Architecture & Data Protection
22 / 23
Enterprise-Grade Security for Student Data
The platform implements comprehensive security measures designed specifically for educational environments where student data protection is paramount. Every technical decision prioritizes data safety.
🔐
JWT Authentication
Encrypted tokens with configurable expiry for API security
👤
Role-Based Access
Teacher/Student separation with appropriate permissions
🗂️
School Data Segregation
Multi-tenant isolation — one school can't see another's data
🌍
GDPR/COPPA Compliant
Educational data protection standards for minors
Technical: Encryption & Token Management
▼
RSA PEM-encoded key pairs (decryptFromServer, genKeyPair) encrypt Azure access tokens during transit. Auto-refresh cycle executes every 10 minutes via autoRefreshRecognitionTokenTimeoutRef. Base64 token encoding for iframe authentication.
Environment Separation
PRODUCTION
app.thinkandspeak.com
Real student data • Live classrooms
SANDBOX
uat-app.thinkandspeak.com
Teacher training • Testing only
Data Flow Protection
| Data Type | Protection | Access |
|---|
| 🎤 Voice Recordings | Encrypted at rest & transit | Student + Teacher |
| 📊 Assessment Results | JWT-protected API | Student + Teacher |
| 📖 Discussion Transcripts | Session-scoped access | Participants only |
| 👤 Personal Vocabulary | User-isolated storage | Student only |
| 📈 Class Analytics | Teacher role required | Teacher dashboard |
For School IT: The platform supports SSO integration, data export, and admin-level controls. Contact our technical team for deployment documentation.
Think & Speak — Workshop Part 2Press → or click to continue
🏆 The Closed-Loop Learning Ecosystem — Everything Connects
23 / 23
Everything Connects
Assessment → Personalization → Activity → Analytics → Improvement — This closed loop creates continuous, self-reinforcing learning growth.
🔵 For Teachers
-
✓
Reduced preparation time via automated vocabulary extraction
-
✓
Real-time engagement monitoring with heatmap visualization
-
✓
Multilingual classroom support (EN ↔ CN ↔ HK)
-
✓
Structured lesson reuse from every class session
🟢 For Students
-
✓
Personalized learning paths adapting to proficiency
-
✓
Reduced anxiety through mascot-driven emotional support
-
✓
Interactive practice with immediate AI feedback
-
✓
Mobile-first design for learning anywhere
🏫 For Schools
-
✓
Scalable solution supporting multiple schools and classes
-
✓
Comprehensive reporting on learning outcomes
-
✓
GDPR/COPPA compliance for educational data
-
✓
JWT-based security with role-based access control
⚙️ Core Technologies
React + Next.js
TypeScript
Redux
WebRTC
Azure Speech
SCSS Modules
WebSocket
Ant Design
"Teach with Confidence. Learn without Limits."
Think & Speak — See Change AI English
📧 Contact us for a demo · 🌐 app.thinkandspeak.com
Think & Speak — Workshop Part 2Thank you! Q&A Time