Class Reflection - Computer Science Week

Christopher Kefalas, 2019-07-09, Class-reflections

computer science, reflection

Introduction

We had an awesome first week of summer camps at Tech Em Studios! Our subject for the week was Computer Science, so we started Monday off with a lesson on the history of computers. The kids learned about some of the first computing devices, all the way up to what our present computers look like and are capable of. That was followed up with a discussion on what a computer program is. The example presented to the class was how a computer program is similar to a cooking recipe. That is, a sequence of instructions that tells the computer to carry out some task. After going over some examples, we moved to the iPads to see this concept in action!

Lightbot(iOS, Android, Web)

The first iPad app that we like to start kids off on to get them use to the concept of programming and a sequence of instructions is Lightbot. There are two versions of Lightbot that you will find when searching for it in the App Store, Lightbot and Lightbot Jr. The age and experience of the students decide which one we start off with. For this group, we started off with the normal version of Lightbot.

What Lightbot Teaches Us

LightBot is great, and helps the students to start thinking like computer programmers. Each level consists of an obstacle course with the goal being to arrange the available instructions you can give to the robot in the correct order thus making him complete the obstacle course. During this early exploration stage the kids are able to start thinking about problems as a sequence of steps. In Computer Science we call this an algorithm!

Another concept that we like to highlight during this period is debugging! When the sequence of steps that we have choosen doesn't work we need to be able to review and revise. In computer programming these little errors within our code are called bugs, and the process of removing them is called debugging. A skill that we teach the kids to combat bugs is the frequent use of testing! It's very beneficial that as students work through the Lightbot levels they are frequently testing their code because it's much easier to correct mistakes when dealing with fewer instructions. I will often say to them "Add a couple of instructions, test your code. If those instructions do what you want, add a couple more. Repeat."

This makes for a good primer to lead us into our next concept which is dividing the problem, or in Lightbot's case the obstacle course down into small parts. In the second section of Lightbot, they introduce something called procedures. In computer programming these represent functions! With functions, we are able to take sections of our code that are repeatable and used often, and store them in a function. Similarly, producedures in Lightbot allow us to take our instructions and seperate the parts that we use often and can repeat into sections. This divides the overall structure of our program into two parts, Main and Procedure 1. Whenever we are in need of the code that we have contained within Procedure 1 we will just call on it in our Main section. I will offer advice to the kids that they should look for areas in the obstacle course that are the same and thus the code to complete such areas would be identical. In other words, look for the patterns! Once they have identified what they think is a pattern, seperate the code needed to complete that pattern into your Procedure 1. In the end, this makes our programs faster and requires less instructions overall to complete. A fun acronym that we will use to reiterate this concept is D.R.Y or Don't Repeat Yourself!

Things start to get more fun and interesting when Lightbot introduces Procedure 2!

Understanding how and why we use Procedures in our programs is a really important idea for students to understand. Which is why we spend a lot of time discussing and exploring it. Lightbot provides a little bit of leniency in the beginning, but further in it becomes absolutely necessary that you utilize this concept.

Lightbot continues next with a concept called Overloading, which is essentially the idea that we can have instructions that will produce different actions based on their situations. For example, in Lightbot there is a light bulb instruction that is used when your robot is standing on a blue tile, ultimately the goal of each obstacle course is to light up each of these blue tiles. With Overloading, the light bulb instruction now is also able to raise the elevator platform tiles. So that means depending on which tile the robot is currently standing on, will impact what the light bulb instruction will do.

Lastly, Lightbot briefly goes over the what and how of Loops. This is personally one of my favorite sections of the game and I think is were I see the most wow faces from the kids when they figure out they can loop a set of instructions as many times as they want. Which soon they figure out can make your robot do some really silly things!

Hopscotch(iOS)

The next app that we explore in our mission of understanding computer science and programming is Hopscotch! Unfortunately, this app is only available for iOS. I would describe Hopscotch as a sort of programmable sandbox. With Hopscotch there really is no objective that the creators have put forth other than to build things in a programmatic way. Everyone starts off with a blank project, and every blank project starts off with a blank scene. You are then given the ability to add objects to your scene, whether it be a handful of images Hopscotch provides or simple text characters. After you have added an object to your scene, you now can start adding some code to it in order to make it do various things. The first thing that Hopscotch requires for every object is what they call rules. That is to say the logic that will need to be true in order for the code you have added to run. Some of the common rules we use in our programs are When Game Starts, When is Tapped and When is Touching, When Bumps. Once you have decided on a rule for your code, you are presented with all the different instructions that you can use for your object. The instructions are divided into different categories, Movement, Looks & Sounds, Drawing, Variables, Control Flow. You can also create your own instructions that consist of these provided instructions. When you create your own instructions, you're basically creating a function in Hopscotch!

Programming Games

While there are many possibilities for what you could develop in Hopscotch, a lot of people tend to create games with the app. Creating games is a great way to explore some of the fundamental of computer programming with Hopscotch, and it allows for the students to add in some personalization and customization to make their games unique!

