Cool Beans Tech Curriculum guide
Launch Control
Build the control panel for your own rocket with JavaScript: fuel it, check it, count it down, then fly it!
- Who it's for
- Ages 10–15 (grades 5–9)
- Subject
- Computer science
- Length
- 11 sessions of 45 minutes, about 8.5 hours in all
- Devices
- Any device with a web browser
- Cost
- Free
Overview
Eleven sessions of JavaScript, one idea at a time. Students first learn how the browser really runs a page (it builds the HTML, then runs each line of script in order) and meet the console, the builder's message window. Then they build the control panel for a rocket of their own: memory, buttons, decisions, a flight computer, a countdown, gauges, a crew and keyboard steering. Each big idea is stepped through line by line before they write it, and every panel keeps one shape: state, one draw() and events.
- What students make
- A working control panel for a rocket of your own: fuel, a go/no-go light, weather, a countdown, gauges, a crew and a rocket you steer.
- Topics
- JavaScript · How the browser runs code · Logic, loops and events
Learning objectives
By the end of Launch Control, students will be able to:
- Explain how a browser runs a page: it builds the HTML into parts, then runs JavaScript one line at a time, in order, and writes messages and errors to the console.
- Store and change a program's state in variables, find parts of the page by id, and show the state with a draw() function that events call after every change.
- Make decisions with if, else if and else, comparisons, && and ||, and explain why the order of the questions matters.
- Write functions that take parameters and return values, and use timers and for loops to repeat work.
- Keep a list in an array, respond to clicks, taps and keys, and find bugs by reading the console's errors and asking whether the state or the drawing is wrong.
Beyond the subject: Debugging by reading error messages · Predicting what code will do · Breaking a big job into small ones · Designing for everyone
Scope and sequence
| Session | What students do | Words they learn | Time |
|---|---|---|---|
| 1 | Hello, ConsoleStudents learn what the browser does with a page (it builds the HTML, then runs each line of JavaScript in order), meet the console as the builder's message window, and read a red error and its line number. | browser, <script>, console, console.log, text and numbers, error | 45 min |
| 2 | The Computer RemembersStudents make variables with let, change them, print them in the console with words joined on, and fix an "is not defined" error by matching a name exactly. | variable, let, = (a new value), state, "text" + value | 45 min |
| 3 | Power Up the PanelStudents learn that the browser builds the page's parts from the HTML, find a part by its id with document.getElementById, change its words with textContent, and fix an id that doesn't match. | id, document.getElementById, textContent, null | 45 min |
| 4 | Push the ButtonStudents learn that a function is a named set of steps that runs only when called, move the panel's lines into draw(), make buttons with addEventListener that change the state and then call draw(), and name the shape every panel keeps: state, draw(), events. | function, call, event, addEventListener, draw() | 45 min |
| 5 | GO or NO-GOStudents pick where their rocket flies, make the panel decide GO or NO-GO with if / else and comparisons, light the decision with classList while keeping it in words, and fix > where >= belongs. | if / else, >= and >, <, true and false, classList | 45 min |
| 6 | Weather WatchStudents write an if / else if / else chain that moves the weather along, see that the first true question wins (and fix a chain in the wrong order), then make GO need enough fuel AND good weather, where clear OR windy counts as good. | else if, ===, && (and), || (or), ( ) | 45 min |
| 7 | Flight ComputerStudents write functions that take an input (a parameter) and hand an answer back with return, fix a function that forgets to return (undefined), and write burn(amount), a function with an input and no answer. | parameter, return, undefined, Math.round() | 45 min |
| 8 | CountdownStudents set timers with setTimeout and see that the code doesn't wait, write tick() and press it by hand, let setInterval call it every second, stop it at zero with clearInterval (fixing a stop that compares a number with text) and add a Hold button. | timer, setTimeout, setInterval, clearInterval, millisecond | 45 min |
| 9 | GaugesStudents repeat work with for loops: count down from 10 in the console, fix a loop that goes one too far, and build text in a loop to draw gauges on the panel. | loop, for loop, i++ and i--, off by one | 45 min |
| 10 | CrewStudents keep a crew in an array: read a name by its number (counting from 0), show crew.length, add names with push from a button, fix a loop that reads one past the end (undefined), and make GO need at least one crew member. | array, crew[0], .length, .push() | 45 min |
| 11 | Liftoff!Students listen for keys with keydown and event.key, launch with the space bar, steer with the arrow keys and style, find a wrong key name with console.log(event.key), add tap buttons for tablets through one steer() function, then add a feature of their own and show it off. | keydown, event, event.key, .style | 45 min |
Standards alignment
2026 CSTA PK–12 Computer Science Standardsmiddle school, grades 6–8
| Standard | Session 1 | Session 2 | Session 3 | Session 4 | Session 5 | Session 6 | Session 7 | Session 8 | Session 9 | Session 10 | Session 11 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| MS-ALG-PS-01Algorithms & Design · Algorithmic Problem SolvingDesign an algorithm that includes variables of multiple data types to solve a problem or express an idea. | Yes | Yes | Yes | ||||||||
| MS-ALG-PS-03Algorithms & Design · Algorithmic Problem SolvingVerify the accuracy of an algorithm for given inputs. | Yes | Yes | Yes | ||||||||
| MS-ALG-IM-09Algorithms & Design · Impacts of Algorithms & DesignEvaluate which human-centered design principles are present or missing in an existing computing technology. | Yes | ||||||||||
| MS-PRO-PD-12Programming · Program DevelopmentUse a procedure to structure code for clarity and reusability. | Yes | Yes | |||||||||
| MS-PRO-VD-16Programming · Variables & Data StorageUse variables of multiple data types to store, access, and manipulate data within a program. | Yes | Yes | Yes | Yes | |||||||
| MS-PRO-RD-17Programming · Reading & DocumentingAnalyze the roles of iteration, selection, variables, and procedures in a segment of code. | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | ||
| MS-PRO-TR-19Programming · Testing & RefiningUse systematic strategies to test, refine, and document changes to a computing technology to meet the intended purpose. | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | |
| MS-PRO-TR-20Programming · Testing & RefiningRefine a computing technology based on user feedback to improve its usability and accessibility. | Yes |
Alignments are our own reading of where each session fits, not an official alignment by the standards' authors.
Evidence of learning
What students finish with
- A working control panel for a rocket of their own, written in HTML and JavaScript
- A launch message and a launch report of their own in the console
- A feature of their own design, added in the last session
- A page they can take home that opens in any browser
- A reflection at the end of every session on how their code works
How progress is checked
- At every step
- Each new idea is stepped through line by line, and students predict before they build. Each build step checks what their code does (the console, the buttons, the panel), so any way that works passes. Teachers check Sessions 4 and 11.
- Teacher review
- Key work goes to the teacher, who approves it or sends it back with what worked and what to try next.
- Exit tickets
- Each session closes on one question, posted by the teacher and answered live.
- Reflections and check-ins
- Students say what they made and how it's going, in their own words.
- Reports
- A progress page for each student, and a program report of how many students worked on each standard, with a spreadsheet.
- No grades or scores
- Feedback is about the work, never a number, so students keep trying.
Support for teachers
- A lesson plan for every session: a warm-up, a timed agenda, words to know, what to watch for and a closing question
- Slides for every session, to present on a projector
- A live class map: who's building, who's done and who needs help
- Hints and notes for one student or the whole class
- Sessions open when the teacher is ready, so a class can stay together
- A printable certificate for every session a student finishes
Safety, privacy and access
- Students sign in with a made-up username and a secret word: no email, real name or age is ever asked
- Only the student and their teacher see their work: no sharing between students, no public profiles
- No ads, no trackers and nothing sold
- Runs in a web browser on Chromebooks, laptops and tablets, with nothing to install, and shared devices are cleared at sign-out
- Designed for access: keyboard navigation, visible focus, readable contrast and calmer motion when a device asks for it
- Free for schools and programs