Introduction
The 9.7.4 Leash exercise is a programming activity found in CodeHS’s JavaScript curriculum. It belongs to the Drawing Lines section, where students learn how to create graphics and work with lines in JavaScript. The official CodeHS course outline lists “Exercise 9.7.4 Leash” as part of Lesson 9.7, Drawing Lines.
For students who are learning programming for the first time, this exercise provides an opportunity to explore how graphical objects and lines can be used together in an interactive program. Instead of working only with text and numbers, students can see how code affects objects displayed on a graphics canvas.
The word “leash” describes the idea behind the exercise: a visual connection between graphical elements. Understanding this relationship can help students develop a better understanding of coordinates, object positioning, mouse interaction, and event-driven programming.
This guide explains what 9.7.4 Leash is, how the underlying programming concepts work, common problems students may encounter, and how to approach the exercise without relying entirely on a ready-made solution.
What Is 9.7.4 Leash in CodeHS?
9.7.4 Leash is an exercise in the JavaScript and graphics curriculum offered by CodeHS, an educational platform used to teach computer science and programming.
In the Introduction to Computer Science in JavaScript course, the exercise appears under Lesson 9.7, which focuses on drawing lines. The official course outline places it alongside activities that introduce students to line drawing and related graphics concepts.
The exercise is designed around a visual programming task. Third-party explanations commonly describe a graphical object connected to another point by a line, with mouse movement used to change the displayed position. However, the exact instructions and expected implementation should always be checked in the student’s own CodeHS assignment.
The number 9.7.4 identifies the exercise’s position within a particular course structure. It is not a JavaScript version number, a physical leash measurement, or a universal programming standard.
CodeHS offers different courses and curriculum versions, so the same or a similar exercise may appear under a different number in another course.
What Does the Number 9.7.4 Mean?
The number becomes easier to understand when considered alongside the official course structure.
- 9: Identifies the broader unit or section in the relevant course.
- 7: Identifies the lesson focused on drawing lines.
- 4: Identifies the exercise within that lesson.
This is a useful way to locate the activity in the course outline, although numbering conventions may vary between CodeHS courses.
The official Introduction to Computer Science in JavaScript outline lists other activities in the same lesson, including examples and a drawing-lines quiz. It then identifies Leash as the fourth numbered activity.
Students should therefore check their own course title and assignment instructions before using an online guide. A tutorial may describe a similar exercise but still use different requirements or graphics functions.
How Does the Leash Exercise Work?
The general concept behind a graphical leash is a line connecting two positions on a screen. One position may remain fixed while the other changes as the user moves the mouse.
For example, imagine a circle displayed on a graphics canvas and a line connecting it to a fixed point. When the circle changes position, the line must also update to preserve the visual connection.
This kind of task involves several basic programming ideas.
1. Creating Graphical Objects
A graphics program can create shapes such as circles and lines. Each object has properties that determine how it appears on the canvas.
Depending on the CodeHS graphics library used by the assignment, a circle may be created using a Circle object, while a line may be created using a Line object.
The exact functions and parameters should match the instructions provided in the student’s course.
2. Working With Coordinates
A graphics canvas uses coordinates to determine where objects appear.
The horizontal position is represented by an X-coordinate, while the vertical position is represented by a Y-coordinate.
When an object moves, its coordinates change. If a line connects that object to another point, the relevant endpoint may also need to change.
Understanding this relationship is important because even a small coordinate error can cause a line or shape to appear in an unexpected location.
3. Responding to Mouse Movement
Interactive graphics programs can respond to user input. Mouse events allow a program to detect actions such as moving or clicking the pointer.
In a leash-style activity, mouse movement can be used to update the position of a graphical object or the endpoint of a line.
CodeHS teaches mouse events in a separate lesson before the Drawing Lines lesson in its JavaScript course outline. This provides useful context for understanding how the skills may work together in the exercise.
4. Updating the Display
Creating a graphical object is only part of the task. An interactive program must also update the relevant properties when the user performs an action.
For example, if a circle moves but the line remains at its original coordinates, the connection between the two objects may no longer look correct.
The program must update the appropriate objects consistently so that the displayed result matches the intended behaviour.
Programming Concepts You Can Learn From 9.7.4 Leash
Although the exercise is relatively small, it can help reinforce several foundational concepts.
Coordinate-Based Positioning
Coordinates are fundamental to computer graphics. They determine where shapes, lines, and other elements appear.
By experimenting with X and Y values, students can learn how moving an object horizontally differs from moving it vertically.
These concepts are also useful when creating simple games, animations, interactive diagrams, and user interfaces.
Objects and Their Properties
Graphical objects have properties that can be changed after creation. Depending on the library, these properties may include position, size, colour, and line endpoints.
Learning how to update an existing object helps students understand that a program can change what is displayed without necessarily recreating every element.
Event-Driven Programming
In event-driven programming, certain functions run in response to actions or events.
A mouse-movement handler, for example, can respond when the pointer moves across the canvas. This makes it possible to create interactive applications rather than static drawings.
Students can apply the same concept to buttons, keyboard input, drag-and-drop interfaces, and simple games.
Logical Problem-Solving
The exercise also encourages students to break a visual task into smaller steps.
Instead of trying to build the entire program at once, they can first create the objects, confirm their initial positions, and then implement the interaction.
This makes errors easier to identify and helps students understand why each part of the program is necessary.
Common Problems With the 9.7.4 Leash Exercise
Students learning JavaScript graphics may encounter several common implementation problems. The following checks can help identify the source of an issue.
The Shape Does Not Move
If a graphical object remains stationary, check whether the event handler has been registered correctly and whether the movement function actually updates the object’s position.
Also verify that the program is using the mouse coordinates supplied by the correct event.
A function that runs only once during initialisation will not automatically respond to later mouse movement unless the required event handling has been set up.
The Line Does Not Follow the Object
A line may remain in its original position if its endpoint is never updated.
Check which coordinates define the line’s starting point and endpoint. If the assignment requires one endpoint to follow an object, make sure the relevant values change when the object moves.
The precise method for updating a line depends on the graphics library and the instructions used in the course.
The Objects Appear in the Wrong Position
Incorrect X- or Y-coordinates can place an object outside the expected area or make the line appear disconnected.
Check the initial coordinates and compare them with the canvas dimensions. If the task specifies a particular starting point, follow that requirement rather than choosing arbitrary values.
It can also help to test one object at a time before adding more complicated interactions.
The Program Produces an Error
Syntax mistakes, incorrect function names, missing parentheses, and inconsistent variable names can prevent a program from running.
Read the error message carefully and examine the lines around the reported location. Confirm that the methods being used are supported by the version of the CodeHS graphics environment assigned to the course.
If the code runs but the result is incorrect, the issue may be logical rather than syntactical. In that case, inspect how coordinates and object properties are being updated.
The Solution Works Differently From an Online Example
Online examples may use a different course version or graphics library. They may also implement a similar activity with different starting coordinates or object requirements.
Compare the example with the instructions in your own assignment. Matching the official task requirements is more important than copying code from a tutorial that happens to use the same exercise name.
How to Approach 9.7.4 Leash Step by Step
A structured workflow makes the exercise easier to understand and debug.
Step 1: Read the assignment carefully.
Identify which objects must be drawn, where they should begin, and what should happen when the mouse moves. Do not assume the requirements based on the exercise name alone.
Step 2: Create the required objects.
Follow the assignment’s instructions to create the necessary graphical shapes and add them to the canvas.
Step 3: Check the initial positions.
Run the program and confirm that the shapes appear where expected before adding interactive behaviour.
Step 4: Implement the required event handling.
If the task uses mouse movement, connect the appropriate event handler and ensure that it receives the correct coordinates.
Step 5: Update the relevant properties.
Change the object’s position or line endpoint according to the assignment requirements. Avoid updating unrelated properties unless the task calls for it.
Step 6: Test the interaction.
Move the mouse around the canvas and observe how the objects respond. Check whether the result matches the intended behaviour.
Step 7: Fix errors and retest.
Make one change at a time, rerun the program, and confirm that the change fixes the problem without introducing another one.
This approach develops problem-solving skills and provides a clearer understanding of how the final program works.
Is 9.7.4 Leash Difficult for Beginners?
The exercise can be challenging for students who are encountering graphics programming and mouse events for the first time.
The difficulty often comes from combining several concepts: creating objects, positioning them with coordinates, responding to mouse movement, and updating the display.
Once these ideas are understood separately, the overall task becomes easier to reason about.
Students who struggle should revisit the relevant Drawing Lines and Mouse Events lessons in their CodeHS course. The official course outline places these topics in nearby lessons, which can help learners identify the material they need to review.
Rather than memorising a solution, students should aim to understand what each object represents, which coordinates change, and when the program responds to user input.
Frequently Asked Questions About 9.7.4 Leash
What is 9.7.4 Leash?
9.7.4 Leash is a CodeHS JavaScript programming exercise listed in the Drawing Lines lesson of certain Introduction to Computer Science in JavaScript courses.
What does 9.7.4 mean?
In the relevant course outline, the number identifies the exercise’s position within the course structure. It is listed as Exercise 9.7.4 under Lesson 9.7, Drawing Lines.
Which programming language does the exercise use?
The exercise appears in CodeHS’s Introduction to Computer Science in JavaScript curriculum. Students should check their own assignment in case they are using a different course or curriculum version.
What programming skills does the exercise develop?
The relevant skills include drawing lines, working with coordinates, manipulating graphical objects, and understanding interactive behaviour. The exact requirements depend on the assigned version of the exercise.
Why is the exercise called Leash?
The name suggests a visual connection between graphical elements. Third-party explanations commonly describe a line connecting an object to another point on the canvas, but students should confirm the exact expected behaviour in their own assignment.
Why does my leash program not work?
Possible causes include incorrect coordinates, a missing event handler, an incorrect line endpoint, or a method that does not match the graphics library. Check the assignment instructions and test the program one part at a time.
Is there one solution that works for every CodeHS course?
Not necessarily. CodeHS provides multiple courses and curriculum versions, and similarly named exercises may have different requirements. The official instructions in the student’s assigned course should take priority over a general online explanation.
Where can students find the official exercise?
Students can use their CodeHS course dashboard. The public course outline for Introduction to Computer Science in JavaScript also lists Exercise 9.7.4 Leash under Drawing Lines.
Conclusion
The 9.7.4 Leash exercise is part of CodeHS’s JavaScript graphics curriculum and appears in the Drawing Lines lesson of the relevant course outline. It provides a useful context for learning about graphical objects, coordinates, lines, and interactive programming.
The key to understanding the task is to break it into smaller steps: identify the required objects, establish their positions, implement the expected interaction, and test the result.
Students should also remember that the exact requirements may differ across CodeHS courses. Using the correct course instructions, testing changes carefully, and understanding the purpose of each part of the program are more reliable strategies than copying an unrelated online solution.
By approaching the exercise methodically, beginners can strengthen their JavaScript graphics skills and prepare for more advanced interactive programs.
References
- CodeHS, Introduction to Computer Science in JavaScript — Course Outline: https://codehs.com/course/introjs_golden/outline2
- CodeHS, Lesson 9.7: Drawing Lines: https://codehs.com/course/1/explore/module/3/lesson/19346
- CodeHS, Introduction to Computer Science in JavaScript — Animation and Games: https://codehs.com/course/1/module/3
