gems - coding with scratch · web viewgems - coding with scratchpage 16 page . 16. of . 16. niles...

Girls Can Code! Niles West GEMS 2017

Advanced Coding Concepts with ScratchPresented by: Dottie Lee, retired software developer, instructor for Fox Valley Girls Coding Club, and representing the Ladies in Technology Program of the Illinois Technology Foundation

Let’s Enhance the GEMS Dance Party Program with Minions and More!We will build our project by enhancing the “GEMS Dance Party” project created for the Intro to Scratch GEMS workshop which is based on the Scratch tutorial Getting Started with Scratch

We will learn more about variables, lists, procedures, and clones (aka Minions)

Please do not feel that you are expected to complete every step in this project today. There is a lot of material here and a short time for our workshop, but we are providing some extra challenges here so you can work on them on your own

STEP 1: Open the shared starter Project: In your Web browser open the GEMS Dance Party 1 project at this link:

https://scratch.mit.edu/projects/153519875/ Click “See Inside” to open the project in the Scratch Project Editor

Niles West GEMS 2017 GEMS - Coding with Scratch Page 1 of 21

https://scratch.mit.edu/projects/153519875/


STEP 2: Create an Initialize ProcedureEach time you run your Scratch program the sprites get moved around and it can be frustrating to have to reposition them manually before the next run. It is good practice to initialize the state of each Sprite when the program starts up. We are going to create a custom block (Procedure) to do this.

Select the Cat sprite Select the Scripts tab In the More Blocks (purple) category click on Make A Block; type “Initialize” in the space to

name your procedure; then click OK

There will now be a defineInitialize block in your scripts area Add code to your Initialize procedure to position your Sprite, set size, and anything else you

want to have at start up. Tip: To get the right numbers for the “go to x: y:” block, manually position the Sprite first by dragging it. The Motion category blocks will automatically show the current values, so you can just drag the “go to x: y”” block onto your initialize script


Girls Can Code! Niles West GEMS 2017 Copy the Initialize code to each of your other Sprites and

adjust as needed!You can simply drag the define Initialize block with all its attached code to another sprite’s thumbnail (below the stage). This automatically creates an Initialize procedure for the other sprite. Now just change the values for the x and y location and anything else you want different.


Girls Can Code! Niles West GEMS 2017 STEP 3: Call the Initialize Procedure at Start Up

Select the More Blocks Category; your new Procedure will be listed there! Drag it just under the “when green flag clicked” block Do this for each of your Dancing sprites

Professional Programming Concept:Procedure/Function: A Block of code that encapsulates specific functionality, typically limited to accomplishing one main task. The Procedure may take one or more parameters as inputs. The Procedure will be “called” by another code section when it is needed. In this case our Initialize Procedure is called by the “when green flag clicked” event. Writing procedures makes your code easier to follow or to modify. It allows for code reuse so that we can call this same procedure multiple times in the program whenever we want to reinitialize the sprite



STEP 4: Make the Dance Steps into a Procedure and Streamline the flow!

For the Cat Sprite:o Create a new Block (Procedure) named “Dance” by selecting More Blocks category,

clicking “Make a Block”, and typing “Dance” in the space to name ito Move the Dance steps from the “when green flag clicked” event to your new Procedure

by dragging the blockso From More Blocks category drag the Dance procedure under the Initializeo Now you have a very streamlined Main Program run by the green flag click!

For each of the other Sprites (this can be done later if you want to move on for now….)o Create a new Block named “Dance” o Move the existing “forever” loop to the Dance procedure by dragging it under “define

Dance”o From More Blocks category drag the Dance procedure under the Initialize



STEP 5: Ask the user how many steps to take: In Scratch, many blocks have parameters that can accept variable values to determine what

happens; these parameters are shown as white rectangles for text parameters and ovals for numeric ones. Take a look at the “move” block; “10” is the current parameter value.

Create a variable to hold the user’s choice: Select the Data category (Orange) on the scripts tab, click “Make a Variable”. Leave “For all sprites” selected. Name it DanceSpeed; click OK

