SCRATCH MODULE 3: NUMBER CONVERSIONS

SCRATCH MODULE 3: NUMBER CONVERSIONS INTRODUCTION The purpose of this module is to experiment with user interactions, error checking input, and number conversion algorithms in Scratch. We will be exploring these ideas while implementing a small number conversion program. Our program will allow the user to decide which type of conversion to perform and then perform as instructed. The user has the option to convert TO Decimal from another base (2 10) as well as convert FROM Decimal to another base (again 2 10). Each option requires certain information which will be asked for and obtained from the user. The user will be forced to re-enter any unacceptable information. Once the answer has been found, it will be conversationally displayed to the user and the program will end. It is assumed that students have successfully completed the Scratch Tutorial and Scratch Modules 1 and 2 prior to beginning this module. 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 Conversion algorithms: Converting FROM another base (2 10) to Decimal Converting TO another base (2 10) from Decimal User interaction: Obtain info: Ask and answer Join variables and strings to output info conversationally Page 1

Using strings: Error checking: Determine the length of a string Parse a string to obtain individual components Check a value against an acceptable range: Comparison operators: < / > / = Boolean operator: AND Repeat until acceptable value is provided Math operators: + - * / mod 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 3 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): For this project, Sprite1 (the cat) needs to take center stage as he is responsible for conversing with the user. Figure 1a holds the script for Sprite1. Execute it to see the cat shrink, move to center stage, and say his lines. Sprite2 (title): We need to create a title for our project. Select the first option to Paint new sprite. Select Figure 1a the Text tool in the Paint Editor screen and type in a title such as Conversion Program. 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 1b Page 2

Sprite3 (button): We will give the user buttons to push so they can indicate which conversion method to perform. Once again, select the first option to Paint new sprite. Using the Text tool, type From Decimal. Then click on the Rectangle tool and draw a rectangle over From Decimal. Click on the Fill tool and use the eyedropper to select a color from the palette (like green) 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. The script to position Sprite3 is shown in Figure 1c. The button should appear below the cat towards the left hand side of the stage. If it doesn t, you may need to adjust the coordinates appropriately. Figure 1c Figure 1d is the next script to include. Whenever Sprite3 is clicked, we need to begin the proper conversion process. Figure 1d Sprite4 (button): The second button will be similar in size and appearance to the first. We will duplicate Sprite3 to create Sprite4. Right click on Sprite3 in the Sprite List and select duplicate as shown in Figure 1e. Click first on Sprite4 and then click on the Figure 1e Costumes tab for Sprite4. Edit the costume so it reads To Decimal (perhaps with a red background). When finished, click OK. Click back on the Scripts tab for Sprite4. Modify the script from Figure 1c here so that the x coordinate is 125 instead. Now the button should appear across from the first button below the cat. Make adjustments if needed. Still in Sprite4 s Scripts area, modify the script from Figure 1d to broadcast a new message that reads To Decimal instead. We need to specify the opposite conversion process when this button is clicked. Sprite1 (the cat): Select Sprite1 (the cat) from the Sprite List. It is his responsibility to respond when the broadcast messages are sent. Start the final two scripts as shown in Figure 1f. We will continue with them in the upcoming sections. Figure 1f Page 3

PART 2: REVIEWING CONVERSION FROM DECIMAL Before we can create the scripts to perform the conversions, we need to have a clear understanding as to how the process works. Let s review one approach BASIC ALGORITHM TO CONVERT FROM DECIMAL TO ANOTHER BASE Step 1: Set the quotient to the original number Step 2: Repeat (a) (c) until (the quotient is zero) (a) divide the quotient by the desired base (b) record the remainder (c) update the result with the remainder Step 3: Display the result CONVERSION FROM DECIMAL EXAMPLE: Convert 52 10 to Binary Quotient Remainder Result 52 52 2 = 26 0 0 26 2 = 13 0 00 13 2 = 6 1 100 6 2 = 3 0 0100 3 2 = 1 1 10100 1 2 = 0 1 110100 2 PART 3: IMPLEMENTING CONVERSION FROM DECIMAL CREATING THE VARIABLES To perform this conversion, we need to keep track of five items: the original number in Decimal, the base to convert to, the quotient, the remainder, and the final result. Four of these items need to become variables in our program original: Select Sprite1 from the Sprite List to make Sprite1 the active sprite. From the Block Descriptions, select. Choose and fill in the information as shown in Figure 3a. Click on OK when ready. We don t want to see the variable on the stage so click and remove the check mark and hide it from view. Figure 3a Page 4

