Getting Started Teaching JavaScript

Welcome everyone. Thank you to those of you who are taking some time out of your afternoon to spend here with us at CodeHS as we talk all things JavaScript today. So, we are in our summer webinar series. Last week we had some great sessions co-hosted by our teacher trainer group and today we have another amazing and talented and very knowledgeable wonderful teacher trainer, Paula, here with us. So, I'm going to give folks a minute to get settled as we still have some attendees coming in the door.

I also want to provide you with a link to a copy of our slide deck in the chat. Now, you don't need to open that up. As you can see, I am screen sharing and so you are free to just follow along with the Zoom webinar today. But if you want to come back to the slides closer to the school year starting, if you want to remember what should I be thinking of when I'm choosing curriculum or what was that amazing project Paula said that her students liked, then you will get access to the slides. You will get a recording of this session in a follow-up email. And so, no worries. If you want to open that link, go for it. If not, no big deal.

So, let's start with some introductions next and our welcome. My name is Stephanie Bennett. I'm a professional development specialist with CodeHS. I've been with the company for two years now, but previously taught in the classroom and also wrote curriculum for computer science. I will be showing off the platform today and talking a little bit about the JavaScript courses that are available. But who you're really here to hear from is Paula. So Paula, go ahead and introduce yourself.

Hi, I'm Paula Medina. I teach computer science at Brian McMahon High School in Norwalk, Connecticut. I've been doing it about nine years and before that I was a computer professional for a hundred years. And now I teach JavaScript. I'm going to start the new AI class next year and I teach AP principles and we have one section of IB computer science. So that's a lot of prep. I'm full-time and we have another teacher who teaches two classes of JavaScript. So we are a big school.

Well, that's amazing. You're growing your program and students are finding success through multiple different years. So that's a hats off to you and your colleague for sure. Well, today we are going to first spend some time talking about the different JavaScript focused courses that are available on the CodeHS platform. Then we are going to actually ask you the attendees to put on your student hats while I get to play teacher, which is my favorite part of being here with you today, and we'll work through a lesson together. Then we will talk about the basics behind JavaScript like why should students learn JavaScript, what's involved with learning the syntax of JavaScript, and how we use JavaScript in our IDE, and then we are going to get some specific advice from Paula about CodeHS tools and curriculum.

So we are a fairly small group here today of 11 and so we're going to skip the Q&A. We'll just use the chat and if you would please go ahead and open up your chat and introduce yourself, say hello, tell us where you're joining from and if you have a particular question that you brought to the session today, feel free to drop questions in the chat and stay engaged throughout our time today. We'll also invite everyone to sign up for a CodeHS teacher account. It's completely free to sign up for a teacher account and to also create some sections and try out some of the curriculum with your students. Student accounts and teacher accounts are always free to try out our fantastic curriculum and instructional materials. So, we will encourage you to go ahead and like I said, if you don't already have a CodeHS account, sign up for one. There are a couple teacher questions you need to answer to get verified as a teacher, which takes a few minutes.

So, while you are doing that, I'm just going to give you a little high level on CodeHS. So, while our name is CodeHS and that might invoke high school to you, that's where we started. We started as a curriculum company providing support and materials and curriculum to teachers teaching introductory and AP level computer science in high schools. However, as time has gone on, CodeHS has been around for 14 years now. As time has gone on, we have seen parents and teachers advocate for it, and more and more states are legislating graduation requirements around computer science. What I'm getting at is more people are seeing the importance of computer science education for today's students. And so we have expanded from just high school courses down to middle school courses and most recently in the last 3 to 4 years, elementary school courses. So, we've got you covered. K through 12 is available on the CodeHS platform and we're all web-based. So, I love that piece that anywhere students have a device, whether it's an iPad, a Chromebook, a Windows-based machine, whatever your students have, as long as it has internet and a web browser, students can connect with these high-quality instructional materials.

We do offer professional development. You know that you're here with us today, but we do offer a full summer series of professional development. So I'll let you know what's coming up at the end of our session today. And so a little bit more about our platform teacher tools and LMS system. We do offer features where teachers for free can review student work, grade student work, and communicate on the platform with students, which are some free features you might be familiar with that are available in many learning management systems. And then if you do opt for a pro license, then we have really powerful tools to just increase your efficiency and your ability to reach many students. Tools like AI grading and academic integrity tools are very powerful tools on the pro license if that is something that you have access to. So, we'll talk about both the free platform and the pro license tools today a little bit and answer your questions around any of the tools that we have available. Also, thank you so much for everyone saying hi in the chat. I'm seeing Michelle from Indiana. That's where I'm based as well. Hello to you. We've just got people from a little bit of everywhere today, so this is amazing.

All right, let's jump into our JavaScript courses. We have a lot of JavaScript courses and I'm going to highlight a few of them and then ask Paula to jump in and just tell us which one's her favorite and how she goes about selecting curriculum for her students. Let's first try some of these courses out. The first one I want to talk about is our flagship course called Introduction to Computer Science and JavaScript Corgi. You'll note that many of our JavaScript course names have a dog name aligned with them. So you'll see Golden, you'll see Corgi, you'll see Bulldog. I feel like I'm forgetting one, but anyway. This is definitely our flagship introductory level course. This is suitable for middle school or high school beginners in computer science. I'm going to put a link to the chat to our syllabus. I'll also do the same with our Carol the Dog syllabus. This one is a shorter course. So, if you are looking for just a quarter-long unit, a couple of units, then maybe this one is more appropriate for you. And then the other one I wanted to highlight because whenever students see video game design or video game development in a course title, they get really excited, right? So, I think it's fantastic that we can really hook students into computer science via a video game design course. So, I will also drop this link in the chat for you. Please feel free to check one out or more than one out while we hear from Paula.

