November 10, 2018

Get started at http://www.coderdojokc.com/today

Welcome to CoderDojoKC! Let’s get you started!

Looking for something to do? Practice your typing skills! Typing.io is a great way to keep your fingers nimble and learn where some of those tricky keys are located.

Step One: Wifi

1. Open up your internet connection and connect to “Fiber Public WiFi“

2. Can’t connect? See if you can get to the wifi sign-in at http://google.com/fiber

3. Still can’t connect? Raise your hand and a mentor will get you a hotspot to connect to.

4. We recommend using the Google Chrome browser.

Step Two: Start Learning!

If you don’t know which programming language to start learning, we recommend Scratch (if Scratch is not to your speed, check out the typing.io link in the sidebar on the right).

You will need a parent or guardian’s help to create a Scratch login:

  1. Click “Join Scratch” in the upper right-hand corner of the Scratch site.
  2. Create a username that does not include your real name.
  3. Think of a password that you can remember easily. You should have your parent or guardian write this down and save it.
  4. Click “Next” and continue following the directions. You will need a valid email address (yours or your guardian’s) to continue.

Once you have a Scratch login, use the links below to build something awesome.

Step Three: Learn to Code

1. Are you brand new to coding? Start with Codecademy (recommended for 13 years & up) or Scratch (recommended for 12 years & under).  Want to try building your own phone application? Check out App Inventor! Be sure to create an account and write down your username and password so you won’t forget!

2. Do you have a little coding under your belt? Are you ready to learn more? Check out these fun games:

3. Were you working on a project from our last session? Feel free to continue on that, and ask mentors if you need any help!

4. Get started on the new project. We can’t wait to see what you create!

Step Four: Check Out the Projects

Mastery – Feeling masterful? Check out the requirements for our mastery badges. You can earn cool pins!

This Year’s Concepts:

Today’s concept: A Year in Review

This past year, we have done quite a few cool projects and concepts. Today’s project is to learn from the past year of projects and concepts and use at least one of those concepts to build anything that you choose.

Mastery Projects (so far!):

Winning Projects:

January: Variables

When we talk with each other, we use variables all of the time. In the phrase, “Dasia played Minecraft yesterday; she thinks it is a cool game,” the word “she” is a variable that can mean “Dasia” (in another sentence mean someone completely different) and “it” is a variable that means “Minecraft.” We also talk about things that change as being “variable.” For instance, the temperature this week has been variable, dropping below zero and rising above 50!

In mathematics, we learn that a variable is something unknown that can take a value. In early math, you might see a number sentence like: 2 + □ = 5; we know that □ is 3. Later on, that becomes 2 + X = 5; we know that X = 3 in order for that math sentence to make sense.

In programming, variables can be something unknown that takes a value, as in the case of a variable that takes the value of something that the user inputs. A variable can also take on the value of something more complicated to make referencing that complicated thing more easy. This can be like setting a variable dojo to Kansas City instead of having to type out that word each time you want to use it.

A variable can also be changed; think about having a variable called “high score.”

In Scratch, you can create a data variable and give it a value. The variable can be used by either the sprite or all sprites. You can show your variable and its value on the stage if you want to; this would be useful for a game score.
Additional information about Scratch variables

In JavaScript, you can create a variable and give it a value.
var myCity = "Kansas City";
Additional information about JS variables

Back to the year’s concepts

February: Making Decisions: If-Then-Else

When we are faced with a simple decision, how do we know which choice to make? Let’s say that your family has all of its toothbrushes in the same cup in the bathroom. How do you know which is yours? Do you have the kid-sized toothbrush with the red handle or the one with the Spiderman handle?

When I was a kid and my mom yelled at me, “Eric, get in here.” I knew that I had about 60 seconds to get to her; however, if she yelled, “Eric Aloysius, get in here right now,” I knew, since she used my fake middle name, that I was in deep trouble and I had roughly 1.5 seconds to appear before her. In my head, I thought, “Given that mom yells my name. If she uses my middle name, I had better drop whatever I’m doing and run to her. Else, I can gently stop whatever I’m doing and quickly walk to her.” So, when Mom yelled my name as “Eric Aloysius,” did I walk to her or did I run to her?

