SlideShare une entreprise Scribd logo
1  sur  9
Télécharger pour lire hors ligne
Page 1
SCRATCH MODULE 1:
SEARCHING
INTRODUCTION
The purpose of this module is to experiment with variables, decision making, and event
management in Scratch. We will be exploring these ideas while implementing a simple
search program. Our program will select a random number between 1 and 8 as its
guess and then allow the user to deduce this number. The program will keep track of
each guess the user makes. If the user guess is too high or too low, a message will
indicate this and the number will be flagged as ‘used’. If the user guesses correctly, a
more elaborate outcome occurs indicating how many guesses the user made.
It is assumed that students have successfully completed the ‘Scratch Tutorial’ prior to
beginning this module. Students must have sufficient knowledge of the Scratch working
environment to create, modify, and execute scripts as well locate blocks within
categories and modify them according to directions and examples provided.
It is recommended that students follow these instructions closely to achieve the desired
end product. Personalization of the project is encouraged but better done once these
instructions have been completed to ensure all outcomes have been accomplished.
NEW CONCEPTS COVERED
Sprite manipulation: Painting a new sprite / Choosing a new sprite from file
Go to x, y / Set size
Creating multiple costumes / Switching costumes
Page 2
Variables: Create / Hide / Show / Set / Change / Scope
Using random numbers
Counting
Decision making: If / else if / else
Comparison operators: < / > / =
Event management: When sprite is clicked
Sending messages: Broadcast / Broadcast and wait
Receiving messages: When I receive
Stop all scripts
STARTING SCRATCH
Start Scratch. Create a new Scratch project by selecting ‘File’ > ‘New’. Before we do
anything, let’s save the file by selecting ‘File’ > ‘Save as’. Save your file as ‘Module 1 –
XY’ where X is the initial of your first name and Y is the initial of your last name.
Remember to save to your network drive! If this doesn’t work, please ask your Lab
Instructor for assistance.
PART 1: SETTING THE STAGE
The best way to learn Scratch is through experimentation. As it is an interactive
environment, feel free to stop and experiment as you work through this module.
CREATING THE SPRITES
Let’s get started …
Sprite1 (the cat): At the moment, our current sprite is Sprite1
(the cat). For this project, he plays a minor role so we
need to reposition and resize him. Use Figure 1a to
create the script for Sprite1. Execute it and verify the
cat moves to the bottom left corner of the stage.
Sprite2 (title): We need to create a title for our game.
Select the first option to ‘Paint new sprite’. Select
the Text tool in the Paint Editor screen and
type in a title such as ‘Guess the number’. If you can’t see your text, grab the
little black box to the left of the text and drag the text to where you can see it.
You can change the text color (perhaps to orange) and size (to something larger
like 36) if you want. When ready, click ‘OK’.
As with Sprite1, we need to position the title properly.
Use Figure 1b to help you. The title should move to
the top center of the stage. If it doesn’t, you may need
to adjust the coordinates appropriately.
Figure 1a
Figure 1b
Page 3
Sprite3 (instructions): We need to give the user instructions for operating our game.
Once again, select the first option to ‘Paint new sprite’. Using the Text tool, type
in the instructions ‘Make a guess by pushing a button’. When done, click ‘OK’.
Build the script in Figure 1b but use x = -3, y = 51. Adjust the coordinates as
needed to center the instructions just above the middle of the screen.
Sprite4 – Sprite11 (buttons): We need to give the user buttons to push to enter in their
guess. To create a button, select the second option to ‘Choose new sprite from
file’. Follow this sequence: ‘costumes’ > ‘Letters’ > ‘Circles’ > ‘1’ and then click
‘OK’. This gives us the button for ‘1’. Repeat this procedure to create buttons for
the numbers 2 – 8.
To position the buttons side by side along the center of
the stage, use the script from Figure 1c as a guide.
Figure 1c properly positions the ‘1’ button. You must
then drag and drop this script from the Scripts area onto
each of the other buttons in the Sprite List. This will
give each sprite its own script copy. Each x co-ordinate
will then have to be modified as follows:
1: x = -160 2: x = -115 3: x = -70 4: x = -25
5: x = 25 6: x = 70 7: x = 115 8: x = 160
Click the green flag to see all of the buttons in a line along the center of the
stage. If this is not the case, you may have to adjust the x co-ordinates.
Sprite12 (information): We need a means to inform the user when the guess is too big
or too small. Once again, select the first option to ‘Paint new sprite’. Using the
Text tool, type ‘Too High’. Then click on the Rectangle tool and draw a
rectangle over ‘Too High’. Click on the Fill tool and use the eyedropper to
select a color from the palette (like red) and then click on the rectangle to change
its color. You should now see the words clearly. If the words are not centered,
you can reselect the Text tool and reposition the words within the rectangle
accordingly. When done, click ‘OK’.
But, we aren’t finished yet. Click on the
‘Costumes’ tab for Sprite12. Copy
costume1 four times by clicking on the
‘Copy’ button four times. ‘Edit’ costume2
so it says ‘Too Low’ (perhaps with a
green background). ‘Edit’ costume3 so it
says ‘Correct’ (perhaps with a blue
background). ‘Edit’ costume4 so it has
Figure 1c
Page 4
no words and is completely white. ‘Edit’ costume5 so it says ‘Game over’
(perhaps with an orange background). You should now have five completely
different costumes all the same size.
When ready, click back on the ‘Scripts’ tab for
Sprite12 and use Figure 1d to help you position the
sprite properly. The instructions should appear
centered below the buttons. If they don’t, you may
need to adjust the coordinates appropriately. We
also need to specify the initial costume which is
‘costume4’. We will use other costumes when appropriate.
PART 2: PICKING A NUMBER
Now comes the fun part. It’s time for us to pick our number. Somehow we need to
keep track of our number and we want it to be different each time. To do this, we will
use a variable. A variable is a named storage location where we can place information
for future reference. We first have to create the variable and then we can assign it a
value. Anytime we want, we can find out its value or even change the value.
Variables in Scratch are not sprites. They can belong to individual sprites or to all
sprites at once. We are going to make Sprite12 in charge of managing our guess. This
makes sense as it is Sprite12’s responsibility to inform the user how their guess
compares with ours. The only sprite that needs to know our guess is Sprite12 so we will
make a variable called ‘Actual’ for Sprite12 alone.
CREATING VARIABLES
Actual: Select Sprite12 from the Sprite
List to make Sprite12 the active
sprite. From the Block
Descriptions, select .
Anything pertaining to a variable
will be found in this category.
Choose and fill in
the information as shown in Figure
2a. Click on ‘OK’ when ready.
Now you should see in the upper left corner of the stage. It
appears because has the check mark selected. By clicking the check
mark, you can unselect it and the variable will disappear from the stage. Do this
now. We don’t want the user to see our guess.
Of course, the guess is initially set to 0 which is not a valid option. We need to
choose a random number. The can be found in the
Figure 1d
Figure 2a
Page 5
palette. Add the block to the
current script for Sprite12. This will give us a random guess between 1 and 8
each time the green flag is clicked.
Guess: We need another variable to
keep track of the user’s guess.
Click on again, choose
and fill in the
information as shown in Figure 2b.
Observe that this variable is ‘For all
sprites’. Click on ‘OK’ when ready.
We DO want the user to see this number so grab the variable on
the stage and drag it to somewhere near coordinates x = 0, y = -125. It should
be across from Sprite1 approximately in the center of the stage. Manually
dragging the variable into position is the only way to place it properly. There are
no blocks to position it.
Add the block to the bottom of the script for Sprite12. We will
let the user change the initial Guess to whatever they want later on.
Count: Lastly, we need a third variable to
count the total number of user
guesses. Click on
again, choose and
fill in the information as shown in
Figure 2c. Observe that this
variable is ‘For all sprites’. Click on
‘OK’ when ready.
Since we do NOT want the user to
see this, hide it from the stage by clicking
on to remove the checkmark.
Add to the bottom of the
script for Sprite12. The count is initialized
to 0 and will be updated whenever a
guess is made. Figure 2d outlines the
final version of Sprite12’s script.
Figure 2b
Figure 2c
Figure 2d
Page 6
PART 3: MAKING A GUESS
It’s time for the user to guess our number. To do this, as the instructions indicate, the
user will click on one of the eight buttons. We can detect this by using the
block from the category. Each button will then need to
update the guess accordingly.
Once we have a new ‘Guess’, we need to compare it against the ‘Actual’ value. This
will involve two steps. The first will be to let all of the other sprites know that there is a
new guess while the second will be to perform the check. We can send messages to
other sprites using a ‘broadcast’ messaging system. The options for
are found under the category. Part 4 will discuss how
to receive a message.
UPDATING VARIABLES
Guess: Select Sprite4 (1) from the Sprite List to make it
the current sprite. Each time Sprite4 is clicked, we
need to change the user’s ‘Guess’ to the appropriate
number. It would also be nice to change the look of
the button so we know it was pushed. Add in the
script from Figure 3a. Try it to see how it works.
SENDING MESSAGES
Broadcast: Next we will send a new
message indicating that a guess
has been made. Snap a
under the script from
Figure 3a and update it by clicking
the down arrow and creating a
message called ‘Check guess’ as
shown in Figure 3b. The resulting script is shown in Figure 3c.
Now, drag and drop this script from Sprite4 onto
EACH of Sprite5 – Sprite11. This will give each
sprite its own copy. Then update EACH
corresponding script so the ‘Guess’ is set to the
correct value for that sprite. When you are finished,
no matter which button is pressed, the ‘Guess’ should
be updated appropriately. If all sprites guess ‘1’, you
haven’t done this properly. Test it to make sure!
Figure 3a
Figure 3b
Figure 3c
Page 7
PART 4: CHECKING A GUESS
Once there is a new guess, we need to check it against our real value. This will be the
job of our information sprite. Once a broadcast message has been sent indicating there
is a new guess, it will be the responsibility of the information sprite receive the message
and to act upon this information. It must inform the user if the guess is too high, too low,
or correct. This will require a 3-way decision making structure. We will create this by
using two if / else structures and nesting or placing one inside the other. Keep going …
RECEIVING MESSAGES
When I receive: Select Sprite12 (information) from
the Sprite List to make it the current sprite. We
need to create a new script to receive the
message ‘Check guess’. Plus, we need to
update our variable ‘count’ because each time
we check the new guess, obviously we need to
count that new guess towards our total guesses. Create the script in Figure 4a.
MAKING DECISIONS
If / else: The next outcome depends upon how the
‘Guess’ compares to the ‘Actual’ value. If
‘Guess’ is less than (<) ‘Actual’, we must display
‘Too Low’ (costume2) for a short time. Use
blocks from the , ,
and categories to
change the script from Figure 4a into that of
Figure 4b.
If ‘Guess’ is greater than (>) ‘Actual’, we must
display ‘Too High’ (costume1). Otherwise,
‘Guess’ must equal ‘Actual’ so display
‘Correct’ instead (costume3). The ‘else’
portion of the ‘if’ offers only one possibility.
We need two. In order to accomplish this, we
need to add another if / else block and nest
it inside of the first in the else portion.
Continue to modify the script from Figure 4b
into that of Figure 4c.
Figure 4a
Figure 4b
Figure 4c
Page 8
At this point, the game is playable. After clicking the green flag, you can make a
guess and, using the clues given, eventually guess the number. Test it and see
if it works.
PART 5: FINISHING UP
Since we kept track of the total guesses, it would be a good idea to convey this
information to the user. This is a good job for the cat – he can talk directly to the user.
It’s also good practice to officially end the game once it’s finished. Looking good …
TALKING TO THE USER
Broadcast: Select Sprite12 (information) from
the Sprite List to make it the current
sprite. We want to send a new message
when the answer is correct. Snap
to the else portion
of Figure 4c and update it by clicking the
down arrow and creating a new message called ‘Correct guess’. The updated
script will resemble Figure 5a.
When I receive: Select Sprite1 (the cat) from the
Sprite List to make it the current sprite. We
need to create a new script to receive the
message ‘Correct guess’. Create the script in
Figure 5b.
Join: Next, we can use the block from the category to
talk to the user. Since ‘Count’ keeps track of the total guesses and we want to
indicate how many guesses were made, we need to display the ‘Count’. But,
simply displaying a number is confusing. We should also show the word
‘guesses’ to make things clear.
To display two items at the same time, use
the block from the
category. For our message,
replace ‘hello’ with the variable ‘Count’
(drag and drop it in from the
palette) and ‘world’ with ‘ guesses’ (type it in). Now you should have created the
script in Figure 5c.
Test the game again and observe how the cat responds. We’re nearly done!
Figure 5a
Figure 5b
Figure 5c
Page 9
ENDING THE GAME
We purposefully chose to use the in Figure 5a so that we could
resume there once all tasks pertaining to the sent message had been accomplished. In
this case, the only task was for the cat to talk to the user. Once the cat is finished, the
script from Figure 5a will continue. At this point, all that’s left to do is inform the user
that the game is over.
Stopping all scripts: Select Sprite12
(information) from the Sprite List to make
it the current sprite once again. We need
to switch to the costume that says ‘Game
over’ and then stop all of the scripts.
Continue to modify Figure 5a to obtain
Figure 5d.
Play with the game and see what you think. How many guesses does it take you
in the best case? Worst case? On average?
PART 6: CHALLENGE WORK
What do you like about this game? How would you improve it? Now’s your chance…
To get full marks for this assignment, you need to upgrade this guessing game into
something less generic. You must implement AT LEAST ONE idea from the list below
although you can add other ideas of your own too. When you’re finished, electronically
submit this Scratch project for marking through Blackboard. Have fun!
IDEAS FOR IMPROVEMENT
1. Adding color: When the user clicks a button right now, there is a whirl effect
indicating it has been selected. In addition, give each button a different costume
so that when the button is clicked, it changes costume and then whirls. Ensure
that when the green flag is pushed, the original costume is reset.
2. Being polite: Right now, the cat simply says ‘# guesses’. This can be
improved. If there is only one guess, make the cat say something like ‘It took you
# guess.’. If two or more guesses have been made, the cat should say
something like ‘It took you # guesses.’.
3. More drama: The cat says his speech and he’s finished. Why not make him
show some excitement? Maybe he could move around (jump up and down or
turn in a circle), change his looks (color, size, position, etc), or even make some
noise (add a sound). Whatever you do, make sure that when the green flag is
clicked, he returns to his normal state.
References
1. Scratch v1.4: http://scratch.mit.edu/
Figure 5d