We have all of these courses available. Paula, which one is your favorite JavaScript course?

Corgi. I love that. That was new last year or the year before, right?

Yeah, two years ago.

Two years ago. And the first part with Carol is a must. All the kids love it. In my school, we have a lot of different abilities in the same class. So the Carol interactions allow the kids that may be a little more hesitant to move at their pace, and there's enough hard problems in there that allow for my fast runners to continue on and attempt the challenges before the rest of the class. Since it is a newer course, all the answers aren't out there necessarily. Last year was great because there weren't any answers out there, but now they're getting out there. I think you guys did a nice job. You still have Carol in the front, that's perfect, and then you limited unit three, which has the basic hardcore JavaScript commands, and then you threw in the graphics. The two parts about this course, you have Carol, which is an animated dog that you move around, it's fun.

You can tell that Paula and I are both fans of Carol. We've got her in the background.

Oh, yeah. Carol's all over the place. But I find that if we hook the kids with it, and I even print out plastic Carols on the 3D printer, if they do really well they get a plastic Carol and they can turn that in for something, whatever I decide that day. So we push Carol, and the kids can say do you know Carol, and it helps. I love the graphics about it and that you guys refreshed the graphics. Sometimes I get bored with the basics and then I can switch to the graphics, and that helps. That's why I like it; the curriculum's great and you can jump around in it a little bit. So that kind of helped. Did I sell it?

I love it. Yes, and I think you were talking about students who need a little more scaffolding can lean into that Carol coding environment. That's a really limited form of JavaScript. For folks who are not familiar, Carol, our dog, only knows a few commands in JavaScript and it's also supported by block coding. So if your students are used to a Scratch-based coding environment or another block-based coding environment, it's very simple for them to tinker around and get used to coding with blocks with Carol. Then the Corgi course moves, as Paula was saying, into text-based JavaScript where there's a lot more commands and students learn conditional structures and data structures. Then just to keep students on their toes, we move them at the end of the course into a graphics-based environment where students are creating shapes on the canvas, able to use different colors on the canvas, and animate the shapes moving across the canvas. It kind of starts to get them thinking about that game design piece. So, I'm glad your students find it accessible, Paula, and also keeps them on their toes in those three different phases like you said. Were there any specific projects that really engage your students in that Corgi course?

Yes. I mean, all of the fast students get through the first two sections no problem and they come up with creative ideas. For the not-so-fast students, I do limit the ones they have to do because there is a lot of repetition. As we know, to learn coding, you have to do it just like you have to repeat multiplication tables. It's the same thing. But maybe they don't need to do it 10 times, they could do it eight times so that I can keep them moving through it. One thing when I get to unit three, which is the text-based commands, you can see that I'm losing them because it's too hard. They've had fun with Carol and now it's hard. So I immediately say, "Okay, I'm bored today. Who's bored?" And they all say, "I'm bored." I say, "Okay, we're going to learn how to draw a circle." And then I say, "You have to do an infinite number of circles." They've already learned loops and they've learned randomizers in Carol, and they go, "We don't know how to do that." I go, "Well, look at docs," because the documentation is so good in CodeHS that I don't have to be the answer to everything. I think that's the main reason that CodeHS is so good. The kids who don't need my help can run ahead. The ones that need my help, I can guide them to finding the answers themselves because we're one teacher and sometimes I can have 24 kids in the room.

In my first year, I was a little too focused on thinking that I had to solve every problem, running from kid to kid, but now I've learned. I say, "Oh, okay. That sounds like this type of problem. Talk to Joe." And Joe will say, "Oh, I don't know what I'm doing." And I'll say, "Yes you do, Joe. Go over there and see if you can see it." I do that from day one because otherwise, as a teacher, you wear yourself out. When you're not happy, you know, we're teachers, they can turn on you. So that's kind of why I like CodeHS. They have the examples, they have the videos, and creative solutions are wonderful. Everybody can win with this curriculum, I think.

Oh, I love that. Very high praise. And I want to pull out a couple of things from what you were saying. Just to give folks a preview, we are going to see the docs that Paula was just talking about a little bit later when you experience a lesson as a student. So, if you're feeling like you don't know what that is, we will point it out to you and make sure you know. The other thing I want folks to take away from what Paula was just saying is what is this going to look like in my classroom? Because we do have teachers who are completely virtual teachers where everyone is self-paced and working on something different. Then we have teachers who really love the direct instruction piece where everybody's learning the same thing at the same time, so they can lead really collaborative sessions and have students go unplugged to work on abstract computer science concepts together. Then we have teachers who do every shade in between. As we're getting advice from Paula today and taking a look at the curriculum and the resources that teachers have available, be thinking: what are the classroom routines that are really important to me as a teacher, how can I bring those routines into computer science, and what kind of routines might I need to establish with my students upfront so that we can all be successful all year long and not get burned out, exactly what Paula was just saying.

We've got some great comments in the chat. A kudos to you, Paula, and your plastic printed Carol. Somebody else uses a stuffed animal Carol the Dog, which I think you can purchase in our CodeHS store. Carol becomes a celebrity in schools that use these Carol lessons. Rebecca asked a question: can you code Carol in the first unit as text-based code if you have a pro account? Carol can be block or text for students no matter if you are a pro or free teacher. Students have the ability to switch their own IDE from block to text. So yes, Carol is available in text JavaScript and Carol is available in blocks in JavaScript.

