Make the game reusable. Then make the words your own.

# Storyboard recipe: make your game's words editable

**Claude, start here.** Before anything else, save this whole message, word for word, as `STORYBOARD-RECIPE.md` in the folder you're working in. It's a long job, so you can re-read the file as you work. If you can't save files, keep going. Next, if the person hasn't named the folder that holds their game, ask which one it is. If you see only one game here, name it in your question, so they can answer yes. If `storyboard-model.html` is in the folder, it's the model for the editor you'll make in Step 5. Then follow the recipe.

From E.M. Designs. Part of the DevLearn 2026 starter kit.

## What does this recipe do?

It moves your game's words into one file you can change without code:

- **The words move into one file.** The questions, choices, replies and other lesson words go into `game/questions.js`. Buttons like "Next" stay in the game.
- **You get a storyboard editor.** Each scene shows its game screen, with the game's own pictures, and the screen changes as you type. Preview, then save. No code.

The game itself plays the same. New course, new words, same game.

It works for quizzes, branching stories, simulations and arcade games with questions. To make the game ready for Storyline afterward, use the PWO recipe next.

## How do I use it?

1. Make a new folder. Put your game's folder in it (or its HTML file, if your game is one file).
2. Put `storyboard-model.html` from the starter kit in that folder too. It's the Deadline Run storyboard editor, and Claude makes yours look and work like it.
3. Open that new folder in Claude Code, not your game's own folder.
4. Copy this whole recipe, paste it in, and press Enter.

A long paste may fold into one short line. That's normal.

It's a long job, so give it time. Claude Code asks before it saves files or runs tests. Say yes to the ones for this job.

Claude saves the recipe in your folder first, so it can look back at the steps as it works.

Then Claude asks which folder holds your game. It shows you every word it found and asks if anything is missing, before it changes anything. It works on a copy, so your original game is safe.

Claude Code works best, because Claude can play your game to test it. A chat AI can't open the files on your computer. If that's your tool, upload your game's files and `storyboard-model.html`, paste the recipe, and play the result yourself. Step 7 lists what to check.

## What will I get?

A new folder next to your game, `<your game>-editable`:

| File | What it's for |
|---|---|
| `game/` | Your game and everything it needs. |
| `game/index.html` | The page that starts the game. |
| `game/questions.js` | The lesson's words, one row at a time. |
| `storyboard-edit.html` | The storyboard editor. Each scene shows its game screen, and the screen changes as you type. Preview, then save. |
| `questions-original.js` | Your starting words, so the editor can spot a line that grew too long. |
| `CLAUDE.md` | A short note Claude Code reads before it changes the folder. |

## What's in a storyboard row?

One row is one thing the learner reads. Every row has the same five columns.

They match a spreadsheet, so a subject expert can work in Excel.

| Column | What goes in it | Example |
|---|---|---|
| `scene` | Where the learner is, in the order they get there | Question 1 |
| `part` | What kind of words these are | choice |
| `text` | The words the learner reads | Call the number on the back of the card |
| `reply` | What the learner sees after picking this choice | Good call. That number is the real one. |
| `right` | For a choice: yes, close or no | yes |

## How do I write a recipe like this?

Borrow its shape for any big job you give Claude:

- Say what you want and what you'll get.
- Have Claude save the prompt as a file first, so it can look back.
- Have it work on a copy.
- Have it show you what it found before it changes anything.
- Test each part. Then have it tell you what it made and what it couldn't test.

---

## What does Claude do, step by step?

This part is written to Claude. You're welcome to read along.

Claude, follow these steps in order. Talk with the person in plain words. Show code only if they ask.

Steps 1 to 7 make the words editable. Step 8 tells the person what you made.

When a step says to test, do every test yourself, fix what fails, and keep going. If you can open a browser, play the real game. If you can't, say so plainly in Step 8, and give the person the test steps there. Tell them what you saw in Step 8.