Contenu connexe

Tendances

Calculator 3
Calculator 3Calculator 3
Calculator 3livecode
 
Using 3d in PowerPoint
Using 3d in PowerPointUsing 3d in PowerPoint
Using 3d in PowerPointAudience Alive
 
Calculator 1
Calculator 1Calculator 1
Calculator 1livecode
 
Maze tutorial
Maze tutorialMaze tutorial
Maze tutorialJWhiteley
 
Systems by graphing calculator slides
Systems by graphing calculator slidesSystems by graphing calculator slides
Systems by graphing calculator slidesevanschilling
 
Star logo nova code cookbook
Star logo nova  code cookbookStar logo nova  code cookbook
Star logo nova code cookbookBarbara M. King
 
How to graph a graph on any standard
How to graph a graph on any standardHow to graph a graph on any standard
How to graph a graph on any standardgoesha93
 
Using minitab instead of tables for z values probabilities etc
Using minitab instead of tables for z values probabilities etcUsing minitab instead of tables for z values probabilities etc
Using minitab instead of tables for z values probabilities etcBrent Heard
 
Photoshop Tutorial Booklet
Photoshop Tutorial BookletPhotoshop Tutorial Booklet
Photoshop Tutorial BookletGraveney School
 
Paths, Masks And Blend Modes
Paths, Masks And Blend ModesPaths, Masks And Blend Modes
Paths, Masks And Blend ModesShan
 