In code, this might look like:

var name;

if (name === "Eric Aloysius") {
  me.dropEverything();
  me.runToMom();
} else {
  me.saveGameOrBookmarkBook();
  me.walkToMom();
}

You might notice in the code above, that what happens after I’m called depends on the truth of the name including my middle name or not. This kind of truth is called a “boolean.” A boolean value is either true or false (also, yes or no). If-statements, such as the one above, rely on booleans. Let’s look at another boolean.

Have you ever made a deal with your parents that if you get a certain grade or score on a test, you can celebrate by doing something special like going out for ice cream or pizza? Let’s say that you were required to get a 90% or better on your test in order to celebrate. In this case, the boolean value is “score >= 90.” Your score is either greater-than-or-equal-to 90, or it isn’t.

var score;

if (score >= 90) {
  me.celebrate();
} else {
  me.scrubFloor();
}

If I were going to scrub the floor no matter what my score, my code might look a little different:

if (score >= 90) {
  me.celebrate();
}

me.scrubFloor();

You can also use several if-statements together:

var score;

if (score === 100) {
  me.say("WOO!");
} else if (score >= 90) {
  me.say("Woo!");
} else if (score >= 80) {
  me.say("Woo.");
} else if (score >= 70) {
  me.say("ugh");
} else if (score >= 60) {
  me.say("eep!");
} else {
  me.say("Nononononononono");
}

You can also check against several booleans (truths) together:

var score;
var subject;

if (score < 60 AND subject === "spelling") {
  me.askTeacher("Do you offer test retakes?");
}

As you can see from these, examples, there are several ways to use if-statements to make decisions and move your code along.

Back to the year’s concepts

March: Arrays and Lists

Arrays are collections of things that belong together. Arrays are found all over math and science. We have collections of antennas, called “antenna arrays,” that are used for listening to things far away.

Large planar array antenna of a VHF Russian mobile air defense radar — By Vitaly V. Kuzmin – http://vitalykuzmin.net/?q=node/469, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=21027006

We have arrays of phone switches.

Array of telephone switches and their operators

We have arrays of circuits.

Relay Array

Kids who have worked with multiplication are introduced to arrays that look like this.

Math Array used for multiplication

In programming, we also have arrays. In Scratch, arrays are known as “lists.” Arrays are very useful for storing things that belong together.

  • I can have a list of movies: 
    var movies = ["Black Panther", "Coco", "A Wrinkle in Time"];
  • I can have a list of great days: 
    var greatDays = ["yesterday", "today", "tomorrow"];
  • I can have a list of classes I’m taking: 
    var schoolClasses = [
  "algebra",
  "music",
  "English",
  "Spanish",
  "biology",
  "history",
  "gym"
];

The items in your array belong together. Think of your kitchen as a collection of arrays. The refrigerator is an array of things that need to stay cool. The freezer is an array of things that need to stay frozen. The pantry is an array of food that can be room temperature. You have an array of plates, an array of cups and glasses, an array of eating utensiles, an array of towels, an array of spices, etc.

Arrays also have a size. In my array of cereal, I have 4 boxes of cereal. In my array of silverware, I have arrays of forks (8), salad forks (8), tea spoons (8), soup spoons (7), butter knives (8), and steak knives (8).

In simple arrays like above, each item is in a numbered slot called a “key” or an “index.” In most programming languages, arrays start at zero (0) and count upward until you get to one less than the size of the array. So, for an array of 8 spoons, you would count them as “spoon 0, spoon 1, spoon 2, spoon 3, spoon 4, spoon 5, spoon 6, and spoon 7.” In a Scratch list, you start counting at 1. This can get confusing, but it’s important to understand if that’s how items are arranged in the programming language that you are using, because you get the item in a simple array by its key number.

var movies = [
  "Black Panther",
  "Coco",
  "A Wrinkle in Time"
];

// the first movie in this list, "Black Panther," is:
var firstMovie = movies[0];

