K-12 Tech Ed w/ Computing & Engineering

At the Browning School, we have built a comprehensive technology education program that spans kindergarten through twelfth grade. In our program, we focus on computing, engineering, and design. We present these projects to share what we have built and encourage collaboration with educators and leaders.

(With Aaron Grill, Anderson Harp, Glenn Walker, and Sankara Iwelu)

Poster for the Tech Expo

As schools and educators seek to modernize their curriculum and practices, many are investing in a wide assortment of tools and fields, 3D printing and other digital fabrication, “maker ed”, design thinking, coding, entrepreneurship, etc. After exploring different possibilities it is important to focus on a few topics to provide students with meaningful experiences and effective opportunities to create and show mastery. Here is the description of one comprehensive technology education plan for kindergarten through twelfth grade that focuses on computing and engineering. This program is a collaboration between myself, Aaron Grill, Anderson Harp, Glenn Walker, and Sankara Iwelu. We present the program to the Browning School community near the end of every school at the Tech Expo. I invite feedback and critique of our program and offer the same to any reader.

The beloved and messy Tech Lab at the Browning School

A. Browning School

The Browning School is a college-preparatory k-12 independent school for boys founded in 1888 by John A. Browning. It is located on the Upper East Side of Manhattan and hosts about four hundred students. The Technology Education Department “aims to inspire students through Computer Science, engineering, and design to have the creative confidence and necessary skills to innovate and persevere.” The program begins in kindergarten and has classes for all students through ninth grade, with electives in coding and robotics in the Upper school.

Lower school students with LEGO EV3 robots at the Tech Expo

B. Lower School

k. In kindergarten, we focus on the development of computational thinking skills. ‘Unplugged’ activities, such as ‘program the teacher’, help students understand sequence and logic. We present a stop-animation program using Scratch Jr., a robotics project that uses logical thinking, and Kodable project that breaks down larger problems.

i. In first grade this semester, we are focusing on the fundamentals of the iPad, laptop, computational thinking, and creative expression. Students continue their understanding of computational thinking and begin to develop and test engineering and programming skills with visual block applications. We engineer LEGO robots and complex machines to help make work easier. In this case, our robots are designed to entertain with a soccer tournament.

LEGO Soccer

ii. In second grade we started learning the basics of programming with visual, block commands. We have been using Scratch, a kid-friendly language developed, and code.org to create animations. We use CS First to manage student Scratch accounts and the Google program can be used on their own time to dive into different coding projects that match their own interests.

iii. In third grade, we continue learning the basics of programming with EV3 LEGO robots. The students learn troubleshooting and logical thinking skills. In a team building exercise, the students learn to collectively build their own LEGO robots. In addition, we use code.org, a computer science-driven website that continues to test and develop their knowledge of programming.

iv. We also started programming with Scratch, a visual block-based platform, to create games and animations that entertain and inform. In the second semester, we started learning the basics of programming with text using Codesters, a Python-based platform. Some of the projects include Women’s History Month, Thank You Cards, The Stamp Act, Hop-o-thon Velocity Game

Harrison presenting his Hidden Figures project on Codesters

C. Middle School

v. In fifth grade, we continue learning the basics of programming with text commands. We are using Codesters, a Python-based platform, to create games and animations. For their projects, students made interactions inspired by Hidden Figures, the movie and the “young readers” edition book, which we studied in class in the second semester. We present projects created by students to highlight different parts of the story (Sebby’s and Bram’s).

vi. In sixth grade, we have focused our efforts on video game design and programming. Currently, we are finishing up a unit learning Unity3D, a gaming engine used to create “First Person” and “Virtual Reality” games. Students learned to create a game called “Roll A Ball”, and tried to apply those concepts to a uniquely designed terrain. We present a project that displays 3D object in a virtual environment.

Experience a world built in Unity3D in Virtual Reality

vii. In seventh grade or Form I as we call it, we approach coding as an important and evolving form of literacy. Throughout the year we use CodeHS to study and practice web design with HTML, CSS, and JavaScript. Soft skills, crucial to success, are built into class time so students begin to develop communication, collaboration, and resourcefulness useful for computing. Here is one of Liam’s and Andrew’s assignments.

viii. In eighth grade or Form II as we call it, we experimented with project-based learning. Students examined existing chairs and reengineered a personal version using digital tools. This particular course structure was a result of meaningful collaboration between the Art and Technology Departments. Through a shared line of inquiry, learning to become a better designer may include an interchangeable order of experience with computers or clay.

A snowman on CodeHS from Giordan

D. Upper School