We are going to attach the input request to the Stage Backdrop instead of to one spriteo Click on the Stage icon to the left of the Sprites area below the stageo Select the Scripts tab for the Stageo From the More Blocks category click “Make a Block”, name it GetSettingso Select the Sensing category and drag “ask what’s your name and wait” to the

GetSettings Procedure. Change the text to “How many steps?”o Select the Data category and drag “set DanceSpeed to 0” block to the GetSettings

procedure. o Select the Sensing category again and drag “answer” on top of the 0 in the above block;

it should drop right in and replace ito Create a new procedure for the stage named “Initialize”: More Blocks category, Make a

Block, name it “Initialize”.o Call GetSettings from Initialize: More Blocks, Drag GetSettings under Initializeo Select Events category and add a “when green flag clicked” event to the stageo Call Initialize from the green flag event: More Blocks, drag Initialize to event



STEP 6: Change the Dance based on User Input Select the Cat Sprite In the Data category drag the variable you named DanceSpeed on top of the 10 in the “move 10

steps” block inside the Define Dance procedure. We need to also replace the -10 in the backwards move but cannot directly say move –

DanceSpeed. We will multiply it by -1 to get this value:o Select the Operators (Green) category and drag a multiplication block on top of the -10

in move -10 steps blocko Drag the DanceSpeed variable from the Data category into the first circle of the

multiplication operationo Type -1 into the second circle

Try running the program and input different values for number of steps; observe what happenso What happens if you leave the input blank?o What happens if you put words instead of numbers when asked how many steps?



STEP 7: Control the flow- Have the Dancers Start Only When the Stage is SetYou probably noticed that the cat started his dance, and maybe even finished it before you even had a chance to tell it how many steps! Can you see why?

All the sprites and the stage itself run their scripts when the green flag is clicked! But we need the stage to be all set and finished collecting user input before the Dancers move. We will have the stage send a message to all the sprites when it is ready.

Set the stageo Select the Stage: Click the Stage icon to the left of the Sprites in lower left of screen o Create a message: From the Events category drag a “broadcast message1 and wait”

block to the scripts area; click the dropdown arrow next to “message1” and select “new message”. In the “New Message” popup type “StageIsReady” and click OK.

o Attach the message to the define Initialize procedure: drag it to the end and connect it

Have each sprite start when they get the message: o Select the spriteo Unhook the starting steps from the Green Flag: Click the blocks below the green flag

event and drag them away to detacho Wait for the message: From the Events category drag “when I receive StageIsReady” to

