Distributing (Fun + Learning): The Distributive Property

1

Distributing (Fun + Learning):The Distributive Property

By: Peggy LiUnder the direction of

Professor Susan RodgerDuke University, June 2011

2

Overview• This tutorial will help you make an Alice world

that lets you practice the distributive property.• An expression in the form a(bx+c) will appear,

where a, b, and c are nonzero integers. • A possible answer for the expanded form will

also show up. The user clicks Y if he/she thinks it is right, and N if he/she thinks it is wrong.

• Concept can be further developed to practice more advanced concepts like adding algebraic expressions or using fractions.

3

1. Open Alice and create a new world.2. Select a template of your choice. (This tutorial

uses Grass, but any other works too.)3. Click Open to start building your world. 4. Remember to save your world somewhere you

can find it later!

Creating a new world

4

1. Click the green Add Objects button.2. In the Local Gallery, scroll to the right until you

reach the People folder. Click on the folder.3. Scroll to the right until the very end.4. You can use hebuilder and shebuilder to create

your own character.

Adding a person

5

Just a quick explanation!

• You might have noticed there are lots of other cool people to choose from in the People folder!

• We’re going to use the Character Builder because it comes with some built-in methods that will be helpful later on.

• Once you’re comfortable working in Alice, you can use an existing character and create new methods for it.

Why hebuilder/shebuilder

6

1. Customize your person! You can choose:• Body: head, torso, and legs• Face: skin tone, eyes, and lips• Hair: length/style and color• Clothing: shirt, pants, and shoes

2. Give your character a name and enter your name in the Created By box. Now click OK!

Note: The person in this tutorial is named Guide. This will come up in future slides.

Customizing your person

7

1. Your person’s arms will be spread out like in the picture. Let’s move them back down to his/her side.

2. Find the Object Tree on the left.3. Click the + next to your person’s

name, then click the + next to upperBody and Chest.

4. You should now see parts called rightUpperArm and leftUpperArm.

Rotating the arms

8

1. Right-click on rightUpperArm in the Object Tree. 2. Now go to Methods, select roll, and right. Click

on Other and type in 0.2. 3. Do the same for leftUpperArm, but this time roll

it to the left, again by 0.2.4. Your person’s arms should look like this:

Rotating the arms

9

1. Click on Add Objects again and return to the Local Gallery.

2. Scroll all the way to the right until you reach Create 3D Text, and click that.

3. Enter “a(bx+c)= ” for the text. 4. If you want, you can change the font.

The tutorial will use Arial bold. 5. Make another 3D Text that says “abx+ac”.

Adding 3D text objects

10

1. In the Object Tree, right-click on the first 3D Text you made and rename it “expression”.

2. Rename the second one “answer”. 3. Right-click on expression in the Object Tree.

Go to Methods >> turn to face >> camera. 4. Repeat Step 3 for answer. 5. Both objects should now be facing you.

Renaming and turning 3D text

11

1. Locate the object control buttons. Use them as needed to move and resize the objects until they look roughly like this:

Repositioning objects

12

1. We can change the color of the expression and answer text objects.

2. To do this, click expression in the Object Tree and go to the Properties tab.

3. Click the arrow next to color and choose any color. This tutorial will use blue.

4. Do the same for answer. The tutorial will use magenta.

Changing 3D text color

13

1. Now let’s make two answer buttons: one Y (yes/correct) and one N (no/wrong).

2. Go to Local Gallery >> Shapes folder and add two squares to your world.

3. Rename them yesButton and noButton. 4. Turn both squares to face the camera by right-

clicking and going to methods >> turn to face >> camera.

5. In their Properties tabs, change the yesButton color to green and the noButton color to red.

Making answer buttons

14

1. Now create two new 3D text objects, one that says “Y” and the other that says “N”. You can choose a font; the tutorial uses Arial, bold.

2. Rename them Yes and No and them to face the camera.

3. Move and resize them so that each is directly in front of the corresponding square.

4. Under Properties, set the vehicle of Yes to yesButton and No to noButton. This “glues” the letter to the square.

Making answer buttons

15

1. Move the answer buttons forward and/or down (resize if needed) so they look like this:

Positioning answer buttons

16

1. Let’s make a new method that will give us a random expression in the form a(bx+c).

2. Click on world in the Object Tree, go to the methods tab, and click create new method with the name getExpressions.

3. Click create new variable and make a new variable with name a and type number. Set its value to 0 (select other and type in 0).

