Tag Archive | Processing

Review/Extension Activities for Looping and Conditionals

More than once I’ve finished or half-finished a lesson knowing that some kids understood most of it, some really didn’t get it at all and I didn’t get enough information during class to really understand where I should go with things the next day. If you back up and review, you bore the kids who understood already and run the risk of teaching the same ineffective way you did the previous day. If you plow ahead, you will really lose the students who were barely understanding the day before.

In this situation, I sometimes do a code-analysis card sort.  I write a handful of code snippets and produce output from them. Mix up the code and outputs, partner up the students and ask them to match code to output. It takes less than 10 minutes, and then you have a whole-class discussion where you ask groups to report out. What’s a match you feel confident about and why?  What is a match that gave you trouble and why?

Here are a couple of my card-sorts from this year’s CS Exploration course, in which I have been teaching Processing.

Function Match:

example card from the function card sort.

example card from the function card sort.

In this card sort, there are four function definitions, four function calls, and four descriptions.  The students’ job is to match a definition to a call to a description. Before making copies, I put a letter (A,B,C,or D) on each function defintion, a number (1234) on each call, and a symbol on each description.

https://docs.google.com/document/d/1sEnnMD7T4i_AxqfIyosZ2VCBZOkbtU7yx79fNbBqGNI/edit

The card sort is really simple because each function has a different number of parameters. If a student can recognize that the definition with three parameters matches the call with three parameters, they can do the sort. But it creates good discussion when you talk about why the matches work, what the parameters mean, and how we know the descriptions match the definition and call.

I also created a Function Kahoot! quiz to do before or after.

https://play.kahoot.it/#/k/0aa8f906-3de9-41be-8b9f-ce5b9ced5e97

 

Next I have a card sort on looping. It only focuses on While loops. The task is to match the code with the output.

loop1\

The cards are here:

https://docs.google.com/document/d/1f-OGnz_jCIv_Zh2iNDY0XpTQbK1VjUYTLr9gzh7PHn0/edit

Again before I make copies, I label the code with letters and the outputs with numbers to make it easy to report out what matches the students made.

The discussion on this sort usually hits on two ideas. Is the x-coordinate or y-coordinate changing, and how do you know? How do you know how many times the loop will run? Good tie in with some linear algebra here – the starting value has some connection to y-intercept and the increment each time has a connection to slope or rate if you choose to go there. There is one card that will freeze the program because it gets stuck in an infinite loop, and it’s an important one to discuss as I always have students that take some time to understand the idea of the infinite loop.

 

I also have a Kahoot! quiz on variables and expressions, without loops/conditionals or anything like that. Might be a good review activity.

https://play.kahoot.it/#/k/3ef963cc-0ceb-4c83-9616-fa7c714698f1

I’m working on adapting some of my older Kahoot! quizzes from the Khan Academy Processing JS to the stand-alone Processing, but here they are if you are interested in the Khan version.

Khan Kahoot! on conditionals and booleans:

https://play.kahoot.it/#/k/62584d63-7484-4490-bb23-019c8ee1a7e0

 

I had this one to quiz students on the draw() loop and how it affects variables. I don’t think I’ll adapt it for Processing but it might be useful to someone.

https://play.kahoot.it/#/k/10a75250-560d-4550-a202-b936149173dd

 

 

What are some of your ideas for differentiation, discussion, extension and review?

 

Advertisements

Teaching event-based programming – a traffic light

Recently as I was looking through my blogroll, I read Mark Guzdial’s review of the K12CS.org Framework. I wished I had been able to review the framework with a group – I didn’t feel that I generated great ideas about it on my own, but I did like reading Mark’s. Reading my social media feed sometimes impacts what I’m going to teach. In this case, Mark made a point about models of computing:

Great research by people like John Pane at CMU has shown that novices think of programs as responding to events, being reactive (e.g., think apps, games, GUI interfaces). Thinking of computing as input-processing-output is an older model, difficult to understand, and less common today.

 

Huh. I had been teaching programming as input –> do stuff –> output and wondering to myself what to do when this model broke down. I never really thought about how I teach event-based programming differently. I decided I would give it a try, though. In my 7th-8th grade CS class, my kids had learned about variables, conditionals, and functions. Normally I would plow right into iteration but I decided to take a detour and do some activities with the kids on event-based programming. We did a couple of examples working in Processing with draw() and mouseClicked() and keyPressed(). I decided to introduce an activity involving a state machine to teach the difference between linear programming and event-based programming.

I talked with the kids about how many of us think a traffic light works. We see it as a linear set of steps.

trafficlight_maya

trafficlight1

