Please enable JavaScript to use CodeHS

Computer Science Explorations 2

Description

In this lesson, students will be introduced to Karel the dog and commands Karel uses to navigate and interact with Karel’s world. This introductory lesson can be used as a review of concepts introduced in Karel Adventures modules.

Objective

Students will be able to:

  • Identify basic syntax used in JavaScript and Karel programs
  • Use basic commands to train or program Karel the dog
  • Debug basic code by identifying common syntax errors
Description

In this lesson, students learn more about Karel and Karel’s world. Students learn about walls/shelves in Karel’s world, the directions Karel can face, and how to identify a location in Karel’s world using rows and columns. Students will also begin solving more difficult Karel problems and situations.

Objective

Students will be able to…

  • Identify the direction that Karel is facing
  • Predict what direction Karel will be facing after executing a series of commands
  • Create basic programs to solve situations or problems in Karel’s world
Description

In this lesson, students will learn how they can create their own commands for Karel by calling and defining functions. Functions allow programmers to create and reuse new commands that make code more readable and scalable.

Objective

Students will be able to:

  • Define a function, and successfully implement functions in their code.
  • Create functions to teach Karel new commands
Description

In this lesson, students learn in more detail about functions and how to use functions to break down their programs into smaller pieces. Students will also learn about using the main function and commenting code to make it easier to understand.

Objective

Students will be able to:

  • Explain the difference between defining and calling a function
  • Utilize functions to write higher level Karel programs
  • Break a large problem down into smaller, simpler problems
  • Create clear and readable comments in their code that help the reader understand the code
Description

In this lesson, students learn how to use for loops in their programs. The for loop allows students to repeat a specific part of code a fixed number of times.

For loops are written like this:

for(let i = 0; i < 4; i++)
{
    // Code to be repeated 4 times
}
Objective

Students will be able to:

  • Create for loops to repeat code a fixed number of times
  • Explain when a for loop should be a used
  • Utilize for loops to write programs that would be difficult / impossible without loops
Description

In this lesson, students learn about the conditional statement “if”. Code within an “if statement” will only execute IF the condition is true.

if (frontIsClear()) {
    // Code to be executed only if front is clear
}
Objective

Students will be able to:

  • Use conditions to gather information about Karel’s world (is the front clear, is Karel facing north, etc)
  • Create if statements that only execute code if a certain condition is true
Description

In this lesson, students learn about an additional control structure, if/else statements. If/else statements let students do one thing if a condition is true, and something else otherwise.

if/else statements are written like this:

if (frontIsClear()) {
      // code to execute if front is clear
 } else {
      // code to execute otherwise
}
Objective

Students will be able to:

  • Explain the purpose of an If/Else statement
  • Create If/Else statements to solve new types of problems
  • Identify when it is appropriate to use an If/Else statement
Description

In this lesson, students are introduced a new type of loop: while loops. While loops allow Karel to repeat code while a certain condition is true. While loops allow students to create general solutions to problems that will work on multiple Karel worlds, rather than just one.

Objective

Students will be able to:

  • Explain the purpose of a while loop
  • Create while loops to repeat code while a condition is true
  • Utilize while loops to solve new types of problems
  • Test their solutions on different Karel worlds
Description

In this lesson, students will synthesize all of the skills and concepts learned in the Karel module to solve increasingly challenging Karel puzzles.

Objective

Students will be able to:

  • Define a problem in their own words and plan out a solution to the problem
  • Break a large problem down into smaller pieces and solve each of the pieces, then use these solutions as building blocks to solve the larger problem
  • Utilize the proper control structures to create general solutions that solve multiple Karel worlds
  • Write clear and readable code using control structures, functions, decomposition, and comments
Description

In this lesson, students review the module’s content with a 15 question Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of basic coding concepts with Karel through a multiple choice quiz
Description

In this lesson, students will be introduced to the basic concepts and components of the internet, including its history and the meaning of protocols. Students will discuss internet innovations and reflect on how the internet is used in their everyday lives.

