-
Notifications
You must be signed in to change notification settings - Fork 198
Revisions to Guide as part of Fiverr gig #1419
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from 5 commits
3f04fb8
b60a0fe
eec3295
466e082
9c401c5
a17a7a5
03f4d68
deb5c38
f051f94
7b5e2d9
0b4ec70
5c93e3e
6abd151
1a85671
4890ec9
3e11b42
a77c5ad
00b1273
0f35720
1353af4
a739e6a
03af14b
9e6b278
a10b670
e9506f9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -47,26 +47,23 @@ Here's the code you just wrote and what its parts mean. | |
| My program | is | a drawing of | the CodeWorld logo. | | | ||
|
||
* `program` is the **variable** that you're defining. A variable is a name for | ||
something. In most math, variables are just one letter long, and they stand | ||
for numbers. In CodeWorld, though, variables can name many different types of | ||
something. Usually in math, variables are just one letter long and stand for | ||
numbers. In CodeWorld, though, variables can name many different types of | ||
values: numbers, pictures, colors, text, and even whole programs. Because | ||
you will use so many of them, you can name variables with whole words, | ||
always starting with a *lower-case* letter. | ||
you will use so many of them, you can name variables with whole words. | ||
There are some rules for naming variables. Most importantly, they must start | ||
with a *lower-case* letter and cannot contain spaces. | ||
|
||
!!! collapsible: Camel case | ||
Sometimes, you may want more than one word to name a variable! The | ||
computer needs each variable to be a single word starting with a lower-case | ||
letter--so leave out the spaces. To make it easier to tell when a new word | ||
starts, you can capitalize the *second* and *later* words. | ||
Sometimes, you may want more than one word to name a variable! Since variables cannot have spaces, you should leave them out and just run words together. To make it easier to tell when a new word starts, you can capitalize the *second* and *later* words. | ||
|
||
 | ||
