-
Notifications
You must be signed in to change notification settings - Fork 197
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
Revisions to Guide as part of Fiverr gig #1419
base: master
Are you sure you want to change the base?
Changes from 8 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,24 @@ 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. | ||
|
||
![](camel.png width="30%") | ||
|
||
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 tells the computer that the two expressions mean the | ||
same thing. It is used to connect a variable with its definition. | ||
|
||
* `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 +82,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,7 +126,7 @@ 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 | ||
of". To describe the border itself, two more functions -- **`circle`** | ||
and **`rectangle`** -- are useful. | ||
|
||
|
@@ -186,7 +184,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 +237,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 +354,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 +392,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 +424,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 +514,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 +667,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 +802,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,16 @@ | ||
Did you mean to reference a butterfly but not draw one? | ||
I understand your point. Just wondering if the student might be | ||
expecting a butterfly? Probably not if they understand polyline | ||
at this point but just making sure. | ||
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 do see the possibility of confusion. If you can explain the same idea and avoid that, go for it! 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. Added a very simple butterfly. It's on the remote repo, but won't show up when using the preview link you sent. I am I doing something wrong? 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. No, this is right. Clickable code is the one thing that won't work in the preview URL. That's because you are just looking at the guide, without the main CodeWorld window behind it. Once I merge the pull request and students read it using the CodeWorld site, it will work. If you really want them to see it inside the guide itself, then you can do that with an iframe. You can search for 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 for this particular usage, I think this loses the point of the example. The idea was to start with just the coordinate plane, then add points one by one. If you just show them the completed program, I don't think it communicates that very well. 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. Maybe if I reduced it to part of the butterfly. For example, part of the left wing. I'm just trying to make a bit more than an empty polyline. 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 suspect the right thing to do here is to include multiple steps, and show how they can add to the program one vertex at a time. It should probably be in a callout box if it gets that long, just to delineate it well from the rest of the text. 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 want to contribute in a meaningful way. I'd enjoy creating those steps if you think it would enhance the point. I think it would. But I can skip it and we can move on if you do not. Let's consider a video chat soon to discuss some of your ideas. The only real restrictions on my time are video calls I have on T,TH and F from 10:30-2:00 EST. Other than that, tasks can be shuffled. 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. Yes, as I mentioned, I do think more detail here would be an improvement. Just put it in a callout box so it doesn't interrupt the flow too much. Will contact you elsewhere about setting up a video call. 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 do plan to do the incremental butterfly. Just did not include it in this push. |
||
|
||
A neat trick is to use the coordinate plane as you write your code. Say you want to draw a butterfly. You might start by writing: | ||
|
||
program = drawingOf(butterfly & coordinatePlane) | ||
butterfly = polyline([ ]) | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The 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 comment
The reason will be displayed to describe this comment to others. Learn more.
Noted