Objective

Students will be able to:

  • Understand the basic concepts of the internet
  • Understand networks and how they are connected
  • Understand that a protocol is an agreed-upon method of communication
Description

In this lesson, students will explore the importance of protocols and relate how they use them in their lives.

Objective

Students will be able to:

  • Discuss the necessity of protocols
  • Explain how protocols help with communication
Description

In this lesson, students are presented with different ways that the Internet impacts their lives. The Internet affects the way that people communicate (emails, social media, video chat) and collaborate to solve problems.

Objective

Students will be able to:

  • Analyze the different ways that the Internet impacts their lives by learning about how the Internet contributes to collaboration, communication, etc
  • Evaluate whether the Internet has a more positive or negative effect on their community by citing examples from the lesson
  • Explain what the digital divide is and articulate their own opinions related to it
Description

In this lesson, students will learn what is meant by cybersecurity and explore a few news worthy cyber attacks. They will also discuss the Internet of Things and the increase in connected devices.

Cybersecurity is the protection of computer systems, networks, and data from digital attacks. Increased connectivity via the Internet of Things and reliance on computer devices to send and store data makes users more vulnerable to cyber attacks.

Objective

Students will be able to:

  • Define cybersecurity and its impact
  • Determine the types of personal information and digital resources that need to be protected
  • Describe trade-offs of implementing specific security safeguards
  • Describe how the Internet of Things makes people more vulnerable to cyber attacks
Description

In this lesson, students will learn about The CIA Triad. The CIA Triad is a widely-accepted security measure that should be guaranteed in every secure system. It stands for Confidentiality, Integrity, and Availability.

  • Confidentiality is the protection of information from people who are not authorized to view it.
  • Integrity aims at ensuring that information is protected from unauthorized or unintentional alteration.
  • Availability is the assurance that systems and data are accessible by authorized users when and where needed.
Objective

Students will be able to:

  • Identify what the CIA triad is and how it relates to cybersecurity
  • Identify which part of the CIA triad has been broken in a given scenario
Description

In this lesson, students will learn how basic encryption and decryption works. There is a need for secrecy when sending and receiving personal information. Encryption and decryption are used to protect personal information.

Objective

Students will be able to:

  • Explain the need for encryption and how basic encryption and decryption works
  • Relate encryption with how it affects the CIA Triad
  • Describe the limitations of cryptographic methods.
Description

In this project, students will learn about steganography and how it is used to encrypt data. Students will develop their own encryption algorithm to hide a message in an image by manipulating the hexadecimal color codes of an image.

Objective

Students will be able to:

  • Define steganography and explain how it is used in cryptography
  • Use steganography to encrypt a message in an image by manipulating the hexadecimal color code of pixels
Description

In this lesson, students complete a summative assessment of the module’s learning objectives.

Description

In this lesson, students will be introduced to HTML: the language for building web pages. Students will discover why HTML is important and how it works in order to start building their own web pages.

Objective

Students will be able to:

  • Identify the purpose and applications of HTML
  • Create their first simple web page
Description

In this lesson student upgrade from simple tags to full HTML documents. Students learn some new tags that let them put information in different places on the web page, and they learn about the nested tree structure of an HTML document.

Objective

Students will be able to:

  • Discern the various parts of an HTML page
  • Create fully formed HTML pages
Description

In this lesson, students learn about formatting tags that let them modify the appearance of text and make their web pages look clear and aesthetically pleasing.

Objective

Students will be able to:

  • Apply formatting tags in order to modify the appearance of text and make web pages look clear and aesthetically pleasing
Description

In this lesson, students learn how to add hyperlinks to their web pages using the <a> tag.

Objective

Students will be able to:

  • Add and utilize hyperlinks on their webpages
Description

In this lesson, students learn how to add images to their own web pages using the <img> tag.

Objective

Students will be able to:

  • Embed an image in HTML
  • Size images appropriately on the webpage
