Tag Archive | javascript

Looping Lessons!

My 7th and 8th grade computer science students are done now with their programming unit and on to final projects!  In their programming unit, I focused hard on one particular standard in the CSTA standards:

CPP:L2:5  Implement problem solutions using a programming language, including: looping behavior, conditional statements, logic, expressions, variables, and functions.

I really think my students grew a ton in all of these areas this year. Looping was the last of these I taught. This is the sequence of lessons I used.

1) Khan Academy looping lessons:  I asked them to watch the video lesson, take the quiz, and do the “Loopy Ruler” challenge.

2) Review of While Loops and Matching challenge. We did a group discussion reviewing the structure of the loop – the initialization, the boolean expression, the iteration, and the behavior of variables. We talked about infinite loops and then I paired the kids up, cut up this set of cards, and had them match programs to outputs. We had a whole-group discussion afterward about why they made the matches they did, and any matches that were difficult to make.

3) Geometric pattern activity. Students created a program that made a drawing that used loops to make it repetitive, similar to this one.

4) Loop warmup.  Students got a partner and were asked to write code for 3 loops:  One that would run forever, one that would run exactly 5 times, and a third that would never run.  I had students share their answers on the board and discuss why they worked (or didn’t).

5) While loop quiz.  This was a really, really difficult assignment and I ended up having to abort it early.  I think it’s a great thinking activity, though, and I want to figure out how to make it work better. The prompt is this:

The line(x1,y1,x2,y2); command draws a line from x1,y1 to x2,y2. For example, line(50,70,100,130); draws a line from (50,70) to (100,130).

For this task, you will use a while loop to draw a staircase on the canvas. You should have four variables: x, y, w, and h. x,y specify the starting position of the first step. w, h specify the width and height of the stairs. Your program should have ONLY two line() commands and use a while loop to repeat them to draw the staircase.

var x = 0;
var y = 0;
var w = 70;
var h = 50;

This should draw a staircase that starts at (0,0) and each step is 70 units wide and 50 units tall.

A correct implementation looks like this:

And I had a couple of students that nailed it right away, and 85% of the class that struggled, and struggled, and struggled. Some made things that looked like steps but had no loops. Others did not use the variables. Many hard-coded a single step and then did not know what to do.  For me, the math on the variables is a really straightforward thing, but for the students, this was such a weird representation of slope and addition that it just really blew their minds. I ended up helping a lot.

6) Credit Card simulation.  I introduced “for” loops with this document and program on how credit cards work.

Presentation: forloops_pdf

Credit Card simulation

I love the credit card activity for the conversation it brings about with the students. They really aren’t taught what a credit card is or what the term APR means or what you’re getting into when you swipe your card. The scenario of making payments faithfully every month, and still ending up deeply in debt, is really common and I think the simulation is powerful. I feel like I’m still looking for great prompts / tasks around this scenario to make it the activity it really could be. I would so love feedback on that and may write about it separately!

7) Debate on “for” loops vs. “while” loops. Why should we use one over the other?  Which do you prefer?  Funny how passionate students get over this topic. 🙂


How long do you spend teaching variables? I just spent three weeks.

In my grade 7-8 CS class, variables are the first major topic we tackle. I was really determined to get every kid in the class to a place where they could write a program, on their own, from scratch. This is a tall order. Even when I was a TA for a college CS course (years ago, but still), I know I had students that got to the end of the semester and never once created their own program. I find this sad, as creation is a really empowering activity for anybody. I really, really want every single one of my kids to be able to do it.

I think we’re almost there. But looking back on my timeline, we’ve spent three weeks – THREE WEEKS! On just the topic of variables and operations.  I don’t assign homework and do a lot of discussion and partner work – but I’m wrestling with what we could have done differently, or if this is just how things go in middle school.

This is how it went down.

