-
-
Example output: a generated light-and-distance experiment where learners manipulate a source and observe its shadow.
-
Example output: a generated plant-growth experiment for exploring sunlight, water, nutrients, and plant health.
-
Honest progress shows material analysis, experiment planning, HTML generation, and browser validation.
-
Start with any lesson or note, then choose a learning goal, language, visual style, and interaction.
-
Generated experiments are saved automatically for replay, regeneration, sharing, and learning analytics.
Inspiration
Many concepts are difficult to understand not because explanations are missing, but because learners cannot manipulate the relationships being described. Ideas such as torque, energy flow, fractions, or plant growth become much clearer when learners can change a variable and immediately observe the result.
High-quality simulations can solve this problem, but building a custom interactive experience for every lesson is slow and expensive. We wanted to make interactive learning experiences as easy to create as asking a question.
What it does
EduPlay Studio turns learning material into a playable interactive experiment.
A learner can paste text or upload a document or image, choose a learning goal, interaction preference, visual style, duration, and output language. EduPlay Studio then:
- extracts and understands the learning material;
- plans a focused learning journey and suitable interaction;
- generates a complete standalone HTML experiment;
- validates its code, safety, and interactions in a real browser;
- repairs concrete problems when validation fails;
- releases the result inside a restricted sandbox.
Each generated experience contains an introduction, guided exploration, an interactive challenge, and a short quiz. Validated experiments are saved automatically and can be reopened, regenerated, or shared through a read-only learning link.
How we built it
EduPlay Studio is built with Next.js, React, and TypeScript.
The generation pipeline separates creative work from release validation:
- A large language model analyzes the learning material and produces a compact experiment specification.
- A second generation stage converts that specification into a complete HTML, CSS, and JavaScript experience.
- Application-owned rules inspect the generated code for unsafe browser capabilities.
- Playwright operates the generated controls in a real Chromium browser and checks observable outcomes.
- If validation finds a concrete problem, the generator receives the exact findings and performs a bounded repair pass.
The generated experiment runs in a sandboxed iframe without access to networking, storage, popups, same-origin application data, or browser permissions.
We also use Zod for data validation, Vitest for automated tests, axe-core for accessibility checks, Mammoth for DOCX extraction, and unpdf for PDF processing.
Challenges we ran into
The hardest problem was not generating attractive HTML. It was generating experiences that were consistently complete, scientifically meaningful, and actually interactive.
Our early pipeline relied on another language model to review the generated experiment. This approach was slow and unreliable because the reviewer could overlook the same problems that a learner would immediately encounter.
We replaced model-based approval with deterministic validation. The application now derives a locked behavioral contract from the experiment plan, checks the HTML against safety rules, and operates its controls inside a real browser.
Another challenge was keeping the planning format useful without making it too complex. Large schemas caused slow responses and fragile parsing. We simplified the intermediate specification so that it describes learning intent, observable behavior, interactions, and assessment without dictating every implementation detail.
Accomplishments that we're proud of
- AI generates the core learning product rather than acting as an auxiliary chatbot.
- The same pipeline supports scientific, mathematical, and conceptual learning materials.
- Generated code is tested in a real browser before learners use it.
- Unsafe browser capabilities are rejected automatically.
- Experiences support both Chinese and English.
- Every experiment includes exploration, challenge, feedback, and assessment.
- Validated experiments can be saved, reopened, regenerated, and shared.
- The project passes linting, type checking, unit tests, production builds, accessibility checks, browser tests, and production dependency security audits.
What we learned
We learned that generative interfaces become more reliable when AI creativity is surrounded by deterministic software contracts.
Large language models are effective at understanding learning intent, choosing an interaction, and creating visual experiences. Traditional software is better at enforcing permissions, checking observable state changes, and deciding whether an artifact is safe enough to release.
We also learned that learners need more than an attractive simulation. A complete learning experience requires orientation, exploration, a meaningful challenge, immediate feedback, and a short assessment.
What's next for EduPlay Studio
Our next steps are to:
- evaluate generated experiences across a larger benchmark of learning materials;
- measure generation latency and failure categories;
- study learning outcomes with students and teachers;
- expand accessibility testing for generated experiments;
- add persistent cloud storage and authenticated educator workspaces;
- introduce optional expert review for high-stakes subjects;
- help educators organize and reuse collections of generated learning experiences.
EduPlay Studio demonstrates a future where learning material is no longer limited to static text. Any focused concept can become a world that learners can observe, manipulate, test, and understand.
