Decomposition

Decomposition & Problem Solving

1
2
3
4
5
6

Breaking down complex tasks, games, and systems into smaller, manageable sub-problems to solve systematically.

Level 1

Simple Tasks

Break down daily routines and simple tasks into smaller sequential actions.

Learning objective

Deconstruct familiar everyday activities into individual component steps.

Let's Go!

Learn

Decomposition means breaking a big problem or task into smaller, easier steps. When making hot cocoa, you do not just get a drink instantlyโ€”you get a mug, heat milk, mix powder, and stir! Breaking tasks down makes them easier to understand and code.

Content

Unsupported content component

StandardContent

Try it yourself

Deconstruct a Routine

๐ŸŒŸ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)โ–พ

๐ŸŽฏ Task Success Criteria (Rubric)

Foundation

Identifies that a big task can be broken into parts with guidance.

Developing

Lists 2-3 individual steps needed to complete a daily routine.

Secure (Goal)

Accurately breaks down an everyday task into a complete sequence of sub-steps.

Mastery

Explains why missing a single sub-step breaks the overall task process.

๐Ÿ‘€ What A Good One Looks Like (WAGOLL)

Exemplar Standard

A top-tier student project for Simple Tasks includes:

  • Core Deliverable: Deconstruct a Routine
  • Target Quality: Accurately breaks down an everyday task into a complete sequence of sub-steps.
  • Excellence & Polish: Explains why missing a single sub-step breaks the overall task process.
๐Ÿ“
Save to Your Website Portfolio:

When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!

โญSelf-Assessment: How confident do you feel with this skill?

Reflect

How did breaking down the task help you understand how it works?

Low
High

Learning check

Learning Check

What does decomposition mean in computing?

Select the correct answer below:

Answer correctly to unlock the next level.

Great job! Decomposition breaks big tasks into manageable steps.Not quite. Decomposition is all about breaking big problems down.
Teacher setup, curriculum links and progress descriptors

Spark support

Routine: See Think Wonder

Achievement pathway

  • Foundation: Identifies that a big task can be broken into parts with guidance.
  • Developing: Lists 2-3 individual steps needed to complete a daily routine.
  • Secure: Accurately breaks down an everyday task into a complete sequence of sub-steps.
  • Mastering: Explains why missing a single sub-step breaks the overall task process.

Curriculum links

Curriculum strand: AP.01.B.1.1

Outcome: DCMP.01 โ€” Break down daily routines and simple tasks into smaller sequential actions.

PYP: Form ยท Complex activities are made of small, simple steps.

Learner profile: Inquirer

Competency tags

  • decomposition
  • problem-solving
  • everyday-tasks

Gate support

Accessibility alternative:

Teacher override: allow

Back to top

Locked level

Level 2: Picture Decomposition

Complete the previous learning check to unlock this next level.

Level 2

Picture Decomposition

Identify discrete visual and audio elements within a digital story or scene.

Learning objective

Separate a complex digital animation or story scene into individual backgrounds, characters, and sound effects.

Let's Go!

Learn

Digital projects look like one big picture, but coders decompose them into distinct parts: Backgrounds (where it happens), Sprites (who moves), and Sounds (what we hear). By breaking a scene down into these elements, you can code each part separately.

Content

Unsupported content component

StandardContent

Try it yourself

Scene Breakdown Challenge

๐ŸŒŸ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)โ–พ

๐ŸŽฏ Task Success Criteria (Rubric)

Foundation

Recognizes that a digital scene contains a background and a character.

Developing

Identifies separate sprites, background art, and sound effects in a digital project.

Secure (Goal)

Deconstructs an animated story scene into a full inventory of independent assets.

Mastery

Suggests how changing one sub-part (e.g. background) alters the scene without changing code for characters.

๐Ÿ‘€ What A Good One Looks Like (WAGOLL)

Exemplar Standard

A top-tier student project for Picture Decomposition includes:

  • Core Deliverable: Scene Breakdown Challenge
  • Target Quality: Deconstructs an animated story scene into a full inventory of independent assets.
  • Excellence & Polish: Suggests how changing one sub-part (e.g. background) alters the scene without changing code for characters.
๐Ÿ“
Save to Your Website Portfolio:

When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!

