Use AI · Chapter 5 of 13
Turn a short story into something people can explore
A Chinese creator’s interactive literature project becomes a three-scene beginner exercise, with a clear brief, a small budget and checks that go beyond appearance.
About 4 minutes · school-level background
Edition 2026-10-28.1 · Checked 2026-10-28
What you will understand
Create and check a small interactive page while distinguishing a working demonstration, its delivery costs and any later business opportunity.
In this lesson
Build the idea
A useful first project has a finish line
A friend can repeat the plot of a story but still cannot picture where its characters went. Could a small interactive page help? The first useful version might contain only three scenes, a short passage and a Next button. You can finish that, show it to someone and find out which part confused them. The question is more concrete than asking an assistant to create an amazing educational experience.
Think of each scene as a card with a job. One card establishes a place, another shows a change, and the last explains its consequence. Interactivity earns its place when it helps the reader follow that sequence. A moving background that hides the words may look impressive while making the task harder. Write down what the reader should understand before asking for animation.
Page code: 0.8 MB
Audio: 4.8 MB
Both loaded: 5.6 MB
Moving audio changes packaging, not this total
Illustrative classroom example, not a measured result.
What the source reports
The real project and its reported result
In a Chinese creator account dated 19 September 2026, Baoyu described using GPT 6 Astra to make a navigable version of The Peach Blossom Spring, then refining audio and packaging with Codex. He reported extracting embedded audio so the HTML file fell from 5.6 MB to about 777 KB. That measures the HTML file, not the whole media download. His post links a demonstration but gives no itemised project bill or measured learning improvement. It is a creator report, not a WRS replication.
Original report: Baoyu: an interactive Peach Blossom Spring prototype (Chinese)
Use the idea
Make a smaller version in five steps
First, choose a short passage you wrote yourself, or material you are entitled to reuse. Keep the first attempt around 150 words. Second, write a three-row scene table: the source sentence, what the reader should see, and what action advances the story. Third, ask the assistant for one HTML file, which is a file a browser can display as a page. Request plain text, simple shapes and Back, Next and Restart buttons before requesting sound or three-dimensional scenery.
Fourth, ask for an explanation of every file and any proposed network connection. For this exercise, require the page to work locally without external scripts, sign-in, payments or tracking. Have generated code reviewed if you cannot assess its behaviour. Fifth, inspect the result against your scene table. Move forwards, backwards and back to the beginning. Read all the words on a narrow screen. Save a working copy before requesting one targeted correction, such as making the second scene’s direction clearer.
Worked teaching example
A page can shrink while its download barely changes
Here is an invented packaging example. A page contains 0.8 MB of page code and 4.8 MB of embedded sound, making 5.6 MB in total. Moving the sound into a separate file leaves a 0.8 MB HTML file and a 4.8 MB audio file. If a visitor loads both, they still transfer 5.6 MB, ignoring small packaging differences. The smaller HTML figure alone does not establish a smaller complete experience.
The split can still help. A text-only reader might skip the audio, or a returning reader might reuse a sound file already saved by the browser. Those are behaviours to check, not savings to assume. Record the size of every delivered file and whether it is needed immediately. This simple habit turns an attractive screenshot into a more honest account of what the project actually requires.
Use the idea
What it costs to practise, and what remains unknown
The original creator’s total cash and labour costs are undisclosed. For the smaller exercise, additional software spend can be £0 if you already have a browser and sufficient access to a suitable assistant; existing subscription fees and your time still count. Buying a premium plan is not a prerequisite for writing the scene table. If your allowance runs out, keep the brief and stop rather than opening a paid API account just to finish this lesson.
For a fictional budget, allow 20 minutes for the brief, 40 for generation and revisions, and 30 for checking: 90 minutes total. Valuing that time at £12 an hour gives £18 of labour. Add an optional £5 spending ceiling and the planning budget is £23. A ceiling is permission you might choose to set, not a measured bill. Use your own recording if you add narration; another person’s published performance is not automatically yours to redistribute.
Use the idea
Know what a good outcome looks like
A successful beginner result has three faithful scenes, working controls, readable text and no unexplained network activity. Keep a short check sheet showing what passed and what did not. Ask a willing reader one concrete question about the story after trying the page, rather than asking whether they liked the animation. Their answer can reveal a missing transition. One person’s feedback helps you revise this page; it does not establish a general educational benefit.
If you later offer such work as a service, a sensible deliverable is one small page for an agreed passage, with an agreed revision and a clear list of included files. First verify permission to use the material and the recipient’s actual need. Revenue is not established by this example. The immediate reward is a completed, inspectable project and a reusable method: source passage, scene table, page, test sheet and remaining questions.
Words you can now use
- HTML
- A document format a browser can display as a webpage.
- Asset
- A supporting file such as a picture, sound recording or font.
- Acceptance check
- A concrete test of whether a promised part of the result works.
Check your understanding
Your HTML shrinks from 5.6 MB to 0.8 MB after audio moves to a 4.8 MB file. Has the complete first visit become 0.8 MB?
Show the explanation
Only if that visit does not load the audio. Loading both files still transfers about 5.6 MB in this invented example. Report the whole delivered package and which files each reading mode needs.
Read the original sources
- Baoyu: an interactive Peach Blossom Spring prototype (Chinese)Creator project report · Published 2026-09-19 · Checked 2026-10-28
Try it with your own assistant
Select and copy this bounded exercise. A normal chat assistant is enough to start.
Use a 150-word story you wrote yourself. First map three scenes to exact sentences. Ask your assistant for a single local HTML page with Back, Next, Restart and readable text. No external scripts, accounts, tracking or network requests. Test the scene order, all buttons and phone-width layout. Use your own voice only if you add audio. Stop after one revision and save the remaining problems with the file.
Keep the task brief, supplied inputs, checked output and unresolved questions together. Using this exercise does not submit anything to WRS.