Crossy Road

The first game that we developed was a Crossy Road clone, which is essentially a Frogger clone for those of us not up to speed with the latest mobile device games. The concept of the game is very simple, you have a character, you have enemies that are moving horizontally across your scene in the middle, and your goal is to get from one side to the other without running into any of the enemies. Our first task with developing this game was to create the character and give us the ability to move him around our scene. There are many ways that you could do this, but the way that we choose to implement this was with directional arrows that could be tapped, moving the our character in the approiate direction. Once they had selected a character to use, using emojis the directional arrows were added to the scene. We chose to use the standard four, up, down, left, right. After the arrows had been added to the scene, it was time to program them since just adding them to scene doesn't do anything but show them on the screen. The logic is pretty straight forward, using the rule If X is Tapped, x being whichever directional arrow we were programming currently. And finally, the instructions used for each arrow would involve either moving the character along the X axis or the Y axis by a number. Movement up or to the right would be a positive value and movement down or to left would be negative value.

Awesome, now we have a character that moves. Wait, do we? Let's test it! Once we have confirmed that our character is doing what we want, we can move onto the next step which is adding the enemies. This process consisted of choosing some emojis that were of automobiles and dragging them onto the right of our scene. The students then used the rule When Game Starts so that this code would run right when we started the program. The instruction we used to make the car enemies move from side to side was a loop, specifically a Repeat Forever loop. In our loop, we added the instructions to make the car move from right to left, meaning the value needed be negative. The car then flipped like you had turned it, and moved back left to right, meaning the value needed to be positive. Repeat. The end result was an emoji car enemy that went back and forth. This explanation is the most basic implementation of our car enemies. We talked in class about spicing it up a bit to add some difficulty and unpredictability.

Lastly, we needed to add a collision event so that something actually happened when our character bumped into our enemy. The logic here was similar to the one used with our character and directonal arrows. The collision event for that part was your finger colliding with the directional arrow. In this instance, our collision event would be our character colliding with the enemy car. Which meant we could use the same rule, the only thing that changed was our values. As for what to include inside of this rule, I left that up to the kids. Some made sounds occur, some changed their character into a whole different emoji, and some made it so that some text popped up on the screen saying game over. There was no wrong answer, and that was what was awesome. It allowed the kids to make their game unique, and program it to do what THEY wanted it to do!

Flappy Birds

The next game we moved onto coding was a Flappy Birds clone. This was much more involved, but it still consisted of concepts and techniques that we had used in our previous programming exploration!

We still had a character, so we started with implenting that. Our character in this case though didn't use a directional pad, instead it was programmed so that when you tapped anywhere on the iPad screen the character would move up, it's Y-axis value would increase. Flappy Birds is a unique game in the sense that your character is constantly falling, it's Y-axis value decreasing. So by adding some logic that allows us to increase that Y-axis value by tapping on the iPad screen we are able to keep our character from hitting the bottom of the scene.

Next, we focused on the obstacles which were essentially square shaped emojis stacked ontop of each other, and they had a gap in-between that we had to move our character through each time they passed. To add some difficulty to the game, the obstacles would slightly change their Y-axis value so that the gap that was required to get through was at a different height each time. Since we wanted the obstacles to continue coming, all of this was thrown inside a repeat forever loop.

Lastly, we just needed to add a collision event like in the last game so that when our character collided with the obstacle something happened. And as before I allowed the kids to be the deciders of what would happen when their character touched the obstacle.

Conclusion For The Morning

We had a blast going through the iPad apps and talking about everything to do with computers. My goal was to give the kids a good understanding of what computers are and their history. Also, teaching them how computers work and how we can control what they do by programming them. I had a lot of fun seeing the things that they devloped throughout the week.

In addition to the hands-on time with the iPads, we also spent the beginning of every class learning and further discussing concepts that make up computer science. We talked about the different hardware that is inside of the computer, and it's purpose. Also, making a note of whether it was an input or an output device. This lead us into learning about Logic Gates and the three basic gates. We talked about their inputs and outputs, and also formed truth tables to describe them. Lastly, we spent sometime going over the binary number system, and why computers use it as their method of communication.

Afternoon

We had a perfect age group for the afternoon class, so it made perfect sense to start introducing the kids to a typed based programming language on day one. Our language of choice was the Python programming language. Building on some of the concepts that we learned in the morning, we started to discuss how these could be implemented with Python. But first we had to talk about the tools that we would use to write our Python code and run it.

Python In The Clouds

All of the students were given access to a Cloud9 workspace that lives within the Amazon Web Services(AWS) eco system. A Cloud9 workspace consists mainly of a fancy text editor with some bells and whistles that make our lives easier when coding Python, in addition to having a terminal and file manager. What is really cool about Cloud9 is that everything you need to write Python and run your programs is built in. Also, the fact that this workspace lives in the Cloud means that you can access it from any computer with an Internet connection and a web browser. This allowed the kids the ability the work on their code at home. In addition, students can continue to explore Python once class is finished because we will be leaving all the workspaces online throughout summer! The first day all the kids were sent home with a piece of paper detailing the web address they needed to navigate to in order to access their Cloud9 workspace, and also their username and password. If passwords have been forgotten, please don't hestitate to reach out so that we can reset it for you!