Let's drill down into this Corgi course that Paula has been singing the praises of. It is 125 contact hours, appropriate for probably 8th grade, upper middle school, and intro-level high school courses. I did give you the syllabus link already, but I will also put the course overview page into the chat because that course overview page has some really fantastic examples of what students will be able to build once they have gone through these units that Paula has given us a great preview of. Color the Rainbow is one of our graphics assignments that comes in that third part of the course that Paula was talking about. Jukebox asks a pop-up question: "How many quarters do you want to put in the jukebox?" I'm going to type in three and then I get some song options. Then the jukebox prints out the songs that I selected to play, which is likely in that second part of the course where students are working on the text-based JavaScript side. Carnival Game is at the end and is also graphics. You can see now students are doing color changing and shapes moving up and down. I don't think it actually does anything interactive, but it at least gets that cool visual happening. Breakout Game is interactive, which is a classic game you might recognize where students code the paddle, the ball, and the bricks. This is the final project of the course, so you can see it's pretty advanced coding and graphics happening here. Really fun and interesting assignments for students to complete.

As Paula pointed out, the first part of the course is programming with Carol and those very truncated small options available to really just get students lots of practice with coding and with the various control structures that they have available. Then they move into text-based coding with JavaScript basics. Then they get into the canvas and the visual output that we saw, and finally functions, animations, and games. That project Breakout is the one I just showed you, and there is a final project and a final exam available if that is something that you would like to implement with your students. I do want to point out that with many of our CodeHS courses, Corgi included, our curriculum team also curates supplemental materials. This course does not get into arrays, but you can see one of the extension assignments here is arrays. Paula, for your fast finishers, do they ever get to this level or do they mostly still stick in the coursework?

I teach this course in one semester.

Oh, wow.

Yeah. So, this semester I have one guy who just finished the Breakout project and he's now working on arrays, and I have another student who just did the circus or whatever that thing is. But personally, I want to keep them interested, so there are some projects that are very hard and sometimes I just take those out. Especially for new teachers who maybe aren't comfortable with JavaScript, don't worry about how fast you go or what you do; you can do the first three units in one semester. I found that every year my kids move faster because I think I'm getting better at knowing when to teach what, but they always do well in AP because they've had something. I wouldn't worry about how fast you have to go, but just keep it moving so that you don't lose them. If we spend too much time on making them get it perfectly right, asking why they don't know the curly brackets or parentheses are there and telling them to do it again, that doesn't work. It has to be more flexible. I use the line, "Oh, I haven't done this one. Maybe you can do it and teach me," a lot because we can't remember everything and I don't want to spoon-feed them.

There is definitely some circular spiral curriculum design here because students will see loops in Carol, but then they're also going to see loops again in JavaScript basics. Maybe they aren't ready for it right when they first see it in Carol, but they're going to see it again so it's okay, like Paula said, just keep going and let them try again later.

These challenge units like Carol challenges are pretty easy, so I'd leave that in. But some of these graphic challenges I struggled with myself, and I don't have a computer science background except being self-taught. Do students need to do all four graphics challenges? Maybe not. Maybe they just need to do one, right? Same thing with these functions challenges. If students get one done, great. Do they need to get all three done? Maybe not. It's your choice as a teacher.

One thing I like about the challenges, like the Carol challenges, is there's one called Fetch which is very easy and everyone can do it. Then there's one about doubling the balls that nobody can get, so I can lead everyone through those. The superstars did five and the other guys did two, and I tell them two is what you have to do to get an A. If you do three, you get extra points. So, I'm very liberal in the sense that I'm trying to keep them motivated because I feel this is one of the most important classes in high school. If they can think logically and recover from not doing well, I think we're doing our job. I'm not one of those teachers who says, "Oh, you didn't do all five, so you get a C." I'd rather say do two, that's the A, and good for you if you did more.

I absolutely love that advice, especially for new teachers. So, thinking about all of these different courses we have to offer, how are you going to sift through the CodeHS catalog and pick one that is right for your students? Maybe you try one one year and then it didn't work so well, so you try a different one the next year. We come to learn as seasoned teachers that that is the job; we get better every year. To help you start sifting through, I do want to throw some things out there. Do your students need an introductory level course or do they have some coding knowledge and are ready for more advanced topics? Do you just want to focus on coding in JavaScript or do you want students to learn about other computer science topics like digital citizenship, cyber security, game design, or web design? It's totally up to you as a teacher. How much time do you have? Paula, I'm just shocked that you teach this entire course in a semester, but I'm glad that your students are finding success with that. You're clearly building a fantastic program that is rigorous for your students if they are getting through this amazing content. Do your students need the support of block coding or can they jump right into text-based coding?

I don't like block coding myself. Sorry. For middle school maybe, but I don't think the high schoolers need it.

We always get questions like how do I help my students switch from block-based to text-based, and I am not sure honestly that I have a perfect answer to that question.

It's almost like an AI is helping them build it already and then they're going to jump to AI, so it's a hard point right now regarding how much we have to force them to learn the old way. It's sort of interesting.

I think there's something to helping students see that they're not learning a tool; they're learning skills that they can apply to any coding language they need to tackle. That speaks to your point earlier, Paula, about how if students can think logically and computationally, that's what we want them to take from this class. We don't want them to say, "Oh, well, I know how to use Carol the Dog." Carol is not a real coding language, so we don't want students getting stuck thinking they can only ever know JavaScript. Once they know the structures available in JavaScript and think computationally and logically, they can take that to other coding languages. It's not the tool; it's the thinking that is important.

Back to selecting a course: standards. Are there specific standards that you need to address? Paula, when you selected Corgi as the course for your students, what was bubbling in your mind and what was important when you were sifting through the catalog?