โญSelf-Assessment: How confident do you feel with this skill?

Reflect

Why is it helpful to separate background design from character movement?

Low
High

Learning check

Learning Check

If a cat meows in a park, which element is the Sprite?

Choose the decomposed parts of an animated scene:

Answer correctly to unlock the next level.

Correct! The cat is the individual sprite object.Think again! The cat is the character sprite in this scene.
Teacher setup, curriculum links and progress descriptors

Spark support

Routine: Zoom In

Achievement pathway

  • Foundation: Recognizes that a digital scene contains a background and a character.
  • Developing: Identifies separate sprites, background art, and sound effects in a digital project.
  • Secure: Deconstructs an animated story scene into a full inventory of independent assets.
  • Mastering: Suggests how changing one sub-part (e.g. background) alters the scene without changing code for characters.

Curriculum links

Curriculum strand: AP.01.B.1.1

Outcome: DCMP.02 โ€” Identify discrete visual and audio elements within a digital story or scene.

PYP: Function ยท Digital creations are built by combining separate visual and sound parts.

Learner profile: Communicator

Competency tags

  • scene-decomposition
  • sprites
  • backgrounds
  • sound-effects

Gate support

Accessibility alternative:

Teacher override: allow

Back to top

Locked level

Level 3: Game Sub-Tasks

Complete the previous learning check to unlock this next level.

Level 3

Game Sub-Tasks

Deconstruct simple computer games into distinct sub-problems (player movement, scoring, obstacles).

Learning objective

Break down a game concept into independent sub-tasks: player movement, score keeping, and collision rules.

Let's Go!

Diagram splitting a game screen into Player Controls, Score Counter, and Enemy AI.

Learn

Building a complete computer game can feel overwhelming! Experienced programmers decompose games into three key sub-problems: 1) Player Movement, 2) Obstacles & Enemies, and 3) Score & Win Conditions. Solving these one by one makes game development manageable.

Visual guide for Game Sub-Tasks

Content

Unsupported content component

StandardContent

Try it yourself

Deconstruct a Catch Game

๐ŸŒŸ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)โ–พ

๐ŸŽฏ Task Success Criteria (Rubric)

Foundation

Identifies that a game has player controls and a goal.

Developing

Lists key game mechanics like moving, dodging obstacles, and getting points.

Secure (Goal)

Deconstructs a full arcade game into clear sub-problems ready for independent coding.

Mastery

Evaluates how decomposing a game into sub-tasks allows team members to code different parts simultaneously.

๐Ÿ‘€ What A Good One Looks Like (WAGOLL)

๐Ÿ“
Save to Your Website Portfolio:

When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!

โญSelf-Assessment: How confident do you feel with this skill?

Reflect

Which sub-problem should you code first when building a new game?

Low
High

Learning check

Learning Check

Which of these is a decomposed sub-task of a basketball game?

Choose the best answer to continue.

Answer correctly to unlock the next level.

Spot on! The ball bounce is a core game mechanic sub-task.Not quite right yet. Try again.
Teacher setup, curriculum links and progress descriptors

Spark support

Routine: See Think Wonder

Achievement pathway

  • Foundation: Identifies that a game has player controls and a goal.
  • Developing: Lists key game mechanics like moving, dodging obstacles, and getting points.
  • Secure: Deconstructs a full arcade game into clear sub-problems ready for independent coding.
  • Mastering: Evaluates how decomposing a game into sub-tasks allows team members to code different parts simultaneously.

Curriculum links

Curriculum strand: AP.02.B.1.1

Outcome: DCMP.03 โ€” Deconstruct simple computer games into distinct sub-problems (player movement, scoring, obstacles).

PYP: Connection ยท Interactive games consist of distinct connected sub-systems working together.

Learner profile: Thinker

Competency tags

  • game-design
  • sub-problems
  • mechanics
  • scoring

Gate support

Accessibility alternative:

Teacher override: allow

Back to top

Locked level

Level 4: Modular Planning

Complete the previous learning check to unlock this next level.

Level 4

Modular Planning

Map out modular program structures before coding using task lists and sub-goal labels.

Learning objective

Plan a multi-step project by dividing it into independent modular components and assigning sub-goals.

Let's Go!

