Build: the showroom after Phase 8 (all files in one example)
Local imports cannot run in the preview, so this example has the code of every project file inline, each under a comment with its path (the Phase 3 modules are shortened). The text output is a self-test: a ray at the middle of each part, then select("handlebar"). Try the panel and the canvas by hand.
The showroom learns to answer. Click or tap a part, or Tab to it in a list: it glows and a panel shows its name and price. The bike gains its handlebar and stem.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a "bell" price of 15 euros to PARTS and say what else must be true for the panel to list it.
Make the hover highlight a different colour for the chosen part's neighbours: say where you would change the code, and why refresh is the right place.
Explain it without notes
Walk through what happens from a tap on the handlebar to the panel text changing, naming each function.
Why does the panel have buttons when the canvas can already be clicked?
Console
Nothing logged yet.Expected console output
ray at the middle of handlebar -> handlebar
ray at the middle of seat-tube -> seat-tube
ray at the middle of down-tube -> down-tube
ray at an empty corner -> null
panel says: Handlebar and stem · €60