Lesson What you will learn: how to perform simple calculations using Scratch how to use variables how to develop a design how to use the else if function how to create animated buttons Contents Exercise 1 Simple Calculator... 2 Exercise 2 More Advanced Calculator Design... 4 Introduction to Scratch Programming (2 nd Edition) Page 1 of 13 ZigZag Education, 2013
Exercise 1 Simple Calculator It is easy to create a simple calculator in Scratch. 1. Start a new Scratch project. Delete the cat and create the variables as shown (one for first number, second number, operator and answer). Operator this will be the addition, subtraction, multiplication or division need in the sum. 2. Set the variable display on the stage as shown. Introduction to Scratch Programming (2 nd Edition) Page 2 of 13 ZigZag Education, 2013
3. Input the instructions as shown below. This section resets all the number variables in the calculator to zero when the green flag is clicked. This section prompts the user to enter the first and second numbers and the operator needed for the sum. This section ensures that the correct answer is calculated according to what operator has been chosen. You have made a simple calculator. Introduction to Scratch Programming (2 nd Edition) Page 3 of 13 ZigZag Education, 2013
Exercise 2 More Advanced Calculator Design Now that you have made a calculator that works, you will move on to make a traditional layout calculator with buttons that can be pressed on the screen instead of being entered by typing. It is important when starting a new project to have an idea of what you re trying to achieve at the end of it. Think about the diagram below. First number to be entered This will be a variable (something that can change). Operator Add, subtract, multiply, divide (or blank). Second number to be entered This will also be a variable. Answer (variable worked out by a formula). Numbers Each button will be a sprite. Clicking the sprite will cause a number to be entered. Cancel button When this sprite is clicked, it will reset all the variables to default values (usually zero). Operators Each operator button will be a sprite. Clicking the sprite will set the operator and set the number pad to enter the second number. Equals button Clicking this sprite will cause the first number to be in a sum with the second number according to the operator that has been selected. There will be three elements of this work that you will need to create: a) the variables that will hold the data b) the buttons that will be sprites drawn by you c) the scripts that perform the functions of the calculator Introduction to Scratch Programming (2 nd Edition) Page 4 of 13 ZigZag Education, 2013
Create sprites for the buttons that you will need. Use the paint new sprite option. Use the rectangle and text tools to create each sprite. Set the costume centre to the centre of each sprite as shown. Name each sprite with a sensible name (not sprite1, sprite2, etc.). Create all the sprites as shown, each with a sensible name. (There is an equals button and an equals symbol which will not be a button.) Introduction to Scratch Programming (2 nd Edition) Page 5 of 13 ZigZag Education, 2013
The Operator Sprite The operator sprite, which displays at the top of the calculator, needs to have five costumes, one for each operator plus a blank one. Which operator is shown (which costume is shown) will depend on the value of a variable that is set when the different operator button is clicked. Create the costumes as shown: For each new costume, click Paint then create the costumes in the same way as you have for the individual sprites. Creating the Variables that You Will Need for the Project Variables hold values that can change. You need to create five variables as shown in the diagram. 1. Set first number, second number and answer to show (by clicking the check box). Set operator and sequence to not be shown. 2. The operator will contain five values which are zero to five (corresponding to addition, subtraction, multiplication, division and not chosen). 3. The sequence will contain two values: 1 and 2, according to whether the first number or the second number is to be entered. Introduction to Scratch Programming (2 nd Edition) Page 6 of 13 ZigZag Education, 2013
Drawing the Background of the Calculator Click on the stage icon. Then click the Backgrounds tab. Then click Edit. In Paint Editor, draw the background grid for the calculator. Click OK. Introduction to Scratch Programming (2 nd Edition) Page 7 of 13 ZigZag Education, 2013
Programming the Scripts Click on the stage icon and then create this start-up script which will reset all the variables. Setting sequence to 1 means that the first number clicked will be entered in the first number variable. Setting operator to zero will set the operator symbol to not chosen. The Cancel Button Script Use the same script as is on the stage as for the C button (Cancel). Choose the when cancel clicked starter button. The Operator Button Scripts Clicking the green flag or C button will set the operator variable to zero. Clicking each operator button will set the operator variable to a value between 1 and 4. Set the values by clicking the add button to 1, subtract to 2, multiply to 3 and divide to 4. Clicking any operator will also set the sequence variable to value 2. This means that the next click of any number button will send the number to the second number variable not the first number. Introduction to Scratch Programming (2 nd Edition) Page 8 of 13 ZigZag Education, 2013
Setting the Scripts on all the Number Buttons All the number buttons will have similar scripts. This script uses the IF ELSE function which is common in programming. Clicking the number sends the number to the first number variable UNLESS sequence has been set to 2 (by clicking an operator button), in which case it sends the number to the second number variable. Set the corresponding values for each of the buttons in the calculator, i.e. for button 1 enter a 1, for button 2 enter a 2, and so on. Setting the Script on the Equals Button Remember that the operator variable can be set to values from 0 to 4. The values 1, 2, 3 and 4 correspond as follows: 1 to add (+) 2 to subtract (-) 3 to multiply (*) 4 to divide (/) Introduction to Scratch Programming (2 nd Edition) Page 9 of 13 ZigZag Education, 2013
Setting the Script on the Operator Symbol Make sure that the operator symbol and the equals symbol are correctly located. You have made a calculator. Introduction to Scratch Programming (2 nd Edition) Page 10 of 13 ZigZag Education, 2013
Extension Activity 1 Entering Double Digit Numbers As it stands, the calculator can work with single digit numbers. This is a very limiting factor in the design of the calculator. The problem is that, if you type, say, a 7 into the keypad then you want to type another number, say, an 8, then the 7, which previously represented 7 units, now represents 7 tens. Changing the Script on the Zero Button 1. Adding a zero to any number is straightforward: 6 with an additional zero is 60, which is just 6 10. Change the script on the zero button as shown. First section: Sequence equals one and first number is greater than one this changes the first number to first number times 10. Otherwise the number pressed is the number added. Second section: Sequence equals two and second number is greater than one this changes the second number to second number times ten. Otherwise the number pressed is the number added. Using this script enables you to change 2 to 20 to 200 to 2000. There is no limit and the calculator will continue to work. Introduction to Scratch Programming (2 nd Edition) Page 11 of 13 ZigZag Education, 2013
Changing the Script on the Other Number Values Making the other buttons able to enter double digit numbers is slightly more complicated than with the zero. Look at the script below. This solution allows double digit numbers to be entered. It s up to you to design a solution for even bigger numbers. Sequence is set to 1 to make the number enter into the first number variable. If first number is greater than 0 and less than 10, then clicking the number sprite converts that number from units to tens and adds the new number. If first number is equal to zero, clicking the number sprite just enters that number. Now change the scripts on all the numbers to allow double digit entry. If the value stored in sequence isn t 1, then it will be 2 and the second part of the script will apply entering the number in the variable called second number (this is basically the same as the first section, but the data is entered into the second number variable, not the first). Introduction to Scratch Programming (2 nd Edition) Page 12 of 13 ZigZag Education, 2013
Extension Activity 2 Animating the Buttons It is easy to create an animation effect to animate the buttons. Working on the costume tab, click the copy button next to costume1 to create a new costume. 1. Click the Edit button next to costume2 and, in Paint Editor, slightly enlarge the button image (there is a button for this in the Paint Editor). 2. Switch back to the scripts tab and edit the script of that button as shown. 3. Repeat this process with all the buttons. Introduction to Scratch Programming (2 nd Edition) Page 13 of 13 ZigZag Education, 2013