How to make an interactive lesson students can play with

Not every step needs to move. Look for ideas where cause and effect is the point: what changes when I change this? Good candidates are a value and its effect (a colour, a speed, a size), a process you can step through (an algorithm, a pipeline), and a system with a few parameters (a graph, a physics model). Definitions and instructions are not.

Students learn more when they do something with the material than when they only listen: a large analysis of 225 studies found that students in classes with active learning did better on exams and failed less often than students in traditional lectures. Simulations built for exploration, PhET's being the best known, are designed around exactly this: change one thing and see what happens.

• One question it answers, such as "what does this property do?".
• Two or three controls, labelled in the lesson's own words.
• Immediate feedback: the result changes as the control moves.
• A way back to the start, so experimenting feels safe.
• A sentence after it that tells students what to notice.

In Workshopy an interactive is a fenced block in the step's Markdown, tagged interactive, that holds HTML, CSS and JavaScript. It runs sealed off from the internet and from the rest of the page, follows the lesson's light or dark look when it reads the theme, and comes with libraries for motion, charts, diagrams and physics: anime.js, ECharts, Rough.js, D3, Matter.js, Three.js and PixiJS, plus form controls in the shadcn/ui look.

# Make it yours

Change the heading colour and watch what happens.

```interactive title="Try your three changes" height=420
<div id="app"></div>
<script>
  // your HTML, CSS and JavaScript
</script>
```

Now copy the CSS into your own file.

In the editor the block shows as a card. Edit opens a window with the code, a live preview in light and dark, and checks that point out problems before your students meet them.

You don't have to write the JavaScript yourself. Connect an AI app such as Claude to Workshopy (how to connect one) and ask in plain words, for example: "Add an interactive animation to step 3 that shows how binary search halves the list, with Step and Reset buttons." The app reads Workshopy's writing guide, picks a library that fits the idea, and the same checks run on what it writes.

Preview the lesson and use the block the way a student would, on a phone too. Can they tell what to do without you? Does it still read in dark mode? In class, students can open a block in a big window — what they did in it stays — and Restart puts it back the way it started.