PROGRAM CONSTRUCTION STUDIO
From Marketing to Technical Marketing — Luke McLaughlin

START
Extract the companion ZIP. Open this folder's index.html in a modern browser.
No installation, account, subscription or internet connection is needed for the
four visual teaching experiments. Keep model.js, graphics.js, app.js and
styles.css beside index.html. They use classic local scripts, not a web service.

Each experiment connects a plain-language job to complete code, a changing
picture, named values and visible output. Click Next once; explain why that
change happened; then make a prediction before the next click. The pictures
are finite teaching models, not recordings of a running Python interpreter.
The supplied runnable programs make it possible to compare real execution.

1. ORDER: four Python blocks, one title check.
   Move blocks with the Up and Down buttons. The trace restarts after each move.
   Try a broken order inserts the decision before the cleaned value exists.
   Python stops at the missing name; it does not skip it and continue.
   Restore starting order returns to title, clean, decide, display.

2. LOOP BOUNDARY: two page records, one missing-title counter.
   Move print outside or inside the loop through the placement selector.
   Outside: one final count. Inside: a partial count after each page.
   Watch output and stored values separately; they are not the same thing.

3. FUNCTION: pass page_title into check_title(title), then return the verdict.
   The caller and function have separate names. A return value is not a print.
   Try blank spaces and a real title. Follow both possible return paths.

4. EVENT: choose a channel, submit a form, select rows, update the count.
   Uses the same five fictional campaigns as L04–L06. Social selects two rows
   costing EUR360 and recording 8 enquiries. This experiment displays the count;
   it does not calculate a combined rate. 'No: only choose the channel' shows
   why changing an input is not the same event as submitting its form.
   The actual browser form below the trace is independent of the paused model.

LINK TO THE BOOK
Order belongs with L01, loop placement with L02, function passage with L03,
and event-to-output with L04–L05. These are extra close-up experiments, not
replacements for the complete staged programs in python_checker,
campaign_explorer and the integrated report application.

RUN THE PYTHON EXAMPLES
Open a terminal in this construction_studio folder and run:
    python examples/order.py
    python examples/loop_placement.py
    python examples/function_call.py
Use python3 instead if that is the command installed on your computer.
The book's installation chapters explain the terminal and Python installation.
These examples use Python's standard library only, write no files and contact
no websites. Change a value or indentation, save, run again and compare.

RUN THE JAVASCRIPT EXAMPLE
Open examples/event_filter.html. It runs in the browser directly from disk.
View its source in a text editor to see the data, functions and registration.
The teaching panel shows the core instructions; this file includes the setup
and list rendering necessary for a complete usable page.

ANSWERS AND SOURCES
Practice answers are separate in solutions/answers.html and answers.txt.
graphics/ contains editable SVG snapshots for every default teaching step.
graphics.js generates these same vector diagrams for changed inputs. The SVG
files are source artwork; no remote images, fonts or scripts are required.

KEYBOARD
Tab moves through the page. Enter or Space activates focused buttons.
Up/Down buttons reorder blocks and preserve focus. Left/Right arrow keys change
steps when focus is outside controls. Reduced-motion users get no animations.
All colour cues are also represented with text, shapes, position or borders.

LIMITATIONS
The models execute a small known set of operations. They never evaluate user
code. They are not a Python interpreter, debugger, web crawler or deployed app.
The error panel shows the main error message. Real Python may also display a
traceback, line references and version-dependent spelling suggestions.
They do not run arbitrary code, contact a service, store personal data or make
changes to real campaigns. To explore a new instruction, edit and run the
provided real source files. For model verification use:
    node --test model.test.cjs dom.test.cjs
Node is needed only for tests, not for using the browser studio.
