How this activity works
  1. Observation, not play. Pick any game in the arcade and watch it for what is written in the file versus what is painted on the canvas. Every classwork answer sends you back to the screen.
  2. Left panel: the passage. Right panel: the classwork form.
  3. You can submit early and reopen — click the “Edit your response” link on the confirmation screen. The newest version is the one that counts.
  4. MuggsArcade opens once your classwork form is submitted, and closes when the exit-ticket pop-out appears.
  5. Exit ticket today. A pop-out appears in the last part of class with the link. It closes at the bell — no makeup, no at-home.
How to make an observation

Pick any game in the arcade — Breakout, Snake, Pong, Simon, Invaders, Whack-a-Mole. Look at the screen. HTML is the parts of that screen your eye can find and your mouth can describe: a button, a score, a title, a box that holds another box. If you can point at it and say what it is in plain words, you are looking at HTML.

Step 1 — Pick one part you can point at. Start simple. The Start button is the easiest thing on any screen. Do not pick the whole game.

Step 2 — (a) Name it. Say what it is the way you would describe it to someone on the phone who cannot see the screen. Ordinary words, not code.
“A button. It says Start.”

Step 3 — (b) Place it. Say what it sits above, below, or inside. You need another part of the screen to measure it against — that is what places it.
“Below the play area, inside the box that holds the whole game.”

Another one, from Breakout.
“A score. It reads 0 at the start. Above the bricks, at the top of the play area, inside the box that holds the whole game.”
Two parts named — the score and the bricks — and the score is placed against both of them and against the container that holds them. That is the shape.

What it sounds like when you slip.
“A bright green paddle that slides left and right when you press the arrow keys and gets smaller after every level.”
“Bright green” is a color decision — that is CSS, how the paddle is styled. “Slides when you press” and “gets smaller after every level” are things happening while you play — that is JavaScript, what the paddle does. Neither one is a part of the screen you can point at and hold still. The only HTML in that whole sentence is the word “paddle.”

The same paddle, kept in HTML.
“A paddle. Below the bricks, in the bottom part of the play area.”
A part, named. Placed against another part. No color. No motion. That is the whole job.

That is one observation. Do it five times, a different part each time.

HTML is what the human eye can see and the human mouth can describe as a part — a thing that stays put while you look at it. Colors and edges are CSS. Movement and reactions are JavaScript. If you catch yourself saying “bright,” “smooth,” “bounces,” or “when you press,” you have crossed out of HTML. Come back: name the part, place it against another part, in the same words you would use talking to a friend.

Exit ticket

Checking the window …

View

Read the passage on the left, then answer here. You can submit early and reopen with “Edit your response” — the newest version counts.

Tue Sep 15 — Three grammars on one screen · Read the file, then read the screen.