### Step 1. Work on a copy

- Make a new folder named `<game name>-editable`, next to the original. Do all the work there. Leave the original exactly as it is.
- Inside the copy, the game lives in a folder named `game`. The page that starts it is `game/index.html`, at the top of that folder, because Storyline looks for `index.html` (or `index.htm`) in the folder it's given. If the game is one HTML file, it becomes `game/index.html`. Keep its pictures and sounds with it.
- Anything a learner shouldn't get (the editor, notes, test files) stays outside `game`, next to it.

### Step 2. Find every word the learner reads

Look through the whole game: every screen and every branch. Find every word the learner reads as part of the lesson:

- the title and the instructions
- every question, situation or scenario step
- every choice, and how right it is (right, partly right, not right)
- every reply after a choice: feedback, a result headline, a note, follow-up messages
- messages, emails, chats, documents or notices the learner reads on screen
- hints and tips
- end screens: winning, losing, the score message

Some words stay in the game, because they run it rather than teach:

- button names, like "Next" or "Play again"
- clock times, file sizes and window titles
- people's names in a contact list
- credit lines and links to sources
- words that never show on screen

When the choices themselves are buttons, the choice words still move.

If the game already keeps some words in a file of their own, bring them into the new file too, and keep the game working.

Group the words into scenes, in the order the learner meets them. Show the person the list, scene by scene, and tell them which words stay in the game. Then ask once:

"Is anything missing, or anything here you never want to change?"

Wait for the answer. After this, keep going without asking again.

### Step 3. Make `game/questions.js`

- Put every word from Step 2 into `game/questions.js`, one row per thing the learner reads.
- Use the five columns above, always the same and in that order: `scene`, `part`, `text`, `reply`, `right`.
- Start the file with a one-line note: "The words for this game. Change them with storyboard-edit.html."
- `right` is `yes`, `close` or `no` on a choice row. Leave it empty on every other row.
- Some questions have no wrong answer: every choice is fine, and one is best. Use `yes` and `close` there, and say so in `CLAUDE.md`.
- `part` names the row: `title`, `question`, `choice`, `reply-headline`, `message`, `hint`, `win`, `lose`, and so on.
- When the game needs to know which choice is which, add a short name after a colon, like `choice:team-link`.
- When a choice leads to more than one thing (a headline, a note, follow-up messages), put those rows right after the choice. They belong to that choice until the next choice or question.
- Load the words with a plain script tag in `game/index.html`, before the game's own code. That way the game still opens by double-click, and inside Storyline.
- Save a copy of the starting words as `questions-original.js`, next to `storyboard-edit.html`. Keep it out of `game`, so it never reaches learners.

### Step 4. Make the game read its words from that file

- Every word from Step 2 now comes from `game/questions.js`.
- If that file is missing, broken or empty, the game shows a plain message instead of a blank screen: "The words file is missing. Put questions.js back in the game folder."
- If the game counts questions or choices, it counts them from the file. Then an added choice shows up without changing the game.
- If later events depend on which choice was picked, decide what an added choice does. Usually it acts like the original choice with the same `right` value. Write it down, and tell the person in Step 8.
- Check your work: search the game's code for each sentence from Step 2. None should be left, apart from the words that stay in the game. Each word lives in one place only.

### Step 5. Make the storyboard editor

Make `storyboard-edit.html` next to the `game` folder, not inside it, so the editor stays with the person.

If `storyboard-model.html` is here, open it and study it first. It's the Deadline Run storyboard editor from the starter kit. Make yours look and work like it: the same layout, scene strip, live screens, buttons, banner and plain words. Rebuild your game's own screens the same way it rebuilds Deadline Run's. Use its code as a starting point if that helps, but every screen, word and picture must come from this game. Don't copy Deadline Run's words or art into another game. Leave `storyboard-model.html` as it is.

The editor:

