Meeting 4: live coding

Work in materials/live-starter/ using the root launch page. The starter runs at its first checkpoint. Keep one browser tab and the Console open; save and refresh after each change. Your instructor will release the reference solution after an attempt.

L1. Instruction card (10 min)

Add the card class and improve one instruction sentence. Have a partner explain the mapping unaided.

Success: Legible card, clear mapping, deadline, and stop route.

Hint (after an attempt): Use the existing class in .shared/course.css; small local CSS can go in the HTML style block.

L2. Preload and images (15 min)

Fill the explicit image list. Run both circle and triangle; then temporarily break an asset path and restore it.

Success: Correct image/key rows; failed loading stops with a helpful message.

Hint (after an attempt): Map SHAPE_STIMULI to item.file; dynamic trial paths are not a reliable automatic preload list.

L3. Browser assumptions (10 min)

Complete the mobile exclusion. Resize below 800x600 and inspect the resize/continue route.

Success: Small viewport is detected; supported desktop continues.

Hint (after an attempt): Document what is checked and what is merely assumed, such as a physical keyboard.

Before moving on

Explain one changed line to a partner and inspect the relevant saved row. Record the first unresolved error rather than copying an entire replacement script.

Download this meeting’s starter files, or use the matching folder in the whole student course download.

A small example before the full task

Use the predict–run–explain practice sheet and the editable examples in the browser slides. Each isolates one idea, shows the resulting data, and includes an independent transfer question.