1. Introduction to Arrays

2. definitions and things to consider… This presentation is designed to give a simple demonstration of array and object visualizations using Alice. –Keep in mind Array Definition –An array is a structure for collecting and organizing objects or information Elements – individual objects in the array Index Variable – contains the value of the location number of items in the array Size – The number of objects in the array visualization Arrays are not actually visible objects, Alice uses a visual representation to make it easier to see and understand how arrays works The screen shots are designed to be used as guidelines, please read all the text because it gives a full description of how to create the code.

3. Summary of the World that will be created This world will contain five animals, billboards, array visualization, object visualization, buttons, events, asking for user input, 3D text, and very simple for loop. Prior to an attempt to go through this tutorial you should understand what those are and how to use them (except for array visualization and object visualization). Also you should be able to position the camera fairly easily. Knowing how to do these features will reduce the chances of being frustrated with things not related to understanding how arrays work and how to operate on them. Specifically, the instructions provided within the world will ask the user to arrange the animals in order from tallest to shortest, but they can be arranged in any order. The goal is to demonstrate how to access and swap elements of an array according to user input.

4. Begin creating the world Download the starter world from the Duke Alice Workshop Website If you like you can try to build the starter world from scratch Use the starter world as a reference This is good practice for becoming a pro at building Alice worlds

5. Coding the world First, drag the camera tab from the object tree into the “world.my first method” page of the editor. –Options open up, choose “set point of view to” –Then choose “dummy objects” –Then choose “animals” This code makes the camera face the animals every time the world is opened.

6. You work should look like this

7. Create 2 new mouse events click the “create new event” button select “when mouse is clicked on something” Creating a mouse event (do this step twice)

8. It is time to create the necessary methods for the world Click the “world” tab in the object tree window, then click the “methods” tab in the “world’s details panel” Create 2 new methods Name the first one “Instruct” The second one “Swap” It should look like this: Type the names of the methods here

9. With the methods in place, it is time to code exactly what each event does In the event panel edit the first mouse event –click “anything”, (available objects options open up ) choose “button” –Complete the instruction by clicking “nothing”, (available methods will open up) choose “Instruct” –The completed instruction should read

10. edit the second mouse event –click “anything”, (available objects options open up ) choose “button2” –Complete the instruction by clicking “nothing”, (available methods will open up) choose “Swap” –The completed instruction should read When mouse is clicked on “button” do “world.Swap” The completed instruction should read There should be 3 events in place, it is time to code in the last event (The keyboard event) Now all the events have been coded. Whenever the world starts the camera will face the animals. Second, when “button” is clicked the method “Instruct” will run its code. Third, when “button2” is clicked the method “swap” will run its code.

11. Code the “Instruct” method First drag a “do together” control statement into the method editor window for the “Instruct” method. Next drag the camera into the “do together”, options will drop down –Choose “set point of view to”, then “dummy objects”, then “Instructions” –This will make the camera face the instructions billboard Second select “start_billi” in the objects tree, look down at the methods detail pane under the properties tab –Drag the “isShowing” property into the do together control statement –Select false –Now the billboard will not be showing when the instruct method is running its code

12. Now select “button” in the objects tree, look down at the methods detail pane under the properties tab –Drag the “isShowing” property into the do together control statement –Select false All your code should look like this This method does the following when it is called: Camera points at the instructions billboard The start billboard becomes invisible “button” becomes invisible These comments should go above a group of instructions, they should describe briefly what the instructions do

13. Code the “Swap” method Drag the “world.Swap” tab from the events window pane into the editor Then drag a “do in order” control statement into the editor window Next drag the camera into the editor outside of the “do in order”, –options will drop down –Choose “set point of view to”, then “dummy objects”, then “animals” –This will make the camera face the animals Your swap method should look like this

14. Next create the following variables within the method To create a variable click the variable button, then select the type (all of the variables we are using are type number) Name your variable the following: –usrDone –emptySpot –lastSpot –startPos –endPos –The numbers will refer to different positions of the array. –It is common for programmers to create loops that go through the array automatically. We will not do that here for the sake of simplicity Name the variable Click ok when your done Click here to create a new variable

15. Drag down the ‘emptySpot’ variable into the first “do in order” control statement. Set the value to 1 for now Click the world in the object tree and select the “functions” tab in the details panel Scroll down and drag the “ask the user for a number” to replace the value of empty spot Left click once on the ‘enter a statement’, replace that with this question –Which animal do you want to move? Now select ‘Object Visualization’ on the object tree –Select the methods tab in the details panel –Drag the “let ObjectVisualization = item” place it right under the previous instruction –Select “1” from the drop down menu for now The next slide has more screen shot of these steps Be sure to comment your code like I have done here. I will help you later when you are trying to understand what you have written. It will also help others who read your code understand what you are doing. With these variables in place we are ready to begin coding. We want to allow the user to reorganize the animals in the array visualization by choosing numbers that refer to positions. We will use a system in which the computer asks them a series of questions to do this.