I think the way it changes is important. You start with Carol and we do that pretty rapidly, then it goes to text, and then I throw in the graphics. Then I throw in some more and say, "Okay, we got to go back and do the boring stuff. We're going to learn this and practice this," and then we do advanced graphics. I have them do slideshows, delays, and things like that. By the time we're done, they're already inventing their own projects because if you throw animation in, they might say they don't know it, but I tell them it's in Unit 8 and suggest they go preview that and show me what they bring back. That way, again, I'm helping the more advanced students find something more advanced, and the other ones see that they're doing fine because they're completing what is required. Then they bring it back and everybody learns. I like this course because it allows me to do that.

It sounds like there's a lot of flexibility there for you. You touched on pacing a tiny bit earlier. What pacing advice do you have for a first-year teacher?

You have to set minimum milestones, and it may be a minimum requirement but it can still earn an A grade. If they don't make that, they can get into a mode of not knowing what they're doing without deadlines. When they're having trouble, I offer after-school help, but I also utilize peer help by telling a student, "Oh, I remember he did that. Maybe you can go over and help give him an idea." I make it very clear you have to meet the minimum milestones, and I don't make them too hard so everyone can meet them.

That's perfect for an intro-level class. Spark their interest, grab them, make them want to learn more, and move them on. We have some questions from the chat. Somebody heard about your AP teaching and asked: do you ever assign any lessons or units for AP before the school year starts?

No, and that's a school policy. But the more advanced kids get a lot more out of it, like the kid who's doing an array in JavaScript so he already knows some of the indexing. I explain things to them, but I'm not allowed to give summer work.

Rebecca was asking about teaching Python and JavaScript to the same students in the same school year. Do you have any preference on what language would come first?

Every year I think maybe I should switch it and teach them Python, but then I think I like JavaScript because it does give more of a definition. It's not as free-flowing, and that helps them with Java. Then sometimes I consider throwing in some web-based stuff, but I think AI kind of has the front end covered. I always go back to JavaScript because it's free enough for beginners but it still has functions and methods, and variables have to be defined. You can't get bored with JavaScript if you're teaching the same class forever, but I don't think it'd be wrong to teach another language first or even let them switch. We just had some people from Lockheed Martin come in to talk to my advanced classes, and they said that we need to switch our teaching to full-stack, meaning front-end, database, middle, and back-end for a student. Because of that, I'm thinking about throwing in an AI front-end for their JavaScript code, and I may do that next week. I think we have a lot of room to experiment and I don't think anybody has the right answer right now. We're moving in all different directions, and that's good.

I totally agree with that. There's always a new coding language coming out and we're always playing catch-up for sure. Well, I want to give our attendees a chance to put on their student hats and experience a lesson from our Corgi course just as a student to get a feel for what this looks like if they have never been in the CodeHS platform before. Hopefully you've already gotten signed up for a teacher account, but now you're going to join a section where Paula and I are the teachers of the course and you will just sign up as a student. I've put a link in the chat: codehs.com/go/becaf. Once you click on that link or type out that URL, you will see a screen that says "Join Section." I'm the teacher, Paula is the teacher, and there's a big blue button that says "Join Section." I'll give folks time to join with that URL.

We're going to be looking for the lesson "JavaScript Basics: Hello World." Be thinking as we're looking at these materials from the student side: what do I want my students to do with these materials? We can see here in this lesson that we start with a video that's going to teach us some JavaScript, then we have a quick multiple-choice quiz check for understanding, then we have some example code that's already a fully functioning program meant for us to tinker with, try to break, introduce bugs, and try to fix, and then we have two coding assignments. Think about how this would work in your classroom. Do you want to go the route of self-paced where students watch the videos on their own? Are you a flipped classroom teacher where you want students to watch the video at home and come in ready to talk about what they saw the next day? Or are you going to show the video or use the slide deck for direct instruction to start off the class and then cut everybody loose to work individually or through things together in small groups? It's really a very flexible curriculum, so I want you to be thinking about that as we take a look at this assignment.

Let me switch to my student view here and get into that Unit 3 lesson. I did limit what you have available here because I didn't want to overwhelm you all with the entire Corgi curriculum. Right now you all just have access as students to a couple of lessons from programming with Carol, the Carol challenges, and this Hello World lesson where we are going to start together. In many of our programming-focused courses, the lesson format will be pretty much the same: some kind of content delivery generally in the form of a video. In our newer courses rolled out in the last year, there are a lot more interactive activities, so be on the lookout for some of those coming to our JavaScript courses. Then there will be that check for understanding, an example program to tinker with, and then some assignments to code either from starter code or from a blank slate. So, let's hop into this video and see what that's about. Let me make sure I'm sharing my sound.

In this lesson, you will learn how to write your first basic JavaScript program. Traditionally, the first thing you will print is a message onto the screen. Let's make a message "Hello World." First, we need to include a main function in the program. We write function main, a pair of parentheses, and a pair of curly braces. Inside the curly braces, we write our code. To print in JavaScript, we write console.log open parenthesis. After, we include our message enclosed by a pair of quotes. Therefore, we write quotes "Hello World" quotes close parenthesis. And then we end every line in JavaScript with a semicolon. Then outside of the main function, we call it by writing main with a pair of parentheses and a semicolon. When we run the code, we see "Hello World" is printed to the screen. To print a different message, we change the text that is passed to console.log. Let's print "My name is Carol." We would replace the current message with...

All right, so that's an example of a video. Once you're past year one and you're getting more comfortable with JavaScript and the platform, we also have slides available to teachers and students. Everybody has access to slides, and teachers with verified accounts have the ability to download Google Slides, edit them, change them up, and make them your own. If you have something that's worked really well to teach a certain concept before, feel free to bring it over to CodeHS and use these tools as a launching point for your own teaching and direct instruction. Here we are in the slides. If I wanted to just teach from the slides, I could do that just by clicking through this slide deck. If I wanted to add different examples because my students needed a little bit more repetition, or if I want to just move on and find the slides that really show all of the code that my students are going to need to use in lessons, then I can do that and put an emphasis on those. Many of our slide decks will end with a slide that repeats the piece of code that students are focusing on learning that day.