We can also have an array of arrays. This is called a “multi-dimensional array.” Imagine a box of donuts. There are probably 12 donuts in that box of donuts. So, you might have:

var donuts = [
  "d1", "d2",  "d3",  "d4",
  "d5", "d6",  "d7",  "d8",
  "d9", "d10", "d11", "d12"
];

The third donut in that box is donuts[2] since we start counting in arrays at zero. But we know that we actually have 3 rows of 4 donuts in this box of donuts:

var donuts = [
  ["d1", "d2",  "d3",  "d4" ],
  ["d5", "d6",  "d7",  "d8" ],
  ["d9", "d10", "d11", "d12"]
];

Now, getting that third donut would require us to identify which row it’s in, too: donuts[0][2]

Question: how do I get the last donut?

// donuts[x][y]; what is "x"? what is "y"?

Bonus Question: if I had 10 boxes of 12 donuts, how would I get the last donut?

// donuts[x][y][z]; what is "x"? "y"? "z"?

Back to the year’s concepts

April: Loops and Repeating Things

2015 had 12 months: January, February, March, April, May, June, July, August, September, October, November, December
2016 had 12 months: January, February, March, April, May, June, July, August, September, October, November, December
2017 had 12 months: January, February, March, April, May, June, July, August, September, October, November, December
2018 had 4 months: January, February, March, April, … what months are coming?

Spin around and count each spin until you are dizzy. How many times could you spin around?

These are examples of loops. What are we doing with a loop? We are repeating things over and over again.

Your day could be condensed to “Wake up, do stuff, go to bed.”

while (alive) {
    me.wakeUp();
    me.doStuff();
    me.goToBed();
}

In Scratch, this could look like:

(repeat until (not alive)
    (wakeUp)
    (doStuff)
    (goToBed)
)

You’ll notice that even though these loops appear to go on forever, they have a conditional for when they can exit the loop. You want to have an “exit condition” to ensure that you don’t have an endless loop in your program.

In JavaScript, the school year could be written as:

for (i = 0; i < 40; i++) {
    console.log("Let's go to school this week!");
}
// Let's go to school this week!
// Let's go to school this week!
// Let's go to school this week!
// Let's go to school this week!
// Let's go to school this week!
// ...

Here, the exit condition is that it has looped 40 times. It cannot loop 41 times.

You can also do something with the variables that are part of that loop.

var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

for (i = 0; i < weekdays.length; i++ ) {
    console.log(weekdays[i]);
}

// Sunday
// Monday
// Tuesday
// Wednesday
// Thursday
// Friday
// Saturday
// Sunday

This could be rewritten using a special type of array loop called a `foreach`:

weekdays.forEach(function(day) {
    console.log(day);
});

What are some things that you can loop over? You can loop over items in a list, like repeating back the list of items you are supposed to get at the store.

You can also use a loop to repeat an action. For instance, what if I want to have a character walk across the screen? I could say:

me.move(10);
me.useNextCostume();
pause(1);

me.move(10);
me.useNextCostume();
pause(1);

me.move(10);
me.useNextCostume();
pause(1);

me.move(10);
me.useNextCostume();
pause(1);

me.move(10);
me.useNextCostume();
pause(1);

Or, I could put those actions in a loop:

(repeat(5)
    me.move(10)
    me.useNextCostume();
    pause(1);
)

Back to the year’s concepts

May: Random

Let’s take a look at a concept that helps make many games interesting, the concept of “random.” If something is random, one has a difficult time predicting its behavior. Many games rely, in a huge part, upon randomness. For instance, in a card game, the dealer will randomize the deck of cards by shuffling the cards; which cards you get are selected from a randomly ordered deck. We roll dice to come up with a random number between 1 & 6. In American Football, a coin is tossed to determine which team starts the game by kicking or by receiving.

Randomness in Nature can be truly random. Computers, on the other hand, thrive on predictability and, therefore, making something truly random on a computer is very difficult. Here at the CoderDojo, we can attempt to use the computer’s definition of random to our advantage to help make certain games more fun to play.

