[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit Feedback
  • Curriculum Extras
    • ๐Ÿ”ฎCurriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • ๐Ÿ”ฎUnit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • ๐ŸŽจ๐ŸŽจ Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • ๐Ÿ”ฎUnit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU2LA1 Mini Project: Make a Traffic Light ๐Ÿšฆ
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU2LA2 Mini Project: Light Switch Game
    • U2LA3.1: Key Presses && Nested Conditionals
    • ๐ŸŽจ๐ŸŽจ Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA5 Mini Project: Keyboard/Patatap
  • ๐ŸŽจ๐ŸŽจUnit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • ๐ŸŽจ๐ŸŽจ Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U5LA2 Mini Project: Build Your Own Challenge
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Overview & Teacher Feedback
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Blueprint Foundation Student Outcomes
  • Vocabulary
  • Planning Notes
  • Resources
  • Assessments
  • Do Now/Warm Up (~3-5 Minutes)
  • CodeWars Demo and Tutorial (~10-15 minutes)
  • Code Wars Challenges (~20 - 60 minutes)
  • Wrap Up
  • Extensions

Was this helpful?

  1. Unit 5: Functions & Abstraction

U5LA2.3: Functions with Purpose

How can I abstract processes for clarity and reuse?

Overview & Teacher Feedback

This lesson could, if necessary, be considered optional, as it does not build onto the p5.js library, but rather focuses on fundamental JavaScript skills in building functions. Time permitting, we strongly recommend you give it a go with students to stretch their logic muscles and give them a shot at something new!

All of the sample prompts come from a website called CodeWars where we recommend students practice their code (and submit answers to you by copy/pasting into a Google Form). If you cannot handle using another platform in your class, this could be all done in the p5 editor or any other IDE, but it would lack the benefit of having the sample testing for students to know if they were correct or not.

Objectives

Students will be able toโ€ฆ

  • Write algorithms to define a function given a prompt

  • Collaborate with peers to create algorithms

  • Test and edit their algorithms until a correct answer is reached

Suggested Duration

45 minutes - 90 minutes (1 - 2 class periods)

The time for this is dependent on how much you would like students to practice and dig into this content. One period is enough for them to solve 1 or 2 challenges, generally.

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.CT.5 Modify a function or procedure in a program to perform its computation in a different way over the same inputs, while preserving the result of the overall program.

9-12-CT.9 Systematically test and refine programs using a range of test cases, based on anticipating common errors and user behavior.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Blueprint Foundation Student Outcomes

Abstraction, Decomposition: Ideas, problems, or projects are broken down into component parts to set the stage for deeper analysis.

Abstraction, Pattern Recognition: Decomposed component parts are examined to find patterns like similarities, repetition, conditional relationships, or nested relationships.

Abstraction, Generalization and Detail Removal: Component parts are grouped by general characteristics, and unnecessary details filtered out.

Vocabulary

No new vocabulary words introduced in this lesson.

Planning Notes

Planning Notes
Materials Needed

This lesson uses a new platform - please familiarize yourself with it before the start of the lesson so you are aware of how it works on the student side of things!

CodeWars Worksheet (Digital)

Computers

Resources

Assessments

CodeWars Worksheet

Do Now/Warm Up (~3-5 Minutes)

Display on board: Functions are often used for repeated processes that may have many different inputs and slightly different outputs. Think about technology you use regularly - what is a repeated process that could be controlled by a procedural abstraction like a function? What are the inputs and outputs of this function? What is happening behind the scenes?

Offer a quick discussion before beginning the lesson

CodeWars Demo and Tutorial (~10-15 minutes)

Ask students to open up their copy of the CodeWars Functions Worksheet. They will need to make an account on CodeWars to start - I recommend doing this as a whole class. Many students will realize the error with the function is it is not returning any values, and can achieve a solution quickly and then create their account.

For students who may struggle, ask them to select the language - which is JavaScript - and then fix the issue in the puzzle they are given:

The solution just involves putting 'return' in front of a*b. (Or alternately, saving a*b to a variable and returning the variable.)

You will walk through the problem under โ€˜Whole Group Workโ€™ together as a code along. You will notice there are instructions on what the function should do, as well as space to code. They will all see at the start something like:

function updateLight(current) {

}

Model with students how to plan their code with comments, and then come to a solution together that should look something like this:

function updateLight(current) {
  
  if(current=="green"){
    return "yellow"
  }
  else if(current=="yellow"){
    return "red"
  }
  else if(current=="red"){
    return "green"
  }

}

Demonstrate that they can test their solution by hitting the 'test' button, which will call it which a bunch of different test cases to see if it works as intended. If it works as intended - all green checks - have them copy/paste their code over to the worksheet and then hit 'attempt.' This will use even more test cases to tell them if they passed or not, and then will direct them on to a congratulations page!

NB: They can retrieve their work after attempting and submitting, but itโ€™s just a slightly more annoying process of clicking around. They will get to see different solutions submitted by other programmers around the world, and there will be a small button where they can just see 'My Solutions.'

Students may be confused as to why they are coding on this platform. Make sure they understand that this is an IDE just like the p5.js editor, but it is specifically built with all of these test cases that we donโ€™t see. When you solve a problem and hit โ€˜attempt,โ€™ it runs those many, many tests to make sure your function works in all situations.

Code Wars Challenges (~20 - 60 minutes)

After completing the whole group activity, allow students to work with partners or a small group to try to complete as many of the challenge problems as possible. They can select the level they would like to work at and should be encouraged to skip around as needed. (EX: If mild feels very simple, instead of doing both, they should move up to medium.) You can determine the best structures to encourage collaborative work in your classroom!

This section can either last for one class or multiple, depending on how much time you would like to devote to these challenges.

Wrap Up

At the end of class, consider having students share a solution they are most proud of. Alternatively, you can ask student pairs/groups to create a poster of their prompt/solution (if printers are available) and ask them to answer the following:

  • Annotate your solution to explain your reasoning

  • What are you proud of in this problem?

  • What gave you trouble in this problem?

  • Can you think of any alternate solutions, or pieces of code that may be useful in an alternate solution?

Ask students to complete posters have completing a certain number of challenges and then complete a classroom gallery walk.

Extensions

This activity is leveled and self-scaffolding. For students who may race far ahead, ask them to explore CodeWars on their own and find other interesting challenges. For students struggling, encourage them to try writing pseudocode notes that you can look at even if they are not sure how to fully code a solution.

PreviousU5LA2.2: Functions that Return ValuesNextU5LA2.4: Functions with Boolean Returns

Last updated 3 years ago

Was this helpful?

(Google Doc)

CodeWars Worksheet
CodeWars Website
Select a language on the CodeWars website
Solve the simple puzzle