Course 299 · Create course 28

Write and Build Interactive Fiction

Build an original six-passage browser story with four complete paths and three endings. Write consequential choices, carry one story fact, and test actual state/restart logic; provide a complete all-route text alternative.

Before you start

Use a local text editor and browser; Node.js is optional for automated engine tests.

Add JavaScript Interactivity to a Web Page See everything you’ll need

Free download · Original practice data · No external account required. Download the starter pack

What you’ll leave with

An original local browser story with six passages, three endings, meaningful choice consequences, reachable-state tests and a complete text reading alternative.

Start course Start without an account. Sign in to save lesson progress across devices.

Your project

Start with the practice files. Build your project one lesson at a time.

Practice files are free without an account. Sign in to save your project record in My Proof: a description, checklist, and optional work link. Keep the original files in your own app or notebook; saving a project record does not upload them.

  1. Get your materialsDownload practice filesSupplied practice cases, a blank working record, complete lesson instructions, and annotated worked examples.
  2. Make your projectView the project checklist Work in your own notebook, document, or software. Use the supplied practice examples when you prefer.
  3. Keep a private recordSave a project record Sign in to save a description and checklist, then return to update them.
Course handbook

Know the route before you begin.

Here’s what you’ll need and what you’ll make. You can return to this guide during any lesson.

Who this is for

Learners age 14 and older, including adults; no paid account, current job, customer or outside participant is required.

Prepare before lesson one
  • Use a local text editor and browser; Node.js is optional for automated engine tests.
  • Use the original Courtyard Map case or invent an equally small fictional story.
  • Keep all provided files in the same folder.
Your final project

Finish with proof you can use.

An original local browser story with six passages, three endings, meaningful choice consequences, reachable-state tests and a complete text reading alternative.

Save a project record in My Proof
See project checklist and review criteria

Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.

What to include

  • Write six complete passages and three reachable endings.
  • Give choices different narrative consequences with stable targets.
  • Trace hasMap and history consistently and reset all state.
  • Run or honestly scope four path/invalid choice/restart checks.
  • Deliver working relative assets and all-route text companion.

Review and revise

Use these criteria to check your work and choose what to improve.

  • Narrative: choices affect later text/outcomes.
  • Continuity: incoming facts and item effects are coherent.
  • Engine: stable target/restart/path checks are correct.
  • Access/evidence: reading alternative and actual test scope are clear.
Three ideas to help you along the way
Three useful ideas

The rules behind the steps.

01

Choices have consequences

Trace a later change from the reader’s action.

02

Facts travel

A passage inherits route information.

03

Read without interaction

Preserve every route in a complete companion.

What do these words mean?
Key words

Key terms worth knowing.

Passage
A named unit of story text and choices.
Target
The stable ID a choice points to.
State
The current passage and facts needed by the narrative.
Reachability
Whether a passage can be followed from the start.
Continuity
Consistency of facts across incoming routes.
Your route

6 lessons.
One useful project.

Work in order the first time. Each lesson makes something the next lesson can use.

  1. 1
    Up next

    Map a choice with a consequence

    Design a small narrative graph with different outcomes and reachable branches.

  2. 2
    35 min

    Write six passages with distinct states

    Write complete passage text that respects incoming route information.

  3. 3
    35 min

    Connect choices with stable IDs

    Represent passage data and connect buttons to exact valid targets.

  4. 4
    35 min

    Track one story fact consistently

    Apply item-state changes without mutating earlier route history.

  5. 5
    35 min

    Test reachability and restart

    Run all complete paths, invalid choices and restart tests against the actual engine.

  6. 6
    35 min

    Deliver a branching story and linear companion

    Package a working local story with all route text and honest test evidence.

Use the tools

Tools to help you practice.

See all tools
Source transparency

Sources and further study.

Explore the references behind the lessons and take your learning further. Source notes explain access and reuse.

MDN: getElementById
Source & access notes · checked 2026-10-01

Read unique case-sensitive IDs and null on missing match; original story container IDs differ from source examples.

Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.

Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.

MDN: textContent
Source & access notes · checked 2026-10-01

Read textContent versus raw HTML behavior and plain-text rendering recommendation; no network/user account saving in original story.

Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.

Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.

MDN: Working with Objects
Source & access notes · checked 2026-10-01

Read own object keys, case-sensitive property access and object literal semantics; original story data/code supplied.

Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.

Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.

Open University: Creating characters
Source & access notes · checked 2026-10-01

Read the public character section and its discussion of character/event relationships through the web reader; linked source exercises are not reproduced.

Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.

Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.

Ready when you are

Start with the first useful move.

You’ll always know what to do, what to make, and where to go next.

Start lesson one