4. Make two identical variables called b and c.

Getting a random expression

17

1. Now we’ll set random values for a, b, and c.2. Drag a while into the method and select true.3. From the variables list, drag a over true,

select a ==, and set b to 0.

Setting random numbers

18

1. Drag another a, this time into the while loop. Select set value, and choose any number (we will change this in a moment).

2. Go back to world in the object tree. Under the functions tab, find the random number (under the third section Random).

3. Drag random number into the method, over the value you set a equal to.

Setting random numbers

19

1. Click the more right next to random number and set the minimum to -10.

2. Repeat Step 1 to set the maximum to 11 and integerOnly to true.

3. When we get a random number, it can include the minimum, but goes up to not including the maximum. Here we want numbers from -10 to 10, so maximum = 11.

4. We want integerOnly so the numbers are easy to work with – not long decimals!

Setting random integers

20

1. Click the more arrow at the end of the line and set duration to 0 seconds.

2. Drag the entire while loop to the clipboard in the upper right, to “copy” the contents.

3. Drag the clipboard back into the method, under the while loop, to “paste” the contents.

4. Repeat Step 3. You should have a total of three while loops in the method right now.


21

1. In the second while, change both instances of a to b. Then, in the third while, change both instances of a to c.

2. The while statements ensure that a, b, and c are all nonzero so we don’t get anything too easy like 0(0x+2). Remember that a, b, and care were all first set to 0, so the while loop makes sure a new number is generated until the variable is no longer equal to 0.


22

1. Now create two new number variables and name them ab and ac. Set both values to 0.

2. Drag ab into the method (below third while), and select set value >> expression >> a.

3. Click the arrow by a and choose math >> a* >> expression >> b. This just means a x b.

4. Repeat Steps 2-3 for ac, but remember to choose c instead of b.

5. Set the duration for both ab and ac to 0.


23

1. Go to world’s functions tab, and scroll down until you find absolute value of a in Math.

2. Drag absolute value into the method, over the entire a*b (not just a). Repeat for a*c.

3. This means that ab and ac are both positive. We do this for formatting reasons, as we will see shortly.


24

1. Create five new variables, all type String and set to default value. Name them aString, bString, cString, abString, and acString.

2. Drag aString into the method and set its value to default string for now.

3. Under world’s functions, find and drag the what as a string over default string. Choose expressions >> a.

4. Repeat steps 2-3 for the other four variables. Make sure you use the matching number!

5. Set the duration for each line to 0.


25

1. Scroll to the bottom of world’s functions and find int a as a string. Drag this over a, b, c, ab, and ac in the five lines and reselect the right variable name in expression.

2. What this does is remove the decimal format that otherwise comes with making an integer a string, using just what as a string. In other words, when 4 becomes a string, it is now just 4 instead of 4.0.

3. You do need to keep what as a string in addition to int a as a string.

Casting integers to strings

26

Setting integers as strings

This is how the last five lines should look now. Make any changes or corrections if needed.

27

1. Create two new variables called expression and rightAnswer, both of type string and with value default string.

2. Drag an if/else into the method and select true. 3. Drag the variable c over true and choose c < ,

then go to other and type in 0. 4. Now drag expression into the Do Nothing under

the if and click set value >> default string. 5. Set the duration to 0.

Formatting the expression

28

1. This slide and the next will be a little tricky, so take it slowly and carefully.

2. Drag an aString over the default string. 3. From world’s functions, drag a joined with b

