adding test folder files to main

C0.md

@@ -0,0 +1,121 @@
+        ---
+        title: Chapter 1. Blocks, Scripts, and Sprites
+
+        layout: home
+        has_children: true
+        has_toc: true
+        nav_order: 2
+        ---
+
+Blocks, Scripts, and Sprites
+=================
+
+This chapter describes the Snap*!* features inherited from Scratch;
+experienced Scratch users can skip to Section B.
+
+Snap*!* is a programming language---a notation in which you can tell a
+computer what you want it to do. Unlike most programming languages,
+though, Snap*!* is a *visual* language; instead of writing a program
+using the keyboard, the Snap*!* programmer uses the same drag-and-drop
+interface familiar to computer users.
+
+![](image5.png){width="4.326388888888889in"
+height="2.689583333333333in"}Start Snap*!*[.]{.smallcaps} You should see
+the following arrangement of regions in the window:
+
+(The proportions of these areas may be different, depending on the size
+and shape of your browser window.)
+
+![](image6.png){width="1.4791666666666667in"
+height="1.3541666666666667in"}A Snap*!* program consists of one or more
+*scripts,* each of which is made of *blocks.* Here's a typical script:
+
+![](image7.png){width="2.2465277777777777in"
+height="1.4694444444444446in"}![](image8.png){width="2.2083333333333335in"
+height="1.1388888888888888in"}The five blocks that make up this script
+have three different colors, corresponding to three of the eight
+*palettes* in which blocks can be found. The palette area at the left
+edge of the window shows one palette at a time, chosen with the eight
+buttons just above the palette area. In this script, the gold blocks are
+from the Control palette; the green block is from the Pen palette; and
+the blue blocks are from the Motion palette. A script is assembled by
+dragging blocks from a palette into the *scripting area* in the middle
+part of the window. Blocks snap together (hence the name Snap*!* for the
+language) when you drag a block so that its indentation is near the tab
+of the one above it:
+
+The white horizontal line is a signal that if you let go of the green
+block it will snap into the tab of the gold one.
+
+### Hat Blocks and Command Blocks {#hat-blocks-and-command-blocks .ListParagraph}
+
+At the top of the script is a *hat* block, which indicates when the
+script should be carried out. Hat block names typically start with the
+word "when"; in the square-drawing example on page 5, the script should
+be run when the green flag near the right end of the Snap*!* tool bar is
+clicked. (The Snap*!* tool bar is part of the Snap*!* window, not the
+same as the browser's or operating system's menu bar.) A script isn't
+required to have a hat block, but if not, then the script will be run
+only if the user clicks on the script itself. A script can't have more
+than one hat block, and the hat block can be used only at the top of the
+script; its distinctive shape is meant to remind you of that.[^1]
+
+![](image9.png){width="1.1666666666666667in"
+height="0.25in"}The other blocks in our example script are *command*
+blocks. Each command block corresponds to an action that Snap*!* already
+knows how to carry out. For example, the block tells the sprite (the
+arrowhead shape on the *stage* at the right end of the window) to move
+ten steps (a step is a very small unit of distance) in the direction in
+which the arrowhead is pointing. We'll see shortly that there can be
+more than one sprite, and that each sprite has its own scripts. Also, a
+sprite doesn't have to look like an arrowhead, but can have any picture
+as a *costume.* The shape of the move block is meant to remind you of a
+Lego™ brick; a script is a stack of blocks. (The word "block" denotes
+both the graphical shape on the screen and the procedure, the action,
+that the block carries out.)
+
+![](image10.png){width="1.0972222222222223in"
+height="0.3541666666666667in"}The number 10 in the move block above is
+called an *input* to the block. By clicking on the white oval, you can
+type any number in place of the 10. The sample script on the previous
+page uses 100 as the input value. We'll see later that inputs can have
+non-oval shapes that accept values other than numbers. We'll also see
+that you can compute input values, instead of typing a particular value
+into the oval. A block can have more than one input slot. For example,
+the glide block located about halfway down the Motion palette has three
+inputs.
+
+Most command blocks have that brick shape, but some, like the repeat
+block in the sample script, are *C‑shaped.* Most C-shaped blocks are
+found in the Control palette. The slot inside the C shape is a special
+kind of input slot that accepts a *script* as the input.
+
+![](image6.png){width="1.4791666666666667in"
+height="1.3541666666666667in"}
+
+![](image11.png){width="1.40625in"
+height="0.4895833333333333in"}In the sample script
+
+![](image12.png){width="5.697916666666667in"
+height="1.445138888888889in"}C-shaped blocks can be put in a script in
+two ways. If you see a white line and let go, the block will be inserted
+into the script like any command block:
+
+![](image16.png){width="5.501388888888889in"
+height="1.2777777777777777in"}But if you see an orange halo and let go,
+the block will *wrap* around the haloed blocks:
+
+![](image20.png){width="5.800694444444445in"
+height="1.2916666666666667in"}The halo will always extend from the
+cursor position to the bottom of the script:
+
+If you want only some of those blocks, after wrapping you can grab the
+first block you don't want wrapped, pull it down, and snap it under the
+C-shaped block.
+
+![](image24.png){width="2.311111111111111in"
+height="1.3666666666666667in"}For "E-shaped" blocks with more than one
+C-shaped slot, only the first slot will wrap around existing blocks in a
+script, and only if that C-shaped slot is empty before wrapping. (You
+can fill the other slots by dragging blocks into the desired slot.)
+