- Opens by double-click, with no setup. It loads `game/questions.js` and `questions-original.js` the same plain way the game does.
- Shows one section per scene. Each heading is a plain question about that scene, like "What does the learner see first?" or "What happens after question 2?"
- Feels like editing the game's own screens. Rebuild each scene's screen inside the editor, the way the learner sees it. Use the game's own pictures, colors, fonts, speech bubbles, cards and panels, with the words in their real places. When the person types, that screen picture changes right away. Put the words' boxes beside or under their screen. Load the pictures from the game's own files in `game` by their relative path, so they show when the editor is opened by double-click. Use only the game's own pictures and styles; never draw or add new art. If a screen can't be rebuilt, show its closest picture and say which.
- Shows the whole game at the top as a strip of small screen pictures, one per scene. They go in the order the learner meets them, each with its number and a short name. Click one to jump to that scene. Each small picture updates as the words change too.
- Shows each row in a text box, with its reply under it. Each choice has a menu: right, close or not right.
- Typing in a box must never lose focus. When its screen picture updates, the cursor stays in that box, in the same place, so every letter lands where the person is typing.
- Can add or remove a choice, with its follow-up rows. It adds or removes questions only where the game can handle it. Say which.
- **Preview** opens the game in a new tab with the draft words, without saving. It works in any current browser when both pages are opened by double-click, so the editor hands the draft straight to the new tab. The game shows draft words only in a preview. Opened any other way, it reads `game/questions.js`.
- **Save for the game** writes a new `game/questions.js`. Where the browser can save into a folder, it asks for the `game` folder once per visit and saves there. Where it can't, it downloads `questions.js` and shows three steps in large type: find it in Downloads, move it into the `game` folder, say yes to replace the old one.
- **Spreadsheet out** and **Spreadsheet in** write and read a `.csv` file with the same five columns. Words with commas or quotation marks come back exactly as they went out, and the file opens cleanly in Excel.

Before it saves, the editor checks three things:

- No question or choice is empty.
- Every question has at least one right choice.
- A line much longer than its original in `questions-original.js` gets a warning, because it may not fit on screen.

### Step 6. Write the `CLAUDE.md` note

Put `CLAUDE.md` next to `storyboard-edit.html`. Claude Code reads it before it touches the folder. Keep it short:

- what the game is, in one sentence
- the words live in `game/questions.js`, and change through `storyboard-edit.html`
- to change words, leave `game/index.html` alone
- what each `part` name means, and what an added choice does
- only the `game` folder goes to learners or into Storyline

### Step 7. Test it like a learner

1. Play the original and the new game side by side. If the game branches, play every route and compare the words on every screen. Every word must match. If you can't reach a screen by playing (a hard level, for example), name it and check its words another way.
2. Open the editor by double-click. Each scene shows its screen with the game's own pictures, none missing, and the strip at the top shows every scene. Type a whole sentence in one box, key by key, without clicking again. Then click into the middle of a line and type a word there. Every letter lands where you're typing, and its screen and its small picture change right away. Change one question, one choice and one reply. Press Preview. The new tab shows the draft words, and nothing is saved yet.
3. Save. If your test browser can't save into a folder, use the download way and say so.
4. Close the game. Open `game/index.html` again: a fresh open, not the preview. The new words should show.
5. Pick a right choice. It should still count as right. Pick a wrong one. Its own reply should show.
6. Try the editor's checks: an empty choice, no right choice, a very long line, and a spreadsheet out and back in.
7. Put the original words back in `game/questions.js` when you finish testing.

### Step 8. Tell the person what you made

Start with four short lines:

- the files to know, in the `<game name>-editable` folder: `game/index.html` (the game itself), `game/questions.js` (the words), `storyboard-edit.html` (the editor) and `CLAUDE.md` (the note for Claude)
- how to change words: open the editor, change, save, reopen the game
- what's next: to put the game in Storyline, paste the PWO recipe next, in this same folder
- anything you couldn't test