You can see now that we have clicked through all those slides or completed watching the video, look down here at the very bottom of my screen. Our lesson 3.1 is in yellow because I've started this lesson but haven't finished it yet. This video icon has now changed to a teal green color, and those colors are going to be important when we get to the teacher side. For now, we are just going to continue on and take this quiz together. Students, what is the proper function to call to print to the screen? What did we just see is the JavaScript function for allowing us to print to our screen? We saw in the video that it is console.log. Let's click that answer, click check, and we get a little confetti for our correct answer. We can submit our quiz and move on to an example. Note that the quiz has now turned that teal green color.

Examples are really powerful stuff, but technically all students have to do is run the code, click next, and move on to get a point in the grade book. Paula, how do you like to use examples in your classroom? How do you get students to engage with these pre-coded, fully functioning programs?

In the early stuff, I usually like to do this in the Sandbox. I would say, "Okay, this lesson teaches this. Let's build it together." This would take what, four minutes? So we build it together. Then I say, "Okay, go look at the example, hit run, and see it's easy. Now you do one." Then they run with it. I'm not big on forcing them to look at the video or look at the slides, but I am big on checking if they finished. If they say they don't know what to do, I suggest they go back and look at the slideshow because some don't need it and others do. I don't control them as much as some teachers, and I don't know if that's good or bad; I just know with my personality it works better. I try to guide them back to look at it, or I offer to bring it up on the board, and then usually they all watch. I kind of trick them into looking at them.

Sometimes the example programs are sneakily helpful in the coding exercises. If students are blowing through these and not really playing around with them or getting used to reading expert-written code, then they're shooting themselves in the foot because the exercise answer is probably in the example.

They catch on to that. I'll say, "Well, what did the example show?" and they'll realize they saw it in an example, go look at it, copy it, and then they move on. But I just don't like to slow them down by controlling anything really. I do enforce that they must have functions; I teach functions day one. And I teach indentation; I tell them if it's not indented, you get a zero because I can't read it. I have a lot of those kinds of specific rules that help bring their attention back to the details.

Yes, you've got that industry experience where you know that we have to have these norms or programmers can't work together. Almost all programmers work on teams and are looking at code they didn't write, and that's the whole point of those examples: you have to be able to read code and understand what it's doing even if you didn't write it.

I promised students that we would talk about what you're seeing here in the IDE and give you some hints, tips, and tricks on best practices for how to be successful when you're writing code. The first thing is that in our Carol world, we have the ability to click through code line by line, run it fast, run the animations slow, see test cases, and get warned when we're not getting Carol to the end world we want her to. Here in JavaScript, as you saw in that example when I introduced a bug, our error messages are a bit more cryptic, but we do get some hints here with the check code button. Test cases are important when we get here to text-based JavaScript, and then the Docs tab, which Paula mentioned almost first thing in our program, is essential to know about. Paula, what do you want to say about the Docs tab here?

I like the way that if you go into Docs and look at the documentation, they have categories. It's always hard for the kids to remember where things are, so I tell them to just hit them all and find it. This also helps them learn the vocabulary. You can always find the answer. They'll say, "Well, it says for loop." I tell them to look at the code and ask if it looks like what they coded before. If they aren't sure, I tell them to copy it over and see what happens. I try to use it like that because we can lock down our Chromebooks, so they can't go out to Google or AI to find it; they really have to use Docs. I think that is the best, and it doesn't take long to train them on that. It'll save you so many questions. I use it too. I'll throw out a question like, "Does randomizer have a capital R or not? I don't know," and they'll yell the answer back at me. I use a lot of those tricks like pretending I don't remember and asking them to look it up for me, which keeps them busy and self-reliant.

Some other tabs up here that are important on the student side: the Assignment tab will remind you what it is you're building towards; the Grade tab will have a view of the grade that you receive once the autograder has graded or if a teacher has finalized a grade; and the More tab is very important because Paula mentioned that she liked the slides and telling students to go back and look at them. By clicking on "Video" under the More tab, it brings up the slides, and now students can look at the code from the video right next to their own code. I think this is just as powerful as the Docs tab for sure.

The other one is the Conversation tab where a student could send the teacher a message saying, "Hey, Miss Medina, I don't know," and teachers can write back right in the assignment, which is also really helpful to students. Code History is another one I like to point out because students sometimes start writing code, get into a place where it's broken after working over multiple days on a challenge activity, and need to go back. We don't have an undo button on the CodeHS IDE; all we have is our Code History. Students can go back and reset to the starter code or a previous snapshot, which is a really helpful feature for students to know.

That is a CodeHS lesson in a nutshell. It looks like Rebecca has a question about the Carol lessons being similar between Corgi and AP CSP. Paula, are those the exact same or are they a little bit different?

They're pretty close. They're very close. One thing I did was I started them with functions early so that it would be different from what they could find online, and I try to throw in different things and tell them for this specific assignment they have to use a certain structure.

I do think, Rebecca, that they are similar but not the same. There's only so much you can do with Carol and the commands that Carol knows. It's a very simplified version of JavaScript, and you even have to teach Carol to turn right. So yes, similar but not the same is the answer to the question there.

All right, so that is the student experience. I hope that you all feel like that is accessible to your students and got a feel for what this looks like. To review some vocabulary before we move on: Modules are units of learning; Lessons are generally an activity with 45-minute to 60-minute expected timing; and Activities or Assignments come within that, which is what we were just working through together. Paula, anything else you want to say about the IDE, like what tools your students find the most useful or any student stories about Carol and the IDE?