C1-S1.md

@@ -0,0 +1,44 @@
+        ---
+        title: 2. Sprites and Parallelism
+
+        layout: home
+        has_children: false
+        has_toc: true
+        nav_order: 3
+        parent: Blocks, Scripts, and Sprites
+
+        ---
+
+ <img src="/snap-manual/assets/images/image25.png" style="width:33px; height:23px">Sprites and Parallelism
+--------------------------------------------------------------------------------------------------------------------------
+
+Just below the stage is the "new sprite" button . Click the button to
+add a new sprite to the stage. The new sprite will appear in a random
+position on the stage, with a random color, but always facing to the
+right.
+
+Each sprite has its own scripts. To see the scripts for a particular
+sprite in the scripting area, click on the picture of that sprite in the
+*sprite corral* in the bottom right corner of the window. Try putting
+one of the following scripts in each sprite's scripting area:
+
+> ![](image26.png){width="1.5506944444444444in"
+> height="0.99375in"}
+> ![](image27.png){width="1.5416666666666667in"
+> height="1.1666666666666667in"}
+
+When you click the green flag, you should see one sprite rotate while
+the other moves back and forth. This experiment illustrates the way
+different scripts can run in parallel. The turning and the moving happen
+together. Parallelism can be seen with multiple scripts of a single
+sprite also. Try this example:
+
+> ![](image28.png){width="1.7291666666666667in"
+> height="0.875in"}
+> ![](image29.png){width="1.7291666666666667in"
+> height="0.8958333333333334in"}
+
+When you press the space key, the sprite should move forever in a
+circle, because the move and turn blocks are run in parallel. (To stop
+the program, click the red stop sign at the right end of the tool bar.)
+

C1-S11.md

@@ -0,0 +1,68 @@
+        ---
+        title: 12. Predicates and Conditional Evaluation
+
+        layout: home
+        has_children: false
+        has_toc: true
+        nav_order: 8
+        parent: Blocks, Scripts, and Sprites
+
+        ---
+
+ Predicates and Conditional Evaluation
+-------------------------------------
+
+![](image82.png){width="0.6666666666666666in"
+height="0.1875in"}![](image83.png){width="1.2083333333333333in"
+height="0.1875in"}Most reporters report either a number, like , or a
+text string, like . A *predicate* is a special kind of reporter that
+always reports true or false. Predicates have a hexagonal shape:
+
+![](image84.png){width="1.9479166666666667in"
+height="0.2604166666666667in"}![](image85.png){width="1.0729166666666667in"
+height="0.15625in"}The special shape is a reminder that predicates don't
+generally make sense in an input slot of blocks that are expecting a
+number or text. You wouldn't say , although (as you can see from the
+picture) Snap*!* lets you do it if you really want. Instead, you
+normally use predicates in special hexagonal input slots like this one:
+
+![](image86.png){width="0.6666666666666666in"
+height="0.5694444444444444in"}The C-shaped if block runs its input
+script if (and only if) the expression in its hexagonal input reports
+true.
+
+![](image87.png){width="1.59375in"
+height="0.6145833333333334in"}A really useful block in animations runs
+its input script *repeatedly* until a predicate is satisfied:
+
+![](image88.png){width="2.2819444444444446in"
+height="1.46875in"}![](image89.png){width="2.2916666666666665in"
+height="0.84375in"}If, while working on a project, you want to omit
+temporarily some commands in a script, but you don't want to forget
+where they belong, you can say
+
+Sometimes you want to take the same action whether some condition is
+true or false, but with a different input value. For this purpose you
+can use the *reporter* if block:
+
+![](image90.png){width="4.208333333333333in"
+height="0.3854166666666667in"}The technical term for a true or false
+value is a "Boolean" value; it has a capital B because it's named after
+a person, George Boole, who developed the mathematical theory of Boolean
+values. Don't get confused; a hexagonal block is a *predicate,* but the
+value it reports is a *Boolean.*
+
+Another quibble about vocabulary: Many programming languages reserve the
+name "procedure" for Commands (that carry out an action) and use the
+name "function" for Reporters and Predicates. In this manual, a
+*procedure* is any computational capability, including those that report
+values and those that don't. Commands, Reporters, and Predicates are all
+procedures. The words "a Procedure type" are shorthand for "Command
+type, Reporter type, or Predicate type."
+
+![](image91.png){width="1.375in"
+height="0.24305555555555555in"}![](image92.png){width="1.375in"
+height="0.24305555555555555in"}If you want to put a *constant* Boolean
+value in a hexagonal slot instead of a predicate-based expression, hover
+the mouse over the block and click on the control that appears:
+

C1-S13.md

