KnitShop, a game for learning to code

Congratulations on founding your very own knitting shop. You've got a store all set up with a knitting robot to make scarves, sweaters, socks, and anything else you can think of: you just need to learn to program the robot!

We'll start with the basics, and before you know it your knitting shop will be open for business. First things first, let's learn how to make a single stitch in a color of your choice. The way codeStitch works is that you type in commands and hit the go button, then the robot will create a product given the commands you provide. Each knit stitch will look something like this:

You can make the robot do this by using two simple commands. The first one is setColor(); You can put the name of a color in between the '()' and the robot will get ready to knit in that color, like this: setColor("red"); By the way, those quotation marks are importnat, so don't leave them out!

After you've chosen a color, you need to tell the robot to make a stitch. Later, we'll combine lots of stitches to make scarves in elaborate colors and patterns, but for now let's just start with one stitch. The command is easy to remember: stitch(); Go ahead and try it out, and don't forget to end each line with a semi-colon (it looks like this- ; )

Great Job!

Now that you've made one stitch, let's build on that and tell the robot to make three stitches, each one in a different color. To complete the level, make a Red, a Green, and a Blue stitch, like this:

To accomplish it, you'll just do the same thing as before, but three times. Set a different color before making each stitch.

Notice that after you finish each level, your work from the previous level stays on the notepad. You can erase it, or build on top of that work to accomplish the next level. There are also reminders and hints to the left of the notepad to help you reach your goal.

This is easy, right? And it's about to get even easier, because coding is all about reducing mundane repetition and making the robot work for you, instead of the other way around. Now, once we've set a color, we can make the robot knit many stitches at once by adding an 'argument' to the stitch command, like this: stitch(3); which will knit three stitches instead of just one.

Now you try it. To complete this level, knit 8 purple stitches in a line, like this:

I know what you're thinking: "This single-line knitting is uninspired." Well, it's time to spice it up then, and introduce a new command: newRow();

This will make the robot jump to the next line, so you can knit something a little bigger. Use this new function to knit two rows of red stitches. Each row should be 8 stitches long, like this:

Notice that in programming, there are often many ways to successfully achieve a goal. You could write stitch(); 8 times in a row, or write stitch(8); just once, and the result would be the same. The difference is a little bit an expression of yourself and a little bit a chance to save you time when writing code. We'll come back to talk about different ways to solve a problem later.

Remember that you can switch colors anytime by adding setColor(...); into your program. Let's use that ability to make a pattern.

Knit two lines, the first row with 4 white stitches then 4 red ones, and the second row with 4 red stitches then 4 white ones. On second thought, free your mind and use any two colors you like, just make sure the pattern comes out 4-and-4 on each line, alternating which color comes first. The result should look like this:

You may have noticed that the robot only recognizes a handful of colors, and it uses white whenever it's not sure. In the next level, we're going to show you how to use any color you want!

Have you been feeling inhibited in your artistic expression by your robot's limited color range? Worry no more, because now it's time to learn how you can make your robot knit in any color you can imagine. Instead of giving a color name to the setColor(); command, you can use a so-called 'hexidecimal color code' (just 'hex' for short), like this: setColor("#D4AF37");

That one will make a nice Gold color :).

To complete this level, knit four lines of 8 stitches each, and use a different color for each line. The result should look something like this:

Now you know everything you need to open your Knitting Shop! As customers come in with different requests, we'll teach you new tricks to make your programs easier to write, more re-usable in later levels, and the scarves more complex and beautiful.

Oh, here's your very first customer now!

Patty: "Hi, what a cool shop you have here! Can you make me a scarf, too? Just a small one, 3 stitches wide and 3 rows long, but can you checker it for me? My favorite colors are Violet and Gold, like this:

Hint: you can use these hex codes for Patty's favorite colors: Violet "#8A2BE2", Gold "#D4AF37"

The code we've used so far to customize the knitting colors is kind of difficult to read. It's easy to forget which hex code stands for which color, and that can make the code confusing to look at and work with, right?. Wouldn't it be easier if you could assign your own name to each hex code for easier use?

