3.8.5 Click for Rectangles — CodeHS Python Graphics Exercise Explained

Stuck on 3.8.5 Click for Rectangles in CodeHS? This guide explains exactly how the exercise works, what each part of the solution does, and how mouse click event handlers work in Python graphics.

If you’re working through CodeHS Python programming exercises, you’ve made it to one of the more interesting early challenges: 3.8.5 Click for Rectangles. This exercise builds on graphics fundamentals by adding interactivity — instead of just drawing shapes, your program responds to mouse clicks.

The 3.8.5 click for rectangles exercise asks you to write a program that draws a new rectangle on the canvas wherever the user clicks. It sounds simple, but it introduces a key concept: event-driven programming. This post explains how the exercise works, what the solution code does line by line, and how to think about mouse click handlers in Python graphics.

What the Exercise Asks

The task for 3.8.5 click for rectangles is:

When the user clicks anywhere on the canvas, a rectangle appears at the click location
The rectangle should be a consistent size every time
The program continues waiting for more clicks and drawing more rectangles

This requires three things:

A Rectangle object from the graphics library
A function that places the rectangle at a given x, y position
A mouse click handler that connects clicks to that function

The Solution

Here’s the standard solution for this exercise:

python

RECT_HEIGHT = 50
RECT_WIDTH = 30

def draw_rectangle(x, y):
    rect = Rectangle(RECT_HEIGHT, RECT_WIDTH)
    rect.set_position(x, y)
    add(rect)

add_mouse_click_handler(draw_rectangle)

Let’s break down what each part does.

Breaking Down the Code

Constants: RECT_HEIGHT and RECT_WIDTH

python

RECT_HEIGHT = 50
RECT_WIDTH = 30

These define the dimensions of every rectangle that gets drawn. Using constants (all-caps variable names) is good practice because it makes the values easy to find and change. If you want bigger rectangles, you change one number here rather than hunting through the code.

In Python, constants are just regular variables by convention. The all-caps style signals to anyone reading the code: “this value isn’t meant to change during execution.”

The draw_rectangle Function

python

def draw_rectangle(x, y):
    rect = Rectangle(RECT_HEIGHT, RECT_WIDTH)
    rect.set_position(x, y)
    add(rect)

This function takes two parameters: x and y. These represent the coordinates where the click happened.

Inside the function:

Rectangle(RECT_HEIGHT, RECT_WIDTH) creates a new rectangle with the dimensions we defined
rect.set_position(x, y) moves it to the click location
add(rect) puts it on the canvas so it becomes visible

Every time this function runs, a fresh rectangle appears at the given coordinates. The function doesn’t know or care that it was triggered by a mouse click — it just draws a rectangle wherever it’s told.

The Event Handler

python

add_mouse_click_handler(draw_rectangle)

This is the key line. add_mouse_click_handler() is a CodeHS graphics library function that registers draw_rectangle as the function to call whenever the user clicks on the canvas.

When a click happens, the library automatically calls draw_rectangle(x, y) where x and y are the coordinates of the click. You don’t call draw_rectangle directly anywhere — the event system does it for you.

This is the core idea of event-driven programming: instead of a program that runs top to bottom and stops, the program sets up a listener and then waits for events (like clicks). When an event occurs, the associated function runs.

Why RECT_HEIGHT Goes First

You might notice that Rectangle(RECT_HEIGHT, RECT_WIDTH) puts height before width. This is just the parameter order the CodeHS library uses — Rectangle(height, width). If your rectangles look taller or wider than expected, try swapping the values to check which dimension is which in your version.

Different graphics libraries (Turtle, Tkinter, Pygame) have different conventions. The CodeHS Rectangle class follows its own order. Always check the library’s documentation or experiment when you’re unsure.

Understanding Event-Driven Programming

The 3.8.5 click for rectangles exercise is your first real taste of event-driven programming. In contrast to sequential code that runs from top to bottom, event-driven code:

Sets up event listeners (like add_mouse_click_handler)
Waits for events (mouse clicks, keyboard presses, timers)
Calls a registered function (called a callback or handler) when the event fires

This model powers almost everything interactive in programming — web applications, games, mobile apps, desktop GUIs. Understanding it at this early stage gives you a mental model that applies across many frameworks and languages.

In Python’s Turtle module (a similar graphics library), the equivalent concept uses turtle.onscreenclick() to register a click handler. In web development with JavaScript, you use addEventListener('click', handlerFunction). The concept is the same even though the syntax differs. This transferable thinking is exactly what early programming exercises are designed to teach, as explored in Levels of Software Testing on DataWider, which discusses how understanding foundational concepts scales to professional practice.

Common Mistakes on This Exercise

Forgetting add_mouse_click_handler: If you write the draw_rectangle function but forget to register it, the program runs but nothing happens when you click. The click handler line at the bottom is required.

Calling draw_rectangle directly: Some students write draw_rectangle(x, y) at the bottom and wonder why the program only draws one rectangle. The add_mouse_click_handler call is what creates the ongoing, repeating behavior.

Wrong parameter order in Rectangle: If rectangles appear but look wrong (too tall, too wide, or square when they shouldn’t be), check whether the library wants Rectangle(width, height) or Rectangle(height, width).

Variable names vs. constants: Some students lowercase the constants or put the values inline (Rectangle(50, 30)). Both work, but using named constants like RECT_HEIGHT makes your intent clearer and the code easier to adjust.

Extending the Exercise

Once you’ve got the basic version working, some good extensions to try:

Random colors: Import the random module and use rect.set_color(Color.random()) or similar to give each rectangle a different color.

Different sizes: Randomize the width or height within a range to get rectangles of varying sizes.

Count the rectangles: Keep a counter variable outside the function and print how many have been drawn after each click.

Clear on double-click: Set up a second handler that clears the canvas when a specific key is pressed.

These extensions push the same event-driven concepts further and deepen your understanding of how state persists between function calls. Python’s versatility in graphics and interactive programming is one of the reasons it’s a top choice for beginners. Python Programming Language Is Considered Better Than Other Languages on DataWider covers why.

Key Takeaways

The 3.8.5 click for rectangles exercise teaches three things:

How to create and position a Rectangle object using Rectangle(height, width) and set_position(x, y)
How to add objects to the canvas using add()
How event handlers work using add_mouse_click_handler() to connect mouse clicks to a function

The core solution:

python

RECT_HEIGHT = 50
RECT_WIDTH = 30

def draw_rectangle(x, y):
    rect = Rectangle(RECT_HEIGHT, RECT_WIDTH)
    rect.set_position(x, y)
    add(rect)

add_mouse_click_handler(draw_rectangle)

Every exercise in this track builds on the last one. Event-driven thinking you learn here will appear in game development, web apps, mobile apps, and virtually every interactive program you build going forward. What Is Performance Testing on DataWider shows how the concepts from interactive programming extend into how professional software is evaluated and tested.