ALEX Classroom Resource

  

Computer Science Principles Unit 5 Chapter 2 Lesson 17: Building an App: Canvas Painter

  Classroom Resource Information  

Title:

 Computer Science Principles Unit 5 Chapter 2 Lesson 17: Building an App: Canvas Painter

URL:

 https://curriculum.code.org/csp-18/unit5/17/

Content Source:

 Code.org
Type: Lesson/Unit Plan

Overview:

Students continue to practice working with arrays and are introduced to a new user interface element, the canvas. The canvas includes commands for drawing simple geometric shapes (circles, rectangles, lines) and also triggers mouse and key events like any other user interface element. Over the course of the lesson, students combine these features to make an app that allows a user to draw an image while recording every dot drawn on the canvas in an array. By processing this array in different ways, the app will allow students to redraw their image in different styles, like random, spray paint, and sketching. Along the way, students use their knowledge of functions with return values to make code which is easy to manage and reuse.

Students will be able to:
- programmatically control the canvas element in response to user interactions.
- maintain a dynamically generated array through the running of a program in order to record and reuse user input.
- use nested loops within a program to repeat a command on the same array index multiple times.
- perform variable arithmetic within an array index to access items in an array by their relative position.

Note: You will need to create a free account on code.org before you can view this resource.

Content Standard(s):
Digital Literacy and Computer Science
DLIT (2018)
Grade: 9-12
5) Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using current events.

Unpacked Content
Evidence Of Student Attainment:
Students will:
  • use digital tools to create content as it relates to current events.
  • seek feedback to revise computational artifacts.
Knowledge:
Students know:
  • how to design and develop computational artifacts for practical intent.
  • how to design and develop computational artifacts for personal expression.
  • how to design and develop computational artifacts to address a societal issue by using current events.
Skills:
Students are able to:
  • design and develop computational artifacts using an iterative design process.
  • use current events to bring merit to computational artifacts.
Understanding:
Students understand that:
  • design should be an iterative process whereby the designer seeks feedback to improve upon his/her creation.
Digital Literacy and Computer Science
DLIT (2018)
Grade: 9-12
6) Decompose problems into smaller components through systematic analysis, using constructs such as procedures, modules, and/or objects, with parameters, and which return a result.

Unpacked Content
Evidence Of Student Attainment:
Students will:
  • decompose a problem into smaller components.
  • abstract a process into simpler processes which one defines through programming.
Teacher Vocabulary:
  • parameters
  • procedures
  • modules
  • objects
  • control structures
Knowledge:
Students know:
  • removing unessential details can make a process simpler.
  • control structures can assist in programming decisions.
  • how to create a program that returns a result.
Skills:
Students are able to:
  • decompose a problem.
  • create a program that returns a result.
  • implement control structures.
Understanding:
Students understand that:
  • removing unessential details can make a process simpler.
  • control structures can assist in programming decisions.
Digital Literacy and Computer Science
DLIT (2018)
Grade: 9-12
7) Compare and contrast fundamental data structures and their uses.

Examples: Strings, lists, arrays, stacks, queues.

Unpacked Content
Evidence Of Student Attainment:
Students will:
  • compare and contrast fundamental data structures and their uses.
Teacher Vocabulary:
  • data structures
  • arrays
  • stacks
  • queues
  • list
  • strings
Knowledge:
Students know:
  • when to include varying types of data structures into a program to achieve a desired result.
Skills:
Students are able to:
  • compare and contrast fundamental data structures and their uses.
  • properly use varying types of data structures in a program to achieve a desired result.
Understanding:
Students understand that:
  • data structures organize data for ease of recall.
  • data structures differ by organization structure and purpose.
Digital Literacy and Computer Science
DLIT (2018)
Grade: 9-12
8) Demonstrate code reuse by creating programming solutions using libraries and Application Programming Interfaces.

Unpacked Content
Evidence Of Student Attainment:
Students will:
  • create code that includes commands and programs found in coding libraries or APIs.
Teacher Vocabulary:
  • code
  • programming languages
  • Application Programming Interfaces
Knowledge:
Students know:
  • how to design a programming application that reuses code from programming libraries and code created in previous applications.