But in reality, we know the traffic light has a set of sensors. And when a sensor is tripped and other conditions are met, then the traffic light advances to the next state. You can model the state with a variable. In this case, I used “lc” for light color. We can model the sensors with button clicks and key presses.

trafficlight2

We wrote this program together, imagining that the mouse click simulates a timer expiring, and the space bar simulates the sensor that detects your car. I did this as a teacher-led launch. Kids followed along and ran their programs. Easy.

http://www.openprocessing.org/sketch/311664

 

The kids asked about how you simulate a real timer. In Processing, there isn’t an easy implementation of a “delay” function, so you have to poll for a timer. There is a built-in function millis() that returns the number of milliseconds since the program had started. The kids played with the millis() function and had fun writing the time to the screen. So for the next class, I decided a program that used timers would be a good extension and problem-solving activity.

In the second class, we looked at this state machine model.

trafficlight3

My amateurish drawing shows looping arrows where you are polling the timer. As long as the “ready” variable, for example, is 0, then the light stays the same. As soon as the “ready” variable changes to 1, then you can advance to the next state. You can check for “ready” by doing some math on variables that store the value of millis(). One variable stores millis() over and over again. Another variable only stores millis() when the state has just changed.

I put the kids with a partner and made this a pair programming assignment.  We reviewed the norms of pair programming. I gave them a starter program that just showed a red screen and used the millis() function to display the elapsed time. I had some variables in the program but did not tell the kids how to use them. Their task was: turn the program into a timed traffic light. It should turn the red light on for a certain time, then the green light for a longer time, then the yellow light for a very short time, and then go back to red.

This is the starter program.

// 0 is red, 1 is yellow, 2 is green 
int lc = 0; 
int ready = 0; 
int oldms; 
int newms; 
int elapsedms; 
int interval; 

void setup() 
{   
  size(400,400); 
  ready = 0; 
  oldms = millis();
  newms = millis(); 
  elapsedms = newms - oldms; 
  interval = 5000; 
}
void draw() 
{
  if(lc == 0) 
  { 
    background(255,0,0); 
  } 
  else if(lc == 1) 
  { 
    background(255,255,0); 
  } 
  else if(lc == 2) 
  { 
    background(0,255,0); 
  } 
  newms = millis(); 
  elapsedms = newms - oldms; 
  textSize(30); 
  fill(0,0,0); 
  text(elapsedms, 150,150); 
} 



The kids split into pairs and started working. After a while, a few groups were close – they could check for a certain elapsed time and then change the light’s state variable so it switched colors. They didn’t know how to reset the timer, so after about 20-30 minutes, most of the kids could change red-green-yellow and then didn’t know how to get back to red.

So I did a catch-and-release where we talked about the polling loop.  I showed boxes that represented the values of “oldms”, “newms”, and “elapsedms” each time through the draw() function. Some kids figured out on their own that the way to reset the timer is by assigning “oldms” to millis() when you change the light’s color. Others figured out different solutions  and it was interesting to see what they came up with.

The activity took most kids until the end of the class. On the third class, I asked all of the pairs to copy and paste their programs into OneNote. I then called up several groups to do a walkthrough of their solution. They did a really good job presenting. I like OneNote for this kind of sharing because the rest of the class could copy the code and run it to understand what the presenting group did.

Here are some of the solutions! I liked how each group approached it a little differently. Some used my variables and some made up their own. Some used nested “if” statements and some used complicated boolean expressions. Some reset the timer after each state change and some waited until after a complete cycle of the traffic light.

Luke and Andrew’s Method

Anna and Kay’s method

Ryan and Parker’s method

I enjoy seeing the students have their lightbulb moments, and it’s also fun to have the overachieving students that can’t resist being a little creative with their programs.

Maya’s Traffic Light

Ben and Anthony’s Traffic Light with car (it stops on red, goes on green, and speeds up on yellow)

I liked this workshop model with the teacher-led launch, the worktime in pairs, and then the student-presented summary. I think it was a good problem-solving activity for the kids, and for me it was a nice departure from the input-stuff-output model of programming.

 

 

 

Booleans and Conditionals – Lessons and Reflections

Ask a CS teacher about a main goal of their course, and a lot of us say we want kids to be able to plan and write a program independently. And that it’s a discouraging but real part of the job that many don’t.

I really take that mission seriously, and as a result I move really slowly through topics.  I’ve mentioned before that I take weeks just to teach variables. This post contains a sampling of some of my lessons on booleans and conditionals.

Lesson 1: Structure and purpose of boolean expressions and conditionals.
Objectives: Identify the boolean data type and describe the rules that govern booleans, including logic operators.
Identify and describe the structure of the “if” statement.

We started by analyzing code samples and then modifying them – first with a partner, then whole-class. I created one that introduces the boolean data type and another that uses a variable and an “if” statement to simulate a coin toss.

