Make a real web page react with JavaScript: find elements, change them, listen for clicks and typing, and keep a list and a score, ending in a quiz page you build.
Each lesson works two ways. Students can work through the online tutorial at their own pace (it checks their answers and saves their progress in their browser), or you can teach it to the whole class from the slides, then send students into the tutorial for the Modify and Make steps.
Every lesson guide has plain-language notes, the answers to every check, a solution for every task, and slides and a worksheet for Waypoints Prepare. These guide pages are not linked from student pages, but they are not secret either: keep printed Teacher editions for answers you do not want students to find.
Whole-course cheat sheet: Open to print (every command, grouped by unit: a handout for the final challenge)
Find an element, change it, and run code when someone clicks.
A web page is a tree of elements (the DOM). JavaScript can find an element with document.querySelector("#id") (a # for an id, a . for a class, a plain word for a tag), then change it: title.textContent = "…" for its words, title.style.color = "…" for its look. A script runs as soon as the browser reaches it, so it sits below the elements it uses. To wait for a click, hand the button a function: button.addEventListener("click", start). No brackets after start: that would run it now. console.log(…) writes messages in the Console under the page, to see what the code is doing.
A doorbell wired to a light: the button is the element, the click is the event, and the wiring is the handler. It breaks because you can wire any button to any change, and you can wire many handlers to one button.
null mean?null? The selector found nothing. Check the spelling, and the # or the dot.addEventListener.This is the events lesson from Python and mousePressed from p5.js, with the page as the thing to change. The HTML & CSS lesson "Make it react" is a short version of this unit.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Classes, inputs, lists of elements and a score the page remembers.
Four tools for real pages. Classes: the look lives in CSS (.dark { … }) and JavaScript only flips it, with classList.toggle("dark") (no dot in the name). Inputs: box.value is the text typed in a box, and the "input" event fires on every keystroke; the value is always text, so Number(box.value) turns it into a number. Lists of elements: document.createElement("li") makes one, list.append(li) puts it on the page, li.remove() takes it off; an array in the script is data, and the page changes only when elements are made or removed. State: a variable made above the handler keeps its value from click to click; the page is only a picture of it.
A whiteboard and a notebook: the notebook (variables) is the memory, and the whiteboard (the page) shows what is in it. It breaks because the page does not update itself when the notebook changes: your code has to rewrite the whiteboard.
Number(...).Arrays and loops come from the p5.js course, variables and events from earlier units. The unit ends with the pieces needed for the quiz.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Build a quiz that checks answers and keeps score. Two optional lessons show the real browser console and loading data with fetch.
A quiz page is data and a little memory. The data is an array of question objects ({ text, choices, answer }). The memory is two variables: current, which question is on the screen, and score. Showing a question makes a button for each choice with createElement. A click calls check(choice), which compares the choice with the answer using === (three equals signs: one = would change the variable and always be true), changes the score, moves on, and shows the next question or the end. Everything on the page is a picture of the data and those two variables.
A teacher with a stack of cards: the next card is questions[current], and a tally on paper is the score. It breaks because the page forgets everything when it is closed; remembering needs somewhere to store it.
= instead of ===.This is the Catch the turtle, Catch the circle and Power-ups challenges as a web page. The optional lesson shows the real browser Console.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown