If you typed “9.7.4 leash” into a search bar, you are almost certainly staring at a CodeHS exercise and wondering why your dog will not stay on its leash. You are not alone — this is one of the most searched-for programming assignments in introductory computer science, and it trips up nearly everyone the first time. The good news: the exercise is testing exactly three ideas, and once you see them clearly, the solution practically writes itself.
The short answer: the 9.7.4 Leash exercise (from CodeHS’s introductory computer science course) asks you to build a program where one object — usually a dog — follows the mouse cursor, connected by a line drawn like a leash. Students get stuck because of the coordinate system (CodeHS canvases put the origin at the top-left, so Y grows downward), because they update the wrong end of the line, or because they draw the leash once instead of redrawing it every frame. This guide explains each concept and walks you through solving it yourself, step by step.
A note on honesty before we start: this guide will not hand you code to paste. That would get you through the assignment and teach you nothing — and the whole point of 9.7.4 is the thing it teaches. Instead, you will get the concepts, the common traps, and a step-by-step method. Work through it and you will actually understand mouse interaction, which shows up in every graphics program you will ever write.
IN THIS GUIDE
- What the 9.7.4 Leash exercise actually asks for
- The three concepts it is really testing
- Why everyone’s leash breaks (the three classic traps)
- Solving it yourself: a step-by-step method
- Symptom to fix: the debugging table
- The debugging checklist
- Frequently asked questions
- Conclusion
What the 9.7.4 Leash Exercise Actually Asks For
Exercise 9.7.4 sits in the unit of the CodeHS introductory course that covers graphics and mouse interaction — the part of the course where programs stop being text on a screen and start being things you can see and touch. The assignment is usually framed as a small creative task: make a dog (or a ball, depending on the version of the exercise) that follows the mouse cursor around the canvas, with a line connecting the cursor to the dog so it looks like a leash.
Strip away the dog, and the underlying task is this:
- Track the mouse’s position continuously as it moves.
- Move a second object toward (or with) the mouse in a controlled way.
- Draw a line between the two points, updating it every frame so it behaves like a physical leash.
That is the entire assignment. Three behaviors, each simple on its own, each capable of producing deeply confusing results when combined wrong. Teachers on computer science forums describe this exercise as either a brilliantly layered challenge or a perfect storm of invisible frustration — and the truth is that it is both, depending on whether someone has explained the coordinate system to you first.
The Three Concepts It Is Really Testing
1. Mouse events
Your program needs to know where the mouse is, all the time. In the CodeHS graphics environment, this typically means registering a function that runs whenever the mouse moves — a mouse-move event handler — and reading the event’s x and y coordinates inside it. The key insight is that mouse tracking is event-driven: you do not ask “where is the mouse?” in a loop; you set up a listener and the system tells you whenever the position changes.
If you have only written programs that run top-to-bottom so far, this is the conceptual leap the exercise wants you to make. The program is no longer a recipe that runs once. It is a system that sits and waits, then reacts.
2. The coordinate system
Here is the trap that eats the most time. On the CodeHS canvas, the origin (0, 0) is at the top-left corner, x increases to the right, and y increases downward. That last part contradicts every math class you have ever taken, where y grows upward.
Why does this matter for a leash? Because the moment you do any arithmetic involving vertical position — computing a direction, an offset, a distance — your instincts will produce the mirror image of what you intended. The leash snaps to bizarre inverted positions. Objects flee from the cursor instead of following it. Students routinely describe the result as looking “like a broken spiderweb,” and it is almost always this: the y-axis is upside down relative to their intuition.
Practical tip: before writing any logic, draw the canvas on paper. Mark (0,0) at the top-left. Place two dots — one for the mouse, one for the dog — and write their coordinates. Then compute, by hand, where the line between them goes. If your hand computation matches what the screen shows, your mental model is correct. If it does not, fix the model, not the code.
3. Redrawing every frame
A line on a canvas is not a physical object. It is a picture of a line, frozen at the moment you drew it. When the dog moves and the mouse moves, the old line does not follow them — it just sits there, a fossil of where things used to be. To make a leash that looks like it connects two moving points, you must erase and redraw it continuously, typically inside whatever update or animation loop your program uses.
This is the second great conceptual leap of the exercise: animation is an illusion built from still images. Every frame, you compute the current positions, clear the old drawing, and draw the new one. Miss the “redraw every frame” step and you get either a static line while the dog wanders off, or a smeared trail of old lines across the canvas. Both are classic 9.7.4 failure modes, and both have the same fix.
Why Everyone’s Leash Breaks: The Three Classic Traps
Trap 1: The inverted leash
Symptom: the dog moves opposite to the mouse vertically, or the leash stretches to a mirrored position.
Cause: you assumed y grows upward (the math-class convention) on a canvas where y grows downward. Any vertical arithmetic — offsets, direction vectors, easing calculations — comes out flipped.
The fix: re-derive your vertical math with the top-left origin in mind. The paper exercise from the tip above resolves this in about two minutes.
Trap 2: The detached leash
Symptom: the dog follows the mouse beautifully, but the line stays where it was first drawn — or the line follows the mouse while the dog sits still.
Cause: you are updating one endpoint of the line but not the other, or you drew the line once (outside the update loop) instead of redrawing it every frame. The line’s endpoints are just numbers; they do not magically track the objects unless your code sets them every frame.
The fix: inside your per-frame update, set the line’s start point to the mouse position and its end point to the dog’s position (or vice versa), every single frame, then redraw.
Trap 3: The teleporting dog
Symptom: the dog snaps instantly to the cursor instead of following it, so the “leash” has zero length and the whole exercise looks pointless.
Cause: you set the dog’s position equal to the mouse position each frame, rather than moving the dog toward the mouse by a limited amount. A leash implies distance and lag — the follower trails the leader.
The fix: move the dog only part of the way toward the mouse each frame (a fraction of the remaining distance, or a fixed maximum step). This single change is what makes it look like a leash instead of a cursor with a pet glued to it.
Solving It Yourself: A Step-by-Step Method
Work through these steps in order. Do not skip to the end — each step builds the mental model the next one needs.
Step 1: Draw the static scene
Before any movement, get two things on screen: the dog (a circle is fine; the exercise’s Dog class is just a circle with a name) at a fixed position, and a line from a fixed point to the dog. Run the program. You should see a motionless dog with a motionless leash. If you cannot draw the static version, the moving version will be impossible to debug — always start static.
Step 2: Track the mouse
Add a mouse-move handler that simply records the cursor’s coordinates into variables. To verify it works, make the dog jump to the mouse position on every move event (temporarily — this is scaffolding, not the solution). Wave the mouse around. If the dog tracks the cursor, your event handling is correct. If nothing happens, the problem is in the handler registration, not in your leash logic — and now you know exactly where to look.
Practical tip: add a temporary print or on-screen label showing the mouse coordinates. Watching the numbers change as you move the mouse builds an intuitive feel for the coordinate system faster than any explanation.
Step 3: Make the dog follow with lag
Replace the instant snap with gradual movement: each time the program updates, move the dog a fraction of the distance toward the recorded mouse position. A common approach is to move it a fixed percentage (say, 10%) of the remaining gap per update. The dog will glide toward the cursor and trail behind it when you move fast — which is exactly what a leash looks like.
Experiment with the fraction. Too large and the dog teleports (Trap 3 again). Too small and the dog lags so far behind it feels broken. There is no single right value; finding it by feel is part of the exercise.
Step 4: Redraw the leash every frame
Now connect the two points. Each update: set the line’s first endpoint to the current mouse position, set its second endpoint to the dog’s current position, and redraw. Move the mouse in circles. The line should sweep around like a real leash, always connecting cursor to dog, never detaching, never smearing.
If you see smearing — a trail of old lines — you are drawing new lines without clearing the old ones. Clear (or remove and re-add) the line each frame before drawing the new one.
Step 5: Remove the scaffolding and polish
Take out the coordinate labels and any other debugging aids. Try edge cases: what happens when the mouse leaves the canvas? What happens if you move the mouse faster than the dog can follow? A robust solution degrades gracefully — the dog keeps gliding toward the last known position instead of freezing or erroring.
Then — and only then — compare your result against the exercise’s requirements. If the dog follows with lag and the leash connects them continuously, you are done, and more importantly, you understand why it works.
Symptom to Fix: The Debugging Table
When something looks wrong, find your symptom in the left column before touching your code. Random changes are how a twenty-minute exercise becomes a three-hour one.
| Symptom | Likely cause | Fix |
|---|---|---|
| Dog moves opposite vertically | Y-axis assumed upward | Redo vertical math with top-left origin; y grows downward |
| Line stays frozen while dog moves | Line drawn once, not per frame | Update both endpoints and redraw inside the update loop |
| Trail of old lines smears the canvas | New lines drawn without clearing old ones | Clear or remove the old line each frame before drawing |
| Dog teleports to cursor instantly | Position set equal to mouse each frame | Move only a fraction of the distance per update |
| Nothing moves at all | Mouse handler not registered or updating wrong variables | Verify handler fires; print coordinates to confirm |
| Leash connects to wrong spot on dog | Endpoints set to stale or offset positions | Use the dog’s current center coordinates each frame |
| Dog jitters or vibrates near cursor | Step size too large relative to remaining distance | Reduce follow fraction or snap when very close |
| Works until mouse leaves canvas | No handling for mouse-exit events | Clamp to last known position or canvas bounds |
The Debugging Checklist
Run through this list top to bottom whenever the leash misbehaves. Most students find their bug by item three.
- Coordinates visible? Temporarily display the mouse x/y and the dog x/y on screen. Do the numbers change the way you expect when you move the mouse?
- Origin correct? Is (0,0) at the top-left in your mental model? Does increasing y move things down?
- Handler firing? Does anything at all respond to mouse movement? If no, the event registration is the bug.
- Line endpoints current? Are both endpoints set from live positions every frame — not from variables that were set once?
- Redraw happening? Is the old line cleared before the new one is drawn?
- Follow gradual? Is the dog moving toward the mouse rather than to it?
- Scaffolding removed? Did you take out the debug labels and test scaffolding before submitting?
Practical tip: change one thing at a time and re-run between changes. If you change three things and it starts working, you have not learned which change mattered — and the next exercise will punish you for it.
Frequently Asked Questions
What is the 9.7.4 leash exercise?
It is exercise 4 in section 9.7 of CodeHS’s introductory computer science course, in the unit covering graphics and mouse interaction. The task is to program a dog (or similar object) that follows the mouse cursor, connected by a line drawn as a leash. It tests mouse-event handling, coordinate math, and per-frame redrawing.
Why is it called 9.7.4?
The numbering is just the course structure: unit 9, section 7, exercise 4. There is nothing special about the numbers themselves — but because thousands of students hit the same exercise every semester, “9.7.4 leash” has become a recognizable search term.
Why does my leash look like a broken spiderweb?
Almost always the coordinate system. CodeHS canvases put (0,0) at the top-left with y increasing downward, which inverts every vertical assumption carried over from math class. Redo the vertical math with that origin and the spiderweb resolves.
Should I just copy an answer I found online?
It will get you the checkmark and cost you the skill. Mouse interaction, event handling, and animation loops recur in every graphics project after this one — games, data visualizations, interactive art. Students who copy 9.7.4 tend to get stuck again, harder, two units later. Work through the steps above; it takes about thirty focused minutes.
What should I learn next after finishing it?
The natural follow-ups are collision detection (what happens when the dog reaches a boundary or another object) and keyboard input (controlling objects with keys instead of the mouse). Both reuse the per-frame update pattern this exercise teaches. For general study habits that make programming practice stick, these smarter learning strategies for students are worth a look alongside your coding work.
Does the exercise differ between CodeHS course versions?
Some versions frame it as a dog on a leash and others as a line-and-ball movement exercise, but the underlying task is identical: one object follows the mouse, connected by a continuously redrawn line. The concepts and debugging steps in this guide apply to every version.
Conclusion
The 9.7.4 leash looks like an exercise about dogs. It is actually an exercise about three ideas that underpin all interactive graphics: events tell your program what the user is doing, coordinates tell it where things are, and redrawing every frame creates the illusion of motion. The traps — the inverted y-axis, the frozen line, the teleporting dog — are not random cruelty. Each one is a lesson disguised as a bug.
Work through the steps, use the debugging table instead of guessing, and resist the urge to paste someone else’s answer. Thirty minutes of genuine struggle here pays off in every graphics program you write afterward. The leash is not the point. The understanding is.
Read Also: How to Remove Wallpaper Glue (2026 Guide): Easy Methods for Clean Walls