base, quotient, remainder: Repeat the process described above three times to create variables for base, quotient, and remainder. Remove ALL of them from the stage. CREATING A LIST The final result is more complicated. It represents a combination of one or more values strung together. Since we don t know how many components it will have, it is a good idea to use a list. result: From the category, choose and name your list result. Click on OK when ready. Be sure to remove it from the stage too. ASKING FOR INFORMATION To perform this conversion, we need to ask the user for the original Decimal number that needs to be converted and the base desired. We can interact with the user in a conversational fashion using the block together with the corresponding. Both are found in the category. Remember, anything pertaining to a variable will be found in the category. Ask for the Decimal number: Expand the script we started previously in Figure 1f for Sprite1 into that of Figure 3b. When you are ready, you can execute it. Figure 3b Figure 3c illustrates what happens next. It is then the user s responsibility to enter a value and click to continue. We will assume that the user is going to enter a whole number. Ask for the base: Add Figure 3d to the script from Figure 3b. This will obtain a base. The only problem is that the base cannot exceed 10; otherwise, we need to add code to represent A, B, C, D, and so on which is more involved. Figure 3d Figure 3c Page 5

Error checking the base: Instead, we will force the user to enter a value between 2 and 10. To accomplish this, we also need from the category and,, from the category. Change the script from Figure 3d using these pieces to create the script in Figure 3e. Repeatedly ask the user to enter a new base until we get an answer that is both greater than 1 AND less than 11 at the same time (thus between 2 and 10). Figure 3e Pause for effect: To make the cat seem less robotic, let s make him pause for effect. Add the script from Figure 3f to the bottom of the script in Figure 3e. PERFORMING THE CONVERSION Figure 3f To perform the actual conversion requires multiple mathematical operations namely (provides the remainder of the division of the two numbers), (provides the result of the division), and from the category to the value of various. We can values into the list to keep track of the final. We also need a from the category since we have to repeat the process until the. Add the script in Figure 3g to the bottom of the script from Figure 3f to perform the conversion. Note that when setting the quotient, we perform first and then use this as the top part of the division calculation to get a whole number result. For Figure 3g example, produces 6.5 not just 6. However, the remainder of is 1 so if we take (13 1) / 2 instead, we would get 6 which is what we want. And we insert the remainder at the front of the result list as instructed in the algorithm. We re almost done now Page 6

DISPLAYING THE RESULT Clear communication is always important. So, instead of just using to output the result, we can use from the category to combine two different pieces of information. And, we can build a larger response by nesting multiple statements inside each other. In this way, we can combine variables, lists, and text to make a very informative statement. Joining the pieces: Extend the script from Figure 3g by adding Figure 3h to the bottom of it. To create this, you will need four separate blocks. Place them one by one inside of each other. Type the text (including the spaces) and add in the variables and list where appropriate. Once you have this done, you can test it out. Try various numbers and confirm the algorithm does indeed work. Figure 3h Fixing the bug: If you test the program when zero is the number to convert, you ll find a bug in the program. If the original number is zero, the repeat loop is never executed and the result is never set. To fix this, add in the code from Figure 3i immediately BEFORE the code for Figure 3h and test it again. Now it should work correctly. Figure 3i This part of the conversion process is now complete. Figure 3j shows the completed script. You can double check your work to ensure you have followed all of the steps correctly. Page 7

Great job! Now, on to the next phase Figure 3j PART 4: REVIEWING CONVERSION TO DECIMAL Converting TO Decimal uses a different approach. Let s review BASIC ALGORITHM TO CONVERT TO DECIMAL FROM ANOTHER BASE Step 1: Set the answer to 0 Step 2: Set the weight to 1 Step 4: Set i to the length of (amount of digits in) the original number Step 5: Repeat (a) (c) until (i is equal to zero) (a) Increase the answer by (the digit in the i th position of the original number multiplied by the weight) (b) Multiply the weight by the base (c) Decrease i by 1 Step 3: Display the answer Page 8