The one I like the most is the history because you'll get kids who say they finished it, but when you look at it, you know they copied it off the internet. I go, "Oh, let me check your history," and ask how they went from nothing to a hundred lines of code. If they try to defend themselves, they have to walk through the code. They finally learn that I've been around a while. That's my favorite button for catching cheaters early so that they don't miss out on all the little things you learn every day, because if they don't learn those, they stumble for the rest of the way.

The Code History is very powerful and is the basis of our academic integrity tools. We can have some really powerful conversations with students and see everything. Paula, you mentioned you use the Sandbox; teachers can see everything their students build in the Sandbox also. There's literally nothing students can do on CodeHS that teachers can't see.

I start them out with the Sandbox. We'll do the first unit and then I'll tell them to go into the Sandbox. When they ask where it is or how to do it, I tell them it's in the upper left-hand corner and to try it out. I'll tell them to build a function to make Carol move five times and to go ahead and try it. When I don't baby them, all of a sudden they're more interested in trying it, and I like that.

Yes, you are pushing them with some inquiry-based learning. I love that so much. When students do stumble, you've mentioned a little bit about some of the routines you have for students asking for help: you tell them to go to the Docs tab, look at the slides, and look at the examples. Do you have routines like "ask three before me" or other kinds of help sources in your classroom?

No, maybe I should. What I do is generally walk around, and if someone says they don't know what they're doing, I look at it. If it's something simple, I'll give them the answer. If it's something that I think others are having the same problem with, I'll say, "I don't see the problem. Who has good eyes?" and pull another student over so they start talking together. I like to do that because in my first year teaching this, I'd have a line of kids waiting for my help and I'd get frazzled. I finally figured out that other people have answers, so I'll suggest they go talk to someone else who seems to be moving on. Generally, I get a little productive chaos going, which I love, and it extends for the rest of the semester. I kind of force them to interact, but maybe I should do "three before me."

It sounds like that's exactly what you're doing; it's just a different name for it. Look at the docs, look at the slides, go ask somebody else, then you can come ask me. I love the self-sufficiency that you are instilling in your students.

Usually they'll say, "We got it, we got it," and I'll tell them great and point them toward a table that is having trouble, and they run right over there. Especially if they're freshmen, they'll run all over to show somebody how they got it. It works out, but that required me to let go and not worry about controlling everything. It's about getting something running and then fine-tuning it, like fixing the indentation. I like the Sandbox because they have to turn the link into Google Classroom. Then I'll tell them they should almost be done and offer to look at them on the board. I'll pick one that I know is right and say, "Oh, this is interesting. Look at this, it's even indented. Is yours?" because I don't give points if it's not. Then I see them all look up and start fixing theirs. I have a way to lead them without them figuring out what I'm doing, and we get a lot of good laughs too.

I absolutely love that. Leveraging student expertise is so important. One of the things that I had to learn as a language teacher—because I taught French and English as a new language—is how to let the kids laugh at me failing. I would, on purpose or sometimes not on purpose if I'm being completely honest, fail miserably at something, and students would say they know how to do it. In computer science in particular, many teachers were not originally trained in computer science and don't have an industry background to bring into the classroom; they are marketing teachers, business teachers, librarians, or gym teachers who are being volunteered to teach computer science because it's a new state requirement. There's definitely some impostor syndrome I hear a lot from teachers who are new to computer science, but you can play that up in the classroom. Tell your students, "I don't know," because somebody's going to raise their hand and say they do, and then you can let them teach the class. There's a lot of fun to be had in not knowing things that your students are learning and being just one day ahead of your students.

I agree. If you try to be a know-it-all, you'll just make everybody frustrated because there are so many solutions, and the kids want to show you what they did. I'll tell them, "Wow, I would have never thought of that." Because they thought of it and it's their win, let them rejoice. I even have a desk in the corner of the room because sometimes our superstars can be a bit overwhelming to the other students. I call it the "center of excellence" and tell a student who is doing really well but criticizing everyone else, "I want you to sit in the center of excellence, think of a really hard problem that everybody can do, program it, and let me know." Then everybody is happy, he is quiet for a few minutes, and he usually comes up with a great problem that we can share.

You are teaching new teachers some amazing tricks. Let's talk about JavaScript here for a second: what is it, why should our students learn it, and what are some course considerations? Our introductory level courses that are really great for middle school include Carol Adventures, which features block-based or text-based coding with Carol the Dog in a story-based, thematic presentation. Then Intro to CS and JavaScript Corgi is what we've been talking most about today. We do also offer AP CS Principles in JavaScript. If your students are ready for more upper-level honors classes, Intro to CS and JavaScript Bulldog is the honors-level version of our course. Video Game Design in JavaScript is a really long course with a lot of content, so I would probably reserve that one for more advanced students as well.

JavaScript originally was built for front-end web development but has evolved, as all coding languages do, to include game development and other kinds of programming. It's a really versatile language where students can create anything from a small project to a large project, and you can also introduce students to libraries. In our game design course, we use P5.js, which is a library that allows users to create 2D video games and interactive art. Libraries are a great thing for students to know about as they move along in their computer science journey.

Syntax does tend to trip students up in JavaScript because it has a lot more parts than other languages. Python is a very pared-down programming language without all these brackets, braces, and semicolons, but there is value in starting students off with JavaScript. A lot of teachers I've talked to over the years say they prefer Python because there's less for students to memorize, but to Paula's point made earlier, students can do this and it's not impossible. There are professional reasons to start students off, even beginners, with JavaScript. Encourage them to bring what they have learned in block-based coding environments or other coding languages to learning JavaScript because once you learn one coding language, there are concepts you can transfer to make your learning much more efficient. Loops, conditionals, functions, variables, parameters, and lists are common in almost every programming language. If they've only played around in a Scratch-based or block-based coding environment before, it's okay because they've had experience with things that will help them.