Comparison of one long messy script versus three clean modular scripts.

Learn

Modular design means organizing code into neat, self-contained sections called modules. Instead of writing one huge continuous script, coders build separate scripts for separate tasks (e.g. movement script, sound script, health bar script). This makes code easier to read, test, and update.

Visual guide for Modular Planning

Content

Unsupported content component

StandardContent

Try it yourself

Build a Modular Plan

๐ŸŒŸ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)โ–พ

๐ŸŽฏ Task Success Criteria (Rubric)

Foundation

Creates a simple list of tasks before starting to code.

Developing

Groups related tasks into functional modules (e.g. sound module, motion module).

Secure (Goal)

Constructs a comprehensive modular plan with clear sub-goal labels and independent test criteria.

Mastery

Reflects on how modular planning prevents code clutter and speeds up project completion.

๐Ÿ‘€ What A Good One Looks Like (WAGOLL)

๐Ÿ“
Save to Your Website Portfolio:

When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!

โญSelf-Assessment: How confident do you feel with this skill?

Reflect

How does modular design help when fixing bugs in a project?

Low
High

Learning check

Learning Check

Why do programmers break code into separate modular scripts?

Choose the best answer to continue.

Answer correctly to unlock the next level.

Correct! Modular scripts isolate feature logic for easier debugging.Not quite right yet. Try again.
Teacher setup, curriculum links and progress descriptors

Spark support

Routine: See Think Wonder

Achievement pathway

  • Foundation: Creates a simple list of tasks before starting to code.
  • Developing: Groups related tasks into functional modules (e.g. sound module, motion module).
  • Secure: Constructs a comprehensive modular plan with clear sub-goal labels and independent test criteria.
  • Mastering: Reflects on how modular planning prevents code clutter and speeds up project completion.

Curriculum links

Curriculum strand: AP.02.B.1.1

Outcome: DCMP.04 โ€” Map out modular program structures before coding using task lists and sub-goal labels.

PYP: Responsibility ยท Complex software projects require structured modular planning before code execution.

Learner profile: Principled

Competency tags

  • modular-design
  • task-breakdown
  • sub-goals
  • planning

Gate support

Accessibility alternative:

Teacher override: allow

Back to top

Locked level

Level 5: System Sub-Systems

Complete the previous learning check to unlock this next level.

Level 5

System Sub-Systems

Analyze multi-sprite interactive applications and identify shared vs isolated state interactions.

Learning objective

Deconstruct complex applications into parallel interactive subsystems and document their inputs and outputs.

Let's Go!

Architecture diagram showing User Interface, Data Storage, and Logic Engine sub-systems.

Learn

Large software systems (like smartphone OSs or online games) consist of multiple sub-systems running in parallel. System decomposition analyzes how these sub-systems interact: what inputs they take, what outputs they generate, and how they share state data without interfering with one another.

Visual guide for System Sub-Systems

Content

Unsupported content component

StandardContent

Try it yourself

Deconstruct a Quiz System

๐ŸŒŸ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)โ–พ

๐ŸŽฏ Task Success Criteria (Rubric)

Foundation

Identifies that different sprites interact with each other in a project.

Developing

Maps out which sprites send signals and which sprites respond to those signals.

Secure (Goal)

Deconstructs a complex system into parallel subsystems, detailing shared state variables and message interfaces.

Mastery

Critiques system architectures to optimize decoupling between sub-components.

๐Ÿ‘€ What A Good One Looks Like (WAGOLL)

๐Ÿ“
Save to Your Website Portfolio:

When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!

โญSelf-Assessment: How confident do you feel with this skill?

Reflect

What is the interface between two decomposed sub-systems?

Low
High

Learning check

Learning Check

In a decomposed quiz app, which data is shared between the Timer and Score sub-systems?

Choose the best answer to continue.

Answer correctly to unlock the next level.

Bingo! Game State lets the Timer inform the Score sub-system to halt.Not quite right yet. Try again.
Teacher setup, curriculum links and progress descriptors

Spark support

Routine: Zoom In

Achievement pathway

  • Foundation: Identifies that different sprites interact with each other in a project.
  • Developing: Maps out which sprites send signals and which sprites respond to those signals.
  • Secure: Deconstructs a complex system into parallel subsystems, detailing shared state variables and message interfaces.
  • Mastering: Critiques system architectures to optimize decoupling between sub-components.

