A page that keeps score

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can keep a number between clicks in a variable.
• I can show a changing number on the page.
• I can use an if inside a handler to decide when something happens.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 15 min

Before class

Read the unit primer first. This is the Python "global" and state idea in JavaScript: a variable made above a function is shared and kept; one made inside is made again each call. The p5 sketches kept values in let above draw; here the handler plays the part of draw. The page is only a picture of the variable: change the variable, then put it on the page. The bug has no red error. button.disabled = true is a property like textContent. The Make example uses setInterval (run a function every 1000 ms) and clearInterval; students can use it as a recipe, and a number of them will want it.

Running the lesson

1. Predict: ask students to say "made once" or "made each click" about clicks.
2. Run: ask where the number on the page comes from.
3. Investigate: for the bug, ask "how many times is let clicks run?"
4. Modify: ask what a reset must put back.
5. Make: ask each student what the score is, what the goal is, and what happens at the end.

The hard part (on purpose)

The page shows the variable; it is not the variable. Ask "what does the page know about clicks?" and the answer is nothing.

When students get stuck

Answers to the checks

1. Predict: After 3 clicks, what does the page show?
   Clicks: 3. clicks is made once, above the handler. Each click adds 1 to the same variable, and the page shows the new value.
2. Which line does what?: Match each line with what it does.
   let clicks = 0; → C. makes the memory, once, above the handler; clicks = clicks + 1; → A. changes the memory on every click; countEl.textContent = clicks; → B. shows the memory on the page; if (clicks >= 10) { … } → D. decides when to win
3. Variable first: Why does the code change clicks first and then set the text?
   The page only shows what the variable says, so the variable must change first
   The page does not know about clicks. It shows whatever you put in it. Change the variable, then put the new value on the page.
4. Spot the bug: The page shows 1 on every click and never goes higher. There is no red error. Click the line that is wrong.
   line 6
   let clicks = 0 is inside the handler, so each click makes a new clicks that starts at 0. Make it above the handler, once.
5. Where this leads: Your quiz needs a list of questions, a score and a click handler. What does the quiz keep in variables?
   The current question number and the score
   The quiz is a list of data plus a little memory: which question it is on, and how many were right. Next: the final challenge.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Reset

<p>Clicks: <span id="count">0</span></p>
<button id="click">Click me</button>
<button id="reset">Reset</button>
<p id="message">Reach 10 clicks to win.</p>
<script>
  let clicks = 0;
  const countEl = document.querySelector("#count");
  const message = document.querySelector("#message");
  const button = document.querySelector("#click");
  button.addEventListener("click", function () {
    clicks = clicks + 1;
    countEl.textContent = clicks;
    if (clicks >= 10) {
      message.textContent = "You win!";
      button.disabled = true;
    }
  });
  document.querySelector("#reset").addEventListener("click", function () {
    clicks = 0;
    countEl.textContent = clicks;
    message.textContent = "Reach 10 clicks to win.";
    button.disabled = false;
  });
</script>

Modify › Halfway

<p>Clicks: <span id="count">0</span></p>
<button id="click">Click me</button>
<p id="message">Reach 10 clicks to win.</p>
<script>
  let clicks = 0;
  const countEl = document.querySelector("#count");
  const message = document.querySelector("#message");
  const button = document.querySelector("#click");
  button.addEventListener("click", function () {
    clicks = clicks + 1;
    countEl.textContent = clicks;
    if (clicks === 5) {
      message.textContent = "Halfway there!";
    }
    if (clicks >= 10) {
      message.textContent = "You win!";
      button.disabled = true;
    }
  });
</script>

a clicker game of your own

<h1>Catch the star</h1>
<p>Score: <span id="score">0</span> &nbsp; Time: <span id="time">10</span></p>
<button id="star" style="position: relative; left: 40px">&#9733;</button>
<p id="message">Click the star as fast as you can.</p>
<script>
  let score = 0;
  let time = 10;
  const scoreEl = document.querySelector("#score");
  const timeEl = document.querySelector("#time");
  const star = document.querySelector("#star");
  const message = document.querySelector("#message");
  star.addEventListener("click", function () {
    if (time <= 0) {
      return;
    }
    score = score + 1;
    scoreEl.textContent = score;
    star.style.left = Math.floor(Math.random() * 300) + "px";
  });
  const timer = setInterval(function () {
    time = time - 1;
    timeEl.textContent = time;
    if (time <= 0) {
      clearInterval(timer);
      message.textContent = "Time is up! You scored " + score + ".";
    }
  }, 1000);
</script>

Stretch and support

Stretch: Make the goal change each game (a random target), or keep a best score that survives a reset.

Support: Give the counter and ask students for only the win message.

Exit ticket

Why is let clicks above the handler and not inside it?

Above, it is made once and keeps its value; inside, it would start over on every click.

What each step is for

• Investigate: A variable made above the handler remembers between clicks, a variable made inside starts over; the page only shows the variable, so change it first, then show it.
• Modify: Reset puts the variable and the page back; a second if reacts to a different number.
• a clicker game of your own: Goals only: a score that keeps its value, a goal, and a message when you win or lose.

Where it leads

Next lesson: the final challenge, a quiz page.