HyperPlay

Inspiration

Our generation has watched learning move from paper to screens, but a lot of the experience never really changed. A textbook became a PDF. A worksheet became a slide deck. The information is digital, but it is still mostly something we sit there and read.

And honestly? That can get boring fast.

When we saw Microsoft's "What's Missing?" challenge, we kept coming back to one question:

Why do our study materials tell us how something works, but rarely let us play with it ourselves?

A student can read (PV=nRT) twenty times. But what happens if they could move the pressure themselves and immediately watch the volume change? What if instead of memorizing projectile motion, they could try to land the projectile at a target and discover why their first attempt failed?

We did not want to build another chatbot that explains a chapter back to you.

We wanted the material itself to become interactive.

That became HyperPlay.

What it does

HyperPlay turns a student's own study material into a playable learning experience.

A student tells HyperPlay where they are in school, chooses their subject and course, and uploads their material. HyperPlay reads the content, identifies a useful quantitative relationship, and turns it into an interactive lab with controls, visual feedback, and a sequence of challenges.

The current experience follows three steps:

1. Change one thing. One variable is locked so the student can see how the other affects the result.
2. Change the other. The controls switch so the student explores the second relationship.
3. Put them together. Both variables unlock, and the student has to find a combination that reaches the goal.

Every attempt happens live. Students move sliders, run the experiment, see the visualization respond, and learn how close they were to the target.

Instead of only saying "wrong," HyperPlay can say something like:

0.20 atm under

That gives the student information they can use on the next attempt.

Each challenge also includes hints and a short explanation after the student succeeds, so the experience becomes a loop of:

try → observe → adjust → discover

For projectile motion, for example, a student might explore

$$ R = \frac{v^2\sin(2\theta)}{g} $$

by changing launch speed and angle and watching the trajectory respond.

HyperPlay can currently visualize relationships as a trajectory, curve, fill level, or meter, depending on the concept.

And if the uploaded material does not contain a relationship that fits the current engine, HyperPlay says so instead of inventing one.

How we built it

HyperPlay is a full-stack web application built with Svelte 5, Vite, Python, FastAPI, Pydantic, PyMuPDF, Azure OpenAI, and Azure App Service.

The flow looks like this:

Study material
      ↓
Text extraction
      ↓
Azure OpenAI
      ↓
Structured LabLevel JSON
      ↓
Safety + mathematical validation
      ↓
Interactive Svelte experience

Built With

• azure
• azure-app-service
• azure-openai
• claude-code
• css3
• fastapi
• github-actions
• gpt-4.1-mini
• html5
• javascript
• json-schema
• pydantic
• pymupdf
• pytest
• python
• ruff
• svelte
• typescript
• uvicorn
• vite