Paula, what advice do you have for our teachers who might be completely new to computer science and are learning JavaScript themselves?

Do the first problem in every lesson, and listen to the kids as they walk through their code for you. They won't even know you didn't do it; just say, "Oh, you got it done. Why don't you come up to the front and let's go through it?" Don't worry about it; it'll come to you. You have to be willing to just try a few every day. You don't have to know the last lesson on day 10 because it will come to you, and if you don't know, look at the video. You'll know enough to guide them, and that's all we're doing because if they don't code it, they won't learn.

I love that. Different students solve problems differently, and that's a fantastic positive to celebrate in the classroom. You have the ability on the CodeHS platform to see all your students' work, pull it up, and celebrate those unique minds that are solving problems in unique ways. It might not be the most efficient way or something a professional would do, but the fact that we can celebrate unique lines of thought and show off different solutions to problems is a fantastic moment in the classroom. You can even have students discuss it, comparing a solution that used five lines of code to one that used 20 lines of code to see which one is better and why. Do you tend to show off student work and get them talking about it?

Absolutely. I'll have little competitions. I use exercises from CodeHS because they have great material, and I'll put it as a "do now." I'll rephrase it so that it looks different to them, even if they might have already done it, and say, "Competition, groups of two. First one wins a Carol worth a point on the next test." Then all of a sudden, we've got these busy bees. I'll say, "Oh, that looks okay, but theirs looks better," and tell them to go over and look at it. I try to do things like that, and I'm pretty good at getting them to work together because I don't want to be the lecturer; I want to be the coordinator and the manager.

CodeHS is very precise. If it wants you to print out "Hello, it's Tuesday at 5:00" and you type it without the period, it won't pass you. They'll say it's good enough, and I tell them, "No, you're a programmer, you don't get paid if it's wrong, so I give you a zero." Then they'll fix it. There's one really hard problem at the end of Carol about winding all the way up and missing a few. I didn't have the best solution the first time I taught it, but a student came up with a really good one, and I was smart enough to not say my way was the only way. Now I have the best solutions because over eight years I've seen them all, but I didn't create them myself, and that's okay. That's my best advice: learn from them.

If you don't know how to do it, CodeHS will show you. If you have a pro account, you have all the lesson plans; if not, you can still find answers within the assignment view. I'm going to work from the lesson plans here to show you what a typical CodeHS lesson plan looks like. We give you student-facing objectives, you can preview the activities that the students will walk through, and we provide solution references and problem guides. I really like the problem guide specifically because not only does it give you the solution code, but our curriculum development team is very careful about anticipating student misconceptions. If you are brand new to teaching computer science and this is your first time, students are going to have questions when it's not working. A very frequent issue—one that I still do—is building the function but forgetting to call it, which students do all the time. I love these common questions sections.

We also have "explain this to me" videos for the more advanced assignments. If you are previewing a lesson and don't know what the solution code means, we have these password-protected videos with the password provided right there. You throw it in and get a video of one of our curriculum developers walking you through step-by-step how to construct the solution. As Paula noted, sometimes we are very specific; in one exercise, students have to call a function and name it "makePancakes." If they call it "cookPancakes" or "makeBatter," they're not going to pass. You'll find tips and tricks like that in these videos, so definitely take a look at the problem guides.

Lessons also include handouts, which provide a great reason to go unplugged to make abstract computer science concepts concrete to students. We also have slides you can edit and discussion questions. Paula mentioned she likes her "do nows," and I also was a bell-ringer teacher, so these discussion questions are really easy to turn into bell ringers and exit tickets. We also have some end-of-class questions available.

Paula, you mentioned that at the beginning of the school year you really like to get students immediately in the Sandbox. Is there anything else unique you like to do at the beginning of the year to set up?

No, I don't teach them how to use it either; I just tell them to figure out how to use it. I don't use the quizzes for credit; I tell them if they want to take them, fine, but they won't get credit for them. I don't do anything special to start. As the semester goes through, depending on the pacing, I may cut back and tell them they only have to do the first two activities in a section if it's dragging, but otherwise I leave everything out there. I've only been on the pro version for a couple of years, but now I've learned how to delete or hide activities if things are slowing down. Starting the year, I think the course is wonderful as it is.

It sounds like you have no problem adjusting things, which makes sense since you're fitting all this content into a semester. What advice would you give a first-year teacher about changing, editing, or moving things around in CodeHS courses? Would you recommend it, or should they be a bit reserved in their first year?

In my first year, I didn't know what I was doing, so I wouldn't dare change anything because I was too anxious. In fact, when they told me to teach it, I said I didn't know JavaScript, so I asked a friend to be my student. I taught another adult how to do it who didn't know anything about coding. He learned for loops and we got all the way through Carol in a couple of weeks, and we had the best time. If you can find a buddy, it helps you figure out that you can do this. Every year you'll find an assignment you don't like, and I'll tell the kids, "Oh, I hate this one, you can skip it if you want to," and they'll laugh and agree.

I love it. Classroom management, communication, and helping students find answers for themselves allows them to take ownership of their learning. Let's talk more about your grading. It sounds like you have some interesting grading practices. Students do need a lot of repetition when they're learning how to program, and we provide many exercises alongside supplemental materials. As teachers, there are just not enough hours in the day to take every single assignment's grade and move it over to the school grade book manually. What advice do you have on grading efficiently?