Tendances (19)

Calculator 3
Calculator 3Calculator 3
Calculator 3
 
Using 3d in PowerPoint
Using 3d in PowerPointUsing 3d in PowerPoint
Using 3d in PowerPoint
 
Calculator 1
Calculator 1Calculator 1
Calculator 1
 
Sln skill cards
Sln skill cardsSln skill cards
Sln skill cards
 
How_to_make_ your_ quiz_interactive
How_to_make_ your_ quiz_interactiveHow_to_make_ your_ quiz_interactive
How_to_make_ your_ quiz_interactive
 
Test
TestTest
Test
 
Maze tutorial
Maze tutorialMaze tutorial
Maze tutorial
 
Aaaaaaaaaaaaa
AaaaaaaaaaaaaAaaaaaaaaaaaa
Aaaaaaaaaaaaa
 
Systems by graphing calculator slides
Systems by graphing calculator slidesSystems by graphing calculator slides
Systems by graphing calculator slides
 
After effect
After effect After effect
After effect
 
Tutorial in gimp
Tutorial in gimpTutorial in gimp
Tutorial in gimp
 
Edgy Colors
Edgy ColorsEdgy Colors
Edgy Colors
 
Star logo nova code cookbook
Star logo nova  code cookbookStar logo nova  code cookbook
Star logo nova code cookbook
 
