Introduction to Scratch & Teaching Scratch

Introductions

• Greetings

  If you want to see this on your own web browser, the URL is http://www.cs.uni.edu/~east/presentations/2016/scratch.html

  • me

    J. Philip East;  University of Northern Iowa;  Jr. High math teacher back in the dark ages; 

  • today
    • An introduction to Scratch
    • A Scratch project
    • Discussion of teaching programming

  Any questions/comments before we start? Please ask your questions as they arise. If I'm not looking around for questions, just speak up.

Getting Started With Scratch

• What is Scratch?
  • Block-oriented programming environment/language (drag & drop instructions)—no need to memorize instructions
  • Developed by Lifelong Kindergarten Group at the MIT Media Lab (legacy of Papert & Logo perhaps)
  • Low floor; moderately high ceiling (easy to learn, can do lots with it)
  • Appropriate for beginning programmers of most any age down to 4th, 3rd, 2nd? grader
• Scratch site & accounts

  The Scratch web site https://scratch.mit.edu/ allow you to create and test and play with Scratch programs. You can also create an account for yourself there and easily save your programs on their system. You can "share" your work there also.

  • Open a web browser and enter scratch.mit.edu as your URL.
  • If you wish create an account for yourself. It does not need to represent you accurately. I used jpeAstudent as my username and a relatively simple password.
  • click on the Create link on the blue banner at the top of the site. The Scratch programming environment appears. It has:
    • a stage (where the cat is)
    • a backstage (below the stage)
    • several tabs—for choosing scripts, costumes, & sounds used in your program/play
    • a sandbox (perhaps) where you produce/manipulate scrips, costumes & sounds—notice that the sandbox changes with the tab choice

  Questions/Comments?

• Scratch familiarization
  • Go back to the Scratch home page (click the SCRATCH link on the blue banner)
  • Click on the Help link (in the blue banner or at the bottom of the page under the Support column).
  • Download & open the Getting Started Guide
  • Carry out steps 1 thru 9 in the guide
  • Skip to step 12 (Tips) — name and save your file; no need to share it.
  • Click on your username (right end of the blue banner) and examine My Stuff
  • Explore if people still seem to be working

  Questions/Comments? Ready to move on?

A Larger Project

We are going to create a Scratch program/play in which a leprechaun roams about the stage/world picking up gold coins. What do you suppose we will need for that?

Getting Started

