Today your page stops being something people only read.
You will add a counter and a special button from Apps, so a visitor can press it and the number goes up.
By the end, your site will keep score of something real, like goals, books or days to the holidays.
Open the Web Page Builder on the board before pupils sit down. Pupils who already built a site should see their own site shape already loaded. Anyone starting fresh gets the two-page starter site in this lesson's interactive.
Name the big idea once, out loud: before, the site had a shape. Today it does something when someone uses a button.
Watch for bare talk of "a button". From today there are two: the one in Links & buttons jumps between pages, and button when clicked in Apps runs actions. Always say the full Apps name.
Some pages only show words and pictures. Others can change when a visitor uses them.
Today you use blocks from a new group called Apps.
A counter holds a number on the page. A special button from Apps can change that number.
Keep this to plain talk and three ideas only: pages that change, a counter that holds a number, and a special Apps button that can change it. Do not open any code tab. Leave the JavaScript label for the make-sense recap after pupils have seen a working number.
The counter-before-action order rule now sits on the pupil screen at the start of the next step. You can still preview it here with three fingers if it helps: first the counter, then button when clicked, then the change counter action inside.
Say the full Apps name out loud every time from the next step: button when clicked. Do not shorten it to "button" in this lesson.
Open the interactive activity. You should see your site or the two club pages (Home and Scores). Build on what you see.
Important: put the counter on the page before you add any action that changes it, or the action cannot find it.
Check before you move on: open the Your web page tab. You should see a number on the page, often starting at 0.
If you cannot see it, go back to Blocks and check the counter is snapped inside the page (or inside the box on that page), not left beside it.
Empty screen with no pages at all? Ask your teacher before using Start again.
Circulate and check the counter is on a page, not floating beside the page block. Pupils who only have one page may add the counter on Home; that is fine.
This beat ends with a live number on the preview. Do not move on until most screens show 0 (or another starting value).
Look-for: the counter block is present before anyone touches button when clicked.
If a pupil later sees (add a counter) in a dropdown, that is the order rule biting. Send them back to place the counter first.
Optional board line: If you cannot see the number, the button will have nothing to change.
Stay on the same page as your counter.
Important: do not use the plain button from Links & buttons. That one only jumps to another page. You need button when clicked from Apps.
Pause and check: open Your web page. You should see your new button on the page. It may do nothing yet. That is fine. Come back to Blocks for the next step.
This is the mix-up moment. Hold up the difference once on the board: Links & buttons → button changes page; Apps → button when clicked runs actions.
If a pupil's button has a page target instead of a slot for actions, they grabbed the wrong block. Have them delete it and take the Apps one.
Do not rush into change counter until most screens show the labelled Apps button on the live page. That mid-check stops the nesting pile-up later.
Look-for: button when clicked is under the counter (or in the same box), label rewritten, wrong Links button deleted if it appeared.
Keep your button when clicked on the same page as the counter.
Your stack should look like this:
The action's dropdown is built from counters that already exist. An empty dropdown is not a broken interactive; it is missing setup.
Common mistakes:
Model one clean stack on the board: button when clicked at the top, change counter tucked inside, dropdown showing the real counter name, amount set to 1.
Use the plain-English stack on the pupil screen as the picture. Do not show JSON or code markup.
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.