16. Now we want to replace the “1” with a position on the array –Do this by clicking “Array Visualization” on the object tree, then select the “functions” tab on the properties panel –Now drag the statement “ the value at Array Visualization [ index ] ” and drop it on top of the “1” to complete the line –From the drop down menu select “expression” then select “emptySpot” –It should look like this when you are done

17. Next we will put code in place that will allow us to swap the animals according to user input –Place a comment that says “reorder the remaining animals” –Drag down the ‘startPos’ variable and drop it under that comment. Set the value to “1” for now –Click the “world” in the object tree and select the “functions” tab in the details panel –Scroll down and drag the “ask the user for a number” to replace the “1”. Left click once on the ‘enter a statement’, replace that with this question –“Pick another animal” Now drag the ‘endPos’ under the previous statement and repeat the steps from above –Edit the question by clicking the “enter a number” statement –Replace it with “pick a location for this animal”

18. Now select the “array visualization” tab on the object tree –Select the methods tab then drag the statement “let ArrayVisualizaton [index] = item” into the editor window and drop it under your last two lines of code –From the drop down list select “expressions” then “endPos” then “ArrayVisualization” for now, we are going to replace this with the next two steps –Now click the functions tab –Drag the statement “the value at ArrayVisualization [index]” to replace the “ArrayVisualization” statement –Drag the variable “startPos” and replace the word “index” –These two lines swap two positions on the array –The completed statement should look like this

19. Now would be a good time to test the code. Remember the entire program is not complete yet. Press the play button. You should be able to do the following: –Follow the on screen instructions and click the first button –See the instructions and click the second button –Move one animal off the array and on to the object visualization by choosing its number –Move one animal to another position. This done in 2 steps Picking the animals number Then picking a location for that animal More then 1 animal can be in one location If there are more then one animals in one spot, the last animal that was put in a location is the only one that can be accessed –If your program does not do this go back and look over the instructions and your code –If you cannot figure out why your code is not working right it may be better to start over from the beginning. You will only lose a little bit of time but you will save yourself a lot of unnecessary frustration.

20. With everything working right lets finish the rest of the code. –We want to place the first animal we removed back into the empty spot. –Remember to comment the code, use a comment like “move the last animal into the line up” –Drag the “last spot” variable and drop it under the comment you just wrote –Select “set value”, then select “1” for now –Click “world” on the object tree –Click the “functions” tab on the details panel and scroll down to “ask the user for a number” statement –Drag that statement to replace the “1” –Click the “enter a statement” and type “Where do you want to put the last animal?” –The completed line should look like this

21. Click on the “ArrayVisualization” tab on the object tree then click the “methods” tab Drag the statement “let Array Visualization [index] = item” under the last line of code From the drop down menu select “expressions”, then “LastSpot”, then “expressions” again then “ObjectVisualization.item” Now the last animal will be placed in the line up in the spot that the user specifies

22. Now all the animals are back in a position on the array. We want to check to see if the user is done or if they want to make another swap –To do this we will ask them to enter a “1” or a “0” –If they enter a “0” the camera will pan to a screen that says “Thanks for playing” –If they enter “1” we will do ask them the same series of questions that we asked them the first round a second time To do this, drag the variable “usrDone” then from the drop down menu select “1” for now Next, click the world tab on the object tree Select functions from the details pane and scroll down to “ask the user for a number” drag that statement to replace the “1” Click the “Enter a statement” replace that with “Press 0 if you are done or else press 1” The line should look like this

23. Now, Drag an “if/Else” statement and drop it outside the “do in order” control statement From the drop down menu select “true” for now Now drag the variable “usrDone” and drop it on top of the “true” to replace it –From that drop down menu select “UsrDone == 1” –Now Drag the entire “Do in order” control Statement and all the code that is within it onto a clip board at the top right corner of the Alice window. –The next slide has a screen shot of how to do this

24. Drag the Do In Order Control statement on to the clip board

25. The next step we want to do is create an infinite loop –Drag the control statement “loop” into the editor and drop into under your “do in order” controll statement –From the drop down menu select infinity –Next drag an “if/else” statement into the loop and drop it –From the drop down menu select “infinity”

26. Now drag an if statement into you infinite loop –Select “true” from the drop down menu for now we will replace this –Now drag the variable “usrDone” and drop it on top of the “true” that we just selected –From that drop down menu select “usrDone ==“ then select “1” –Your work should look like this

27. We will now handle the case where the user presses 1, this means they want to make more swaps so we need to ask them more questions –We will use the set of questions in the “do in order” control statement that we placed on the clipboard –To do this, drag the content of the clip board and drop it under the first line that reads “do nothing” in ur if statement –Your work should look like this

28. We have handled 1 case –If the user is not done they will press 1, then we will ask them a set of questions Now we need to handle the case of when they are done –When they are done we just want to pan the camera to the screen that says “Thanks for playing –To do this, Click and drag the camera tab on the object tree and replace the line under the “else” statement that says do nothing From the drop down menu select “camera set point of view to” then select “Dummy Objects” then “Last Scene”

29. The completed line looks like this The code is completed now Press Play and test what you have written If it works right you should be able to –Click the first button then pan to instructions –Click the second button and pan to the animals –Swap the animals by picking numbers