Usually, every day they can earn a point. I'll have a quick Sandbox assignment, and once they are done, I walk around and can sense who has it right. You'll have maybe five students that you really have to check closely. I just put the points in the grade book and move on. The tests are all paper-driven, so they have to actually write out their code. I don't give very many points for the actual CodeHS platform assignments. In Carol I do, but once we get out of that, there's too much cheating going on where they just want to get the green checkmark. They'll say, "It's green," and I'll say, "Yeah, but it's not good enough." I teach them binary early on so they know coding is essentially yes or no, and I use that approach when I grade. If you copied it, it's a zero for that one point, which warns them without completely tanking their grade. I use paper tests and simple, short assignments, which could just be a problem they were supposed to have done previously rewritten in the Sandbox.

As a pedagogical follow-up question: are your handwritten assessments an anti-AI and anti-cheating practice, or is it more of a choice because you think it's inherently good for students to handwrite code?

It's anti-AI and anti-cheating. If I didn't do that, they would all cheat; that's the world we're in, unfortunately.

Paula, have you heard of our alternative exercises?

No, I have not.

Well, I'm about to make your day. The courses listed on the screen have alternative exercises that are available to teachers to swap out for the standard course content. Paula, if you are finding that your students are finding the answers online, then I encourage you to swap them out for the alternate exercises, and you can find out how to do that with our knowledge-base articles. I hope that helps for next year.

It will.

Great. We have a few minutes left, and we were talking about AI, cheating, and academic integrity. You hinted earlier that you like to let students know early on in the school year the visibility you have as a teacher regarding their work and being able to see their code history. Is there anything else you want to share with new teachers about how you set expectations around academic integrity early in the school year?

I just give the speech: "You're in here to learn, and this is something you need for the rest of your life. Tell me what industry doesn't use software." I keep stressing that, and I catch them early. I'll ask why they are copying off a neighbor's computer and remind them they are better than that. If they like the class, they won't cheat as much. They might look at their neighbor's screen, which I'm fine with as a form of collaboration, but they won't go out to find answers externally because it becomes clear very quickly if they can't explain it. If I didn't teach you a specific command like 'prompt' yet and it shows up in your code, it's obvious. That's just my approach.

It will become clear very quickly with your handwritten assessments if they don't know what they're doing.

I give more of those handwritten assessments when I sense that more cheating is happening; I'll give them every other day until they calm down and get back into the actual learning process.

I love that. I did a last call for questions in the chat, and Rebecca wanted a few more details around what you actually have students do in the Sandbox. Are you setting up Sandboxes with them and having them fork from an assignment you've created, or are you having them collaborate? How do you run the Sandbox in your classroom?

I usually use the Sandbox for the "do nows." It will be an assignment like: ask the user if it's raining outside, and print "Yes, it's raining" or "No, it isn't." That type of question probably occurs 20 times in Unit 3, but they don't know it's directly from CodeHS, so they just have to do it. It involves little assignments like that so they're not afraid to try. I go around, see who did it, and note it down so I'm not overburdening myself. I teach them parameters for objects, which is a simple way to do it, and they learn another skill. Once you get used to the assignments, they're very easy to change; instead of a t-shirt shop example, make it a yogurt shop. It's the same program structure using reading inputs and if-else statements.

Let's give a little tour of the Sandbox for folks who are new. Both teachers and students always have access to the Sandbox via the sticky menu up at the top in the left corner. You can click "Create Program" and select from all of these different languages. If you are teaching Carol and you just want your students to stick with Carol in the Sandbox, we have three versions because as students progress in their Carol learning, Carol knows more commands. You can also just use JavaScript from the console, or if your students are ready for graphics, we have the JavaScript Graphics option. Students would come in, click JavaScript Console, click Create Program, and then it opens a new Sandbox program where they can name their program and add code.

Students can work on this individually. Do you ever use the collaborate feature, Paula?

Yes.

This is really fun. You can click "Enable Collaboration," and then you get a URL at the top that students can share with two or three classmates. Then they can all be working in the Sandbox together, and it works like a Google Doc where everybody's names pop up where they're typing so you can see who's doing what in the collaboration. When students end the collaboration, they can fork the program before they finish so they all have their own copy of that end result. In Paula's case, she has them turn in that URL to prove they did their work together, which is a very cool feature to show off.

Well, we are coming to the end of our time here, Paula. It's been a delight to hear stories from your classroom; it sounds like a fantastic place to learn.

You're always welcome to come visit.

I appreciate it. Folks, if you ever need support, we have a knowledge base that you can go to to look up anything we talked about today. If you get to August and forget how to get to the Sandbox, you can search our knowledge base for "Sandbox" to pull up all the articles related to using that feature. The knowledge base is huge, and our customer support team is amazing; definitely reach out to them.

We do have more professional development coming up and other ways to stay in contact with CodeHS. Follow us on social media and check out some of our free upcoming PD at codehs.com/freepd. We would love to know how you enjoyed the session today; please take a minute to complete the survey because we are always happy to iterate and get better just like classroom teachers do. We also want to make sure you get a certificate for your time spent with us today, so make sure you're logged into CodeHS and click on that certificate of completion link in the chat.

This week we have our AP CSA Deep Dive. If you are new or experienced in teaching Computer Science A from the College Board, we're going to have a fantastic teacher trainer with years of experience sharing her knowledge on that course. The College Board updated that AP CSA course recently, rolling out new parameters and frameworks, and CodeHS supported teachers in that transition by creating the Cortado CSA course. We'll be deep-diving into that course and all the materials and helpful areas of the platform for teaching AP. We're also going to talk Python, AP CS Principles, and sessions on the brand-new AP Cyber Security course that is rolling out. If you'd like to learn some AI, we're going to be talking about AI at the very end of the month.

Thank you all very much for being here. Paula, the stories were wonderful and the advice was fantastic. I appreciate you sharing the ways you guide, coach, and encourage your students into learning. Thank you all very much, and we will see you next time. Bye everyone.