|
||
In your first programs, `drawingOf` and `codeWorldLogo` were written in | ||
In your first program, `drawingOf` and `codeWorldLogo` were written in | ||
this way. It's often called **camel case**. Why? Because the variable | ||
name has humps! | ||
|
||
* The **equal sign** means "is" and tells the computer that two expressions mean | ||
the same thing. It is used to connect a variable with its definition. | ||
* The **equal sign** means "is" and assigns the expressions on the right to the variable on the left. The variable must always be on the left. | ||
|
||
* `drawingOf` is called a **function**. You'll use functions a lot, and you'll | ||
learn more about them later! This particular function, `drawingOf`, tells the | ||
|
@@ -84,13 +81,13 @@ Building a nametag | |
Of course, you can do a lot more in CodeWorld than just look at the CodeWorld | ||
logo! Next, you can build a digital nametag for yourself. To do this, | ||
you'll start by telling your computer that your program should be a drawing | ||
of a nametag. | ||
of a nametag. Type (or just click on) this code: | ||
|
||
~~~~~ . clickable | ||
program = drawingOf(nametag) | ||
~~~~~ | ||
|
||
**This program doesn't work!** If you've typed everything correctly, you should | ||
**This program doesn't work!** When you click the **Run** button, you should | ||
see an error message: `Variable not in scope: nametag :: Picture`. | ||
This is your computer telling you that it doesn't know what `nametag` means! | ||
|
||
|
@@ -128,10 +125,12 @@ Next, you can add a border to your nametag. You might be tempted to add | |
a new line like `nametag = ...` to your code, but you can't! Remember, | ||
your code is like a dictionary, and each definition in it should give | ||
the whole definition for that word. To include a second shape in your | ||
nametag, you'll use **`&`**, which you can read as "and" or "in front | ||
nametag, you'll use an *operator*, **`&`**, which you can read as "and" or "in front | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It might be a good idea to introduce operators here. If so, though, I think a lot more needs to be said. Students should be reminded of the operators they already know about on numbers, like addition. This is already discussed in a collapsible box under the "Expressions and types" section later on. I think it's a bit of a balance. Right here, we're in a hurry to get students to writing their own creative programs as soon as possible, so whatever absolutely needs to be said should go here, but any long-winded asides can wait until later. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Noted |
||
of". To describe the border itself, two more functions -- **`circle`** | ||
and **`rectangle`** -- are useful. | ||
|
||
An **operator**, as you will see later, allows you to perform an operation. In this case, combine two things together. | ||
cdsmith marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
||
Here's a name tag with a border: | ||
|
||
~~~~~ . clickable | ||
|
@@ -186,7 +185,7 @@ Try these examples to learn more: | |
the computer will be confused and think you're defining a new | ||
variable. This can cause a `Parse error` message. | ||
|
||
Once you've understood these examples, try your own combinations as well. | ||
Once you've understood these examples, try changing the numbers or making other changes. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm. I'm usually not a fan of the "change some numbers" suggestion, because it's giving students an easy out to just do random stuff without any specific intention, and check off the box. I very much want students to add their own shapes, and hopefully even imagine and try to reproduce some design. This might be a two-step process, though. I think it would be an improvement if you ask them to just try some modifications as you've done here, but then follow up with an explicit exercise to do something more deliberate. The exercise should have three steps: (1) Reflect on what you know how to do (answer: draw text, and different sized circles and rectangles, but only at the center of the screen., (2) Draw a name tag on paper using only these kinds of shapes, (3) create a program that displays a picture of what you drew. If I were teaching, I'd have students submit their paper drawings (or photos thereof, given COVID stuff) as well as their programs, to verify that they made a goal and decided how to accomplish the goal, instead of just doing things at random. |
||
|
||
Understanding mistakes | ||
---------------------- | ||
|
@@ -239,7 +238,8 @@ went wrong. | |
~~~~~ . clickable | ||
program = drawingOf(nametag) | ||
|
||
nametag = lettering("Emma") & circle(10) | ||
nametag = lettering("Emma") & | ||
circle(10) | ||
~~~~~ | ||
|
||
This error can also tell you that you have an open parethesis -- **(** -- | ||
|
@@ -355,9 +355,7 @@ favoriteColor = blue | |
|
||
More on that later! | ||
|
||
Each of these lines is an **equation**, which says that two expressions are | ||
*equal*, or have the same value. In math, you use equations in many | ||
ways, but in CodeWorld they are used specifically to *define variables*. | ||
Each of these is a type of **equation**, which says assign the value on the right to the name on the left. You have seen this type of equation in math, often with variables x and y. For example, in math, you might see x=10 and y=20. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As above, we need to be very careful to give a mathematically correct definition of an equation. Then, as a second step, explain which specific kinds of equations CodeWorld can understand. |
||
|
||
When you define a variable, you can use it in the rest of your code. | ||
|
||
|
@@ -395,7 +393,7 @@ border = circle(5) | |
|
||
If you run the code, you might be surprised to find there is no border! | ||
You've told your computer what the word `border` means, but you didn't | ||
say you wanted one in your program! | ||
say you wanted to use it in your program! | ||
|
||
You might try this instead: | ||
|
||
|
@@ -427,7 +425,7 @@ doesn't know, it will look up *those* words, and so on. | |
Remember: a definition only matters if the variable you're defining is | ||
*used*, either directly or indirectly, in the definition of `program`. | ||
That is, in the definition of `program`, or the definition of another | ||
variable that's used in the definition of program, or so on. | ||
variable that's used in the definition of program, and so on. | ||
|
||
!!! Tip: Warnings | ||
When you write code that is correct, but could be improved, you will | ||
|
@@ -517,6 +515,16 @@ letters of the function you want, you can narrow down the list. The type | |
signatures tell you what types of information you need to provide to apply | ||
the function and what type you can expect to end up with. | ||
|
||
**Important**: The names of functions are *reserved*. That means you cannot use them as variable names. You would not be able to write program like this: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This would be a great time to use a warning callout box. The syntax looks like this:
I'm also not a huge fan of using "reserved" here. I think there's an easier idea: a variable name can only refer to one thing. Since the built-in functions are already defined by CodeWorld itself, students are not allowed to use the same name for their own variables. This is exactly like how they cannot define the same variable twice in their own code. There's no reason to make these different ideas, when they are really the same idea. |
||
|
||
program=drawingOf(circle) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Surround your code with five tilde characters to put it in a box with the same coloring and fonts as the editor. Like this:
|
||
circle=circle(5) | ||
|
||
Wherease this would be okay: | ||
|
||
program=drawingOf(myCircle) | ||
myCircle=circle(5) | ||
|
||
For practice, see if you can write code using each of the following | ||
functions. Start by looking up their domain and range, using Shift-Space or | ||
Ctrl-Space, and see if you can use them with just that hint. If you need | ||
|
@@ -660,10 +668,9 @@ Coloring | |
-------- | ||
|
||
The first transformation you will use is coloring. The `colored` function | ||
changes the color of a picture. This function expects two arguments: the | ||
preimage, and a new color. The colors of the preimage don't matter at | ||
changes (transforms) the color of a picture. This function expects two arguments: the preimage, and a new color. The colors of the preimage don't matter at | ||
all -- only the shapes involved. The result of the `colored` function is a new | ||
picture, which is just like the preimage, except for the different color. | ||
picture, which is just like the preimage, except for the different color. It has been transformed! | ||
|
||
~~~~~ . clickable | ||
program = drawingOf(redWheel) | ||
|
@@ -796,7 +803,14 @@ the point (0, 0) -- on the coordinate plane, so you should measure your x | |
and y distances from there. As you define your own pictures, it's a good | ||
idea to continue this practice. | ||
|
||
For example, suppose you wanted a circle representing the sun in the top left | ||
To see a circle with radius 5 drawn on the corrdinate plane, use this code: | ||
|
||
~~~~~ . clickable | ||
program = drawingOf(coordinatePlane & circle(5)) | ||
~~~~~ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't believe you want to indent these? |
||
|
||
|
||
Suppose you wanted a circle representing the sun in the top left | ||
corner of the screen. First, you could look at the *x* *axis*, | ||
and see that negative numbers are used to move a shape to the left. You might | ||
pick -5, which is five units left on the screen. Next, you could look at the | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
If you do not leave a space before and after the & the popup does not show | ||
cdsmith marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
If the student makes change and clicks an example they get a warning. It might be beneficial to mention something about this and/or saving. | ||
cdsmith marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
||
Should variable really be constant since you cannot re-assign it a new value? | ||
cdsmith marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
Ex. program=xxx | ||
nameTag=xxx | ||
nameTag=yyy | ||
|
||
Might want to mention the red x error shows when using a variable before it's defined. | ||
cdsmith marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
||
|
||
|
||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
test file | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Did you mean to delete this test file? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I did mean to. It was just to make sure comited and pushed okay. |
Uh oh!
There was an error while loading. Please reload this page.