How to graph a graph on any standard
How to graph a graph on any standardHow to graph a graph on any standard
How to graph a graph on any standard
 
Using minitab instead of tables for z values probabilities etc
Using minitab instead of tables for z values probabilities etcUsing minitab instead of tables for z values probabilities etc
Using minitab instead of tables for z values probabilities etc
 
Work flow
Work flowWork flow
Work flow
 
Photoshop Tutorial Booklet
Photoshop Tutorial BookletPhotoshop Tutorial Booklet
Photoshop Tutorial Booklet
 
Paths, Masks And Blend Modes
Paths, Masks And Blend ModesPaths, Masks And Blend Modes
Paths, Masks And Blend Modes
 
sample-06
sample-06sample-06
sample-06
 

Similaire à Modul 1 Scratch

AiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in SolidworksAiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in Solidworksdsp39
 
Abstract Halloween Tutorial
Abstract Halloween TutorialAbstract Halloween Tutorial
Abstract Halloween Tutorialstephonsimeon
 
Scratch for kids syllabus for 5 hours by bibek pandit
Scratch for kids syllabus for 5 hours by bibek panditScratch for kids syllabus for 5 hours by bibek pandit
Scratch for kids syllabus for 5 hours by bibek panditBibekPandit2
 
Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...
Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...
Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...LaurenMichelle11
 
Intro to Inventor with MugTree
Intro to Inventor with MugTreeIntro to Inventor with MugTree
Intro to Inventor with MugTreekrysia
 
Scratch Parrot Game
Scratch Parrot GameScratch Parrot Game
Scratch Parrot Gamejenloudun
 
Raspberry Pi and Physical Computing Workshop
Raspberry Pi and Physical Computing WorkshopRaspberry Pi and Physical Computing Workshop
Raspberry Pi and Physical Computing WorkshopRachel Wang
 
PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE
PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE
PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE MUHAMMAD HUZAIFA CHAUDHARY
 
Design a paint splashing effect into your image | ABDUL DJALIL DJAYALI
Design a paint splashing effect into your image | ABDUL DJALIL DJAYALIDesign a paint splashing effect into your image | ABDUL DJALIL DJAYALI
Design a paint splashing effect into your image | ABDUL DJALIL DJAYALIعبد الجليل جايا لي
 
88 brilliant little tips for Photoshop
88 brilliant little tips for Photoshop88 brilliant little tips for Photoshop
88 brilliant little tips for PhotoshopEmad Mido
 
Microsoft mathmatics step-by-step_guide
Microsoft mathmatics step-by-step_guideMicrosoft mathmatics step-by-step_guide
Microsoft mathmatics step-by-step_guideAnang Anang
 
UE4BlueprintLadderVolumeTutorial
UE4BlueprintLadderVolumeTutorialUE4BlueprintLadderVolumeTutorial
UE4BlueprintLadderVolumeTutorialJustin Plowman
 