CONVERSION TO DECIMAL EXAMPLE: Convert 110100 2 to Decimal Original # (in base 2): 1 1 0 1 0 0 Digit position: 1 2 3 4 5 6 Original Base Answer Weight i 0 1 6 110100 2 0 + (0 * 1) = 0 2 5 0 + (0 * 2) = 0 4 4 0 + (1 * 4) = 4 8 3 4 + (0 * 8) = 4 16 2 4 + (1 * 16) = 20 32 1 20 + (1 * 32) = 52 64 0 PART 5: IMPLEMENTING CONVERSION TO DECIMAL CREATING THE VARIABLES To perform this conversion, we need to keep track of five items: the original number in the base indicated, the answer in Decimal, the weight, and the position indicator i. We already have original and base from the previous conversion and we can reuse them here. The other three items need to become variables in our program answer: Select Sprite1 from the Sprite List to make Sprite1 the active sprite. From the Block Descriptions, select. Choose and fill in the information as shown in Figure 5a. Click on OK when ready. We don t want to see the variable on the stage so click to remove the check mark and hide it from view. weight, i: Repeat the process described above two more times to create variables for weight and i. Don t forget to remove both of them from the stage. ASKING FOR INFORMATION Figure 5a The information required from the user consists of the original number that needs to be converted and the base that it is currently in. The user interaction is very similar to what was done in the other conversion so we will take advantage of that to create the next script. Page 9

Right click on the script created in Figure 3j and duplicate it. Then, isolate the portion shown in Figure 5b and append it to the block. We only need to make slight changes in the text questions for it to work with this type of conversion instead. Figure 5b Ask for the number: Modify the first ask block in Figure 5b so it says What number should I convert? instead of What Decimal number should I convert?. Ask for the base: Modify the second ask block in Figure 5b so it says What base is the value in? instead of What base should I convert to?. The error checking that we set up previously is still applicable so we will keep it as is. Pause for effect: We ll keep the same pause that we have already set up. You can change the think text if you want. PERFORMING THE CONVERSION To perform the actual conversion requires the usage of and from the category as well as the block (which can be used to indicate the number of letters in a word or, in our case, the amount of digits the is comprised of) and the in a word or, in our case, to access individual digits from the number block (which can be used to return any letter number based on position). We will use these operators to and the value of various. We still need a from the category since we have to repeat the process until. Build the script in Figure 5c onto the (modified) script from Figure 5b to perform the conversion. Note that we perform first and then use that total with to perform. In this way, becomes a running total that increases with each new incremental conversion. Page 10

A little more to do DISPLAYING THE RESULT Figure 5c Joining the pieces: We have to display the answer conversationally in a manner similar to that of Figure 3h. We need to place 5 different blocks inside one another to create Figure 5d. Be sure to type the text (including the spaces) and add in the variables where appropriate. Once you have this done, you should test it out. Try various numbers and see what happens Figure 5d The conversion process is now finished. Figure 5e shows the completed script. You can double check your work to ensure you have followed all of the steps correctly. Page 11

Excellent job! Now it s time for the hard work PART 6: CHALLENGE WORK To get full marks for this assignment, you need to upgrade this conversion program into something more interesting. 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 to Blackboard. Have fun! IDEAS FOR IMPROVEMENT Figure 5e 1. Best guess: After obtaining the values needed, ask the user to guess what the answer would be after the To Decimal conversion is performed. Then, after displaying the result, indicate to the user how his guess compared (either too high, too low, or correct). 2. Stop everything: Add in a Stop button that will send a message to the cat asking him to correctly report how many conversions were done From Decimal or how many were done To Decimal (or both) and then stop everything. Page 12

3. Taking shape: Add a new sprite who will draw (with the pen tool) either a circle, square, or triangle around the cat. You can try playing with pen colors, pen size, and pen shade. You can either hide or show the sprite your choice. Don t forget to clear everything when the green flag is clicked. Be creative! References 1. Scratch v1.4: http://scratch.mit.edu/ Page 13