CS Principles Widgets

CS Principles Widgets

Students can explore concepts from our Computer Science Principles course hands-on using these digital tools. Let them encrypt and decrypt messages, compress song lyrics, and more! Use the widgets on their own, or create a single-concept lesson for your class using the plans linked below.

Ages 14+, all modern browsers, English only

Text compression

Video thumbnail
Digital Compression with Aloe Blacc
This widget gives students the chance to compress a piece of text. Students can use this to learn how to identify patterns, store those patterns in a "dictionary," then replace the dictionary pattern with a 1-byte symbol to create a lossless compressed version of text. The widget updates with every keystroke and performs compression calculations so students can see if they’re increasing or decreasing the total file size in real-time as they work.

A challenge for students: How can you achieve the best compression possible by representing patterns of patterns? Have fun harnessing the power of this compression technique through experimentation, but also be aware that it can go very, very wrong.

Example: How to compress the lyrics of Aloe Blacc's song "I Need a Dollar" using the text compression widget.


Video thumbnail
Images, Pixels & RGB w/Kevin Systrom
This widget lets students compose an image "in binary"—they feed the widget binary information for each pixel they want displayed, and the widget renders an image. (It’s like having an instant binary interpreter that speaks all image format languages.)

The widget also has a few levels of increasing sophistication, allowing students to start building simple black and white images, then move to full color.

Black and White Pixelation

Video thumbnail
The black and white version of this widget simply encodes images with 1 bit per pixel—0 is black, 1 is white. Students can encode the width and height of their images with metadata. It’s a great tool for students who are just getting started.

Example: How to encode the letter 'B' using the black and white pixelation widget.

Color Pixelation

The color version of this widget lets students encode each pixel with any number of bits from 1 to 24. This widget will help them understand much more deeply how RGB colors work and why hexadecimal representation is so useful for looking at long strings of binary values. A challenge for students: Try your hand at mixing digital colors by writing the binary for them yourself!

Example: How to use the color pixelation widget with hexadecimal encoding.


Video thumbnail
The Internet: Encryption and Public Keys
These two widgets let students play with some classic schemes for both encrypting and "cracking" secret messages. Students can encrypt messages for friends, and, if they’re up for a challenge, try to crack messages for which they don’t know the secret key!

Frequency analysis widget

Students can play with two classic substitution ciphers in this widget: one known as the Caesar Shift (which encrypts by shifting the alphabet forward or backward by a set number of places) and random substitution (encryption via a 1:1 substitution of one alphabet letter for another, but randomly assigned as opposed to a uniform shift).

Vigenere cipher widget

This widget is used in the same lesson as the random substitution cipher, and allows students to play with a much more sophisticated encryption technique that was considered virtually unbreakable for a very long time. The Vigenère cipher is similar to the Caesar or random substitution ciphers, but the alphabetic shift changes for each letter based on a secret key.
Note: this widget is no longer used in the Code.org CS Principles curriculum

Internet Simulator

Video thumbnail
Similar to a widget, but much larger in scope, the Internet Simulator is designed to let students visualize, experiment with, and solve different kinds of problems associated with networked computers in a hands-on way. Often these problems involve inventing a communication protocol, or inventing ways to encode information that makes transporting it over the Internet feasible.

It is essential to note that we use the Internet Simulator for much more than teaching Internet Protocols. The Internet Simulator contextualizes exploration of much deeper concepts in computer science, like the use of abstraction to solve problems and the binary representation of information. The goal of the Internet Simulator is not merely to present the functionality of the different layers of the Internet, but to provide an opportunity for students to reason about why those structures exist. Eventually, students can also explore how the systems of the Internet are used to solve problems.

The Simulator is configured differently in each lesson to enforce different rules or expose different behaviors of the Internet around which students must creatively problem-solve. Specifically, each version of the Internet Simulator is configured to mirror a high-level version of the layered Internet Protocol stack.

With each lesson the Internet Simulator grows in sophistication—as students solve problems, the lessons become customized to ensure that the student is continually challenged. In this way we work from the bottom up, first solving physical coordination problems with sending bits back and forth, then addressing (IP), then packeting (TCP) then name-to-address mapping (DNS) and finally HTTP.