 Welcome to Elementary, my dear coder, where we're going to be talking about teaching computer science and basic programming concepts to pre-readers and early readers. I know there's a lot of paid programs and apps out there that offer to do the same thing, but it's important to keep in mind that this type of learning can begin tonight with a single tablet, computer, or smartphone. So hi, I'm Nicole. I'm a product developer for BoldGrid and we make themes and plugins for WordPress. I currently volunteer at my children's elementary school, that's them in the picture there with me. I work with third to fifth graders at their school now and I'm trying to get in with younger age groups soon. So the big question here is how? How can a four-year-old child do these things? And the answer is Blockly. Blockly is a colorful drag-and-drop language developed by Google. It adds a visual editor which represents code as interlocking blocks. It outputs correct code in several programming languages, including JavaScript, Python, and PHP. Blockly is used by hundreds of projects, including Code.org. They offer computer science fundamentals courses, and the first course has a minimum age of four. At the end of the course, the students will create their very own game or story to share. Excuse me. Students will learn the basics of programming and collaboration techniques. This is an overview of the lesson outline. There are videos, unplugged activities, and online puzzles. The videos are the numbered diamonds and they explain how to do an activity or puzzle and introduce new terminology and block types. The unplugged activities are offline, so they require printed course materials, scissors, glue, pencils, those sorts of things. And the numbered circles are the online puzzles. For these, the student needs to be able to drag and drop using a mouse or have an adult right there to do it for them. And they also need a basic understanding of up, down, left, and right. So this is what the puzzles look like. On the left is the play area where the program will run. In the center is the toolbox that holds the blocks you need for each program. To the right is the workspace where you drag the blocks to build your program. Above the workspace are the instructions for each puzzle. So this puzzle tells us that we need to add one block to the bottom to finish the code. So these puzzles have the students create simple algorithms to move a character through a maze using a single run command. The course defines an algorithm as specific instructions that explain the order in which to do something. It's a small list of steps to get a job done like a recipe. And a program is an algorithm that has been coded into something that can be run by a machine. So this puzzle tells us to add a block to the bottom to finish the code. Each TNT block represents one space. So to solve it, you would drag one down arrow to the workspace and attach it to the bottom of the when run block. Clicking the play button starts the animation and the character moves through the maze to follow the code. The code can be shown in JavaScript at any time by clicking the show code button in the upper right of the workspace. This puzzle is from Corsay, which is meant for children around the kindergarten age. And this puzzle is from course B. Course B was designed with first graders in mind. It provides more complex puzzles by assuming a limited knowledge of shapes and numbers. The same coding concepts are covered in both courses, but the puzzles are unique. So as we all know, a big part of programming is debugging. Debugging is finding and fixing errors in a program. So the first step is to find them. Most puzzles have a step button below the play space where you can evaluate one step at a time to find the problem. Ask the student what happened and what was supposed to happen. This puzzle tells us that there's an extra block at the bottom of the code. Drag it back to the toolbox to throw it away. This is also an example of the puzzle teaching the student how to play, which it does fairly often. At the top of the workspace, it shows five out of four blocks are found, meaning this puzzle is solved with a maximum of four blocks. The next concept taught is loops. Loops make code smaller and easier to write. They introduce the repeat block to solve the puzzles using less blocks. In earlier lessons, the repeat block sometimes showed in the toolbox, but students could solve the lesson without using it. Now they will have to use it to solve the puzzle correctly. It's the pink block at the bottom, and you can see it already has the number five pre populated in it. So to solve this puzzle, you would drag out the repeat block, attach it to the when run block and nest one right arrow inside. So this is another example of loops, and it's from course B. So as you can see, it's a little bit harder. The repeat block has question marks in it. So the student has to come up with a number by themselves. So generally speaking, I recommend doing course A and course B at the same time, complete a concept in a and then in B before moving on to the next concept. However, any lesson can be done at any time. So it's completely up to the parent or teacher how the lessons are done. You can always move on to a new concept without finishing all the lessons from the previous. The last concept taught is events. An event is an action that causes something to happen. Examples of events are pushing a button on a controller, clicking a mouse or touching a tablet to scroll. Events let the user direct your program and change how it runs when they want or need to. And this is where students can really let their creativity shine. They create a unique story by programming cartoon characters to talk and interact with each other. The first level is a free play level. So the students get acquainted with the options available. And then later lessons have objectives based on events. So they also have a pre reader express course, which is a combination of A and B. However, I don't recommend you use it. I think you should go through A and B completely. The only unique puzzle in the pre reader express is the spelling B. And it's a little bit harder because it teaches spelling in addition to the programming concepts. But the older kids do like how it looks like a word search. So the course has a curriculum guide with extended learning opportunities and lesson plans. It also includes lessons for emotional development. The video Stevie and the big project explains frustration and how to learn from it. Learning any new skill can be frustrating and overwhelming, especially for children. It's important to address this and any other emotional aspect needed to ensure the child's success. Remind students that failing isn't a bad thing. It's a first attempt in learning. Remind them to calm down and use logic. What is happening? What is supposed to happen and write down what you've tried? There are also unplugged activities related to Internet safety. And this teaches students the really basic, only talk to people you know, don't give out personal information. And the most important thing, which is go outside and play sometimes. So this curriculum does go up to 12th grade as well. So it's definitely a program that will grow with your child. So the next resource I have for you is called the hour of code. The hour of code provides introductory one hour computer science tutorials. Students in over 45, I'm sorry, the tutorials are available in over 45 languages and students in 180 countries have participated. They advertise the age range as being four to 104. So this really is a great resource for anyone wanting to learn computer science and have fun in the process. This is the main screen where you can select your tutorial. You can filter by grade at the top and the technology used on the left. I'm going to focus on two of these programs that only use animation and icons for gameplay. So reading is truly not required. So the first program is codeable. Codeable is a self guided game that introduces children five and older to programming basics. On the left is the first level. And the goal of every level is the same. To roll the fuzzball through the maze and collect the stars. The hand is animated in the first level showing you what to click on and drag it to the yellow boxes and then to press the play button when you're ready to run it. So a major difference between codeable and the other lessons we've talked about here today is how the move action works. In the other lessons, they would move one space at a time, one arrow. But with this one, they'll roll to the end of the path with one arrow. So they also teach loops and conditions. So the slide on the right shows the loops. They have the purple repeat or they call it the looper, but it's the equivalent of the repeat block from the code.org stuff. And then in later levels, they also introduce conditions. So if you want your fuzz to turn before the end of the path, you can absolutely do that. The next program is called CodeSpark Academy with the foos. And this game actually has animated icons. So you can see the difference between running and jumping, for example. And just like codeable, the first level has animation showing you exactly what to click on, where to drag it to, and how to run your program. This one doesn't have a play button, you simply press your character to start the program. It also teaches loops and conditions in later levels. So these are some more direct links to our code tutorials. There should be pre-reader options at all of these, but they are updated frequently, so be sure to check. And these are all on my website. Yeah, take a picture. If you go to elementarycoders.org, there's links to these and more. So that might be easier. My last thing I have is robot turtles. So I know I said you don't have to pay for things to do this, but this is really fun and cute. And I'm going to give this away to somebody. Does anybody have like a four or five year old that can get this game home easily? Oh, you got a girl right there. Okay. Oh, there you go. You're welcome. You're welcome. So that's that. Do you have any questions for Nicole? I hear a question over there. I have a quick question. I work with an elementary school. It's one of my clients and they use scratch. Is there any particular reason you chose Blockly? I know there are some differences, but what was the main reason you chose Blockly? Sure. So scratch is actually meant for older kids. And it's a little bit more complicated. The learning curve is greater because, yeah, there's more block types in there and it's just more complicated. So I think starting off with these pre-reader ones and then working into the scratch would be a good way to go. Question in the middle there. I was wondering about when you leave like an hour of code for a class, like how many teachers or helpers do you need kind of for students to get a good outcome? Sure. Well, when I go in, I just, it's just me and the actual teacher in the classroom and we just do the best we can. A lot of the games are self-guided, so it really does teach the student how to play so they can do a lot of it by themselves. Like I put my five-year-old in front of Codable and she made it to like World Two and a Half or something before she asked for help. So they really do a good job of teaching the student how to play. Another question in the middle. Hi. I have a two-year-old. Okay. She's pretty little. Yeah. And these are obviously computer games and techniques for teaching kids that are kindergarten up. Right. Do you have any, obviously you have kids and they were once two years old. Right. Do you have any suggestions for teaching these concepts to little kids or at what point did you start that? I started my son around four, which is the minimum age for a lot of these programs, but it's really just going to depend on the child. Like if they understand up, down, left, and right and can point you in the right direction, I mean you can do the drag and drop for them. But yeah, everything I've seen basically has a minimum age of four. Question on the left. Okay. So I'm super excited to hear you talk about this. We did this in second grade with my dollars class. Like they were going to computer class but they weren't really doing anything because the teacher was not a computer teacher. So we said we'll just come in and do code.org with them. Right. And it was amazing. Like brilliant, fantastic, loved it. But how would we, like how if as parents or as developers, how do you suggest we work with public schools specifically to go in and say, you know what, we'll come, we'll teach. You have the computers or we'll help find the computers. Like we want to serve you, but how do we help work with administrators who may not be, it may not, they might not even be allowed to let other people come in and do that. Like our teacher, she just kind of did it. Yeah. She was real loose like that. Okay. Yeah. So I think the best way to get into the schools is to look through the curriculum guide and see if you can match up any of the stuff because that would be a really easy pitch. Like yes, this program fills this requirement. I'm volunteering to come in, you know, just let me do it. The way I got in was through the, yeah, the hour of code. I volunteer. They have what they call Fun Fridays. So that's what I do for that. And then because it went over so well last year, I'm trying to get like an after-school club going. So if you can't get it going on school time, try the after-school thing. And then once they see that students are excited and that it's working and they're learning, they might be able to let you come into the classrooms more that too. Last question in the back. Have you tried any non-screen, non-digital STEM toys? Like, you know, these days I saw Botley for teaching programming. Have you tried anything like that? Does it help? I'm sorry, can you can you repeat that? Have you tried any non-screen, non-digital, offline? Yeah, so that course has unplugged activities as they call it. Yeah. So you print and actually cut out the arrows as opposed to dragging and dropping them on the computer. So they'll end up with little cards that they move around to build their program that way. Or you have physical students lining up and they talk and they tell you how to move. You have to move how they tell you to. So that code.org curriculum has a really good number of unplugged activities. I see. Thank you. You're welcome. Well thank you everybody. Thank you Nicole. Thank you.