In this exercise, youre going to begin building a countdown timer..docx
In this exercise, youre going to begin building a countdown timer..docxIn this exercise, youre going to begin building a countdown timer..docx
In this exercise, youre going to begin building a countdown timer..docxsleeperharwell
 

Similaire à Modul 1 Scratch (20)

Rolling The Dice
Rolling The DiceRolling The Dice
Rolling The Dice
 
mastercam_full
mastercam_fullmastercam_full
mastercam_full
 
mastercam_full
mastercam_fullmastercam_full
mastercam_full
 
Adobe photoshop
Adobe photoshopAdobe photoshop
Adobe photoshop
 
AiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in SolidworksAiM Spinner Design Tutorial in Solidworks
AiM Spinner Design Tutorial in Solidworks
 
Abstract Halloween Tutorial
Abstract Halloween TutorialAbstract Halloween Tutorial
Abstract Halloween Tutorial
 
Scratch for kids syllabus for 5 hours by bibek pandit
Scratch for kids syllabus for 5 hours by bibek panditScratch for kids syllabus for 5 hours by bibek pandit
Scratch for kids syllabus for 5 hours by bibek pandit
 
Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...
Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...
Blue Orange and Yellow Geometric Flat Shapes Scavenger Hunt Ice Breaker Class...
 
waagen-ecard
waagen-ecardwaagen-ecard
waagen-ecard
 
waagen-ecard
waagen-ecardwaagen-ecard
waagen-ecard
 
Intro to Inventor with MugTree
Intro to Inventor with MugTreeIntro to Inventor with MugTree
Intro to Inventor with MugTree
 
Scratch Parrot Game
Scratch Parrot GameScratch Parrot Game
Scratch Parrot Game
 
Raspberry Pi and Physical Computing Workshop
Raspberry Pi and Physical Computing WorkshopRaspberry Pi and Physical Computing Workshop
Raspberry Pi and Physical Computing Workshop
 
PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE
PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE
PIVOT ANIMATOR - USER GUIDE - VIDEO EDITING AND MAKING SOFTWARE
 
Design a paint splashing effect into your image | ABDUL DJALIL DJAYALI
Design a paint splashing effect into your image | ABDUL DJALIL DJAYALIDesign a paint splashing effect into your image | ABDUL DJALIL DJAYALI
Design a paint splashing effect into your image | ABDUL DJALIL DJAYALI
 
88 brilliant little tips for Photoshop
88 brilliant little tips for Photoshop88 brilliant little tips for Photoshop
88 brilliant little tips for Photoshop
 
Microsoft mathmatics step-by-step_guide
Microsoft mathmatics step-by-step_guideMicrosoft mathmatics step-by-step_guide
Microsoft mathmatics step-by-step_guide
 
UE4BlueprintLadderVolumeTutorial
UE4BlueprintLadderVolumeTutorialUE4BlueprintLadderVolumeTutorial
UE4BlueprintLadderVolumeTutorial
 
Introducing Scratch
Introducing ScratchIntroducing Scratch
Introducing Scratch
 
In this exercise, youre going to begin building a countdown timer..docx
In this exercise, youre going to begin building a countdown timer..docxIn this exercise, youre going to begin building a countdown timer..docx
In this exercise, youre going to begin building a countdown timer..docx
 

Plus de Ministry of Education Malaysia

Plus de Ministry of Education Malaysia (20)

Borang permohonan guru cemerlang 2014
Borang permohonan guru cemerlang 2014Borang permohonan guru cemerlang 2014
Borang permohonan guru cemerlang 2014
 
Fail Meja - Panduan Penyediaan
Fail Meja - Panduan PenyediaanFail Meja - Panduan Penyediaan
Fail Meja - Panduan Penyediaan
 
Fail Meja - Panduan Penyediaan
Fail Meja - Panduan PenyediaanFail Meja - Panduan Penyediaan
Fail Meja - Panduan Penyediaan
 
Fail Meja Ketua Panitia TMK
Fail Meja Ketua Panitia TMKFail Meja Ketua Panitia TMK
Fail Meja Ketua Panitia TMK
 
Panduan Fail Meja
Panduan Fail MejaPanduan Fail Meja
Panduan Fail Meja
 
00 introduction to cyber safe ambassador program
00 introduction to cyber safe ambassador program00 introduction to cyber safe ambassador program
00 introduction to cyber safe ambassador program
 
00 introduction to cyber safe ambassador program
00 introduction to cyber safe ambassador program00 introduction to cyber safe ambassador program
00 introduction to cyber safe ambassador program
 
Hack me now, hack me then @ btp
Hack me now, hack me then @ btpHack me now, hack me then @ btp
Hack me now, hack me then @ btp
 
07 end
07 end07 end
07 end
 
06 facebook security
06 facebook security06 facebook security
06 facebook security
 
05 wi fi network security
05 wi fi network security05 wi fi network security
05 wi fi network security
 
04 secure the human
04 secure the human04 secure the human
04 secure the human
 
03 secure the computer
03 secure the computer03 secure the computer
03 secure the computer
 
02 power search using google
02 power search using google02 power search using google
02 power search using google
 
