You already know how to make a page count something when a visitor uses a button.
Today your page will ask a visitor something. They type an answer, press a button, and their words join a list on the page.
By the end you will have a text box, a list box and a button that joins the two together.
Open the interactive on the board before pupils arrive so the carried site is visible. Pupils joining this lesson new still get a working starter site from startWorkspace.
Today’s new blocks all live in Apps: text box, list box, button when clicked, and the action add text box to list box. Keep naming the category every time. There are two different “button” blocks in this module; today is the Apps one, not the Links & buttons page-jumper.
Order is load-bearing: the text box and list box must both be on the page before anyone drags the action, or its dropdowns read “(add a text box)” and “(add a list box)”.
A web page can do more than show words. It can ask a visitor to type something.
Three Apps pieces work together:
Inside that button sits one small action block: add text box to list box. That action is the glue.
You will build the pieces in that order: text box first, then list box, then the button and its action.
Keep this spoken and short. Sketch the three pieces on the board as a simple flow: type → press button → appears in list. Do not open the code tabs to JavaScript; name only that the page is now responding, the same idea as the counter they already know.
Use the full block name on the board from the start: button when clicked from Apps, not the Links & buttons page-jumper. In pupil copy we say “Apps button” so they look in the right category; you still say the full block name aloud.
Head off the early grab for the action block: the action’s dropdowns stay empty until the text box and list box are already on the page.
Open your site in the interactive. Go to the page where a visitor should type something.
Use your second page, or any page where a visitor should type. If you still have a page called Ideas, use that.
From Apps, drag a text box block onto that page.
Select the text box block.
Set its name to hobby.
Set its placeholder to Type a hobby idea.
The placeholder is the pale writing a visitor sees before they type. It tells them what to write.
Model the drag on the board first, then let pupils match it. The name hobby matters: the action dropdown later reads the names you give, so a shared name makes helping faster. Keep names short, lowercase and with no spaces.
The field on the block is labelled placeholder. Say that word when you model it so it matches what pupils see on screen.
If a pupil is building on a different page of their own site, that is fine; keep the same block name so you can still coach the dropdown step.
Open the Your web page tab.
Find the text box on your page. You should see the pale placeholder writing inside it.
Select inside the text box and type a word, just to try it.
The word sits there. It does not join a list yet. That is fine. The list and the button come next.
Clear the word again so the box is ready.
This beat is a short pause on purpose. Pupils feel the text box working before anything is wired up, which makes the action block’s job clearer later. Keep it brisk so momentum stays with the build.
If someone cannot see the text box, they likely dropped it outside the page’s content, or they are looking at the wrong page. Use the menu on the live page to switch.
Go back to the Blocks tab.
From Apps, drag a list box block onto the same page as your text box.
Use list box from Apps, not the ordinary list block.
Snap it under the text box so the list will show below where people type.
Select the list box block.
Set its name to list.
Open the Your web page tab. You should see an empty list waiting under the text box.
Name spelling matters again: list is what the action dropdown will offer. If a pupil used a capital letter or a space, the later pick-step gets messy; coach short lowercase names with no spaces.
Watch for the wrong list-type block: the ordinary list block is not the Apps list box. Hold up the Apps one on the board.
The names hobby and list are meant to sound different on purpose, so dropdown picks are easier.
The list box looks quiet until the button works. Reassure anyone who thinks it is broken.
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.