Then a short list of what you tested, and a short "Good to know" list only if the game needs one, such as what an added choice does (Step 4).

---

## What doesn't this recipe do?

- It doesn't make the game ready for Storyline. The PWO recipe does that.
- It doesn't change how the game plays, its art or its sounds.

# PWO recipe: make your game ready for Storyline

**Claude, start here.** Before anything else, save this whole message, word for word, as `PWO-RECIPE.md` in the folder you're working in. It's a long job, so you can re-read the file as you work. If you can't save files, keep going. This recipe comes after the storyboard recipe: it starts from the `<game name>-editable` folder that recipe made. If you see more than one, or none, ask which folder to use. Then follow the recipe.

From E.M. Designs. Part of the DevLearn 2026 starter kit.

## What does this recipe do?

It makes your game a PWO (portable web object): one folder with a small web page inside. Storyline places it on a slide as a web object. It works on a laptop with no internet, in the published course and in an LMS. Everything it needs is inside, so nothing breaks when the folder moves.

Your words stay editable in the storyboard editor. The game itself plays the same.

## How do I use it?

1. Run the storyboard recipe first. It makes a folder ending in `-editable`.
2. In the same Claude Code window (or the same folder), copy this whole recipe, paste it in, and press Enter.

A long paste may fold into one short line. That's normal. Claude Code asks before it saves files or runs tests. Say yes to the ones for this job.

Claude lists what Storyline needs first, then fixes it. It asks first only if a fix would change how your game plays or looks. It works on a copy, so the `-editable` folder stays as it is.

## What will I get?

A new folder, `<your game>-pwo`. Use this one from now on. Only its `game` folder goes into Storyline; the editor stays with you. If you pick the `-pwo` folder in Storyline instead, the game still opens.

---

## What does Claude do, step by step?

This part is written to Claude. You're welcome to read along.

Claude, follow these steps in order. Talk with the person in plain words. Show code only if they ask. When a step says to test, do every test yourself, fix what fails, and keep going. If you can't open a browser, say so plainly in Step 5 and give the person the test steps there.

### Step 1. Make the Storyline copy

- Tell the person in one line that you're starting on Storyline.
- Copy the whole `-editable` folder to a new folder named `<game name>-pwo`, so the words stay editable. Do the rest of the work there, and leave the `-editable` folder as it is.

### Step 2. Check before changing

List the problems first. Change nothing yet. Check each of these, and say "OK" or what's wrong:

1. **Everything is inside `game`.** Every picture, sound, font, script and words file the game uses is in the folder.
2. **Links stay inside the folder.** Files are linked from the game's own folder, like `art/hero.png`. A link that starts with a drive letter, `file:` or a slash breaks once the game moves into a course.
3. **No internet needed.** Nothing loads from another website: no scripts, fonts, pictures or sounds. The game works with the internet off.
4. **Words and data load with plain script tags.** Then the game opens straight from its folder, with no server.
5. **It fits the box.** The game scales to whatever size the web object is, with no scroll bars and nothing cut off. It's readable at 960 by 540, and still usable at 720 by 405. It never scrolls the course page around it.
6. **A click comes first.** Keys do nothing until the learner clicks inside the web object. If the game needs keys to play (arrows, Space, letters), its first screen says "Click to start", or the game starts on a click. Keys may still start it too. A game played only by clicking buttons doesn't need the start screen. Either way, the game leaves the keyboard alone until the learner clicks inside it, so the rest of the course keeps working.
7. **Sound waits for a click.** Browsers hold sound back until the learner clicks.
8. **No pop-ups.** No browser alert boxes, new windows or new tabs. The game's own panels and cards are fine. Credit and source links become plain text that still names each source, so nothing opens outside the course.
9. **Works without browser memory.** If the game remembers anything in the browser, like a high score, it still works when the browser blocks that.
10. **Nothing private.** No passwords, keys or personal data in any file.
11. **Size.** Say the folder's total size and name up to five of its biggest files.

