Intro to App Design - Lesson 6: Intro to Programming

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 and compare programs that run all at once to those that respond to user actions like buttons selections. At the end of the lesson students discuss what they observed and are introduced to some key vocabulary for describing the running of programs.

Goals

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

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.

Resources

Getting Started (0 minutes)

Remarks

  • Yesterday we learned that we need to create a new kind of language, a programming language, in order to clearly communicate instructions. Today we're going to take a deeper look at what programming looks like, and we'll see different ways we can use these tools to communicate our instructions to a computer.
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.

Activity (30 minutes)

Group: Place students in pairs. One student per group should open the projects as they're needed for today's lesson, beginning with "Lesson6_App1".

Teaching Tip

Prepping for this lesson: The best way to prepare for this lesson is to go through the experience yourself. Check out each of the Lesson6 apps to get a sense for how they work. Then actually try to answer all the questions for each app.

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 output code on line 2 runs, it produces a message in the console..."

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 earlier units it's not really possible to "break things". That's a little different than how things work here where it is possible to write code that may not run at all. Encourage students that this is normal programming practice. It maybe a good idea to have students save a backup version or use some kind of version control.

Display: If possible in your room, display the projects at the front of the class.

Accessing the Projects: Just like earlier lessons, the apps for this lesson are available via the CSP-Widgets Repository. If you want a refresher on downloading and running the projects, check out the Getting Started with CSP Widgets help page.

Teaching Tip

SP Widget Guide:Most activities using the CSP Widgets will require students to modify parts of the code. Navigate to the //START HERE comment in the code to find where to get started with the lesson. If a student needs to add code, they should do it after the //YOUR CODE GOES HERE comment in the code.

App #1

Open a Project: Have students open the "Lesson6_App1" project. In the SourceCode folder, students should open "Main.quorum".

Activity: In their groups, students should do these tasks. 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.

  1. Run: Run the program to see what it does.
  2. Discuss: Why do you think some of the information is in quotes and some is not?
  3. Modify: Add two lines of code, one that displays a string and one that displays a number.

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.

App #2

Open a Project: Have students open the "Lesson6_App2" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Students should do these tasks in the same way as last time. Once students have completed all three prompts bring the class together for a discussion.

  1. Run: Run this program to see how it works.
  2. Discuss: With a neighbor discuss the differences between SetScreenSize and AddPage. Be as specific as possible.
  3. Modify: Add one output command and one button property changing command to this program. (The property changing command can be one of the commands already used in this program or a command that students learned while designing their project apps.)

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.

App #3

Open a Project: Have students open the "Lesson6_App3" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Have students complete these tasks, then bring the class together after a few minutes for another discussion.

  1. Run: Run the program to see how it works. Make sure you select the button on the screen.
  2. Discuss: How does the ButtonActivated section of code work? Be as specific as possible.
  3. Discuss: How do commands inside ButtonActivated run differently from commands in Start?
  4. Modify: Add one command inside Start and one command inside ButtonActivated.

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.

App #4

Open a Project: Have students open the "Lesson6_App4" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Have students complete these tasks, and then bring the class together after a few minutes for a discussion.

  1. Run: Run this program to see how it works. Make sure you select both buttons.
  2. Discuss: How does the PlaySound command work?
  3. Discuss: How do lines that start with // run differently from the others
  4. Discuss: What's the difference between lines that start with // and lines that are between /* and */?
  5. Modify: Add code so the dog button makes sound too.
  6. Modify: Change the messages when each button is selected.

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.

App #5

Open a Project: Have students open the "Lesson6_App5" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Have students complete these tasks, and then bring the class together after a few minutes for a discussion.

  1. Run: Run this program to see how it works.
  2. Discuss: How do you think the RandomNumber command works? Each time RandomNumber runs, there's a possibility of a different result!
  3. Discuss: Why do the birds move even if they're not selected? Are there other options?
  4. Discuss: What happens when you press the space bar? Why does it happen?
  5. Modify: Make the birds move around the entire screen, not just the top left corner.
  6. Modify: Experiment with the other event actions besides MousedOver and KeyPressed. Which ones still make the game work?

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.

Wrap up (1 Minute)

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

Discussion 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.

Remarks

  • Awesome job! Today was our first chance to really explore what programming is like. So far we've only learned a few commands 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.

Journal

Go through each of these vocabulary words and give students a chance to record each piece of information:

  • Program Statement: A command or instruction. Sometimes also referred to as a code statement.
  • Program: A collection of program statements. Programs run (or "execute") one command at a time.
  • Sequential Programming: A way for programs to run where statements run in order, from top to bottom. There is no user interaction and the code runs the same way every time.
  • Event Driven Programming: Another way for program to run where some statements run when triggered by an event, like a mouse click or a key press. Programs run differently each time depending on user interactions.
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.

  • 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

For Students

Open a word doc or google doc and copy/paste the following question.

Question

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

Standards Alignment

  • CSTA K-12 Computer Science Standards (2017): 3A-AP-16
  • CSP 2021: AAP-2.B.2, AAP-2.B.6
  • CSP 2021: AAP-3.E.2
  • CSP 2021: CRD-2.B.1, CRD-2.B.3, CRD-2.B.4, CRD-2.B.5
  • CSP 2021: CRD-2.C.2, CRD-2.C.3, CRD-2.C.5

Next Tutorial

In the next tutorial, we will discuss Code.Org Unit 3 Lesson 7, which describes Learn about debugging.

Go BackNext Tutorial