Skills:
Students are able to:
  • reuse code from previous applications, code libraries, or APIs to reduce coding workload.
Understanding:
Students understand that:
  • reuse of code can be time
  • saving.
  • code may be written and shared in code libraries or may be accessible as an API.
Digital Literacy and Computer Science
DLIT (2018)
Grade: 9-12
9) Demonstrate the ability to verify the correctness of a program.

a. Develop and use a series of test cases to verify that a program performs according to its design specifications.

b. Collaborate in a code review process to identify correctness, efficiency, scalability and readability of program code.

Unpacked Content
Evidence Of Student Attainment:
Students will:
  • apply the problem
  • solving process to a program to verify the correctness of the program.
a.
  • develop test cases to verify the performance of a program.
  • apply test cases to verify the performance of a program.
b.
  • identify correctness of program code while collaborating in a code review process.
  • identify efficiency of program code while collaborating in a code review process.
  • identify scalability of program code while collaborating in a code review process.
  • identify readability of program code while collaborating in a code review process.
Teacher Vocabulary:
  • compile
  • program
  • syntax
Knowledge:
Students know:
  • proper syntax and formatting for a coding language.
  • how to identify coding errors in a programming language.
a.
  • programs must be tested to verify that the desired task is executed properly.
  • testing a program requires a scenario where you can easily verify that the result of the program is correct/accurate.
b.
  • a program can contain one of the following properties, but not be an appropriate program: correctness, efficiency, scalability and readability
  • it is important to have others review your code.
  • that to be a quality program, code must be correct, efficient, scalable and readable.
Skills:
Students are able to:
  • analyze code for proper syntax and formatting.
a.
  • create a test case with verifiable results.
  • execute a program with the created test case to verify program performance.
  • locate errors in programming by executing test cases.
b.
  • work with others to review their code for correctness, efficiency, scalability and readability.
Understanding:
Students understand that:
  • programming languages each have their own required formatting which must be adhered to for a program to run correctly.
  • errors in programming languages prevent the program from executing its task.
  • each language has its own syntax and method for identifying potential errors.
a.
  • code can be formatted correctly and a program can still produce unintended results.
  • a test case is vital to verifying that a program is executing a task as intended.
b.
  • to be a quality program, code must be correct, efficient, scalable and readable.
  • it is important to have others proofread your code.
Digital Literacy and Computer Science
DLIT (2018)
Grade: 9-12
10) Resolve or debug errors encountered during testing using iterative design process.

Examples: Test for infinite loops, check for bad input, check edge-cases.

Unpacked Content
Evidence Of Student Attainment:
Students will:
  • troubleshoot errors encountered during testing using an iterative design process.
  • resolve or debug errors encountered during testing using an iterative design process.
Teacher Vocabulary:
  • debug
Knowledge:
Students know:
  • steps of the problem solving process.
  • how to identify errors in an iterative design process.
Skills:
Students are able to:
  • review a process and identify errors in procedure.
  • rectify errors found in a process.
  • test resolution to verify that the process now runs as intended.
Understanding:
Students understand that:
  • errors in a process can prevent a solution.
  • resolving an error will allow the process to function as intended.
Digital Literacy and Computer Science
DLIT (2018)
Grade: 9-12
40) Use an iterative design process, including learning from mistakes, to gain a better understanding of a problem domain.

Unpacked Content
Evidence Of Student Attainment:
Students will:
  • create, publish, seek feedback on, and revise artifacts.
Knowledge:
Students know:
  • that creating an artifact is an iterative process.
  • that feedback serves to make products better.
  • that mistakes are teaching tools that help determine how not to solve a problem.
Skills:
Students are able to:
  • create and publish.
  • process constructive feedback.
  • persevere through mistakes.
Understanding:
Students understand that:
  • creating an artifact is an iterative process.
  • feedback serves to make products better.
  • mistakes are teaching tools that help determine how not to solve a problem.
Tags: app lab, array, canvas, element, function, index, key event, nested loop, programming, project, user interface
License Type: Custom Permission Type
See Terms: https://code.org/tos
For full descriptions of license types and a guide to usage, visit :
https://creativecommons.org/licenses
Accessibility
Comments
  This resource provided by:  
Author: Aimee Bates