over aString and type in ( over default string.4. Now drag in another a joined with b, this time

over just the left parenthesis (. 5. Select expressions >> bString.


29

1. Drag another a joined with b over bString. Go to other again, this time typing in x.

2. Drag an a joined with b over x and select expressions >> cString.

3. Now drag one last a joined with b over cString, go to other, and type in ).

4. Drag the entire expression set value to line to the clipboard, then drag the clipboard into the Do Nothing under Else.

5. Change the x to x+.


30

This is how your if/else block should look now:

Close-up view between set value to and duration:


31

What just happened?? Let’s take a look.• Remember earlier we used absolute value. The

absolute value of any number is positive (or zero, but also remember we aren’t using 0).

• Our expression is in the form a(bx+c), where a, b, and c are integers from -10 to 10.

• We set integers a, b, and c to strings: aString, bString, and cString.

• Using lots of joined with statements, we made a string for the expression a(bx+c) with the numbers substituted in.


32

Why the c < 0 and changing x to x+ though?• This is just for aesthetic reasons (how it looks).• Let’s say we have x-2. We want it to show up as

x-2, not x+-2. In this case, c = -2. • So we made the if/else. If the last number is < 0

(has a negative sign), we won’t add a plus between x and the number, or it’d say x+-2.

• But else (if c is positive), we want a plus sign after x. Otherwise, it’d just say x2!


33

Setting up the answers1. Let’s make an array of four possible answers.2. Create a new variable and call it answers. Make

it an array of type string. Add four items with the following values:

• Item 0: abx+ac• Item 1: abx-ac• Item 2: -abx+ac• Item 3: -abx-ac

34

Setting up the answers

The current item values are just guidelines to remind us what the format of each item will be. In a moment, we’ll change them to answers with answer numbers, not just the letters a, b, and c.

To get wrong answers, we change the sign (+ to - ) since that’s a common mistake. Later, you can change them to different wrong answers or add more wrong answers if you want.

35

Setting up the answers1. First drag answers to the bottom of the method. 2. Select set item <index> to <item> in world.

getExpressions.answers.3. Choose 0, then default string. 4. Go back to world’s functions and drag a joined

with b over default string.5. Select expressions >> abString >> other >> x+. 6. Drag another a joined with b over x+ and go to

expressions >> acString.

36

Setting up the answers

1. Drag the set <index> to <item> line to the clipboard and drag the clipboard back three times, so you have four duplicate lines.

2. In the second line, change the index from 0 to 1 and change x+ to x-.

3. In the third line, change the index from 0 to 2. Drag a joined with b over abString and select expressions >> abString. Change the first abString to a – sign.

37

Setting up the answers1. In the fourth line, change the index from 0 to 3

and the x+ to x-. Repeat Step 3 of the previous slide to add in a negative sign ( – ).

2. Set the duration of each of the four lines to 0.

38

Setting up the answers1. We have just created an array with four strings,

each representing a different possible answer. 2. Now, we’re going to set rightAnswer equal to

the item in the array that is the correct answer, when the distributive property is used to write out the expression.

3. Remember that earlier, we got the absolute value of a*b and a*c. Absolute value is always positive, but a*b and a*c can be either positive or negative.

39

Setting up the answers1. We start with a(bx+c) and expand it to (ab)x+ac.

For example, 2(3x-1) = (2*3)x+2*(-1) = 6x-2. 2. ab and ac can be positive or negative, but |ab|

and |ac| are both positive (where | | means absolute value). In the example above, ab = 6 is positive and ac = -2 is negative, but 6 and 2 are both positive.

3. Our answers array already contains all the possible combinations, so now we just assign rightAnswer to the right item in the array.

40

Assigning the right answer1. Drag an if/else into the method and select true.2. Drag a over true and choose a > . Go to other

and type in 0. 3. Now click the arrow next to a and select math

>> a* >> expressions >> b.4. Drag another if/else into the Do Nothing area

right below the If. Select true. 5. Repeat steps 2 and 3 to change the true to say

a*c > 0 (remember to choose c, not b).

41

Assigning the right answerNote: ab refers to |a*b|, and ac refers to |a*c|.The reason we use a*b and a*c instead of the variables ab and ac is because ab and ac are always positive. We want to see if the value of a*b or a*c is positive or negative. So far, you should have:

Four answer scenariosNote: We use ab to refer to |a*b|.

Scenario 1: a*b > 0 and a* c > 0 + ab and + ac + ab, + ac abx+ac index 0 in array

Scenario 2: a*b > 0 and a* c < 0 + ab and – ac + ab, –ac abx-ac index 1 in array

Scenario 3: a*b < 0 and a* c > 0 – ab and + ac –ab, + ac -abx+ac index 2 in array

Scenario 4: a*b < 0 and a* c < 0 – ab and – ac –ab, –ac –abx–ac index 3 in array

42

43

Assigning the right answerFirst, let’s see what the two possibilities are when a*b > 0 is true:

Inside the outer if statement a*b > 0:Inside the inner if statement a*c > 0:

Scenario 1Inside the inner else statement, so a*c < 0:

Scenario 2

Now let’s apply this to our code!

44

Assigning the right answer1. Drag the variable rightAnswer into the first Do

Nothing below if a*c > 0. Select default string for now.

2. Drag the answers array on top of default string, select ith item from array and then 0.

3. Set the duration to 0. 4. Set the rightAnswer equal to the ith item from

array >> 1 in the inner else statement. You can use the same method or use the clipboard, then change the 0 to 1.

45

Assigning the right answer1. Drag the entire if/else block underneath the

outer if a*b > 0 statement to the clipboard.2. Now drag the clipboard below the outer else

block to make a copy. 3. Change the item 0 to item 2 and item 1 to item

3 from the array. 4. This is because now a*b < 0, so if a*c > 0, we

have Scenario 3. But when a*c < 0 also, we use Scenario 4. See next slide for more information.

46

Assigning the right answerLet’s see what the two possibilities are when a*b < 0 is true:

Inside the outer else statement a*b < 0:Inside the inner if statement a*c > 0:

Scenario 3Inside the inner else statement, so a*c < 0:

Scenario 4

Refer back 4 slides to see the 4 possible scenarios.

47

Assigning the right answerYour nested if/else statements should look like this:

48

1. Congratulations! We are now done setting up the answers array and rightAnswer.

2. We need to choose a random item from answers to display. Our options include:• Shuffling the array, and always using the

first item in the randomized order• Choosing a random number i and then

getting the ith item in the array – this can be done with or without shuffling

Getting a random answer

49

1. The problem with both ways is that with four answers and only one right one, there’s only a 25% chance the right one comes up! This makes it easier for someone to “cheat” by guessing NO most of the time.

2. We’ll fix this problem by making it so that the right answer comes up 50% of the time, and a random wrong answer the other 50%.


50

1. Go to world’s functions tab and create a new function called getAnswer. Choose string.

2. Create two new parameters. One will be a string called rightAnswer. The other is an array of strings called answerArray.

3. Now create a new variable of type number and with name random. Create another variable of type string called answer.


51

1. Drag random into the function, select set value, and click any number for now.

2. Go back to world’s functions tab, find random number, and drag it over the number you set random equal to.

3. Use the arrow next to random number to set the minimum to 0 and the maximum to 1. Make sure integerOnly is set on False.


52

1. Drag answer into the function and set value to expressions >> world.getAnswer.rightAnswer.

2. Drag an if/else below that and select true. 3. Drag random over true and select random ≥

then click 0.5. 4. Drag a while loop into the Do Nothing below If

random ≥ 0.5 and select true. 5. Drag answer onto the true; go to answer == >>

expressions >> rightAnswer.


53

1. Drag answer into the While loop and select set value, then choose default string for now.

2. Drag answerArray over default string, and select ith item from array. Choose 0 for now.

3. From world’s functions, drag random number over 0. Set minimum to 0, maximum to 4, and integerOnly to true.

4. Drag answer over default string after Return.5. The function will now return a wrong answer

about 50% of the time.


54

Getting a random answerHow your code for getAnswers should look right now:

55

1. Create a new world method called play with three string parameters: expression, answer, and rightAnswer.

2. Click on the expression 3D text in your object tree and go to Properties. Drag text into the method and set to expressions >> expression. Set duration to 0.

3. Repeat Step 2 for the answer text object and the string parameter answer.

Creating the play method

56

1. Drag a Do Together loop into the method.2. Click on expression in the object tree again and

go back to Properties. Drag isShowing into the Do Together and set to True. Set duration to 0.

3. Repeat step 2 for answer. 4. Now create a variable in the play method called

correct, and set it equal to false.


57

1. Return to world’s Properties tab and make a variable there, of type boolean and name hasAnswered. Set it to false.

2. Make another world variable of type string, name playerAnswer, and value “N”.

3. Drag an if/else statement into play. Select true. 4. Drag playerAnswer from world’s Properties over

the true and select playerAnswer== >> expressions >> rightAnswer.


58

1. Drag correct into the first Do Nothing under If and set it to true. Set duration to 0.

2. Drag correct into the second Do Nothing under Else and select false. Set duration to 0.

3. Now drag in a While and select true. 4. Drag hasAnswered from world’s properties over

true. Click on it and go to logic >> hasAnswered == > expressions >> false.

5. We won’t add anything to the Do Nothing. This means that until the player answers, nothing will happen.


59

1. Drag correct into the first Do Nothing under If and set it to true. Set duration to 0.

2. Drag correct into the second Do Nothing under Else and select false. Set duration to 0.

3. Now drag in a While and select true. 4. Drag hasAnswered from world’s properties over

true. Click on it and go to logic >> hasAnswered == > expressions >> false.

5. We won’t add anything to the Do Nothing. This means that until the player answers, nothing will happen.


60

1. Drag another If/Else into the method. Select true.

2. Drag playerAnswer over true and go to playerAnswer==. Select other and type in Y.

3. Now drag an If/Else into the Do Nothing under If. Select true, then drag correct over it.

4. Repeat Step 3 to make an If/Else under the outer Else.


61

Note: ✓means the player either said YES to a right answer or NO to a wrong answer, aka “correctly identified” the answer that appears.

Four possible scenarios (again!)playerAnswer

= YplayerAnswer

= N

correct = true ✓

CASE 1X

CASE 3

correct = false X

CASE 2✓

CASE 4

CASE 1

CASE 2

CASE 3

CASE 4

62

Scenario 1: playerAnswer=Y and correct=true1. Click on guide (or whatever you named your

character) in the object tree and go to methods.2. Drag guide.happy under the inner If.3. Use + in the object tree to get to guide >>

UpperBody >> chest. Go to methods and drag say into the method.

4. Click other and type “Congratulations! You have correctly identified a right answer.” Set duration to 4 seconds.

Scenario 1

63

Scenario 2: playerAnswer=Y and correct=false1. Drag guide.confused into the inner Else.2. Drag in another guide.upperBody.chest.say and

type in “Sorry, that was not the right answer. The right answer is: ”

3. From world’s functions, drag a joined with b over that string. Click on expressions and select rightAnswer. Set duration to 4 seconds.

4. Drag Wait below the say and select 2 seconds.

Scenario 2

64

Scenario 3

Scenario 3: playerAnswer=N and correct=true1. Drag guide.confused under the If under the

outer Else. 2. Drag in guide.UpperBody.chest.say and type in

“I’m sorry, but that was the right answer. Better luck next time!”

3. Set duration to 4 seconds. 4. Drag Wait below the say and select 2 seconds.

65

Scenario 1: playerAnswer=N and correct=false1. Drag guide.happy under both Else’s.2. Drag in guide.UpperBody.chest.say and type in

“Congratulations, you correctly identified a wrong answer! The right answer is: ”

3. Use a joined with b to join the above string with expressions >> rightAnswer.

4. Set duration to 4 seconds.

Scenario 4

66

Scenarios checkpoint

67

1. Drag hasAnswered from world’s properties into the bottom of the method and select false.

2. Click expression in the object tree, go to properties, drag isShowing below hasAnswered, and select false.

3. Repeat step 2 for answer (drag below expression).4. Set duration of all three lines to 0.

Wrapping up the play method

68

1. Click create new event near the top of the screen; select When the mouse is clicked on something.

2. From object tree, drag yesButton over anything. 3. Drag a Do Together over the Nothing.4. From world’s properties, drag hasAnswered into

Do Together and select true.5. Drag playerAnswer beneath, and set value to “Y”.

Making new events

69

1. Use clipboard to copy the event you just made, and make three copies.

2. Change yesButton to Yes, noButton, and No.3. For noButton and No, set playerAnswer to “N”.

Making new events

70

We’re almost done! Let’s connect the methods.1. Go to the world.getExpressions method.2. Drag in the play method. Choose expressions

>> expression >> expressions >> default string >> expressions >> rightAnswer

3. Drag the getAnswer function over default string, and drag variables rightAnswer and answers over rightAnswer and answerArray.

Connecting the methods

71

1. If you haven’t already done so, download the instructions.png file from the website. Save it where you can easily find it again.

2. Go to File >> Make Billboard and import the instructions.png file.

3. Click add objects and rotate, resize, and reposition the billboard. It should be in front of the Yes/No buttons and cover most or all of the screen.

Setting up instructions

72

1. Create a new event, when a key is typed. 2. Change any key to space on the dropdown.3. From world’s methods, drag world.my first

method over Nothing. 4. Click on instructions in the object tree, go to

properties, and drag isShowing onto world.my first method after When the world starts, do. Select true and set duration to 0.

Setting up instructions

73

1. Go to world.my first method and drag in instruction’s isShowing. Set to false, duration 0.

2. Drag in a loop, then choose the number of problems you want. The tutorial uses 10.

3. Drag world.getExpressions into the loop’s Do Nothing.

4. In the object tree, select expression and answer and set their isShowing to false.

Final steps

74

Reaching THE END

Distributing (Fun + Learning): The Distributive Property

Documents

Transcript of Distributing (Fun + Learning): The Distributive Property