• Start a new project—save the one you had (Save Now in Scratch's File menu);  enter a new name;  save it
• Backdrop
  • find New Backdrop: in the backstage area
  • mouse over the mountain scene icon (Choose backdrop from library)
  • select/click on it
  • find a backdrop you like—I'm choosing water and rocks
  • select/click on the chosen backdrop
  • click the OK button at the bottom of the screen
  • the chosen backdrop should replace the blank one that was there previously

  Questions/Comments? Ready to move on?

• Leprechaun "sprite"
  • Can download from the Web (keep copyright in mind). I have one at http://www.cs.uni.edu/~east/presentations/2016/
  • Download the image keeping track of where it gets stored
  • Upload it to Scratch as a sprite
    • find New sprite: in the backstage area
    • mouse over the folder icon (Upload sprite from file)
    • select/click on it
    • browse to find the downloaded image and click the Open button

    Notice that the sprite appears and is selected (in the backstage area)

  • Remove (most of) the white background
    • click on the Costumes tab (should see the costume in a "paint" environment)
    • select the fill fill tool
    • select the transparent color (the blank one with the orange diagonal)
    • click on the white spots;  big chunks of white should disappear

    You can use the eraser tool to get rid of the remaining white spots but it is tedious. We won't do it. (Enlarge the image and adjust the size of the eraser if you choose to do this. Also, erase in small steps so you can undo errors.)

  Questions/Comments? Ready to move on?

• Gold coin sprite

  Same process as above.

  Questions/Comments? Ready to move on?

• Delete the cat sprite
  • right click on the sprite's image in the backstage area (Mac touchpad is control click)
  • have various choices, choose delete

  Questions/Comments? Ready to move on?

Be sure to save your program! The system save occasionally, but is worth doing yourself.

Coding

Now we are ready to start directing our actors, producing scripts for our sprites.

Scratch lends itself to the metaphor of putting on a play or making a movie. We will take advantage of that. What do directors say? ("Places everyone!" and "Action!")

Let's think for a minute about what we want to happen when we run the program. Probably something like ...

• leprechan to be somewhere on the stage (and of a reasonable size)
• rest of stage to be empty
• then repeatedly ...
  • gold coin (of appropriate size) to randomly appear
  • leprechaun tries to get it
  • if he gets there in time he gets the coin, otherwise the coin disappears

Questions/Comments? Let's move on.

Places everyone

The director says "places" but we don't really have a director. I have the stage play this part. So when the green flag is clicked we want the stage to say "Places everyone!" and then to say "Action!". Let's do that.

• select the stage
• select the Scripts tab
• from Events, select/drag and drop the when the green flag clicked block
• from Events, select/drag and drop the broadcast [message1] and wait block
• create a new message using the little triangle to the right of "message1"—I used "Places Everyone!" (seems okay to have spaces here, though I avoid them in most programming contexts)
• from Events, select/drag and drop the broadcast [message1] block. Click on the triangle to select new message and create the message "Action!".

  Here we use broadcast without a wait. The wait causes a delay before the next instruction. When wait is used the wait will be until every sprite that has a script to receive the message has reported back that it (the sprite) is done.

Questions/Comments? Ready to move on?

Okay, now all we need to do is tell the actors/sprites what to do in response to the director's messages.

• leprechaun's script
  • select the leprechaun sprite
  • select the Scripts tab
  • from Events, select the when I receive [_____] block
  • make sure the "Places Everyone!" message is selected
  • from Looks, select the set size to (100)% block
  • enter 40 in the value slot
  • click on the set of actions and decide if 40 was the value you wanted
  • from motion, select the go to x:(##) y:(##) block

    There were numbers rather than number signs in the block. The numbers show the current X- and Y- coordinates of the sprite. (0) (0) is the center.

  • if not already there, enter the values 0 and 0 (or wherever you want the sprite to start

  Questions/Comments? Ready to move on?

• coin's script
  • select the coin sprite and the Scripts tab
  • from Events, select the when I receive [_____] block and make sure the "Places Everyone!" message is selected
  • from Looks, select the set size to (100)% block and enter 7.5 in the value slot
  • click on the set of actions and decide if 7.5 was the value you wanted
  • from Looks, select the hide block

  Questions/Comments? Ready to move on?

Action

We want the leprechaun to respond to the coin appearing so maybe we should start our actions with the coin sprite. What we want is for a coin to appear randomly in time and in location. It should just sit there for some amount of time and if the leprechaun has not gotten to it, it should disappear. Okay?

We could duplicate coin sprite several times and have each of them carry out the actions above. Alternatively, we could "clone" the coin sprite and have its clones do the action. That is what I chose to do.

coin's script

• randomly create a clone

  We want to wait a bit (5-10 seconds?) and create clone. Essentially we just want to keep doing that.

  • from Events, select the when I receive [_____] block and select the "Action!" message
  • from Control, select the wait (1) secs block
  • from Operators, select the pick random (1) to (10) block
  • place 3 and 10 in the value slots
  • from Control, select the create clone of [myself] block and leave "myself" as the thing to create a clone of
  • from Control, select the forever control block and place it before the wait block (it should wrap around both the action blocks

  Nothing happens if we click the green flag because the clones that got/get created don't do anything.

• Program the clones

  The clones look just like the original and have same location, size, etc.; are hidden; etc. We need them to go to some random spot on the stage, show themselves, wait, and (eventually/maybe) disappear (if the leprechaun didn't get them). Let's do it.

  • from Control, select the when I start as a clone block
  • from Motion, select the go to x:(_) y:(_) block
  • from Operators, select the pick random (1) to (10) block
  • What value should we put in the x value slot? (approximately -220 to 220)
  • What value should we put in the y value slot? (approximately -160 to 160)
  • from Operators, select the pick random (1) to (10) block. Just drop it in the script area, don't connect it. Put appropriate values in it for the x value slot
  • right-click on the pick random block and duplicate it
  • put in appropriate values for y value slot and place each of the pick random blocks in the x and y value slots
  • from Looks, select the show block
  • from Control, select the wait (1) secs block and put a value in the slot (maybe 5, maybe some random value)
  • from Control, select the delete this clone block

  Try it out. Should do something now.

  Oh Wait! we want the clone to die when it touches the leprechaun and this code has no way to do that. So we need to wait a little bit, check to see if its touching the leprechaun. What we need is:

  • from Control, select the repeat (10) block
  • from Control, select the wait (1) secs block
  • put values in (maybe wait .1 second, and repeat 50 times—this produces an overal wait of 5 seconds)
  • from Control, select the if <   > block
  • from Sensing, select the touching [ ] ? block;   use the little triangle to select the leprechaun sprite
  • place the delete this clone block in the if <   > block
  • place the wait (1) secs block after the if <   > block, but inside the repeat (50) block
  • place another delete this clone block after the repeat (50) block in case the leprechaun did not get here in time

  KEY IDEA: You need to constantly/repeatedly check for touching. A common mistake is to just have an if <   > block and assume that it gets checked all the time. It only gets checked the one time.

  Questions/Comments? Ready to move on?

leprechaun's script

So ..., what should the leprechaun do when it receives the "Action!" message? Probably nothing. The coin should randomly (in time and location) appears and the leprechaun should move around as the user directs him. We'll rely on key presses to control the movement.

• recognizing the action
  • from Events, select the when [space] key pressed block
  • duplicate block to get one for each of the directions
  • select the key for each— up arrow, down arrow, left arrow, right arrow)
• moving

  Now we need to move. We could use the move (10) steps block. But, the movement will be in the direction the sprite is facing. An alternative is to merely change the X- or Y-coordinate of the sprite, i.e., to move right change the X-coordinate by 10; left, change X-coordinate by -10; up, change Y by 10; down, change Y by -10. Let's try that.

  • from Motion, select the change x by (10) block
  • place it under the when [right arrow] key pressed block
  • test it out by repeatedly pressing or pressing and holding the right arrow key

  Now do the same for the others directions/key presses.

  • place a change x by (10) under the when left arrow key pressed block and change the value from 10 to -10
  • place a change y by (10) under the when up arrow key pressed block
  • place a change y by (10) under the when down arrow key pressed block and change the value from 10 to -10
  • test it out by repeatedly pressing or pressing and holding various arrow keys

Discussion

• Questions/Comments/Wonderings?
• Additions to the program/play?

  Some possibilities:

  • play a sound when the coin appears (the pop?)
  • play a sound when the coin is gotten (import crashing cymbal?)—can do in coin script or in leprechaun script
  • keep a score;  add 1 for each coin gotten (if time do this)
    • in Data, select Make a Variable
    • call it score
    • let it be for all sprites
    • click the OK button

    A bunch of new commands appear and there is a check beside the variable's value block. The check means the variable and value will show up on the screen/stage. The new commands allow you to use and change the variable value.

    A major planning question is Who should be responsible for setting and changing the score? Since the leprechaun and coin are the ones who know if they are touching, it will need to be one of them that changes the score. Either should work okay.

    However, I think I want to add points when the leprechaun gets to the coin in time and subtract points when he doesn't. So, I will split the duties. The leprechaun will add a point each time he gets a coin. If a coin is not gotten in the allowed time each coin clone will subtract one or more points just before it disappears.

    • coin's script
      • at the bottom of the when I start as a clone block insert a change [score] by (1) block. Place it after the repeat (50) block but before the delete this clone block.
      • change the value in the change [score] by (1) block to -2
      • test it out by hitting the green flag and waiting to see what happens if you don't move the leprechaun (Hopefully the score get reduced each time.)
    • leprechaun's script

      To have the leprechaun's script change the score I need to add something that tests to see if he is touching a coin and, if so, to add 1 to the score. The needed code is:

          if < touching [coin]>
              change [score] by (1)
      

      Since the code executes each time a key is press is recognized, we need not put the if touching block in a loop. However, each of the four key press blocks needs the code so this is a code place to demonstrate the Make a Block capability.

      • in More Blocks, note that there is a button to Make a Block, click it—a dialogue window appears.
      • The cursor should be blinking inside a block. It is waiting for you to enter a name for the block you are creating. Type getGold. We don't need anything else so just click okay. (But you might explore the options to see what is available. The options let us specify values that might be needed by the new block.)

        Notice that a new big "hatted" or sloped top block appears and it has the title define getGold. We will add blocks to it to indicate what the new command does.

      • from Control drag out an if >   < then block and attach it to the define block
      • from Sensing drag out a touching [ ] ? block and place it in the if block's condition slot. Then, click on its little choice triangle and select coin as the thing to test for touching
      • from Data drag out a change [score] by (1) block and place it inside the if block's actions area.
      • Now all we need to do is place a new getGold block at the bottom of each of the when [___ arrow] key pressed blocks. Do that.
      • test it out by hitting the green flag and moving the leprechaun around to collect coins. (Hopefully the score get increased each time.)
    • stage's script

      That leaves on the often overlooked task of setting the original value—initializing—the score. In order to change a variable by a prescribed amount, it should already have a value. This is know as initializing and generally occurs when the program starts (or restarts). I prefer to have the stage do most of the initialization. So, when the stage broadcasts Places Everyone I will have it set the initial value for score. In this case the score should be set to zero. In the Stages's script area, insert the set [score] to (0) between the two broadcast blocks.

• Anything else?

Teaching Scratch Considerations (Try to reserve 30 minutes for this)

• What is programming?

  Programming is the process of preparing a set of instructions a computer can follow independently. The set of instructions is called a program. To learn programming, you need to learn the instructions that are available and how to organize them to accomplish desired tasks.

• Programming fundamentals

  All programs consist of instructions that have been organized in a manner that hopefully achieves the desired task. The instructions include action statements and ways of combining them. In many languages the action action statements relate to data—defining data, getting access to it (input from the user of some device connected to the computer), sharing or storing it (output to the user or a connected device), manipulating it, and storing it in working memory. Some languages include other actions, e.g., moving an image on the screen.

  • Data and "primitive"/built-in actions

    Generally, computers can deal only with numbers and characters. Any task you wish to have the computer do will have to be represented as numbers and characters and the representations (numbers & characters) will have to be manipulated with the instructions provided by the particular language you are using.

    Data can either be single values or a collection of values. Ultimately, being able to work with collections of data is necessary for solving most non-trivial problems.

  • Organizing instructions

    There are essentially four ways to organize the instructions in a program:

    • sequence

      This is just placing the instructions one after another. But, some instructions need to come before or after others. This becomes more complex as you include the organizations below because with them, the instruction could come before, within, or after the "structure" being imposed. And, without the proper sequencing, incorrect results occur.

    • selection

      This is merely selecting which action is to occur, or whether a single action will occur or not. Two things are involved, knowing what the choices are and knowing how to make the choice involved.

    • repetition

      Without repetition, programming would be extremely tedious. We would have to enter all the needed instruction. But with repetition we only need to determine what needs to be repeated and either how many time to repeat or when to stop (if we do not know in advance how many repetitions are needed).

    • modularization (making new instructions)

      Modularization allows us to treat a set of instructions as a single instruction. We merely group the instructions giving them a name by which they can be referred to and use that name where/whenever we want the instructions to be carried out. This allows us to think more generally about the problem being worked on and to avoid copying and pasting code. Also, when we need to change the code, we only have to change the one copy rather than find and change all the places we use it.

  It has been shown that will these basic ideas once can produce a program to solve any problem that can be solved by a computer. Thus, programming is relatively simple:

  • represent your problem as number, characters, and/or collections of them
  • determine the manipulations of the data (instructions) that are needed
  • organize the manipulations/instructions to achieve the goal

  This is simple, not easy! But it gets easier with knowledge and practice. It is similar to writing with letters. Know what you want to say, pick or find letter combinations (words) to say those things, and organize the saying so people can follow your thoughts.

• Focus on goal tasks rather than language features

  Generally, teachers of programming have organized their instruction by focusing on elements of the language. For example, math has often been taught by focusing on how to do addition, then how to do subtraction, etc. typically breaking those tasks into smaller tasks (e.g., addition without carry, addition with carry, etc.). Instruction seldom focusses on the tasks for which one might use the various operations. Unlike, some other languages, Scratch lends itself very much to focussing on what you can do, rather than what the instructions are. Thus, focussing on problems or tasks is much simpler with Scratch.

  So, when teaching (having students do or learn) Scratch, try to organize student work by what they are doing rather than what Scratch's instructions are and how they work. Some general kinds of task you can consider are:

  • Animation

    Animation is change and can be of several types and accomplished in a variety of ways. Some types are change in: overall position, orientation (direction being faced), position of body parts (arms, legs, eyes, ...), and size. And, the change can happen more rapidly or slowing and leave some sort of trail or not.

  • Story Telling

    Story telling might start with nursery rhymes or fabels, but could also include joke telling, original stories, reports of actual activity, interactive stories, mad libs, etc. And, of course, they can involve animation, sound effects, etc.

  • Line Drawing

    My favorite starting place for this is drawing initials but that is not the only possibility. Also, there can be a lot of math used in line drawings (relatives sizes and placements of parts of letters, distance to travel, ...).

  • Polygon Drawing

    (Regular) Polygon drawing is a fun activity for students. Then, with polygons, students can explore spirograph-like figures and block drawings either as ends in themselves or a means

  • Trivia/Quizzing

    I refer to rote learning as trivia. Not so much because it is trivial but because most if not all particular bits of rote learning are not critical to success in other endeavors. But giving quizzes or asking for recall of knowledge is often fun for students. (Also, it provides a good opportunity to use list of data.)

  • Gaming

    Last but not least and perhaps the most fun is having students program games which almost always fully exercise all the programming fundamentals. And, student can create their own games. Lots of creativity can be exercised.

• Allows/encourages exploration (can be problematic)

  Someone new to Scratch can, after only a few minutes of instruction, begin exploring the entire language. The effects of the program are typically quite obvious which leads to activity just to see what happens or to see if something can be done. Thus, a teacher need not be very directive when providing instruction or have to know a lot before using it with students.

  There can be a down side to aspect of Scratch. Exploration (guess and check) is somewhat antithetical to planning and can produce awful code that is hard to understand or change/correct. Planning before coding should be expected of students at some point.

• Continuum of directed-ness of instruction

  Some teachers like direct instruction and some do not. With Scratch there can provide very specific directions/expectations or can be very general or vague when specifying a task. For example, three possible alternatives for a story-telling task are:

  Use Scratch to present a fairy tale, nursery rhyme, fable, or story of your own. Impress me!

  Use Scratch to present a fairy tale, nursery rhyme, fable, or story of your own. Use at least three sprites, two of which must speak. At least 5 lines of dialog must occur. At least one sprite must move. Make use of a sound and a costume change. ...

  Follow the steps below to create a Scratch program that tells a story.

      1.  ...
      2.  ...
      3.  ...
      ...
  

• Continuum of complexity (and need for pre-planning/algorithm development before coding)

This is about as far as we got to in the session. The finished example that mostly follows the directions above has been shared on the Scratch web site. Its URL is https://scratch.mit.edu/projects/108195410/ An earlier version of this this same program but with some differences is also available (via http://www.cs.uni.edu/~east/presentations/2016/getTheGold.sb2. Some additional information, discussion, links to programs and resources are included below.

Another Program

Now let's do something different—drawing your initials. (We did not get this far in the session, but ...)

Drawing Initials

There are various approaches to this task. After an introduction to Scratch it is not unreasonable to turn students loose with only the directions, "Have a sprite draw your initials." Alternatively, you could make one or more of the following suggestions.

• Use rounded letters

  If the student's initials include rounded letter (B, C, D, G, J, O, P, Q, R, S, U) suggest they try to include half-circles. You'll need to recognize that a circle is essentially a repeated combination of move (__) steps and turn (__) degrees. When exploring this with students you might use move (1) steps and turn (1) degrees in a loop that repeats 360 times. With some exploration you can find that repeating 20 times instead of 360 and turning 18 degrees instead of 1 draws a pretty good circle but takes a lot less time. How far you move, determines how big the circle is.

  A half circle would use only have the repeat value. Also, many of the curved letter need a straight piece before and after the half circle.

  A sample program developed more as exploration rather than planning is available at https://scratch.mit.edu/projects/22999181.

• Create new blocks

  This is an opportunity to create new blocks. Obviously, people whose initials contain duplicate letters could define a block to draw the duplicate letters. In the circle example above one could make a new block for drawing the half circle, probably with the extra straight leg part. Yet another possibility is to make each letter a block with parameters (optional inputs) to indicate size or location.

• Use relative sizing of letter elements

  A lot of calculation (with ratio & proportion) can be used in printing. Letters have values for width, height, leading (spacing between them) that are related. Additionally, elements of the letters will vary with each other, e.g., the leg of the P and the rounded portion. Directing students to take these ideas into consideration should provide for lots of preplanning (before coding), substantial practice of math in real life, and (perhaps) extra study of typography.

• Generalized initials (monograms)

  You might ask students to produce code that would allow initials to be drawn at locations, orientations, sizes, and colors as specified by the user. The idea here is that monograms might appear on coffee cups, stationery, etc.

Additional Scratch Stuff

Teaching Scratch

A variety of resources for teaching Scratch are available. Some that I am aware of are linked to below. Several that I used to link to are no longere available. Search engines may provide a good way to find specific or other resources.

• The Scratch site

  The Scratch site itself has some resources. In the programming environment there is a help icon (question mark in a circle) on the right hand side of the window. It also has a help page with additional information, https://scratch.mit.edu/help/.

• ScratchEd

  One of the resources listed on the Scratch help page is ScratchEd. It is a community of Scratch educators. It could be helpful (I've not used it).

• Scratch.IE

  This is a group in Ireland who started teaching scratch to secondary students and eventually created some lessons for elementary students. The site URL is http://www.scratch.ie. You'll eventually want to look at the resources (link is a tab on the right)—http://www.scratch.ie/resources.

• ScratchJr

  ScratchJr is a tablet (iPad & Android) version of Scratch for use by young kids. I don't have a tablet so can't really say much about it. The site is available via http://www.scratchjr.org/index.html.

• Scratch wiki

  The Scratch wiki provides background information about about some aspects of Scratch. It is mostly a reference document and is available via https://wiki.scratch.mit.edu/wiki/Scratch_Wiki_Home.

Scratch Courses

I am willing to recommend two on-line courses for doing/learning Scratch.

• Colleen Lewis

  Colleen has a course for students (teachers too). You can access it via http://blogs.hmc.edu/lewis/scratch/ or https://www.edx.org/course/programming-scratch-harveymuddx-cs002x-1. This course appears to be available at any time.

• Ben Schafer

  Ben Schafer (and some colleagues at UNI) created a Scratch MOOC for teacher several years ago and Ben has been running it in the summers since then. I'm not sure of its availability when Ben is not overseeing it. Check it out or contact him via http://www.cs.uni.edu/~schafer/outreach/cs4hs/ His email address is on the site.

Other Programming possibilities

• Snap!

  Snap! is an offshoot of Scratch that was originally designed to allow for building your own blocks that Scratch did not originally include. It is quite similar to Scratch—both the language and the site. Check it out at http://snap.berkeley.edu/ Snap! is a bit more computer-science-y than Scratch, e.g., more control structures, the "Make a block" feature comes under variables, & more operators all of which are readily recognized by CS folks.

• AppInventor

  AppInventor is a block-oriented (graphical) programming language for building Android apps. Check it out at http://appinventor.mit.edu/explore/.

• Kodu

  Kodu is a block-oriented (graphical) game creation language/environment developed by Microsoft for use on PCs and on Xbox. More information (and the system) is available at http://www.kodugamelab.com/.

• Greenfoot

  Greenfoot is a development environment meant to teach object-oriented programming. It gets included here because it has some graphical/iconic elements for its world and actor. It uses text-based Java code but the editor/environment provides a lot of support for building the programs. I would not turn students loose in the environment but I would consider it for a first "real" programming course for students starting about grades 6 or 7. Check it out at http://www.greenfoot.org/home.

• Alice

  Alice is also a combination environment designed to teach object-oriented Java programming. It has a rich 3-D library, use blocks to specify actions and menus to supply parameters to the actions. Check it out at http://www.alice.org/index.php#.

• Blockly

  Blockly provides the underlying structure to other programming environments, e.g., AppInventor, Code.org, courses, future Scratch environments, or your own environment. The Blockly language is quite similar to Scratch, but to use it as a programming language you have to set it up—it doesn't come with backdrops, sprites, etc. Blockly block-programs can be translated into various programming languages (e.g., JavaScript, Python, PHP) Check it out at https://developers.google.com/blockly/.

If you have questions or comments/suggestions or would just like to "talk" about any of this, please feel free to e-mail me (east@cs.uni.edu)