Turn “What can we do together?” into a screen with a clear input and an observable result.
Architect skill: Define the user and the smallest useful interaction.
The full mission is planned for 75 minutes. Split it into short activities and take breaks. Laptop or desktop for editing; phones can read and try the browser interaction. This is a browser rehearsal. Native iOS or Android work needs separate adult-prepared tools and actual device testing.
Meet an imaginary family and give the helper one new activity before teaching it any matching rules.
Parent prep · before you start
Run the original three-record starter and save a copy.
Keep real family names, schedules and locations out of this fictional exercise.
Activity 1 of 3 · 5 minutes
Name a small problem
Child · driver & designer
Describe choosing an activity in rain with twenty minutes.
Parent · thinking partner
Ask what the helper needs to know and what it does not need to collect.
Write weather/time → activity cards.
Read draw 15 indoors, walk 20 outdoors and puzzle 30 indoors.
Predict the current starter: it lists all records, even ones that do not fit.
Look for this: The child names the deliberate missing filter rather than assuming a complete recommender.
Walk through an example
Predict before revealing the result, then try the change in the real workspace. This explanation does not run or test your code.
Before
activities contains draw, walk and puzzle; matchingActivities returns all of them.
One change
Add the unique origami record, indoors, 10 minutes.
The baseline now shows four cards for rain/20. It still includes walk and puzzle; filtering is implemented in family-02.
Demo prompt 1 of 2
A data edit
Adding data changes the visible set.
Try in the workspace: Show origami in activities and four cards after Find.
Check what actually happened
Run each check yourself. Mark it only after comparing the actual output with the expectation; a tick does not automatically test your code.
Signs to discuss together
The new record has a unique ID and numeric duration.
The child can explain why four cards appear before filtering.
Stuck? Make the problem smaller
Read the output together. Undo your last small change and run again. Export a copy before resetting files. If this device cannot run the project, read the full reference below and use the parent guide to prepare another computer.
The page goes blank after adding an object.
Check the comma before and after the new object and paired quotes; undo just the last edit.
The old heading remains.
Save the working copy and reload the same file, rather than the original download.
Explain together
Which inputs are necessary for this small problem?
What is a card field versus a user choice?
Before you pause: A renamed running starter, one added activity, a screen sketch, and three written predictions. Export workspace files for a portable backup and remember this activity or write its name on paper.
Use Run in the workspace after one small edit. Browser output is evidence of this browser run; native devices and physical robots need separate checks.
Family Activity Helper workspace
Opening the original starter…
Full authored lesson · setup, code, checks & extensions
The complete original lesson is preserved here. Its downloaded-project instructions describe the local development path; the browser introduction above needs no installation. Longer and native/hardware tasks may need the adult-prepared tools listed in the course overview.
By the end, you can…
Describe one user problem and two inputs.
Change a data record without breaking the page.
Separate existing starter behavior from a desired rule.
Keep your starter project and builder notebook open. Make one change at a time and save a working copy before trying the next idea.
1. Meet the imaginary family
The Orbit family has twenty minutes before a pretend space parade. They need a suggestion that fits their time and weather. Start by observing, not asking an assistant to build everything.
Write one sentence: “The Orbit family needs ___ so that ___.”
Open the starter, choose Rain and 20, press Find activities, and count the cards. It deliberately shows all three.
2. Make your first edit
HTML labels describe controls; JavaScript records describe choices. Change a record, save the file, and reload. The app uses ids to recognize activities even when their names change.
Change the page heading to Orbit Family Helper.
Add this fourth object inside the activities array; keep commas between objects.
index.html — add inside activities · javascript
{id:'origami',name:'Fold a paper star',place:'indoors',minutes:10}
3. Draw the contract
A contract is a prediction about inputs and outputs. Today the app does not enforce your contract; you will implement it next session.
Sketch a screen with Weather, Minutes, Find, and Results.
Write three intended cases: rain/20, sun/20, and rain/5. Circle an activity that should be excluded in each relevant case.
Ask your AI coach
Use the JR Playground if configured, or ask an adult to operate their approved coding assistant. These prompts also work as questions for a human partner.
We are designing an activity app for an imaginary family. Ask me one question about time or weather, then suggest two understandable button labels. Do not write the whole app.
Before accepting its answer
Explain which proposed label tells the user what happens; keep the original input values rain and sun even if visible labels change.
Prove it works
Test 1: After adding the record, press Find activities.
Expected: Four cards appear, including Fold a paper star.
Test 2: Rename only the visible activity name and reload.
Expected: The changed name appears; the page still renders.
Test 3: Choose rain/5 in this starter.
Expected: All four still appear. Record this as a known missing rule, not a passed matching test.
If you get stuck
The page goes blank after adding an object.
Check the comma before and after the new object and paired quotes; undo just the last edit.
The old heading remains.
Save the working copy and reload the same file, rather than the original download.
Choose your challenge
Build together · guided
Adult points to the array; learner chooses the new activity and predicts each result.
Take the controls · independent
Learner edits the record and explains id versus name.
Go deeper · architecture challenge
Add a second fictional user need; identify the extra input it would require without implementing it yet.
Save your evidence
A renamed running starter, one added activity, a screen sketch, and three written predictions.
Reflect: Which information changes the decision, and which information only changes how friendly the screen feels?
Try this with your camp team
Pairs act as the imaginary family and app: one reads a request, the other sorts paper activity cards.
After the public first mission, a parent or guardian uses the existing access flow to open later authored missions. Your workspace remains available.