Writing Code

Once we had gotten our environments set up, it was time to create a new file with the .py appended at the end to let the computer know it was a Python file and add some code! We started off learning about four data types that are used in the Python programming language, which are string, integer, float, boolean. In our newly created file, we saw what these data types looked like and also the various things that we can do with them.

We talked about how we could create multiple strings and add them together so that when we printed some output with our Python program, it displayed the strings. In computer programming, this is called concatenation. With Python, this might resemble something like:

print("string" + "string" + "string")

If you can add strings, you must be able to add numbers too! So we talked about how Python can be used to do arithmetic.

print(10 + 10)
print(10 - 10)
print(10 * 10)
print(10 / 10)

Once the kids felt that had a good grasp of these data types and understood what they looked like in Python, we started talking about variables and how Python can accept input. A variable is simply a place to store data, like a box. With our new found knowledge of data types, the students learned how they could create variables and give them some data.

my_variable = "this is some data, and this data is a string!"
another_variable = 100

We wanted to be able to output what we had put into our variables, which was simple enough.

my_variable = "this is some data, and this data is a string!"
another_variable = 100

print(my_variable)
print(another_variable)

Next we talked about input, and how we can use Python to accept input from our users. That input that was accepted was then stored inside variables!

my_variable = input()

We can make it a bit more straightforward for our users by also including a message that will show up when our user is asked to type in some input.

number_one = input('Please enter a number: ')

print(number_one)

This prepared us for making our first full Python program, which was a simple calculator that allowed the user to input two numbers, select an operator, and recieve the answer. Before we typed any code, we talked about what the logic for such a program might look like, and how in our own words we might describe the sequence of instructions to complete this task. It looked something like this:

  1. Ask the user for a number
  2. Ask the user for another number
  3. Ask the user for an operator, in this case the choices were +, -, *, /
  4. Check the variable that we had stored the inputted operator in
  5. Carry out the arithmetic that was approiate based on the selected operator
  6. Print out the variable that we stored our anwer in

I won't add the Python code that we came up with to achieve this goal since it's longer than the previous code snippets, but the students can access their code for this program in their Cloud9 workspaces.

Continuing with our exploration of the Python programming language, we worked next towards developing a simple game that consisted of the computer randomly choosing a number, and us having to guess what it is. What is cool is that this program used the same concepts and skills that we learned working on our calculator program. We first needed a way to have Python choose a random number for us, and for this we used a Python library called random. Using this library we were able to have Python choose a random number between a range of numbers, in our case 1-10. That random number was stored in a variable. Next, we created a new variable so that we could accept input, which were our guesses. Finally, adding the If statements that would check if what we had inputted was the same number as what the computer had chosen. If this statement evaluated true, you won! But if it evaluated to be false, you were asked to input a new guess. While overall this game is fairly simple, it still gives the student a chance to see what Python is capable of doing.

A follow up exercise the kids were tasked with doing after completing these two programs was to write a program that could be used at an amusement park to decide if someone was allowed to ride a roller coaster based on their height. Again, starting with writing and talking in our own words how this might look before jumping in and writing some Python code.

Tying It All Together

In between these examples, we made some smaller programs to gain a better understanding of how things in Python work. We also went over how with Python you can create a list of things and the different things we can do with that list, like add things, delete things, or sort the list. We finished up our exploration with learning about how to create functions, touching a bit on classes and how they are different from functions.

This was all in preparation for our final program that we would be working on which was a text based adventure game. Starting with a pencil and a piece of paper the kids started to come up with the who, what, where for their adventure game. Next we had a discussion on what a decision tree is and sketched one out for our game. The adventure game program is great for practicing all of the concepts that we have learned so far with Python.

What I personally like about this activity is that it allows the kids the ability to add a lot of personalization because they get to come up with the story, the questions, and the outcomes of each decision. It is always a lot of fun reading through, and playing their games to see what they've created. We spent the last part of Thursday having the students showcase their adventure games on the television and walking the class through their code. If you haven't already I would highly suggest having your child login to their Cloud9 workspace and play through their game. The creativity in their adventures is unmatched!

Closing

We went over a lot this week! And for most of them I think this was one of their first experiences learning about computer science and programming. I made sure to add the names of the iPad apps that we used during our morning sessions so that you could get them for your own devices. I also tried to remind the afternoon group everyday that they can access their Cloud9 workspaces at home and work on their code outside on class. We will be keeping those work spaces online, and available throughout the summer. All of the Python code that they typed and worked on during the week is contained within these work spaces so they can pick up right where they left off!

My hope is that they will continue their curiousity for computer science! As well as keep practicing their Python skills and writing cool programs! If you have any questions or need a password reset for their Cloud9 account please don't hesitate to send me an email at chris@techemstudios.com.