the scripts area and attach the starting blocks to it (Initialize and Dance”

o Repeat for each sprite, so that the only Green Flag responder is the Stage Have the Cat sprite dance “forever” like the other dancers:

o Replace the “repeat 10 times” loop wrapper around the dance steps with a “forever” loop from the Control category



STEP 8: Make a Mini-Me Minion for each Dancer Select one of your Dancer Sprites Create a Clone: From the Control category drag “create a clone of myself” between the Initialize

and Dance steps of “when I receive StageIsReady” code Tell the clone how to look and what to do: When a clone is created it will be in the same

location as the original! That means it will be covered up! From the Control category drag a “when I start as a clone” block to the scripts area and add these blocks to it. Feel free to experiment and change or add anything you like to make your minions special:

o Adjust Size: From the Looks category drag a “set size to 100%” block; change it to a different size, perhaps 25% for a cute little mini minion

o Adjust Position: From the Motion category drag a “change x by 10” block and change the 10 to a number large enough to separate

o Tell it what to do: From More Blocks category drag the Dance procedure

Copy the When I Start as a Clone code to each of your other Sprites and adjust as needed!You can simply drag the “when I start as a clone” block with all its attached code to another sprite’s thumbnail (below the stage).

Add the “create clone of myself” step to each Sprite’s main startup code between Initialize and Dance


Girls Can Code! Niles West GEMS 2017NOTE: The remaining steps use Advanced Coding Concepts: lists, index, loop iteration through a list, procedures with parameters. It walks through how to create lists of minions and dancers, allow the user to name each minion, and display the name when the clone is created. You may want to do these steps at home to enhance your program!

STEP 9: Create a List of Dancers The Remaining Steps use advanced coding concepts

Select the stage Select the Data category and click “Make a List”; when the popup appears leave “For All Sprites”

selected, enter the name “Dancers”, and click OK Select More Blocks category, click “Make a Block”; name it PopulateDancerList Select the Data tab and drag “add thing to Dancers” to the define PopulateDancerList; drag one

of these for each of your sprites In each “add” block change “thing” to the name of one of your Sprites. Make sure that no extra

spaces get into the text box while you are typing or we won’t be able to match the names We need to clear out the list each time we run the program so we don’t keep adding the same

names. We will use these concepts:o Length of a list: this is the number of items in the listo Index of a list: each item in a list can be accessed by its index; this is a number assigned

in order as items are added. The first item in a list in Scratch has Index 1o Deleting from a List changes the Index of the remaining Items: if I have 3 items with

index values of 1 through 3 and remove item 1, the item previously at index 2 gets assigned index 1; the item previously at index 3 gets index 2. Of course, if the last item is removed the others are left as is

From the Control category drag a repeat 10 loop to the PopulateDancerList script just above all the “add” statements

From the Data category drag “length of Dancers” to replace the “10” in the repeat; this will make the loop execute as many times as we have items in the list

From the Data category drag “delete 1 of Dancers” to the inside of the repeat loop. Each time the loop repeats, the first item will be deleted, and the item after it becomes the new first item


Girls Can Code! Niles West GEMS 2017Step 10: Create List of Minions from User’s Input

Make sure you still have the stage selected; select the Data category and click “Make a List”; when the popup appears leave “For All Sprites” selected, enter the name “Minions”, and click OK

Select More Blocks category, click “Make a Block”; name it PopulateMinionList; we will build this in the following steps

As the first step in PopulateMinionList script, clear out any existing Minions like we did for the Dancers with a repeat loop: repeat length of Minions delete 1 of Minions

Logic to assign Minions: We are going to loop through all the items in the Dancers list, asking the user to input a Minion name for each. We will use the Index of the Dancers list to do this and will assign the name to the item with the same Index in the Minion list. So Dancer at index 2 (Dino) will own the Minion at Index 2 of Minions List

o Create a Variable to track the current index: Data category, click “Make a Variable”, name it “DancerIndex”

o Start at the first item in the Dancers List: From Data category drag a “set DancerIndex to 0” block to your PopulateMinionList procedure definition. Change it to “Set DancerIndex to 1”

o The Loop: From Control category drag a “Repeat 10” loop to your procedure’s script. From Data category drag “length of Dancers” (it may say length of minions) on

top of the 10 in the loop; use the dropdown to select Dancers in the “length of” block

Inside the Loop drag an “ask…and wait” statement and replace the text with the join (from Operators). For the second argument of the join drag “item 1 of …” from the Data category ; change the dropdown to “Dancers” and replace the 1 after “item” with the DancerIndex variable dragging it from Data category

When we run an “ask” statement, the user’s input is in the “answer” variable found under Sensing. Insert Answer at last position of Minions list

Increase the Index by 1 to move on to the next Dancer



STEP 11: Populate both Lists at Start Up and Test the Lists Add the 2 new procedures to the Initialize procedure of the Stage

Let’s test the Program to see if the lists work as expected

On the data tab check the boxes next to the Dancers and Minions list to show them during the testing. Do the same for any variables you want to observe (DanceSpeed and/or DancerIndex)

You can move the variables/lists around on the screen When you are finished with the testing you can uncheck them to hide them

Run the Program, responding to the prompts for Minion names and for how many steps. Notice the lists getting cleared out and repopulated each time you run:



STEP 12: Find the Sprite’s Minion MatchLogic (algorithm): Create a procedure that will take a parameter of the Sprite’s name and will find the index of that Sprite in the Dancers list. Use that index to get the Minion name from the Minions list

Choose one of the Sprites and click it’s thumbnail to see its Scripts area From More Blocks category click “Make a Block”; type “FindMinion” in the name box but do not

click OK yet Click the arrow next to Options, then click “Add String Input”; replace “string1” in the white text

box with “SpriteName”. Then click OK.

Create a local variable to use as an index in the FindMinion procedure. Local means only this sprite can use it. We do this because all the sprites start up at once and would be “stepping on” each other’s index if it were shared. So from Data category click “Make a Variable”, name it LocalIndex, and select “For this sprite only” to make it local

Define the FindMinion procedure


Girls Can Code! Niles West GEMS 2017STEP 13: When the clone is created look up the minion’s name and say it

We will add code to “when I start as a clone”:

From Data category drag FindMinion to be the first step in “when I start as a clone” Type the Sprite’s name in the parameter box of FindMinion, making sure to spell it the same

way as in the Dancers list. Be careful not to get extra spaces in front of it After FindMinion finishes the value of LocalIndex will be set to the index of the Sprite in Dancers

list and can be used to retrieve the matching Minion name:o From Looks category drag a “say hello” block after FindMiniono Replace the “hello” text with a “join” from Operators categoryo In the Join replace the first word with “I’m” and the second with “item 1 of Minions”

dragged from the Data Categoryo Replace the 1 after item with LocalIndex dragged from Data category

Note: if you are adding this code to the cat sprite and it still has a “Say Welcome…” block in the Dance procedure, move that “Say Welcome…” to the top of the Initialize procedure. Otherwise, the Minion will say it and you won’t see the Minion say its name.

To Add the Same Code to the other Sprites:Many programming languages allow Procedures to be shared across the entire program which would really be best for this situation. However, Scratch does not have that ability. So you should:

Drag the define FindMinion procedure to each of the other Sprite thumbnails For each Sprite check that a LocalIndex variable is defined For each sprite add the FindMinion[SpriteName] and the Say steps as you did for the first Sprite,

just modifying the name input to FindMinion



Glossary/Concepts:Program: A set of computer code written to execute some useful feature, application, etc.

Programming Languages: A defined set of instructions that can be used to tell a computer what to do. Programmers write code by determining which instructions to put together in which order

Scratch: a visual programming language developed at MIT enabling coders to drag and drop blocks of code to form scripts to control sprites on a “stage”

Script: A set of computer instructions connected to run together to do something. In Scratch, we create scripts by connecting blocks

Procedure/Function: A Block of code that encapsulates specific functionality, typically limited to accomplishing one task. The Procedure may take one or more parameters as inputs. The Procedure will be “called” by another code section when it is needed

Variable: a named data element representing a piece of information to be remembered

Parameter: a defined piece of data to be input into a block of code; it may be required or optional. When the program is executed the parameter value will be set by the corresponding argument passed into the code block

Argument: value passed into a block of code to tell the code the current value of a parameter

Loop: a code control structure that causes code to be repeated a specified number of times or based on a condition (while or until some condition is true)

Event: a trigger that the program is “listening” for; code blocks can be “hooked” to events so they will execute when the event occurs. Commonly used events In Scratch, are the “when green flag clicked” event at the top of a script to start, and “when key pressed” to listen for user input

Conditional: a flow of control structure that determines what code gets executed based on a decision. If the condition is true a certain block of code will be executed. Sometimes it will have an “else” condition defined as well as an “if” condition

Algorithm: A logical step by step outline of the processes to be implemented to solve a problem. Includes decision points with branches defining what to do for each case. An algorithm is language-agnostic, i.e., it does not use syntax specific to a particular programming language. For all but the simplest programs, an algorithm is an essential part of the software development process


Girls Can Code! Niles West GEMS 2017Data Structure: In Computer Science the term “Data Structure” refers to a specific way of organizing and referencing data. There are entire college courses devoted to Data Structures

Lists in Computer Science List/Array: an array is a Data Structure that uses a single variable to store and access multiple

values; an individual value (element) is accessed by an Indexo Each numbered value is called an Element of the arrayo Index is sometimes called a subscripto The index of the first element in the array is either 0 or 1 depending on the languageo Arrays in some programming languages can be more complex than a simple list but that is

outside the scope of our discussion

Lists in Scratch Index: Lists in Scratch start with the Index 1 Create a List: on the Scripts tab, select the Data category and click “Make A List”. Clicking OK

adds blocks to the Data category if this is the first list in the project

Add an item to the end of the List:

Add an item at a specific Index: Remove an item from the list by giving this block the Index of the item to remove

Retrieve a value at a specific Index:

Get the number of items in the List: Determine whether the List contains a specific value:

Parallel Arrays/Lists:The Dance Party Minions project demonstrates the use of Parallel Lists to use a value from one list to look up a related value in a second list. This is a great algorithm to know as it is widely used in programming! In this project we have the Dancers list and a second list named Minions. The Minions list contains the names of the minion for each Dancer and they are in the same order as in the Dances list. So at Index 1 in Dancers we have “KitKat” and at Index 1 in Minions we have the name the user chose for KitKat’s minion.

The basic algorithm is:

Look up specified value in Acronyms List to get the Index If not found, take appropriate action such as notifying the user If found, get the value from the Meanings List using the same Index, and take appropriate action

such as displaying it to the user


Girls Can Code! Niles West GEMS 2017Web Resources:Fox Valley Girls Coding Club : https://foxvalleygirlscodingclub.com. This is the Web site for the Girls Coding Club at which I (Dottie) am an Instructor for girls in the Geneva/St. Charles area.

Illinois Technology Foundation – http://illinoistechfoundation.org provides many programs to support the technology career pipeline in Illinois. Ladies in Technology program within ITF is focused on providing support and connections for women

Girls Who Code – http://girlswhocode.com The Girls Who Code Clubs and Programs teach computer science to 6th-12th grade girls; they have Summer Immersion programs and local clubs

DigiGirlz – Microsoft YouthSpark program for middle and high school girls. https://www.microsoft.com/en-us/diversity/programs/digigirlz/default.aspx

YouthSpark : https://www.microsoft.com/about/philanthropies/youthspark/youthsparkhub/programs . Information and links to many different programs sponsored by or offered by Microsoft

NCWIT Aspirations – initiative of National Center for Women & IT for talent development; the organization gives annual awards to high school girls. https://www.aspirations.org/aspirations-community/illinois-northern-illinois

On-Line Learn To Code Classes:Scratch – a visual programming language developed at MIT. http://scratch.mit.edu

App Inventor – a visual programming language developed at MIT for creating Mobile Apps. Build the app on the App Inventor using your Browser on any computer; run the apps you build on Android Phones or Tablets. You cannot run the apps on IOS devices but it is a great way to learn mobile development. http://www.appinventor.org/

W3Schools tutorials – the World Wide Web Consortium (W3C) sets the standards for Web development and provides excellent tutorials on HTML, CSS, JavaScript and more. http://www.w3schools.com/

Code.org – online computer courses for students at all levels. https://code.org

Khan Academy – Khan Academy offers free courses on many subjects; in the subject listing you will find Computer Programming, Computer Science, Hour of Code, and Computer Animation. https://www.khanacademy.org/


https://www.khanacademy.org/

https://www.khanacademy.org/

https://code.org/

http://www.w3schools.com/

http://www.appinventor.org/

http://scratch.mit.edu/

https://scratch.mit.edu/

https://www.aspirations.org/aspirations-community/illinois-northern-illinois

https://www.microsoft.com/about/philanthropies/youthspark/youthsparkhub/programs/

https://www.microsoft.com/en-us/diversity/programs/digigirlz/default.aspx

http://girlswhocode.com/

http://illinoistechfoundation.org/

https://foxvalleygirlscodingclub.com/2016/04/15/welcome-gems-girls/

gems - coding with scratch · web viewgems - coding with scratchpage 16 page . 16. of . 16. niles...

Documents