Practice a complete welcome screen — Flash-check repair

PART I

Warm-up

Reconnect with a useful idea before starting practice a complete welcome screen. In one or two sentences, describe the input, output or host boundary from the previous exercise that this lesson builds on. If you are arriving directly, skim the worked example first; there is no locked prerequisite.

A rough note is enough. You can revise it after the example.

PART II

Instruction & guided example

Repair content placed under the wrong owner

Nested configuration should express which object owns each property. In the source example, text belongs to a component object in components. Putting a greeting under layout does not match the shown responsibility even if the object is visually well indented.

The broken design places value:"Welcome" under layout and leaves the text component without its value. The sample repair card says: intended owner = text component; misplaced key = layout.value; repair = move value into the component object; unchanged = layout type/padding/gap. The repaired ownership path is screen → components → first text component → value.

Do not state a precise runtime rejection for the broken shape: the proposed host schema and diagnostics are not implemented here. You can still identify that it no longer matches the supplied example contract. Adding the greeting in both places would retain ambiguous, unsupported configuration.

Worked reasoning and supplied artifact

// Deliberately misplaced text value: compare with the source-owned shape.
const screen = {
    layout: { type: "column", padding: [24,32], gap: 16, value: "Welcome" },
    components: [{ type: "text" }]
};

Illustrative example from the proposed WillowScript design. The language and WUIX/WMATH/WDB/WAUDIO/WTMP services are not implemented in the supplied source. This site has no interpreter, VM or native host and does not execute or certify the snippet.

Try the guided change

Draw the broken ownership tree, move the greeting to the text component and draw the repaired tree.

• Write the supplied inputs and initial state before following the example.
• Reconstruct each intermediate calculation or host decision, then compare with the worked artifact.
• Explain why the contrasting alternative fails before attempting the changed inputs in Part IV.

PART III

Take a breather

Step back after the guided example. Look away from the screen, stretch, or reread your prediction. This is an optional learning pause, not a timer or an assessment gate.

When you return, try to name the lesson’s key idea without copying its wording. If that feels difficult, return to Part II and trace one line rather than restarting the entire lesson.

PART IV

Independent practice

Project context: Accessible welcome screen. Build a small, understandable change around practice a complete welcome screen.

Repair a welcome draft with gap inside its text component and no gap in layout. Use the demonstrated source shape and explain the property’s layout responsibility without inventing validation diagnostics.

What to produce

Before/after trees, the corrected gap owner and a static-contract diagnosis rather than a claimed run.

• State the intended behavior in a sentence before editing.
• Use only source-backed syntax and the host services whose contract you have been given.
• Record a normal case and a boundary or unavailable-resource case.
• Label hand predictions separately from anything actually measured in a supplied toolchain.

Syntax colors are a reading aid, not a compiler. The line you are editing stays uncolored until you move to a different line; capitalization is never changed. Drafts stay on this browser and code is not executed.

import wuix.widget.button;
import wuix.layout;
domain Login {
    const screen = {
        layout: { type: "column", padding: [24, 32], gap: 16 },
        components: [{ type: "text", value: "Welcome back" }]
    };
    fnc show() -> void {
        wuix.mount("main", screen);
    }
}

PART V

Self-check

Use this check to notice what to revisit. It does not award a private course grade, block another page or claim to verify compiled code. Every answer has a learning explanation.

You may keep exploring even if you are unsure. Use the hint, compare the trace, and revise your explanation.

PART VI

Recap & small task

Bring the idea back to the mod feature you are building. A useful recap connects the mechanism to a decision you can make in your own code.

• Repair content placed under the wrong owner
• Nested configuration should express which object owns each property. In the source example, text belongs to a component object in components. Putting a greeting under layout does not match the shown responsibility even if the object is visually well indented.
• Separate source-backed behavior, host requirements and untested predictions.

One small recap task

Name a layout-owned property and a content-owned property.

This marks your personal practice record only. It is not a certification or an official workspace assessment.