Description

In this lesson, students learn how to add lists to their web pages and practice making different kinds of lists.

Objective

Students will be able to:

  • Incorporate different kinds of lists to their web pages
  • Understand the differences between unordered lists and ordered lists.
Description

In this lesson, students will use HTML styling to make their pages visually appealing and unique.

Objective

Students will be able to:

  • Understand how to apply styling to HTML tags
  • Apply HTML styling to make their web pages more visually appealing and unique
Description

In this lesson, students will be introduced to CSS to add styling to their HTML pages.

Objective

Students will be able to:

  • explain the relationship between CSS and HTML
  • apply basic CSS style to a webpage using the style tag
Description

In this lesson, students will complete their homepage by adding style and any other content they may want to include.

Objective

Students will be able to:

  • Apply styling rules to existing webpage content
  • Design and implement a webpage about themselves
Description

In this lesson, students complete a summative assessment of the unit’s learning objectives.

Objective

Students will be able to:

  • Prove their knowledge of the basic HTML through a multiple choice quiz
Description

In this lesson, students learn how to create a canvas inside of the setup() function and learn its coordinate system. Students will also learn how to draw basic shapes in the draw() function loop.

Objective

Students will be able to:

  • Bridge connections between computation and creative expression
  • Explore the p5.js reference guide and example projects
  • Understand the HTML5 canvas and coordinate system
  • Differentiate the function of setup() and draw()
  • Set the size of the canvas: createCanvas()
  • Use p5 shape-drawing functions for primitive shapes (ellipse, rect, line)
  • Call and pass parameters to functions
Description

In this lesson, students customize the background color, fill color, and stoke color using string, greyscale, and RGB color values. Using their own and provided color palettes, students add color to provided p5.js sketches.

Objective

Students will be able to:

  • Define terminology related to color theory
  • Set the RGB values and opacity for shapes
  • Change the color of the canvas: background()
  • Change the color of shapes: fill(), noFill(), stroke(), noStroke()
  • Use advance shape-drawing functions (triangle, quad, arc, beginShape, endShape)
Description

In this lesson, students learn to use variables to store information used to position and color p5.js sketches. Students use system variables width and height as parameters to dynamically position shapes relative to the dimensions of the canvas.

Objective

Students will be able to:

  • Utilize built-in variables, width and height, to position shapes
  • Define custom variables to reduce repetition in a program
Description

This lesson introduces students to the world of animation. Students explore the history of animation and learn how to set the frame rate to adjust the speed of an animated p5.js sketch.

Objective

Students will be able to:

  • Use the frameRate() function to change the speed of animated sketches
  • Use the frameCount system variable to draw shapes dynamically
Description

In this lesson, students create a color transition animation. Using variables, students set the initial color state, then gradually add and remove red, green, and blue values of a color, creating an animated color gradient.

Objective

Students will be able to:

  • Declare and initialize variables
  • Pass variables as arguments to p5.js drawing functions
  • Increment and decrement variables
Description

This lesson introduces students to three shape transformations — translation, rotation, and scale. Students create static and animated shape transformations in p5.js using the translate(), rotate(), and scale() functions.

Objective

Students will be able to:

  • create static and animated shape transformations
  • statically and dynamically change the origin and resulting direction of a shape using the translate() function
  • statically and dynamically rotate a shape using the rotate() function
  • statically and dynamically change the size of a shape using the scale() function
Description

In this lesson, students practice dynamically setting the x and y coordinates for shapes and incrementing and decrementing such values in order to move figures in different directions. Students animate horizontal, vertical, and diagonal motion in their p5.js sketches.

Objective

Students will be able to:

  • animate horizontal motion by incrementing and decrementing x coordinates.
  • animate vertical motion by incrementing and decrementing y coordinates.
  • animate diagonal motion.
Description

This lesson teaches students how to develop interactive sketches that respond to user input from the mouse, including mouse movement and mouse clicks.