The good news is: you can!

By using a tool called variables, you can save any hex code under a name you want. We can define a variable and assign it a hex code like this: var myColor = "#3D8F25"; and then use it in the code like this: setColor(myColor);

Say, there's nobody in the shop anyway; how about you do Patty's scarf again, but this time make the code more readable by declaring two variables, violet and gold, in the beginning and using those names instead of the hex codes!

Hint: when you use a variable instead of a hex code, leave away the quotation marks (") or you'll get something unexpected.

Variables serve a lot of purposes in programming. You can save different things in a variable, like words/text (we did that in level 2.1), numbers, and many other things as well. When you save text in a variable, you use quotations in the declaration command; when you save a number, the quotes aren't necessary:
var myFavoriteColor = "#FFC0CB";
var lineWidth = 4;

As you've probably noticed, variable names cannot contain spaces, so we use capitals to make them more readable. Also, the variable names are case sensitive, so if you don't type them exactly the way they look in the declaration, your robot won't recognize or use them properly.

Hey, here comes your next customer. Maybe you'll get a chance to use variables again now!

Susan: "Hello there. Wow, a fully automated knitting shop, what a great idea! I'd like a pink square, 4x4, can you do that?

Hint: Save the hex code for pink (#FFC0CB) in a variable, and save the number of stitches in a line, too.

You may be looking at your code for Susan's square and wondering why using variables is necessary. After all, instead of writing
var lineWidth = 4;
you could have just written stitch(4); right?

Well, there are a couple of reasons we use variables even though they might make the code a little bigger. One reason is re-usability. Look at your solution to the last level again. If we wanted to make the same scarf, but with 8 stitches instead of 4 per line, we could use the same code, and only replace a single number in the declaration command.

What do you know, here comes Susan again!

Susan: "Hi again - I just love that pink square you made for me! I couldn't resist the urge to come back and order another one. Can you make it just a bit different this time? I'd like it to be 4 lines with 8 stitches each, and of course in that lovely pink again, like this:

Hint: Take advantage of your nice, re-usable code, and quickly fulfill Susan's request by changing the definition of lineWidth.

Let's take the usefulness of variables to another level - this time by using them to do some math. After you have declared a variable, you can use it just like you would any other number or word in your program. For example, these snippets of code do the same thing:
var lineWidth = 4;
stitch(lineWidth + 2); // knits 6 stitches

var justTwo = 2;
stitch(lineWidth + justTwo); //knits 6 stitches, too

stitch(6); //also knits 6 stitches

You can also change the value of a variable after declaring it. Consider this line:
lineWidth = lineWidth + 2; // increases the value by 2
After that line of code, the variable lineWidth will have a new value for the rest of the program, namely its previous value plus 2. Starting to get the hang of it?.

I think you're going to get a chance to practice right now:

Roberta: "I heard about your shop and just had to drop in - Wow, is that really a knitting robot!?! Amazing, but how good are you at programming it? Can you make me a scarf with a diagonal pattern? I'd like it 4 rows by 4 stitches each, blue and white in a diagonal. You're up to that, right?

Hint: Each line in Roberta's scarf will need a blue stitch followed by some white stitches, and the number of blue stitches will be bigger in each line (and the number of white stitches will be smaller). See if you can do it once without reading the hint, and show Roberta that you've mastered the use of variables!

You did it!
Your code did the trick. Now before moving on, be sure to compare your solution (left) with the solution of another player (right). Remember there's no right or wrong, but seeing other people's work could help inspire you!

These are solutions you've saved for later use. Copy pieces into your next projects and learn from other peoples' solutions!

You haven't saved any solutions here yet.

You have completed all levels!!!
Continue free play in the sandbox level, and check back in soon because we add levels and new features all the time.

That wasn't quite right. Review the Level Goal and Hints, and then give it another try.

Level Selection

(Click the image to see the solutions you've saved and reuse them)
Color picker for quick Hex Code lookup:

CodeStitch - Designed by Marleen Villeroy, April 2016, at Teachers College, Columbia University