ix. In ninth grade or Form III, we continue to learn the basics of text-based coding with JavaScript using CodeHS, an online learning platform. Concepts covered include declaring variables and functions, control statements, iteration, conditional statements, and decomposition. We present a program to draw a snowman.

An Intro CS final project from Alfonso

x. In Introduction to Computer Science, an elective class, we develop our skills with JavaScript to make creative projects for the web via p5.js, a JavaScript library for artists. Each student in the class created a website and present creative projects based on the work of Dan Shiffman, Associate Arts Professor at the Interactive Telecommunication Program at NYU’s Tisch School of the Arts. We present student websites, linked via their name, that showcase their creative coding projects.

Alex: I take inspiration from many of Dan Shiffman’s p5js sketches. The inspiration for a small shooter game does back to my earlier Scratch projects along with my interest in older video games. I created a small game where you control an avatar with the direction keys. I used many of Shiffman’s videos for guidance and examples from the p5js reference site.
Alfonso: For my final project I created a sketch where balls are surrounded by black rings, which follow the past movement of the ball. That works through the vertex of the ball is being stored in an array. Then a halo is created at these vertices. When the balls touch one another, they change color. To create a “ball” press on the sketch with the mouse. I learned how to code though Dan Shiffman’s online videos.
Blaise: For inspiration, I used resources like Codecademy and videos on YouTube by Dan Shiffman. I built the project using p5.js libraries. In the future, I could make the code more intricate and involve different functions that could have the shapes travel a set path when they touch automatically start a lifespan function so that they delete on their own.
Joseph: My project incorporates images, which is what I wanted with my previous project. I created a complex project that created multiple images and moves them around. The images with change if they touch each other. My inspiration for the project was Dan Shiffman’s coding challenges on the Coding Train YouTube page. I incorporated some of his ideas into my sketch.
Lucas: My inspiration for my final project came from one of my projects I made earlier. I got the idea for a turntable when I was listening to music. The animations are made with simple ellipses and rectangles. The complex part of the project is playing music and working buttons. It also took me some time to rotate the record and arm. I used many instructional YouTube videos and JavaScript forums to learn how to solve problems in the code. I used public domain music from the early 1900s.
Max: I have created a small game, using p5.js, the JavaScript library. The game has a beginning, middle, and end. The game has multiple segments with different objectives, as long as a story to go along with them. To accomplish this, I have to set up multiple “If Statements” that allow the player to progress through the game when conditions are met. I used Dan Shiffman’s Coding Train tutorials to help me through the challenges of coding this project.
Nicolas: This project spawns different triangles with a square. I for projects on GitHub and stumbled on the project. I liked this project by Gene Kogan and thought it was lacking in color. I mapped the color inside of the square with the location of the mouse, so as you move the mouse, the color inside of the square changes.
Sebastian: For my final project I made The Grocery List. The list is a modification of the Angular JS “To-Do” List with styling from the Bulma CSS framework
William: My inspiration was Dan Shiffman’s Maze Generator coding challenge on the Coding Train YouTube page. I built my remix of this project using p5.js library and using some elements of his code. I made the maze a lot smaller and changed the color to blue. When I made the maze smaller, it allowed the maze to be solved at a much faster pace. I also used Shiffman’s GitHub page as a resource so I did not have to begin the project from scratch.

xi. In Introduction to Engineering, an elective class, we are working with robotics to ultimately design a robot to compete in the First Tech Challenge, an international robotics competition. Each student learned the rules of the competition, research the problem, design and sketch ideas, select an idea, build a robot, and test and evaluate the performance of the robot. Just before Spring Break, each student presented his robot design to the class. We then selected a student design to build a robot that will compete against the other section.

xii. In Advanced Computer Science, an elective class, we continued to develop our computational thinking via JavaScript. In this yearlong course students prepared for the AP CS Principles tasks and exam and college-level CS coursework with object-oriented programming via CodeHS. Each student created their original final project, linked via their name, based on topics of interest developed over the month of May.

