Computer Science · Grade 9

Active learning ideas

Graphical User Interfaces (GUIs)

Active learning works because GUIs are inherently interactive. Students need to build and test visual interfaces to understand how input and output connect through code. Hands-on creation helps them move beyond abstract concepts to concrete, functional designs.

• Ontario Curriculum Expectations
• CS.HS.AP.15
• CS.HS.CT.16

• 25–45 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Project-Based Learning
• 30 min · Pairs

Pair Programming: Event Button GUI

Pairs sketch a simple window with two buttons on paper first. They code one button to display a greeting message and the other to change background color on click. Test and swap roles for debugging.

Analyze the components of a basic graphical user interface.

Facilitation Tip

During Pair Programming, circulate and listen for students discussing how the event handler connects the button click to the program's logic.

What to look for

Provide students with a screenshot of a common application interface (e.g., a simple calculator app). Ask them to list at least three GUI widgets they identify and briefly describe the function of each. Then, ask them to identify one potential accessibility improvement for the interface.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 02

• Project-Based Learning
• 45 min · Small Groups

Small Groups: Login Form Builder

Groups create a GUI login screen with username and password fields that validate input and show error messages for mismatches. Share prototypes via screen share. Test each group's form for usability issues.

Design a simple GUI application that responds to user interactions.

Facilitation Tip

When groups build a Login Form Builder, encourage them to test each other's forms for clarity and functionality before finalizing their designs.

What to look for

Students work in pairs to build a simple GUI. After completing a basic version, they swap their code and run the application. Each student acts as a 'tester' for their partner's GUI, providing feedback on: 1. Does the GUI respond as expected to user input? 2. Is the layout clear and easy to understand? 3. Are there any visual elements that could be confusing or inaccessible?

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 03

• Project-Based Learning
• 25 min · Whole Class

Whole Class: Accessibility Critique Walk

Students run their GUIs on classroom devices and post screenshots with code snippets. Class members rotate, noting accessibility strengths like font size and navigation. Discuss findings as a group.

Evaluate the user-friendliness and accessibility of a given GUI design.

Facilitation Tip

For the Accessibility Critique Walk, provide a checklist of inclusive design principles to guide students' observations and feedback.

What to look for

During a lesson on event handling, pause and ask students to write down on a sticky note: 'What is one user action that triggers an event in a GUI, and what is one way a program might respond to that event?' Collect and quickly review the notes to gauge understanding.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 04

• Project-Based Learning
• 35 min · Individual

Individual: Personal App Redesign

Each student selects a familiar app, identifies one usability flaw, and codes a redesigned GUI feature like an improved menu. Present briefly to pairs for quick feedback.

Analyze the components of a basic graphical user interface.

Facilitation Tip

When students redesign a Personal App, ask them to write a short reflection on why they changed certain elements and how those changes improve usability.

What to look for

Provide students with a screenshot of a common application interface (e.g., a simple calculator app). Ask them to list at least three GUI widgets they identify and briefly describe the function of each. Then, ask them to identify one potential accessibility improvement for the interface.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

A few notes on teaching this unit

Teach this topic by having students build small, iterative projects rather than large, monolithic ones. Focus on the relationship between visual elements and their underlying code, using debugging as a tool to reinforce learning. Avoid starting with complex layouts; begin with simple forms that clearly connect user actions to visual feedback.

Successful learning looks like students confidently building functional GUIs that respond to events, justifying their design choices with usability and accessibility in mind. They should explain how event handlers link user actions to program logic.

---

Watch Out for These Misconceptions

• During Pair Programming: Event Button GUI, students think GUIs are just static images with no code behind them.

  Ask pairs to trace the flow of a button click from the visual element to the event handler in their code. Have them add a print statement to the handler to observe the response in real time.

• During Small Groups: Login Form Builder, students believe fancy graphics make a GUI effective.

  Encourage groups to test each other's forms using a rubric focused on clarity and usability. Challenge them to remove all decorative elements to see how minimal designs perform.

• During Whole Class: Accessibility Critique Walk, students view accessibility features as unnecessary complications.

  Provide roles for students to simulate different user needs, such as screen reader users or keyboard-only navigators. Ask them to identify barriers in their own forms and brainstorm inclusive solutions together.

---

Methods used in this brief

• Project-Based Learning