Build a webpage with real game data

What students can do by the end

• Explain the different roles of HTML, CSS and JavaScript
• Explain what an API does, and describe the request and response between a browser and one
• Recognize JSON as a common format for sending data between programs
• Identify the basic data types in a JSON response, and explain why quotes matter
• Use fetch() to request data from a real endpoint
• Read values out of a JavaScript object or array by path
• Write an if / else that makes the page behave differently depending on the data
• Loop through a list of data and transform, filter and sort it
• Use API data to update the HTML a visitor sees
• Modify all three files to build a webpage of their own

The looping objective is the one that separates this from a typical intro lesson. Most stop at displaying a single value; chapter 8 is where students stop copying and start asking their own questions of the data.

Standards this supports

Every code below was checked against the published standard, and each row says which chapter actually does it.

Read this first if you are matching a district curriculum map. CSTA published a full revision in July 2026, and it renumbered everything: the 3A and 3B levels are gone, replaced by a single HS band for grades 9–12. Most curriculum maps in use today still cite the 2017 codes, so both are below — 2026 first, with its 2017 predecessor beside it. CSTA publishes an official crosswalk between the two.

CSTA 2026 — the codes this lesson meets

High school band, grades 9–12. “Was” gives the closest 2017 code, per CSTA’s crosswalk.

The 2017 code with no 2026 successor

If your curriculum map is still on the 2017 standards, this one is worth claiming, because it is the best single match in that version for the part of the lesson that most reliably works — and CSTA dropped it.

What this lesson does not cover

Codes that look like they should fit and do not. Listed because a mapping is only useful if it can be trusted where it does claim something.

• Collaboration and documentation. 2017’s 3A‑AP‑22 wants team roles and collaborative tools; 3A‑AP‑23 wants documented design decisions for complex programs. This is individual work in a browser editor, so neither is met unless you add it.
• Data and analysis. Rendering fetched records into a list is not a data visualization, and reading JSON is not building a computational model. CSTA’s crosswalk actually maps the visualization standard down to middle school. If your students build charts, revisit this — otherwise skip the strand.
• Hardware and system software. The three-languages abstraction is real, but it never reaches the operating system, which is what the 2026 successor to 3A‑CS‑02 is explicitly about.
• Networking. Chapter 4 sends a real request across your school’s network and reports what came back, which is worth doing — but the lesson never reaches routing, addressing or topology, so it does not meet the networks standard on its own.
• Cybersecurity. A school filter blocking a domain is a network reality, not malware. Different topic.

Standards text. The descriptions above are written for this page in plain language — they are not CSTA’s official wording. CSTA does not publish per-code links, so read the full text in the 2026 standards viewer or the 2017 interactive browser. Citations: Computer Science Teachers Association. (2026). 2026 CSTA PK–12 Computer Science Standards. And: Computer Science Teachers Association (2017). CSTA K–12 Computer Science Standards, Revised 2017. Both are published under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.

Vocabulary

One line each. Copy this onto the board, or print the page.

Before the Lesson

1. Work through the student lesson once yourself. Half an hour, and it is the single best preparation. You will find the two or three places your class will slow down.
2. Check the network can reach wildwillows.app. Do this a week ahead, not the morning of. A filtered domain is the most common way this lesson fails, it looks like broken code to a student, and it needs an IT ticket rather than a fix you can make in the room.
3. Optional: show five minutes of the game. Students who have seen the meadow understand what biome: "meadow" means, and the data stops being abstract.
4. Pick a flow. Three are below. Sixty to a hundred and twenty minutes means different things in different schools.

There is nothing to install, no software to request, no accounts to create in advance, and no class codes to hand out.

Three ways to run it

What to cut when time is short

You can make this call mid-lesson. The three things that carry chapter 9, which is where the payoff is, are if / else, .map() and .filter(). Keep those.

Those are marked as optional in the student page's own interface too, so skipping them does not read to a student as falling behind.

Two openers that work

What is a webpage?

Put any page on the projector. Ask three questions and let them guess before you name anything: what decides the words, what decides the colors, and what happens when I click this. You will get to structure, appearance and behavior on your own, in their words, which is a better start than three definitions.

What is an API?

Do not define it first. Open chapter 4 on the projector and press See the real API response. The page reports the status, the time and the size of the request it just made over your school’s own network, then shows the data that came back. Ask what they think happened before you name any of it.

The definition afterwards fits in a line: one program asked another program, on a different computer, for something, and got it back as text. The rest of the lesson is reading that text.

Assessment

Deliberately not quiz-heavy. Three bands you can grade as completion, as points, or as a project.

Grade the understanding column hardest. A student who used the worked example and can explain what the code does has learned more than one who wrote messier code unaided and cannot.

Troubleshooting

Six things that actually go wrong, and what to do about each. None of them needs you to read the student's code.

Answer key

The finished chapter 10 challenge, all three files. Open it in the Code Builder to run it, or read it here.

<h1 id="title">Meadow Apex Predators</h1>
<ul id="animal-list"></ul>

body { font-family: system-ui, sans-serif; padding: 1rem; color: #3b4232; }
h1   { color: #6b3fa0; }
li   { margin-bottom: .3rem; }

async function loadGameData() {
  const response = await fetch("https://wildwillows.app/GameData");
  const data = await response.json();

  const matches = data.animals
    .filter(animal => animal.trophic === "apex-predator")
    .sort((a, b) => a.name.localeCompare(b.name));

  const list = document.querySelector("#animal-list");

  if (matches.length === 0) {
    list.innerHTML = "<li>No animals matched.</li>";
  } else {
    list.innerHTML = matches.map(animal => `<li>${animal.name}</li>`).join("");
  }
}

loadGameData();

A broken version, for a warm-up or a substitute

Three planted bugs. Give students the file and ask them to find them using the error panel. It is a good sub-plan and a better test of understanding than writing it from scratch.

async function loadGameData() {
  const response = fetch("https://wildwillows.app/GameData");   // bug 1
  const data = await response.json();

  const matches = data.animal                                     // bug 2
    .filter(animal => animal.trophic === "apex-predator");

  document.querySelector("#animals-list").innerHTML =             // bug 3
    matches.map(animal => `<li>${animal.name}</li>`).join("");
}

loadGameData();

What this collects

Anonymous counts and nothing else: which chapters were reached, which errors the editor explained, roughly how long a session in the builder ran, and whether the network let the data through. No accounts, no cookies used for tracking, no third-party analytics.

Student code never leaves the browser. It is saved in that browser's own storage so it is still there next period, and it is sent nowhere: not when they run it, not when it produces an error, and not in the usage counts. The only way their work leaves the machine is if they press Download.

Because nothing identifies a student, a class or a school, there is no student record to request, correct or delete. The privacy policy has a section addressed to schools and districts.

This describes this kit — the lesson, the builder and the API docs. The game is a separate program and reports more than these pages do, including the caretaker name typed on the save; if you also run the science kit, its own section covers that.