Show the person the list. Then fix every problem without asking again. The one exception: if a fix would change how the game plays or looks, ask first. Scaling the whole game to fit its box, in Step 3, is expected, so do it without asking.

### Step 3. Fix

- Bring outside files into `game` (for example, into `game/fonts/` or `game/vendor/`) and link them from inside the folder. Check that each one's license allows this, and list it in `game/CREDITS.txt`.
- Load data files with plain script tags.
- Make the game fit its box. Lay it out at one fixed size, such as 1280 by 720. Then scale that whole layout to fit the box, keeping its shape. The size stays steady when a panel or result card appears. Anything sized to the window, and any panel that appears during play, scales with the rest of the game.
- Add the click-to-start screen if the game uses keys.
- Shrink very large pictures or sounds only if the folder is over 50 MB, and say what you shrank.
- Add a start page at the top of the `-pwo` folder: a small `index.html` that opens `game/index.html` in its place straight away, with no new tab. Storyline shows the `index.html` at the top of whichever folder someone picks, so the game opens even if they pick the `-pwo` folder instead of `game`. If the editor's Save for the game checks for the `game` folder by its `index.html`, make it look for `questions.js` too, so it still says no to the `-pwo` folder. Change its message to say the picked folder isn't the `game` folder.

### Step 4. Test it like a course would

1. **Straight from the folder, offline:** open `game/index.html` the way a double-click does: from the file itself, with no server, and with outside requests blocked. Nothing should try to load from the internet. Play to the end: no errors, nothing missing.
2. **From a web address:** serve the folder from a local test server and play again. A published course runs this way.
3. **In a box:** put the game in a 960 by 540 frame on a test page, the way a course slide holds it, and play. Then try 720 by 405. Click once, then use the keys. Play until a panel or result card appears: nothing jumps in size or gets cut off.
4. **Moved folder:** copy `game` somewhere else and open it again. It still works.
5. **The editor still works:** in the `-pwo` folder, open `storyboard-edit.html` by double-click, change one word, Preview, Save, reopen the game and see it. Then put the original words back.
6. **The start page:** open the `-pwo` folder's own `index.html` the way a double-click does. Then serve the whole `-pwo` folder and open that `index.html` in a 960 by 540 frame. Both times, the game opens and plays. Then check that the editor's Save for the game still says no to the `-pwo` folder.

### Step 5. Tell the person what you made

Start with four short lines:

- the files to know, in the `-pwo` folder: `game/index.html` (the game itself), `game/questions.js` (the words), `storyboard-edit.html` (the editor) and `CLAUDE.md` (the note for Claude). The `-editable` folder was the step in between.
- how to change words: open the editor in the `-pwo` folder, change, save, reopen the game. That's the copy Storyline gets.
- only the `game` folder inside `<game name>-pwo` goes into Storyline or your course; the editor stays with you
- anything you couldn't test

Then the Storyline steps, in a few short lines:

- Insert > Web Object > Browse, choose the `game` folder inside `<game name>-pwo`, then OK. (If you choose the `-pwo` folder instead, the game still opens.) Size it to fill most of the slide (about 960 by 540 works well).
- The folder picker shows only the folders inside `game` (for example, `assets` or `fonts`). That's expected. Pick the `game` folder itself.
- Storyline's Preview can't show web objects. Publish to Review 360, then open the course there and play.
- Learners click once inside the game before the keys work.
- After you change words: delete the web object from the slide, insert the `game` folder again, then publish. Publishing again on its own keeps the old words.

Then a short list of what you tested, and a short "Good to know" list only if the game needs one, such as what an added choice does.

---

## What doesn't this recipe do?

- It doesn't send scores to an LMS. The game plays inside the course, but Storyline doesn't see its score.
- It doesn't change how the game plays, its art or its sounds, except to make it fit and work offline.