Objective

Students will be able to:

  • use the mouseX system variable to keep track of the current horizontal position of the cursor
  • use the mouseY system variable to keep track of the current vertical position of the cursor
  • use the mouseButton system variable to check whether the mouse is left, right, or center clicked
Description

This lesson teaches students how to develop interactive sketches that respond to user input from the keyboard. Students also explore how key codes are used to represent physical keys on the keyboard and use them in their sketches.

Objective

Students will be able to:

  • use the keyIsPressed system variable to create interactive p5.js sketches that respond to any pressed key
  • use keyIsDown() function to create interactive p5.js sketches that respond to a specific key being pressed
  • Represent a physical key on the keyboard digitally using key code
  • Include text in a p5.js sketch
Description

In this project, students create a sketch of their own emoji. An emoji is a small icon used to represent an emotion, symbol, or object. These icons help us express ourselves better and more imaginatively. Students complete a project proposal to plan their sketch and then use drawing and color functions they have learned so far to create it using p5.js.

Objective

Students will be able to:

  • Plan a p5.js sketch on graph paper
  • Create a color palette of containing RGB values
  • Include two ore more shapes in a p5.js sketch
  • Use two or more colors in a p5.js sketch
  • Animate the color, transformation, and position of shapes
Description

In this lesson, students begin to reflect on the variety of games they have played and what actually makes a game a game.

Objective

Students will be able to:

  • Identify the variety of games they have played
  • Identify what aspects they like in games
  • Begin to explain what makes a game a game
Description

In this lesson, students explore and learn to identify game elements, mechanics, and components that make up the overall gameplay experience.

Objective

Students will be able to:

  • Identify game components
  • Identify game mechanics and how they impact player interactions
  • Identify game elements and how they define a game
Description

In this lesson, students explore game genres and perspectives that are used to categorize different types of video games.

Objective

Students will be able to:

  • Identify different perspectives in video games
  • Identify different game genres
  • Categorize games based on perspective and/or game genre
Description

In this lesson, students will learn about JavaScript, how to print messages to the console, and about debugging programs.

Objective

Students will be able to:

  • Write a JavaScript program by typing commands with proper syntax in the main function
  • Write a program that prints out a message to the user
Description

In this lesson, students learn how to assign values to variables, manipulate those variable values, and use them in program statements. This is the introductory lesson into how data can be stored in variables.

Objective

Students will be able to:

  • Explain what variables are and what they are used for
  • Create their own variables
  • Print out the values stored in variables
Description

In this lesson, students learn about the p5play library and see examples of what can be created with it.

Objective

Students will be able to:

  • Describe what a JavaScript library is
  • Provide an overview of what features the p5play library offers
  • Describe their experience running p5play programs / games
Description

In this lesson, students will learn about the two main functions in a p5play program, setup() and draw().

Objective

Students will be able to:

  • Describe the role that the setup() function plays in a p5play program
  • Describe the role that the draw() function plays in a p5play program
  • Code the standard structure of p5play program
Description

In this lesson, students will learn more about the p5play canvas, including how to set one up and navigate its X-Y coordinate system.

Objective

Students will be able to:

  • Explain what the p5play canvas is
  • Set up a canvas in their code with specified dimensions
  • Understand how the X-Y coordinate system works
Description

In this lesson, students will learn about p5play sprites and how to control their appearance with properties like size, position, and color.

Objective

Students will be able to:

  • Define a p5play sprite
  • Describe some of the properties of p5play sprites and how they are used
  • Create a p5play sprite in their code
  • Use dot notation to set the values of a sprite’s properties
Description

In this lesson, students will learn about more sprite properties and how they relate to p5play’s built-in physics engine.

Objective

Students will be able to:

  • Describe what a physics engine is and how it impacts program development
  • Turn on gravity in their programs
  • Identify and use the different sprite colliders
  • Identify and use additional sprite properties that change the sprite’s behavior in the scene