Patrick: Vigenere is the simplest know polyalphabetic cipher – that is, a substitution cipher in which the same plaintext is always mapped to the same ciphertext. To encrypt with Vigenere cipher, we use a short key and repeat it over and over until it’s the same length as the plaintext. Then, each letter is encrypted with a Caesar shift by its corresponding key value. This program was written in CodeHS’s JavaScript Sandbox.
Philip: This project simulates the chances of winning a simple lottery. Users can change the number of winners and entrants, then watch as the number of times played counts up based on this probability. I am inspired by my math education, especially probability. I used p5.js, the JavaScript library, and video tutorials from Dan Shiffman’s Coding Train. I used three elements to create mathematical algorithms that help program functions.
Ben: In my project, I used JavaScript with the p5.js library. The purpose of my program was to select a number of article(s) from the New York Time API (Application Program Interface) based on user-input. An API is a set of routines or protocols for passing data between web apps. The API returns a JSON file, a sort of spreadsheet. My code takes some of this data and places specific segments in a web page. I followed Dan Shiffman’s tutorials on YouTube and borrow code from Jon Chin’s GitHub.
Tucker: My project compares the mentions of dogs and cats over a given interval on Twitter and tweets which animal has been mentioned more often. The inspiration was Twitter bots that do a variety of fun and useful functions, for example, @big_ben_clock, which tweets a number of “BONG” depending on the time of day. I built my bot using Node.js, a JavaScript environment via Dan Shiffman’s Coding Train tutorials on YouTube.

xiii. The Advanced Robotics course, an elective class, designed a robot to compete in the First Tech Challenge, an international robotics competition. Students learned the “Engineering Design Process” to research, design, sketch idea, select ideas, build the robot and test and evaluate the performance of the robot. The team qualified for the NYC regional tournament at the Dalton School FTC competition by making it to the finals.

Coding summer camp

E. Encore (afterschool)

xiv. A student and I led a middle school coding camp for rising 5th — 8th-grade students in the summer. The program teaches students to build engaging websites using HTML to put content on a web page, CSS to make it engaging, and JavaScript to make interactions and animations.

xv. In the Fall, I led two afterschool classes for boys in grades 2–4. One introduced the computer-programming world, by building websites. The other class explored programming robotics, by building complex machines with LEGO EV3.

xvi. Mr. Harp and a student teaching intern offered mBOT robotics for grade 2–4 in the Winter. The students expanded their robotics expertise and experience with graphical programming. The mBOT was chosen because of its extensibility, using mechanical parts and electronics.

xvii. Three days a week, students in grades 2 – 4 meet with Mr. Harp and a student intern for Google’s CS-First Clubhouse in the Spring. Students choose between animation, game design, art, and/or story-telling themes. The intern facilitates a healthy learning environment while modeling digital citizenship and creative confidence.

xviii. This summer we are launching a summer coding class, First Pitch, for a diverse group of high school students from across the city. The students will be taking a two-week deep dive into full stack web development. This will be an opportunity to share the educational resources of the tech department and support greater access to technology education.


F. Resources

Here is a list of the resources mentioned in this article along with cheaper or free alternatives.

Computing instruction: Kodable and Scratch Jr. are fun and easy ways to get young students involved in computational thinking on the iPad. Swift Playground from Apple is good free alternative. Scratch is a wonderful platform for coding using blocks and it is free. There is an amazing community of teachers and creators on Scratch that makes it the ideal place to start a computing curriculum. CS First is an organizing and curriculum tool for Scratch from Google. Codesters offers thoughtful curriculum in blocks or Python that works smoothly after Scratch. CodeHS is an excellent Learning Management System (LMS) for coding education for middle and high school students. Codecademy and Khan Academy are free alternatives with an LMS to manage students. Processing, a Java library, and p5.js, a JavaScript library, are ideal languages for creative coding. Both have excellent communities for educators and creators make them welcoming to newcomers. They are free to use but consider funding Processing Foundation.

Robotics and Engineering: Robotics can be expensive in terms of acquiring the kits, competing in competitions, and expertise necessary to be successful, but the benefits for the students in terms of learning about hardware and software is great. Lego Wedo is a wonderful introduction to robotics that works with Scratch. The EV3 LEGO MINDSTORM kits are a popular route to learning robotics in the middle school. The kits come with software for block-based programming for Mac and PC. For advanced builders the VEX Robotics kits are ideal, and they can program in Java for Android phone controllers. Robotics competitions are a wonderful way to push teams of students to solve problems, innovate, compete, and collaborate. The First LEGO League is well organized and comprehensive competition worth considering. There are worth cheaper options worth exploring. Stephen Lewis has built excellent cost-effective kits to get your class started with connecting electronics with hardware.

3D Design and Game Design: This avenue is a rich with cost-effective web platforms and applications if you ignore 3D printers. Tinkercad is a web platform to build, arrange, and export 3D models. These models can be imported into Unity3D, a game engine, to build environments, interactions, games that can be experienced on any digital platform, including Virtual Reality with headsets. Unity has accessible curricula and a growing community of developers.

Please reach out if you have questions or comments about our program. We love to collaborate with other educators, especially those working on comprehensive technology education.