Lesson 1:  Feb. 18. A pair-programming activity in which kids had to create reflections, translations, and rotations on a coordinate plane using a skeleton program. They learned about the coordinate plane, and they could do the activity using variables or not using variables. I wanted them to investigate the structure of variables without a lecture first.
After the programming activity, we processed as a class what coordinate rules produced the different transformations, and how the coordinate plane on a computer’s canvas is different from the one you use in math class.
Activity 1: Reflection
Activity 2: Rotation
Activity 3: Translation

Lesson 2: Feb. 24. I assigned the students into pairs to specifically dive into the topic of variables. I delivered some notes on the vocabulary of declaring a variable, assignment, and substitution. We watched a video on pair programming from Code.org.
Pair Programming video

As a class, we made lists of the important do’s and don’t’s of pair programming. The kids assigned roles – driver and navigator – and I first  gave them a direct lesson on how to write a program that would use variables to find area of a rectangle and draw that rectangle. I then released them to work with their partner on using variables to draw an ellipse and calculate the area of the ellipse.
Area of Shapes lesson

This lesson is really more on identifying patterns and structure than it is about understanding variables, but the patterns are useful in learning a new language.

Lesson 3: March 2. I first gave a set of notes on math operators. Students were already familiar with +, -, /, and *.  We introduced the floor() function – I showed some examples of floor() and had the students hypothesize what the function did. I also introduced the modulo operator, which in JavaScript looks like a %.  This one was harder for students to guess.  We talked about how modulo is useful when doing an operation such as making change, and what operations are used when you walk into a bank with a jar full of pennies and want to get a small number of bills and coins back.
I put the kids into pairs and assigned them the task of using variables to write the “Planet Zorg” program. They did nicely switching off between driver and navigator, but this program was really difficult for them. It took most of the class period, and most groups did not finish independently.

Planet Zorg Starter Program

Lesson 4: March 4. I wanted students to move from working in pairs to working independently. I assigned them two tasks:

1) Complete the “Funky Frog” challenge on Khan Academy. An additional challenge was to create a variable for the size of the frog and use it to scale the shapes.

2) Write a program that uses three “input” variables – the cost of an item, the percent discount, and the percent tax – and calculate the final cost of the item after discount and tax.
Slides on Discount and Tax program, with “hints”

About half to two-thirds of the class had a great deal of difficulty completing the task without hints, and the reasons were related to not understanding how to calculate discount and tax, or not understanding variables, or often – both. I blogged about this in a previous post.

Lesson 5: March 6. Some of the kids were done with the discount and tax program. Some were not. I split the class into two groups. Those who were done with the discount and tax program, who I felt were ready to move on, could take the variables quiz.  Those who were not would work in a smaller group with me to understand and finish the discount/tax program. The variables quiz was fairly straightforward for the half of the class that was ready for it.
Variables Quiz: Car Economy

Lesson 6: (SIX LESSONS ON VARIABLES, PEOPLE!) March 10. Students who had just finished the tax/discount program needed to take the quiz. For one of my classes, this was not too bad and almost everyone was able to finish the quiz and demonstrate they had learned about variables. My other class started this during our standardized testing block and had shortened testing time. This class also had a larger portion of kids who didn’t understand the tax/discount program, and a larger portion of absences – lots of factors working against us. Most kids did not finish the quiz.  I really, really hope to get this done before spring break!!
For the kids that finished the quiz and were ready to move on, I paired them up and had them do an inquiry activity on boolean expressions – which is a post for another time.

I bring all of this up because it’s been just shocking how much time I’ve spent on this one really basic topic. When I was in college, this whole topic took an hour and then we had an assignment to complete for the next week. If you didn’t understand the first week’s assignment, you were completely sunk because everything from that point on built from that first week’s lesson.

So I really want, really need the kids to be able to use variables flexibly and independently, because if they don’t, they will not be able to program independently and they will just be going through the motions for the rest of the semester.  High school CS isn’t going to go any slower than this. Failure just is not an option. There are a ton of reasons why it’s taking this long, but I really am hopeful that the investment will pay off down the road.