01 Cyber Safe Malaysia Website Fundamentals
01 Cyber Safe Malaysia Website Fundamentals 01 Cyber Safe Malaysia Website Fundamentals
01 Cyber Safe Malaysia Website Fundamentals
 
00 introduction to cyber safe ambassador program
00 introduction to cyber safe ambassador program00 introduction to cyber safe ambassador program
00 introduction to cyber safe ambassador program
 
Manual Panduan Membina Laman FROG VLE
Manual Panduan Membina Laman FROG VLEManual Panduan Membina Laman FROG VLE
Manual Panduan Membina Laman FROG VLE
 
Mtg v5.0 full pdf bm
Mtg v5.0 full pdf bmMtg v5.0 full pdf bm
Mtg v5.0 full pdf bm
 
Takwim Penggal Persekolahan 2014
Takwim Penggal Persekolahan 2014 Takwim Penggal Persekolahan 2014
Takwim Penggal Persekolahan 2014
 
Hari ke-4: Pembentangan Kumpulan 7
Hari ke-4: Pembentangan Kumpulan 7Hari ke-4: Pembentangan Kumpulan 7
Hari ke-4: Pembentangan Kumpulan 7
 

Modul 1 Scratch

  • 1. Page 1 SCRATCH MODULE 1: SEARCHING INTRODUCTION The purpose of this module is to experiment with variables, decision making, and event management in Scratch. We will be exploring these ideas while implementing a simple search program. Our program will select a random number between 1 and 8 as its guess and then allow the user to deduce this number. The program will keep track of each guess the user makes. If the user guess is too high or too low, a message will indicate this and the number will be flagged as ‘used’. If the user guesses correctly, a more elaborate outcome occurs indicating how many guesses the user made. It is assumed that students have successfully completed the ‘Scratch Tutorial’ prior to beginning this module. Students must have sufficient knowledge of the Scratch working environment to create, modify, and execute scripts as well locate blocks within categories and modify them according to directions and examples provided. It is recommended that students follow these instructions closely to achieve the desired end product. Personalization of the project is encouraged but better done once these instructions have been completed to ensure all outcomes have been accomplished. NEW CONCEPTS COVERED Sprite manipulation: Painting a new sprite / Choosing a new sprite from file Go to x, y / Set size Creating multiple costumes / Switching costumes
  • 2. Page 2 Variables: Create / Hide / Show / Set / Change / Scope Using random numbers Counting Decision making: If / else if / else Comparison operators: < / > / = Event management: When sprite is clicked Sending messages: Broadcast / Broadcast and wait Receiving messages: When I receive Stop all scripts STARTING SCRATCH Start Scratch. Create a new Scratch project by selecting ‘File’ > ‘New’. Before we do anything, let’s save the file by selecting ‘File’ > ‘Save as’. Save your file as ‘Module 1 – XY’ where X is the initial of your first name and Y is the initial of your last name. Remember to save to your network drive! If this doesn’t work, please ask your Lab Instructor for assistance. PART 1: SETTING THE STAGE The best way to learn Scratch is through experimentation. As it is an interactive environment, feel free to stop and experiment as you work through this module. CREATING THE SPRITES Let’s get started … Sprite1 (the cat): At the moment, our current sprite is Sprite1 (the cat). For this project, he plays a minor role so we need to reposition and resize him. Use Figure 1a to create the script for Sprite1. Execute it and verify the cat moves to the bottom left corner of the stage. Sprite2 (title): We need to create a title for our game. Select the first option to ‘Paint new sprite’. Select the Text tool in the Paint Editor screen and type in a title such as ‘Guess the number’. If you can’t see your text, grab the little black box to the left of the text and drag the text to where you can see it. You can change the text color (perhaps to orange) and size (to something larger like 36) if you want. When ready, click ‘OK’. As with Sprite1, we need to position the title properly. Use Figure 1b to help you. The title should move to the top center of the stage. If it doesn’t, you may need to adjust the coordinates appropriately. Figure 1a Figure 1b
  • 3. Page 3 Sprite3 (instructions): We need to give the user instructions for operating our game. Once again, select the first option to ‘Paint new sprite’. Using the Text tool, type in the instructions ‘Make a guess by pushing a button’. When done, click ‘OK’. Build the script in Figure 1b but use x = -3, y = 51. Adjust the coordinates as needed to center the instructions just above the middle of the screen. Sprite4 – Sprite11 (buttons): We need to give the user buttons to push to enter in their guess. To create a button, select the second option to ‘Choose new sprite from file’. Follow this sequence: ‘costumes’ > ‘Letters’ > ‘Circles’ > ‘1’ and then click ‘OK’. This gives us the button for ‘1’. Repeat this procedure to create buttons for the numbers 2 – 8. To position the buttons side by side along the center of the stage, use the script from Figure 1c as a guide. Figure 1c properly positions the ‘1’ button. You must then drag and drop this script from the Scripts area onto each of the other buttons in the Sprite List. This will give each sprite its own script copy. Each x co-ordinate will then have to be modified as follows: 1: x = -160 2: x = -115 3: x = -70 4: x = -25 5: x = 25 6: x = 70 7: x = 115 8: x = 160 Click the green flag to see all of the buttons in a line along the center of the stage. If this is not the case, you may have to adjust the x co-ordinates. Sprite12 (information): We need a means to inform the user when the guess is too big or too small. Once again, select the first option to ‘Paint new sprite’. Using the Text tool, type ‘Too High’. Then click on the Rectangle tool and draw a rectangle over ‘Too High’. Click on the Fill tool and use the eyedropper to select a color from the palette (like red) and then click on the rectangle to change its color. You should now see the words clearly. If the words are not centered, you can reselect the Text tool and reposition the words within the rectangle accordingly. When done, click ‘OK’. But, we aren’t finished yet. Click on the ‘Costumes’ tab for Sprite12. Copy costume1 four times by clicking on the ‘Copy’ button four times. ‘Edit’ costume2 so it says ‘Too Low’ (perhaps with a green background). ‘Edit’ costume3 so it says ‘Correct’ (perhaps with a blue background). ‘Edit’ costume4 so it has Figure 1c
  • 4. Page 4 no words and is completely white. ‘Edit’ costume5 so it says ‘Game over’ (perhaps with an orange background). You should now have five completely different costumes all the same size. When ready, click back on the ‘Scripts’ tab for Sprite12 and use Figure 1d to help you position the sprite properly. The instructions should appear centered below the buttons. If they don’t, you may need to adjust the coordinates appropriately. We also need to specify the initial costume which is ‘costume4’. We will use other costumes when appropriate. PART 2: PICKING A NUMBER Now comes the fun part. It’s time for us to pick our number. Somehow we need to keep track of our number and we want it to be different each time. To do this, we will use a variable. A variable is a named storage location where we can place information for future reference. We first have to create the variable and then we can assign it a value. Anytime we want, we can find out its value or even change the value. Variables in Scratch are not sprites. They can belong to individual sprites or to all sprites at once. We are going to make Sprite12 in charge of managing our guess. This makes sense as it is Sprite12’s responsibility to inform the user how their guess compares with ours. The only sprite that needs to know our guess is Sprite12 so we will make a variable called ‘Actual’ for Sprite12 alone. CREATING VARIABLES Actual: Select Sprite12 from the Sprite List to make Sprite12 the active sprite. From the Block Descriptions, select . Anything pertaining to a variable will be found in this category. Choose and fill in the information as shown in Figure 2a. Click on ‘OK’ when ready. Now you should see in the upper left corner of the stage. It appears because has the check mark selected. By clicking the check mark, you can unselect it and the variable will disappear from the stage. Do this now. We don’t want the user to see our guess. Of course, the guess is initially set to 0 which is not a valid option. We need to choose a random number. The can be found in the Figure 1d Figure 2a
  • 5. Page 5 palette. Add the block to the current script for Sprite12. This will give us a random guess between 1 and 8 each time the green flag is clicked. Guess: We need another variable to keep track of the user’s guess. Click on again, choose and fill in the information as shown in Figure 2b. Observe that this variable is ‘For all sprites’. Click on ‘OK’ when ready. We DO want the user to see this number so grab the variable on the stage and drag it to somewhere near coordinates x = 0, y = -125. It should be across from Sprite1 approximately in the center of the stage. Manually dragging the variable into position is the only way to place it properly. There are no blocks to position it. Add the block to the bottom of the script for Sprite12. We will let the user change the initial Guess to whatever they want later on. Count: Lastly, we need a third variable to count the total number of user guesses. Click on again, choose and fill in the information as shown in Figure 2c. Observe that this variable is ‘For all sprites’. Click on ‘OK’ when ready. Since we do NOT want the user to see this, hide it from the stage by clicking on to remove the checkmark. Add to the bottom of the script for Sprite12. The count is initialized to 0 and will be updated whenever a guess is made. Figure 2d outlines the final version of Sprite12’s script. Figure 2b Figure 2c Figure 2d
  • 6. Page 6 PART 3: MAKING A GUESS It’s time for the user to guess our number. To do this, as the instructions indicate, the user will click on one of the eight buttons. We can detect this by using the block from the category. Each button will then need to update the guess accordingly. Once we have a new ‘Guess’, we need to compare it against the ‘Actual’ value. This will involve two steps. The first will be to let all of the other sprites know that there is a new guess while the second will be to perform the check. We can send messages to other sprites using a ‘broadcast’ messaging system. The options for are found under the category. Part 4 will discuss how to receive a message. UPDATING VARIABLES Guess: Select Sprite4 (1) from the Sprite List to make it the current sprite. Each time Sprite4 is clicked, we need to change the user’s ‘Guess’ to the appropriate number. It would also be nice to change the look of the button so we know it was pushed. Add in the script from Figure 3a. Try it to see how it works. SENDING MESSAGES Broadcast: Next we will send a new message indicating that a guess has been made. Snap a under the script from Figure 3a and update it by clicking the down arrow and creating a message called ‘Check guess’ as shown in Figure 3b. The resulting script is shown in Figure 3c. Now, drag and drop this script from Sprite4 onto EACH of Sprite5 – Sprite11. This will give each sprite its own copy. Then update EACH corresponding script so the ‘Guess’ is set to the correct value for that sprite. When you are finished, no matter which button is pressed, the ‘Guess’ should be updated appropriately. If all sprites guess ‘1’, you haven’t done this properly. Test it to make sure! Figure 3a Figure 3b Figure 3c
  • 7. Page 7 PART 4: CHECKING A GUESS Once there is a new guess, we need to check it against our real value. This will be the job of our information sprite. Once a broadcast message has been sent indicating there is a new guess, it will be the responsibility of the information sprite receive the message and to act upon this information. It must inform the user if the guess is too high, too low, or correct. This will require a 3-way decision making structure. We will create this by using two if / else structures and nesting or placing one inside the other. Keep going … RECEIVING MESSAGES When I receive: Select Sprite12 (information) from the Sprite List to make it the current sprite. We need to create a new script to receive the message ‘Check guess’. Plus, we need to update our variable ‘count’ because each time we check the new guess, obviously we need to count that new guess towards our total guesses. Create the script in Figure 4a. MAKING DECISIONS If / else: The next outcome depends upon how the ‘Guess’ compares to the ‘Actual’ value. If ‘Guess’ is less than (<) ‘Actual’, we must display ‘Too Low’ (costume2) for a short time. Use blocks from the , , and categories to change the script from Figure 4a into that of Figure 4b. If ‘Guess’ is greater than (>) ‘Actual’, we must display ‘Too High’ (costume1). Otherwise, ‘Guess’ must equal ‘Actual’ so display ‘Correct’ instead (costume3). The ‘else’ portion of the ‘if’ offers only one possibility. We need two. In order to accomplish this, we need to add another if / else block and nest it inside of the first in the else portion. Continue to modify the script from Figure 4b into that of Figure 4c. Figure 4a Figure 4b Figure 4c
  • 8. Page 8 At this point, the game is playable. After clicking the green flag, you can make a guess and, using the clues given, eventually guess the number. Test it and see if it works. PART 5: FINISHING UP Since we kept track of the total guesses, it would be a good idea to convey this information to the user. This is a good job for the cat – he can talk directly to the user. It’s also good practice to officially end the game once it’s finished. Looking good … TALKING TO THE USER Broadcast: Select Sprite12 (information) from the Sprite List to make it the current sprite. We want to send a new message when the answer is correct. Snap to the else portion of Figure 4c and update it by clicking the down arrow and creating a new message called ‘Correct guess’. The updated script will resemble Figure 5a. When I receive: Select Sprite1 (the cat) from the Sprite List to make it the current sprite. We need to create a new script to receive the message ‘Correct guess’. Create the script in Figure 5b. Join: Next, we can use the block from the category to talk to the user. Since ‘Count’ keeps track of the total guesses and we want to indicate how many guesses were made, we need to display the ‘Count’. But, simply displaying a number is confusing. We should also show the word ‘guesses’ to make things clear. To display two items at the same time, use the block from the category. For our message, replace ‘hello’ with the variable ‘Count’ (drag and drop it in from the palette) and ‘world’ with ‘ guesses’ (type it in). Now you should have created the script in Figure 5c. Test the game again and observe how the cat responds. We’re nearly done! Figure 5a Figure 5b Figure 5c
  • 9. Page 9 ENDING THE GAME We purposefully chose to use the in Figure 5a so that we could resume there once all tasks pertaining to the sent message had been accomplished. In this case, the only task was for the cat to talk to the user. Once the cat is finished, the script from Figure 5a will continue. At this point, all that’s left to do is inform the user that the game is over. Stopping all scripts: Select Sprite12 (information) from the Sprite List to make it the current sprite once again. We need to switch to the costume that says ‘Game over’ and then stop all of the scripts. Continue to modify Figure 5a to obtain Figure 5d. Play with the game and see what you think. How many guesses does it take you in the best case? Worst case? On average? PART 6: CHALLENGE WORK What do you like about this game? How would you improve it? Now’s your chance… To get full marks for this assignment, you need to upgrade this guessing game into something less generic. You must implement AT LEAST ONE idea from the list below although you can add other ideas of your own too. When you’re finished, electronically submit this Scratch project for marking through Blackboard. Have fun! IDEAS FOR IMPROVEMENT 1. Adding color: When the user clicks a button right now, there is a whirl effect indicating it has been selected. In addition, give each button a different costume so that when the button is clicked, it changes costume and then whirls. Ensure that when the green flag is pushed, the original costume is reset. 2. Being polite: Right now, the cat simply says ‘# guesses’. This can be improved. If there is only one guess, make the cat say something like ‘It took you # guess.’. If two or more guesses have been made, the cat should say something like ‘It took you # guesses.’. 3. More drama: The cat says his speech and he’s finished. Why not make him show some excitement? Maybe he could move around (jump up and down or turn in a circle), change his looks (color, size, position, etc), or even make some noise (add a sound). Whatever you do, make sure that when the green flag is clicked, he returns to his normal state. References 1. Scratch v1.4: http://scratch.mit.edu/ Figure 5d