9.7.4 Leash: Understanding the CodeHS Drawing Lines Exercise

Introduction

If you searched for 9.7.4 Leash, you are most likely looking for a CodeHS programming exercise rather than information about a physical leash. CodeHS officially lists Exercise 9.7.4 Leash inside Lesson 9.7, Drawing Lines, in its Introduction to Computer Science in JavaScript course.

It is a small exercise, but there is quite a lot happening behind the picture on the screen. A moving object, coordinates, a line, and mouse input all have to work together.

Quick Facts

Detail	Information
Exercise	9.7.4 Leash
Platform	CodeHS
Course Area	JavaScript
Lesson	9.7 Drawing Lines
Activity Type	Exercise
Points	5
Main Topic	Interactive graphics
Main Skills	Coordinates, mouse events, lines
Previous Topic	Mouse movement
Learning Style	Visual programming

CodeHS places Leash immediately after its Drawing Lines video, quiz, and example. The preceding lesson covers mouse-movement events, which gives students the knowledge needed to make graphics respond when the pointer moves.

What Is 9.7.4 Leash?

The Leash activity is an interactive JavaScript graphics exercise.

Its visual idea is simple. One point stays fixed while another object moves. A line connects the two positions, producing an effect that looks like an object attached to a leash.

Common descriptions of the exercise show a circle following the mouse while one end of a line remains anchored. As the mouse changes position, the program updates both the circle and the movable endpoint of the line.

That makes Leash useful for understanding how separate graphical objects can share the same coordinate information.

Why Does the Number 9.7.4 Matter?

The numbers describe the exercise’s location within a particular CodeHS course structure.

In the CodeHS Introduction to Computer Science in JavaScript course currently indexed by CodeHS:

9 refers to the broader course section.

7 refers to the Drawing Lines lesson.

4 identifies the Leash exercise within that lesson.

CodeHS officially shows the sequence as Drawing Lines video, quiz, example, and then Exercise 9.7.4 Leash.

Students should remember that numbering can differ between CodeHS curricula. A similar activity may therefore appear under another number in a different course.

How the Leash Effect Works

Think of the program as three positions.

First, there is a fixed position. This acts as the anchor.

Second, there is the current mouse position.

Third, there is the position of the graphical object following the mouse.

When the mouse moves, its horizontal and vertical coordinates change. The program reads those coordinates and moves the graphical object to the new location.

At roughly the same time, the free endpoint of the line is updated to the same position.

The result looks like this:

Fixed point → line → moving object

The graphics stay connected because the moving object’s position and the line’s endpoint use matching coordinates. This coordinate relationship is the central idea behind the exercise.

Understanding X and Y Coordinates

Graphics programs need a way to describe positions.

That is where coordinates come in.

The X coordinate normally represents horizontal position. Moving toward the right changes X.

The Y coordinate represents vertical position.

Together, X and Y identify a location on the drawing canvas.

For example:

(100, 150)

represents one point.

If the mouse later moves to:

(240, 210)

the program can use those new values to reposition an object.

Leash gives students a visual way to understand this. Instead of seeing coordinates as numbers in a lesson, they can watch those numbers affect something on the screen.

Mouse Events Make the Program Interactive

A normal beginner program may execute its instructions once and then finish.

Interactive graphics behave differently.

The program waits for an action.

The user moves the mouse.

That movement creates an event.

A function responds to the event and updates the graphics.

Then the program waits for the next movement.

This is known as event-driven programming.

The lesson immediately before Drawing Lines in the official CodeHS course is 9.6 Mouse Events: Mouse Moved, so Leash appears at a point where students are expected to start combining mouse input with graphical objects.

Why the Line Must Be Updated

A common beginner mistake is moving the circle but forgetting about the line.

Imagine that the circle moves from one side of the canvas to another.

If only the circle changes position, the line remains in its old location. The leash effect immediately breaks.

The moving endpoint therefore needs to follow the same coordinates as the moving object.

Conceptually, the process is:

Read mouse coordinates

↓

Move graphical object

↓

Move line endpoint

↓

Wait for next mouse event

It sounds simple once written out. Getting all three parts connected is the actual programming lesson.

Fixed Point vs Moving Endpoint

A line normally has two endpoints.

For this type of exercise, students need to understand that the two endpoints do not necessarily behave the same way.

One remains fixed.

The other changes.

