Building Interactive Rise Blocks with Claude Code

1.1 What you are about to build

Lesson 1 of 4

Rise gives you text, images and a quiz.

Everything past that is a quote from an agency and a six week wait. A drag and drop sorter, a branching scenario, a flip card deck, a calculator: all of it sits on the far side of somebody else's backlog.

This course closes that gap. By the end of it you will have built and shipped one yourself, in an afternoon, without writing code from scratch.

Before any of that, one question. Most people get it wrong, and getting it wrong is what makes block projects overrun.

What you will have at the end

Not knowledge about blocks. Actual things, on your machine and in your course.

A block you built, tested and put in front of real learners
The Prompt Pack: templates for building, reviewing, QA testing and rebranding a block, ready to reuse
A ten point checklist you can run against anything anyone hands you
Enough vocabulary to tell a developer exactly what is wrong, in their words

You already know how to design learning. This adds one skill to that, and it is a smaller skill than it looks from here.

A block starts as a decision about what the learner must be able to do, not what the screen should look like. Everything else in this course follows from that sentence.

Four stages, and every module maps to one

This is the whole course in four moves. They always run in this order, because each one is expensive to redo once the next has happened.

Plan it

Decide what the block is for

Decide what the learner should be able to do after the block, and pick the simplest interaction that proves it. Sketch the data shape before you write any markup.

Write the learning objective as a single sentence before you open the editor. If you cannot, the block is not ready to build.

Covered in module 3.

Prompt it

Hand over the contract, not a wish

Give Claude Code the constraints: one file, inline styles, keyboard support, and the resize snippet. Point it at an existing block as the pattern to follow. Clear constraints produce clean output.

Naming a reference file gets you closer to house style than describing that style in words ever will.

Covered in module 5.

QA it

Find what the machine could not

Test at 320 pixels and at 900, tab through every control with the keyboard alone, and confirm the status region announces state changes. Check for stray dashes and dead links.

Resize to phone width first. Most layout bugs surface there and nowhere else.

Covered in modules 2 and 4.

Ship it

One file, one zip, one upload

Drop the single HTML file into Mighty as a web object inside Rise. Confirm the block reports its height correctly and that Reset returns learners to a clean first state.

Reload the published lesson once after publishing. Cached heights can lag by a view.

Covered in module 6.

Where each stage lives

Six modules, twenty two lessons. Two of the six are about quality, which should tell you something.

Module	What it covers	Stage
One	What a block is, and the six words you need to discuss one	Groundwork
Two	The contract every block follows, and the five ways they break	QA
Three	Scoping the request, choosing the interaction, costing the build	Plan
Four	The ten point checklist, and fixing findings in severity order	QA
Five	Writing the prompt, with the Prompt Pack you keep afterwards	Prompt
Six	Packaging, shipping, and when a block may call the AI	Ship

Next you watch the whole loop run once, start to finish, on a real block. It takes about four minutes to read and it is the clearest picture of the job you will get.