Unit3
1
2
3
4
5
6
7
8
9
10
11

Lesson 6: Intro to Programming

App Lab

Overview

Students use and modify a series of simple apps to get familiar with a small set of programming commands. They observe the way the code runs by slowing down the code and compare programs that run all at once to those that respond to user actions like buttons clicks. At the end of the lesson students discuss what they observed and are introduced to some key vocabulary for describing the running of programs.

Purpose

This lesson is written in an Investigate style, a common format of lesson that will be used in the remainder of the programming units. In this kind of lesson students are encouraged to investigate working code and make simple modifications to understand how it works.

This lesson introduces a number of concepts and vocabulary around what programs are and how they run that will need to be reinforced in future lessons.

Agenda

Lesson Modifications

Warm Up (0 mins)

Activity (30 mins)

Wrap Up (15 mins)

View on Code Studio

Objectives

Students will be able to:

  • Define a program as a sequence of commands that are executed or run by a computer
  • Explain the differences between how sequential and event-driven programs execute
  • Define comments as notes or documentation into a program that do not affect how the program executes

Preparation

  • Review the example apps and the prompts that students will be asked to respond to for each
  • Review the information covered in the slides at the conclusion of the lesson

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Support

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please read the full lesson plan below, then click here to access the modifications.

Warm Up (0 mins)

Get to the Activity

Teaching Tip

Get to the Activity: There's a lot to do in this lesson. Get to the main activity as quickly as you can.

Prompt Ideas: If you need a prompt for when students come in consider asking them to list 2-3 differences between a natural language and programming language and why those differences need to exist.

Remarks

Yesterday we learned that we need to create a new kind of language, a programming language, in order to clearly communicate instructions. Today is a big day. We're going to get our first taste of what programming looks like, and we'll see different ways we can use these tools to communicate our instructions to a computer.

Activity (30 mins)

Teaching Tip

Prepping for this lesson: The best way to prepare for this lesson is to go through the experience yourself. Check out the three apps in Code Studio to get a sense for how they work. Then move on to the Code Investigation and actually try to answer all the questions for each app. To help you out, however, answers are provided in the "For Teachers Only" tab for verified teachers.

Show code at the front: If your room allows it, display the code at the front of the room. When students mentions specific lines of code actually scroll to that line and read through it together.

Discuss specific lines of code: As you run discussions, model talking about programs by specifically calling out lines of code, as in "I can see that when the playSound block on line 2 is highlighted the sound plays...."

Save modifications for the end: This lesson can be tight on time. Rather than have students modify the code all at once, you can save modifications for the end of the Code Investigation and have students pick a single app they wish to modify.

OK to Break Things: When using the widgets in Units 1 and 2 it's not really possible to "break things". That's a little different than how things work in App Lab where it is possible to write code that may not run at all. Encourage students that this is ok. Using blocks makes it easier to avoid errors, and if students need to they can use the version history to set the code back to its original state.

Group: Place students in pairs. One student per group should navigate to the lesson on Code Studio.

Display: If possible in your room, display the Code Studio levels at the front of the class.

Level 2: Have students work on the three tasks for a few minutes. Circulate the room making sure that pairs are actually discussing the prompt and are collaborating to modify the program. Once it seems all groups have had a chance to do this bring the class together.

Discuss: Have students share the results of their discussions with the class. You do not need to use formal vocabulary yet, but make sure all students are seeing the same things.

  • Code is running one line at a time.
  • Strings need to go in quotes. Numbers do not need to.
  • Yellow highlighting shows you which line of code is running in either block or text mode.
  • The turtle slider changes the speed at which the code runs. At full speed (all the way to the right) there is no longer any highlighting.

Level 3: Run this level in the same way. Have students complete all three prompts and then bring the class together after a few minutes for a discussion.

Discuss: Once again have students share the results of their discussions and modifications with the room. Here are some good points to draw out if they don't come up naturally in discussion.

  • console.log prints text in the Debug Console
  • setProperty changes the properties of elements on the screen. These should be familiar from using Design Mode.
  • console.log needs one input while setProperty needs three
  • Hovering over a block in the toolbox helps you know what kind of information to put in each input.

Level 4: Run this level in the same way. Have students complete all three prompts and then bring the class together after a few minutes for a discussion.