Curriculum links

Curriculum strand: AP.03.B.1.1

Outcome: DCMP.05 โ€” Analyze multi-sprite interactive applications and identify shared vs isolated state interactions.

PYP: Perspective ยท Analyzing complex systems reveals how independent sub-components communicate and share state.

Learner profile: Knowledgeable

Competency tags

  • system-decomposition
  • parallel-tasks
  • interface-design
  • state

Gate support

Accessibility alternative:

Teacher override: allow

Back to top

Locked level

Level 6: Architectural Breakdown

Complete the previous learning check to unlock this next level.

Level 6

Architectural Breakdown

Apply top-down functional decomposition to design scalable software architectures and procedural modules.

Learning objective

Apply top-down design methodology to decompose a large software application into modular, reusable procedural abstractions.

Let's Go!

Hierarchy tree diagram illustrating Top-Level Goal down to Sub-Functions and Helper Blocks.

Learn

Top-Down Design is an engineering method where you start at the highest abstraction level (the overall system goal) and recursively break it down into lower-level functional modules until each piece performs a single, specific task. This approach creates clean, reusable custom blocks and scalable software architecture.

Visual guide for Architectural Breakdown

Content

Unsupported content component

StandardContent

Try it yourself

Architect a Simulation App

๐ŸŒŸ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)โ–พ

๐ŸŽฏ Task Success Criteria (Rubric)

Foundation

Understands top-down design as starting from the big picture down to details.

Developing

Decomposes a complex program into high-level functions and sub-functions.

Secure (Goal)

Executes a full top-down functional decomposition, producing reusable custom procedures and clear architectural diagrams.

Mastery

Evaluates architectural trade-offs between monolithic and highly decomposed modular software designs.

๐Ÿ‘€ What A Good One Looks Like (WAGOLL)

๐Ÿ“
Save to Your Website Portfolio:

When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!

โญSelf-Assessment: How confident do you feel with this skill?

Reflect

What is the main advantage of top-down functional decomposition?

Low
High

Learning check

Learning Check

What characterizes top-down architectural design in computer science?

Choose the best answer to continue.

Answer correctly to complete this strand.

Excellent! Top-down design structures high-level goals into modular functions.Not quite right yet. Try again.
Teacher setup, curriculum links and progress descriptors

Spark support

Routine: See Think Wonder

Achievement pathway

  • Foundation: Understands top-down design as starting from the big picture down to details.
  • Developing: Decomposes a complex program into high-level functions and sub-functions.
  • Secure: Executes a full top-down functional decomposition, producing reusable custom procedures and clear architectural diagrams.
  • Mastering: Evaluates architectural trade-offs between monolithic and highly decomposed modular software designs.

Curriculum links

Curriculum strand: AP.03.B.1.1

Outcome: DCMP.06 โ€” Apply top-down functional decomposition to design scalable software architectures and procedural modules.

PYP: Reflection ยท Top-down architectural design enables developers to solve large computational problems systematically.

Learner profile: Reflective

Competency tags

  • top-down-design
  • system-architecture
  • procedural-abstraction
  • scalability

Gate support

Accessibility alternative:

Teacher override: allow

๐ŸŽ’ Students Home โ†’

Install App for Classroom

One-click fullscreen learning for Chromebooks, iPads & PCs

๐Ÿ–ฅ๏ธ
Distraction-FreeFullscreen window without browser tabs or search clutter.
โšก
1-Tap LaunchPin directly to the Chromebook shelf, iPad dock, or Windows taskbar.
๐Ÿ“ถ
Classroom SpeedInstant cached loads for lessons and simulators even on school Wi-Fi.
๐Ÿ”’
Safe & Ad-Free100% free, private, and no app store logins or passwords needed.
  1. 1
    Click the Install button

    In your browser, look at the right end of the top web address bar for the ๐Ÿ’ป Install or โค“ icon.

  2. 2
    Confirm "Install"

    A popup will ask if you want to install "Ed Tech Hub". Click Install.

  3. 3
    Pin to your Shelf

    Right-click (or two-finger tap) the app icon in your Chromebook bottom shelf and select "Pin"!