Connect choices with stable IDs
See this course’s project requirements
An original local browser story with six passages, three endings, meaningful choice consequences, reachable-state tests and a complete text reading alternative.
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.
Want more background?
The idea in everyday life
Use object keys such as start and archive as internal IDs. A button’s label is for readers; its target key is for the engine. JavaScript property names and DOM IDs are case-sensitive. Render passage/choice text with textContent rather than parsing raw HTML. This simple local story needs no network or account.
Display text can change while a passage ID remains stable.
Connect choices with stable IDs — worked practice
Display text can change while a passage ID remains stable.
Original choice:{label:"Pick up the map and check the archive", to:"archive", hasMap: true}. “Archive” does not match the key archive. The engine checks Object.hasOwn(STORY, option.to)before transitioning. The page containers use title, passage, choices and state IDs. A missing container returns null from getElementById and must be repaired; HTTP 200 cannot prove the choice worked.
1. 3.1 Connect
Open engine.js and index.html from the pack. Match the STORY keys with choice to values and the HTML container IDs with the DOM look ups.
You should see: Keys and targets are matched exactly.
2. 3.2 Connect
Change a reader label in a copy without changing its target; confirm the graph still describes the same route.
You should see: Label text does not define graph identity.
3. 3.3 Connect
Introduce to:"Archive"in a copied case and identify the case mismatch before using the correct archive key.
You should see: The capitalized target is rejected/corrected.
4. 3.4 Connect
Inspect the render function: plain text uses textContent and buttons are created elements. Retest the valid route after repair and keep the reproduction note.
You should see: Plain text is rendered without treating it as markup.
What to finish
An ID/target audit and corrected local route.
Watch for this
Using a button label as if it were a stable ID, or ignoring case.
How can I tell I understand it?
You can trace a button from its label to a valid passage key and rendered text.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
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.
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.
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.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.