Discuss: Once again have students share the results of their discussions and modifications with the room. Here are some good points to draw out if they don't come up naturally in discussion.

  • onEvent makes the program respond to the user. You can add code inside of it that will only run when something happens.
  • Changing the second input changes the type of interaction that will make the code inside the onEvent run.
  • Code outside the onEvent runs right away. Code inside an onEvent will only run when the event happens.
  • Even if code is after an onEvent, it will run first if it's outside of any onEvent

Level 5: Run this level in the same way. Have students complete all three prompts and then bring the class together after a few minutes for a discussion.

Discuss: Have students share the results of their discussion and anything else they noticed. Here are good points to draw out.

  • playSound will play a sound you pick from the Sound Library
  • Lines that start with // are called comments and don't actually run. They just help you understand your code.

Level 6: Run this level in the same way. Have students complete all three prompts and then bring the class together after a few minutes for a discussion.

Discuss: Have students share the results of their discussion and anything else they noticed. Here are good points to draw out.

  • Random number chooses a new random number each time, between the high and low value given
  • onEvent takes many different event types, not just "mouseOver" and "click". Depending on the situation different ones make more sense.

Wrap Up (15 mins)

Discussion Goal

Goal: Make this a quick discussion to help connect the previous lesson to this one. Help bring out some of the following points.

  • Programming languages are much more precise than natural language
  • Programming languages have very strict rules
  • Programming languages may feel a little awkward at first.

Prompt: Think about your experiences today and in the previous lesson. How is a programming language different from natural language?

Remarks

Awesome job! Today was our first chance to check out what programming in App Lab is like. So far we've only learned a few blocks but we've already seen they'll let us make a wide variety of types of programs. We're going to get a lot more time to practice using them, but before we do let's get some vocabulary in your journal to make sure we're using the same words to talk about what we saw today.

Teaching Tip

Reinforcing Vocabulary: A lot of the vocabulary introduced here is taken straight from the AP framework. The images are designed to help connect the definitions to the experiences they had in this lesson. Help students make these connections by not only writing down definitions but talking through how it's connected to what they saw.

Journal: Go through each vocabulary word (Program Statement, Program, Sequential Programming, Event Driven Programming) and give students a chance to record each piece of information.

Remarks

Great job today! You've learned a lot so far about programs. It's important to remember that programs need to work for a variety of inputs and outputs. That's what makes programming interactive apps so fun! Today, you also learned how to describe the behavior of a program, or how the program works when it's run and how the user interacts with it.

When we talk about how programs run, we can describe both what the program does and specifically how the program statements accomplish this goal.

We're going to keep practicing using these words and going forward you're going to get more chance to practice programming. Start thinking about how you might want to use what you learned today in your project.

Assessment: Check For Understanding

Check For Understanding Question(s) and solutions can be found in each lesson on Code Studio. These questions can be used for an exit ticket.

  • What is the difference between a sequential program and an event-driven program?

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 3A-AP-16 - Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using events to initiate instructions.

CSP2021

AAP-2 - The way statements are sequenced and combined in a program determines the computed result
AAP-2.B - Represent a step-by-step algorithmic process using sequential code statements.
  • AAP-2.B.2 - A code statement is a part of program code that expresses an action to be carried out.
  • AAP-2.B.6 - Sequential statements execute in the order they appear in the code segment.
AAP-3 - Programmers break down problems into smaller and more manageable pieces
AAP-3.E - For generating random values: a. Write expressions to generate possible values. b. Evaluate expressions to determine the possible results.
  • AAP-3.E.2 - Using random number generation in a program means each execution may produce a different result.
CRD-2 - Developers create and innovate using an iterative design process
CRD-2.B - Explain how a program or code segment functions.
  • CRD-2.B.1 - A program is a collection of program statements that performs a specific task when run by a computer. A program is often referred to as software.
  • CRD-2.B.3 - A program needs to work for a variety of inputs and situations.
  • CRD-2.B.4 - The behavior of a program is how a program functions during execution and is often described by how a user interacts with it.
  • CRD-2.B.5 - A program can be described broadly by what it does, or in more detail by both what the program does and how the program statements accomplish this function.
CRD-2.C - Identify input(s) to a program.
  • CRD-2.C.2 - An event is associated with an action and supplies input data to a program.
  • CRD-2.C.3 - Events can be generated when a key is pressed, a mouse is clicked, a program is started, or by any other defined action that affects the flow of execution.
  • CRD-2.C.5 - In event-driven programming, program statements are executed when triggered rather than through the sequential flow of control.