In Scratch, we have two ways of doing something randomly. We can pick a random number between a starting number and an end number.

Scratch Random Number operator

We can also select a random item from a list.

Random item in a Scratch list

In JavaScript, we generate a random number and use that to access an item in an array or to show a random number. Because JavaScript random numbers are a decimal between 0 and 1, we have to multiply that random number by however many numbers we want to select from and then round that number down to the nearest whole number. For example:

var randomize = function(things) {
    var randomNumber = Math.random() * things.length;
    var arrayItem = Math.floor(randomNumber);

    return things[arrayItem];
};

This function will take in an array and return a random item from that array.

Back to the year’s concepts

June: Functions

Have you ever found yourself repeating your code over and over in Scratch or in JavaScript? If you find yourself doing this, you can take advantage of “functions” to reuse the same code over and over again. In Scratch, functions are called “custom blocks,” but everywhere else, they’re called “functions” and sometimes “methods.”

All functions do something within your code.

Functions can take input and return output. This is like a popcorn popper at the movie theater: you add popcorn kernels and oil, and you get hot popcorn in return.

Other functions are like commands. They don’t take any input, but they do something anyway. It’s like telling your dog to sit. You don’t tell your dog where to sit, how to sit, how long to sit, or when to sit; you just tell your dog to sit. And guess what? Your dog sits. Good dog!

One way to think about functions is that they let you take a bunch of steps and give them a simple name. This is like teaching a robot to speak. You could tell the robot how to speak each time you want the robot to speak, or you can just create a speak function and tell the robot to do it instead.

voiceBox.turnOn();
voiceBox.setVolume(30);
voiceBox.say("Hello"); // This is the part that changes
voiceBox.turnOff();

voiceBox.turnOn();
voiceBox.setVolume(30);
voiceBox.say("I like to play games"); // This is the part that changes
voiceBox.turnOff();

The same, but with functions!

function speak(phrase) {
    voiceBox.turnOn();
    voiceBox.setVolume(30);
    voiceBox.say(phrase); // This is the part that relies on the input!
    voiceBox.turnOff();
}

speak("Hello");
speak("I like to play games");

As you can see, you can create the function once and call it multiple times.

Additional information about Scratch custom blocks
Additional information about JS functions

Back to the year’s concepts

July: Events, Broadcast/Receive

Today we are going to flex our code-magic muscles and look at events, broadcast/receive (aka publish/subscribe). On a web page or in a game, clicking on a button requires an action or an event (let’s call it “on-click”); that action will broadcast a message (ex. “HEY! The red button was clicked!”) that another part of the program is listening for. Once that message is received, an action will take place (ex. “OK, I now know that the red button was clicked, so I will ignite the rocket”). In Scratch, you would use the “Events” blocks for “broadcast” and “receive.” In JavaScript, you might use the event for “onclick” and run a function.

In a way, this is like casting a spell. You say the words or make the right motion and the appropriate action takes place. I could say “Accio taco!” and wave my arms just so and a taco from my favorite taco stand would fly into my hands. ”

Accio taco” is the Scratch Broadcast or the JavaScript event.

The taco flying to me would be the Scratch “when I receive” or the JavaScript function.

Example in JavaScript

Events Garden

Back to the year’s concepts

August: User Input: Text

If you ask almost any developer-mentor in this room who they write programs for, they will all tell you that they write them for clients, other people. All of these programs rely upon input from those other people in order to be useful. If you think about the games that you love to play, those games are fun to play because they rely upon some kind of input from you — it could be the press of a button, wiggling a joystick, or typing an answer. Today, we’ll look at the a user typing in text in order to provide input for your program.

In Scratch, we have one way of getting user input as text: Scratch: Ask and Wait. This will ask for input and store that input as an answer variable that you can use later: Scratch: Answer Variable.

If you ask several questions, you will want to store each of those answers in a different variable before asking another question. Scratch: Set answer to variable

In JavaScript, you can get user input by using a form. A form can take in text, ask questions where the user has to select either “yes” or “no,” offer a dropdown list for users to select one or more options, and others. Each form part should have a unique ID since that the answer to that part of the form will be tied to the ID.