CODE SAMPLES FOR ANALYZING

That said, I’d love to have a protocol or a structure or organizer for code-analysis problems. If you have one you like, I hope you share it!

Lesson 2: Prisoner’s Dilemma

Objectives: Use boolean expressions and conditionals to create a program that models a situation.
I love this lesson and have blogged about it before here.  Kids used Processing standalone instead of Khan Academy this year, but the task was pretty much the same. This is a pair programming activity. The “release of responsibility” is very gradual.

Lesson 3: Button Clicks

Objectives: Describe an area of the screen with boolean expressions.
This lesson has a very clear mapping to Common Core math standards. In Algebra, students are introduced to solving inequalities and also systems of equations. Later in high school math, students move to solving systems of inequalities.  When you create a clickable button, you’re describing the coordinates that are included in the ‘button’ as a boolean expression, which maps nicely to a system of inequalities.

Here’s the starter program.

http://www.openprocessing.org/sketch/231512

http://www.openprocessing.org/sketch/231512/embed/?width=500&height=500&border=true

We start with the mouseClicked() function incomplete and discuss as a class how to finish it. We look at the coordinates, height, and width of the rectangle and consider some x,y coordinates that are inside the rectangle… and some that are outside. Then we try to come up with a general sentence for which coordinates are always inside the rectangle. The x-coordinate must be between 150 and 350. The y-coordinate also must be between 200 and 300. If all of the conditions are true, you have clicked inside the box. If even one is false, you have not clicked in the box.

Then I give the kids a challenge:  create two buttons, one in the upper-left quadrant, one in the lower-right. Make something “happy” happen when you click one of the buttons, and make the other one produce something “sad”. They made some clever creations and had fun with it.

Alex P’s “Two Button Task”

Lesson 4: If/then quiz

The “quiz” task is individual, so at this point the students no longer get to work with a partner and must create a program solo. I make this task easier than the pair programming tasks, with the goal of every kid writing their own program from beginning to end.

This task is pretty simple but ended up requiring some good thinking from the kids.


 

In a sports tournament, the tigers will play the lions, and the eagles play the hawks. The winners of these two games will play in the championship.

These 4 variables represent the scores in the first game.
int tigers;
int lions;
int hawks;
int eagles;

Write a program that will write the names of the two teams playing in the championship. If there’s a tie in either game, you should write a message explaining that the game goes into overtime.


Although it’s a quiz, if a student raises his or her hand, I help. I help by asking questions – something I studied hard at when I was a math teacher.  The goal of the questions is to determine just how much help they need and give only that. Ask:

  • Read the problem to me again. What do you understand so far?
  • Where did you get stuck?
  • Under what condition would you write “tigers win”?
  • What causes a tie?
  • Tell me your best idea so far?
  • Can you translate that into code the computer can understand?

By the time the quiz comes around, there are definitely still misconceptions all over the place and it takes time to work through them all. Some of the ones I run into:

  • Writing a boolean expression in words, such as “tigers less than lions”
  • Mixing up > and < signs
  • Confusing equality (==) with assignment (=) operators
  • Not closing text strings with quotes (shows more than just a syntax problem – they’re not seeing the text string as a single entity)
  • Confusing the variable name with text (e.g. lions vs. “lions”)
  • Not yet understanding the purpose of variables as an “input” to the problem that can change. for example, a student may write this code, which renders their variables pointless:
    lions = 14;
    tigers = 10;
    if(14 > 10)
    { text(“lions win!”,50,50);}
  • These are misconceptions where the students are, at some level, not getting the point of a CS concept. Mistakes abound also such as syntax errors. These are different kinds of problems and have to be treated as such… I have a couple of students who generally get the CS concepts but they make tons of syntax errors. I have no problem looking through their program for the semicolons and spelling errors and just fixing them quickly. A kid who is not getting a concept, though, needs more questioning and more work.

When I taught math, one of our big ideas in 7th/8th grade was the “two-step linear equation” and how to solve it. I learned over time there are no shortcuts to mastering this concept. Sometimes there were many kids in the room who just needed me to sit with them, and one on one, watch them solve the problems in great detail and give them feedback on that work. These early programming tasks require the same attention from me. Many students just need me to sit with them, one on one, and talk with them as they program and solve. It’s a time-consuming task – in the moment, you think to yourself this lesson clearly bombed – the kids can’t program independently and I’m just doing damage control. But I have noticed as I have taught this age group more, that the early work pays off by the end of the semester. By the time kids are done with the class, you give them a simple task with conditionals and they just pound it out with barely any effort. Even the struggling learners do learn to program independently. It just takes more time and practice and attention for some kids than others.