That distinction matters. If both endpoints move to the mouse position, the line may collapse or behave differently from the intended leash effect.

If neither moves, the program remains static.

Thinking about each endpoint separately usually makes debugging much easier.

What Students Learn From the Exercise

The activity combines several basic programming ideas that students may previously have encountered separately.

Graphical Objects

Students work with visible objects rather than plain text output.

Coordinates

The program uses horizontal and vertical positions to decide where objects should appear.

Event Handling

Mouse movement triggers program behavior.

Object Updating

Objects do not have to remain where they were originally created. Their properties can change while the program is running.

Functions

A function can contain the actions that should occur whenever the mouse moves.

Relationships Between Objects

The circle and line are separate objects, yet they must behave as though they are connected.

These concepts later become useful in interactive applications, simple games, animations, and drawing tools.

Common Problems Students Face

Leash can look easy until the program runs.

One frequent issue is that the object appears but does not move. In that case, check whether the mouse-movement event is correctly connected to the function that updates the graphics.

Another problem is a moving circle with a stationary line. This usually means the object’s position is changing but the relevant line endpoint is not.

Sometimes the opposite occurs. The line responds, but the circle stays still.

Students may also accidentally recreate graphical objects every time the mouse moves. In many interactive programs, it is cleaner to create the required objects first and then update those existing objects when an event occurs.

Small mistakes matter here.

That is part of the lesson.

A Better Way to Approach the Task

Do not begin by trying to remember an entire block of code.

Break the problem into actions.

First, identify what needs to appear when the program starts.

Next, identify which part should remain fixed.

Then decide which object should follow the mouse.

After that, decide which line endpoint needs to follow the same coordinates.

Finally, connect those updates to a mouse-movement event.

This method is more useful than blindly copying a solution because the same reasoning can be reused in later programming exercises.

Why Understanding the Logic Matters

Searching for a finished answer may seem faster, but Leash introduces ideas that appear again in larger programs.

Mouse events can control:

• Drawing applications
• Menus
• Interactive buttons
• Drag-and-drop interfaces
• Simple games
• Character movement
• Visual simulations

Lines and coordinates also appear frequently in graphics work.

A student who understands why the line and object share coordinates will have an easier time with later exercises than someone who only remembers the final code.

Is 9.7.4 Leash a JavaScript Exercise?

Yes, in the CodeHS course structure verified here, Leash appears in Introduction to Computer Science in JavaScript (Golden). CodeHS lists it specifically as Exercise 9.7.4 inside the Drawing Lines lesson.

It should not be confused with an app version, product model, or dog-training rule when referring to this particular CodeHS search term.

Is the Exercise Difficult?

For a student who already understands mouse coordinates, it is fairly manageable.

The confusing part is usually not drawing the individual objects. The challenge is understanding how the pieces communicate.

The mouse provides coordinates.

The object uses them.

The line uses them too.

Once that relationship becomes clear, the exercise becomes much easier to reason about.

Final Thought

9.7.4 Leash is a short CodeHS exercise with a useful programming lesson behind it. Official CodeHS course pages place it under the Drawing Lines section after students have already been introduced to mouse-movement events.

Its main value is learning how user input can change multiple graphical objects at once. One position stays fixed, another follows the mouse, and the line connects them visually.

Understand that relationship first. The code becomes far easier afterward.

Frequently Asked Questions

What is 9.7.4 Leash?

It is a CodeHS JavaScript exercise listed under Lesson 9.7, Drawing Lines. Students work with interactive graphics and line behavior.

Is 9.7.4 Leash part of CodeHS?

Yes. CodeHS officially lists Exercise 9.7.4 Leash in its Introduction to Computer Science in JavaScript course.

What does the Leash exercise teach?

It helps students understand coordinates, graphical objects, mouse events, changing object positions, and updating line endpoints.

Why is the exercise called Leash?

The moving line visually resembles a leash because one side remains anchored while the opposite side follows a moving object.

What programming language does it use?

The verified version appears within CodeHS’s Introduction to Computer Science in JavaScript course.

Why does my line not follow the object?

The moving endpoint of the line may not be receiving the same updated coordinates as the object.

Why does the object not move?

Check whether the program is responding to mouse-movement events and whether the event coordinates are being used to update the object’s position.

Can this concept be used outside CodeHS?

Yes. Coordinate updates and event-driven graphics are common ideas in games, drawing interfaces, visual applications, and other interactive software.

Spy Magazine