EdTech and e-learning · Case study
StoryLearning: An embeddable language-learning quiz widget under 50 KB
EdTech widget case study: a zero-dependency quiz widget with six question types, audio and analytics, embeddable in WordPress, Thinkific, Teachable or any LMS.
- Client
- StoryLearning teaches languages through stories and needed quizzes inside its existing course platforms.
- Team
- 1 senior front-end engineer, 1 designer
- Timeline
- 6 weeks from brief to first embed
- Services
- Web development, UI/UX design
- 6+
- Quiz question types
- < 50 KB
- Bundle size, gzipped
- 4
- Integration methods
- < 2 s
- First render time
In short
StoryLearning needed interactive quizzes inside the learning platforms it already used, without a platform migration. We built a framework-free JavaScript widget with six question types, audio playback, fuzzy answer matching, progress tracking and WCAG 2.1 AA accessibility, backed by a serverless Node.js API on MongoDB Atlas. It ships under 50 KB gzipped, renders in under two seconds and embeds four ways, including a WordPress plugin path.
Where they started.
- Quizzes had to run across existing platforms such as WordPress, Thinkific and Teachable without a migration
- Multiple languages, several question types and audio-driven pronunciation exercises had to work on desktop and mobile
- The widget had to stand alone, avoiding tight coupling with any specific CMS
The approach.
- A zero-dependency widget in vanilla JavaScript ES6 modules bundled into an IIFE so nothing leaks into the host page
- A Node.js and Express REST API deployed as Vercel serverless functions, with MongoDB Atlas behind it
- Fuzzy text matching with Levenshtein distance for typo tolerance, plus server-side validation with explanations and scoring
- Four embed methods: HTML data attributes, a JavaScript API, an iframe and a WordPress plugin integration
- A custom event system that emits quiz started, question answered and quiz completed events to the host page for analytics
What shipped.
- Quiz engine with multiple choice, text input, true or false, fill in the blank, match pairs and flashcards
- Audio player with play, pause and seek for pronunciation exercises
- Progress bar, light and dark themes, responsive mobile-first layout and reduced-motion support
- Performance stats: accuracy, time per question, total duration and pass or fail per session
- REST API with seven endpoints, five-minute client caching, Helmet security headers and CORS policy
- MongoDB schema for courses, lessons and quiz items with compound indexes
- Automated deployment pipeline with staging and production environments and health verification
- Quickstart guide, technical documentation and deployment runbooks
How the engagement ran.
Context
StoryLearning delivers language courses through existing platforms and wanted interactive quizzes inside them without moving to a new LMS. The quizzes had to support several question types, audio for pronunciation, multiple languages and mobile use, and they had to operate as a standalone embed rather than a plugin tied to one CMS.
What we built
- A quiz engine with six question types: multiple choice with single and multi-select, free text with fuzzy matching, true or false, fill in the blank with hints, drag-and-match pairs and spaced-repetition flashcards
- Real-time client and server validation with explanations, scoring, retry with optional randomisation and per-session performance stats
- A component architecture of eleven modules: entry point, quiz renderer, question display, answer validator, progress bar, feedback modal, audio player, API client with caching, data transformer and an event emitter
- A light and dark theme system on CSS custom properties, mobile-first breakpoints at 768 and 1024 px, 44 px touch targets and notch-safe layout
- A REST API for quizzes, courses and lessons plus a health endpoint, with input validation, compression and structured errors
- Four embed methods and data-attribute configuration for course, lesson, theme and progress bar
Architecture and stack
| Layer | Technology | Why |
|---|---|---|
| Widget | Vanilla JavaScript ES6 modules bundled to an IIFE, HTML5, CSS3 custom properties | No framework means no dependency conflicts with the host page and a very small bundle |
| API | Node.js, Express, Mongoose on Vercel serverless functions | Scales to zero between quiz loads and deploys with the frontend |
| Data | MongoDB Atlas with courses, lessons and quiz-item collections, compound indexes | Content is document-shaped and queried by course and lesson |
| Security | Helmet headers, CORS policy, input sanitisation | The widget runs on third-party domains, so cross-origin rules matter |
| Delivery | Custom build script, CSS minification, Python deploy orchestration, five-minute API caching | Small, cacheable assets and a verified deploy every time |
The design patterns are deliberately conventional: a controller-style renderer, view components per question type, an API model layer, a publish-subscribe event emitter for decoupled communication with the host page, a singleton database connection and a factory for DOM elements. Conventional patterns are what let a client's own developers extend the widget later.
Integration methods
| Method | How it works | Best for |
|---|---|---|
| HTML data attributes | A div with course, lesson and theme attributes plus the CSS and JS files | Static sites and landing pages with minimal coding |
| JavaScript API | Instantiate the widget with a selector and options, then attach event listeners | Single-page apps and platforms that need event hooks |
| Iframe | Point an iframe at the hosted widget with query parameters for configuration | Cross-domain and sandboxed environments such as Thinkific or Teachable |
| WordPress | Enqueue the scripts in the theme and use data-attribute divs in posts | WordPress sites, blogs and membership sites |
The data model is three MongoDB collections linked by course and lesson identifiers. Courses carry a language pair, a difficulty level and rolled-up counts of lessons and questions; lessons carry ordering and estimated time; quiz items carry the question type, prompt, answer options, correct answer indices, an optional audio URL, an explanation shown after answering and a difficulty rating for adaptive practice. Compound indexes keep lesson lookups fast, and an active flag gives content editors a soft-delete path.
How we worked
Deployment runs through a scripted pipeline: pre-flight checks on the Vercel CLI, a build that bundles eleven JavaScript modules and minifies four stylesheets, separate frontend and API deploys, alias configuration for production URLs and a verification step that hits health endpoints on both sides. Documentation shipped with the code: a quickstart, full technical docs and deployment runbooks.
Scale and complexity
| Measure | Figure |
|---|---|
| Question types | 6 |
| Bundle size | Under 50 KB gzipped |
| First render | Under 2 seconds |
| Embed methods | 4 |
| API endpoints | 7 |
| Accessibility | WCAG 2.1 AA |
What this means for your project
If your product needs to live inside pages you do not control, the constraints are the feature: small bundle, no framework, isolated scope, several ways to embed and events the host can listen to. Get those right and the widget becomes a distribution channel rather than a support burden.
Innovation Insight builds widgets, embeds and SDKs on fixed-price terms after a short discovery.
What changed.
- Bundle under 50 KB gzipped and first render under two seconds
- WCAG 2.1 AA compliance with ARIA labels, keyboard navigation and focus management
- Four integration methods so the same widget serves static sites, single-page apps, cross-domain embeds and WordPress
Questions about this project.
Can you build an embeddable widget for our product?
Yes. Widgets that must live inside other people's pages need a framework-free build, a small bundle, an isolated scope and several embed methods. This project is the template we start from.
Will it work on our LMS?
The widget was designed for WordPress, Thinkific, Teachable and custom LMS platforms through a script tag, a JavaScript API or an iframe. Most platforms that allow custom HTML can host it.
How much does a widget like this cost?
Focused widgets with an API behind them typically fall in the $15k to $45k MVP range and take 8 to 14 weeks, depending on question types and integrations.