<input type="text" id="place">
<button type="submit" id="submit">Submit</button>

In JavaScript, you would then pull information out of that form to be used in your code. You can do that by assigning the data tied to those form part IDs to variables.

var place = document.querySelector("#place");

You can then show that answer in a string by using string concatenation.

"I love " + place.value + ", it is such a cool place to visit!"

The Mozilla Developer Network has a great introduction to forms if you’d like to learn more about creating forms in HTML.

Back to the year’s concepts

September: User Input: Multiple Choice

If you ask almost any developer-mentor in this room who they write programs for, they will all tell you that they write them for clients, other people. All of these programs rely upon input from those other people in order to be useful. If you think about the games that you love to play, those games are fun to play because they rely upon some kind of input from you — it could be the press of a button, wiggling a joystick, or typing an answer. Today, we’ll look at the a user selecting an option in order to provide input for your program.

In Scratch, we have one way of getting user input as text: Scratch: Ask and Wait. This will ask for input and store that input as an answer variable that you can use later: Scratch: Answer Variable.

Last month, we asked an open-ended question to fill in text, like “what is your name,” “what is your quest,” or “what is the airspeed velocity of an unladen swallow.” This month, we’ll ask for specific answers to those questions.

Two ways that are recommended for asking questions with specific answers expected is to:

  1. Supply a default answer if an unexpected answer is given.
    Example image to show how to provide a default answer to a question when an expected answer is not entered.
  2. Keep asking the question until an expected answer is given.
    Example image to show how to keep asking a question until an expected answer is entered.

If you ask several questions, you will want to store each of those answers in a different variable before asking another question. Scratch: Set answer to variable

Another option, which we’ll explore next month, is to use buttons.

Back to the year’s concepts

October: User Input: Buttons

If you ask almost any developer-mentor in this room who they write programs for, they will all tell you that they write them for clients, other people. All of these programs rely upon input from those other people in order to be useful. If you think about the games that you love to play, those games are fun to play because they rely upon some kind of input from you — it could be the press of a button, wiggling a joystick, or typing an answer. Today, we’ll look at the a user selecting an option in order to provide input for your program.

In Scratch, we have one way of getting user input as a selection, in the form of a button: . This will fire an event that you can act upon.

In JavaScript, you can get user input by using a form. A form can take in text, ask questions where the user has to select either “yes” or “no,” offer a dropdown list for users to select one or more options, and others. Each form part should have a unique ID since that the answer to that part of the form will be tied to the ID.

<input type="radio" id="firstGroup" value="2018">October 13, 2018</input>
<button type="submit" id="submit">Submit</button>

In JavaScript, you would then pull information out of that form to be used in your code. You can do that by assigning the data tied to those form group IDs to variables.

var answer = document.querySelector("#firstGroup");

//You can then check the answer by using an if-statement.
if (answer == "2018") {
  doSomething();
}

The Mozilla Developer Network has a great introduction to forms if you’d like to learn more about creating forms in HTML.

You can also have your buttons do interesting things. For instance, you can have buttons change your background color.

<button id="red" onclick="redder()">More Red</button>

var red = 0;
var green = 0;
var blue = 0;

function updateBackground(red, green, blue) {
  document.querySelector('body').style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
}

function redder() {
  this.red = this.red <= 250 ? this.red + 10 : 0;

  this.updateBackground(this.red, this.green, this.blue);
}

Example in JavaScript

Back to the year’s concepts

Step Five: Show Off!

Did you create something awesome based off of today’s theme/concept? Come present it on stage! Presentations will start at 11:30 am. At 11:00, come see Mentors Anri and Eric to get a place in line to present. Scratch projects that will be presented will be added the CoderDojoKC – October 2018 studio by a mentor.

Your assignment today is to build something awesome that uses at least two buttons and behaves according to the buttons clicked. Have fun!

**Presentations may not contain any politics, violence, gore, or bad words. (And we’re counting “sucks” as a bad word!)