@@ -0,0 +1,47 @@
+        ---
+        title: 14. Variables
+
+        layout: home
+        has_children: false
+        has_toc: true
+        nav_order: 9
+        parent: Blocks, Scripts, and Sprites
+
+        ---
+
+Variables
+---------
+
+![](image93.png){width="1.5833333333333333in"
+height="1.4166666666666667in"}Try this script:
+
+![](image94.png){width="1.8854166666666667in"
+height="1.4375in"}The input to the move block is an orange oval. To get
+it there, drag the orange oval that's part of the for block:
+
+The orange oval is a *variable:* a symbol that represents a value. (I
+took this screenshot before changing the second number input to the for
+block from the default 10 to 200, and before dragging in a turn block.)
+For runs its script input repeatedly, just like repeat, but before each
+repetition it sets the variable i to a number starting with its first
+numeric input, adding 1 for each repetition, until it reaches the second
+numeric input. In this case, there will be 200 repetitions, first with
+i=1, then with i=2, then 3, and so on until i=200 for the final
+repetition. The result is that each move draws a longer and longer line
+segment, and that's why the picture you see is a kind of spiral. (If you
+try again with a turn of 90 degrees instead of 92, you'll see why this
+picture is called a "squiral.")
+
+![](image95.png){width="3.1875in"
+height="1.5in"}The variable i is created by the for block, and it can
+only be used in the script inside the block's C-slot. (By the way, if
+you don't like the name i, you can change it by clicking on the orange
+oval without dragging it, which will pop up a dialog window in which you
+can enter a different name:
+
+"I" isn't a very descriptive name; you might prefer "length" to indicate
+its purpose in the script. "I" is traditional because mathematicians
+tend to use letters between i and n to represent integer values, but in
+programming languages we don't have to restrict ourselves to
+single-letter variable names.)
+

C1-S15.md

@@ -0,0 +1,62 @@
+        ---
+        title: 16. Variables
+
+        layout: home
+        has_children: false
+        has_toc: true
+        nav_order: 10
+        parent: Blocks, Scripts, and Sprites
+
+        ---
+
+###  Global Variables
+
+You can create variables "by hand" that aren't limited to being used
+within a single block. At the top of the Variables palette, click the
+"Make a variable" button:
+
+![](image96.png){width="3.1875in"
+height="1.84375in"}![](image97.png){width="2.0520833333333335in"
+height="2.2708333333333335in"}This will bring up a dialog window in
+which you can give your variable a name:
+
+The dialog also gives you a choice to make the variable available to all
+sprites (which is almost always what you want) or to make it visible
+only in the current sprite. You'd do that if you're going to give
+several sprites individual variables *with the same name,* so that you
+can share a script between sprites (by dragging it from the current
+sprite's scripting area to the picture of another sprite in the sprite
+corral), and the different sprites will do slightly different things
+when running that script because each has a different value for that
+variable name.
+
+![](image98.png){width="1.6583333333333334in"
+height="2.2916666666666665in"}If you give your variable the name "name"
+then the Variables palette will look like this:
+
+![](image99.png){width="1.0416666666666667in"
+height="0.40625in"}There's now a "Delete a variable" button, and there's
+an orange oval with the variable name in it, just like the orange oval
+in the for block. You can drag the variable into any script in the
+scripting area. Next to the oval is a checkbox, initially checked. When
+it's checked, you'll also see a *variable watcher* on the stage:
+
+When you give the variable a value, the orange box in its watcher will
+display the value.
+
+![](image100.png){width="1.9270833333333333in"
+height="0.4791666666666667in"}How *do* you give it a value? You use the
+set block:
+
+Note that you *don't* drag the variable's oval into the set block! You
+click on the downarrow in the first input slot, and you get a menu of
+all the available variable names.
+
+If you do choose "For this sprite only" when creating a variable, its
+block in the palette looks like this:
+
+![Macintosh
+HD:Users:bh:Desktop:local-var.png](image101.png){width="0.6583333333333333in"
+height="0.14166666666666666in"} The *location*-pin icon is a bit of a
+pun on a sprite-*local* variable. It's shown only in the palette.
+

C1-S17.md

@@ -0,0 +1,28 @@
+        ---
+        title: 18. Variables
+
+        layout: home
+        has_children: false
+        has_toc: true
+        nav_order: 11
+        parent: Blocks, Scripts, and Sprites
+
+        ---
+
+### Script Variables
+
+![](image102.png){width="5.503472222222222in"
+height="2.3125in"}In the name example above, our project is going to
+carry on an interaction with the user, and we want to remember their
+name throughout the project. That's a good example of a situation in
+which a *global* variable (the kind you make with the "Make a variable"
+button) is appropriate. Another common example is a variable called
+"score" in a game project. But sometimes you only need a variable
+temporarily, during the running of a particular script. In that case you
+can use the script variables block to make the variable:
+
+As in the for block, you can click on an orange oval in the script
+variables block without dragging to change its name. You can also make
+more than one temporary variable by clicking on the right arrow at the
+end of the block to add another variable oval:
+