Lab 7 - HackMD

# Lab 7 SRC Activity: Manipulative Design In this lab, you will investigate how different elements of social media platforms and websites influence user interactions. ### Step 1: In a group of 3, choose an app or website that one of you uses (at least somewhat) frequently. * Some suggestions if you are struggling to choose: * Social media apps: Instagram, Snapchat, Facebook, TikTok, LinkedIn, etc. * Online shopping websites * Phone games (think about ones that might be more addictive than others) * A news site you subscribe to - how easy is it to sign up for vs cancel a subscription? * Any app you use for free - what sorts of ads do they show you? ### Step 2: Find 3-5 ways that your chosen app/website uses deceptive or addictive design. * Keep track of your findings to share with the group (write them down!!!) * Refer to these resources for types of deceptive and addictive design * Addictive Design * [How to Create a Social Media App with Addictive Design Features | HackerNoon](https://hackernoon.com/how-to-create-a-social-media-app-with-addictive-design-features) * [The secret design tools which Social Media apps are using to create addiction | Medium](https://medium.com/swlh/the-secret-design-tools-which-social-media-apps-are-using-to-create-addiction-e6a502ccb79f) * Deceptive Patterns * [Types of Deceptive Patterns](https://www.deceptive.design/types) * [Deceptive Patterns in UX: How to Recognize and Avoid Them](https://www.nngroup.com/articles/deceptive-patterns/) ### Step 3: Come back together for a group discussion. * You will share… * What app or website did you choose? * What addictive or deceptive features did you find? * How might these features be harmful? * Each member of your group must share something!! # Lab 7: Loops, Arrays, and ArrayLists In this lab, you will be learning about and working with arrays and ArrayLists, two extremely convenient ways of storing data in Java. In order to complete this lab, you will need to do some debugging along the way! The reading, debugging guide, testing guide and lectures on this material will be really helpful. If you are at all confused about the content of those materials, review them before beginning. ## Goals: 1. Create a window to practice iterating through arrays and ArrayLists. 2. Visualize the difference between *graphical* positioning of arrays and *logical* positioning. ![Screenshot 2024-09-02 at 12.49.00 PM](https://hackmd.io/_uploads/r1KlCvQ30.png) A group of aliens from the fire nation have banded together. Today, they woke to find that one of them had been murdered!! In this lab, you will help figure out who the murderer is by lining up all the aliens and highlighting all the evil ones as potential suspects. <img style="display: block; margin: auto;" width="400" src="https://hackmd.io/_uploads/HJydk_m2C.png"></img> # Part 1: Generating 1D Arrays and Visualize them with JavaFX ## Getting Started Click [here](https://classroom.github.com/a/T2puo3mQ) to get the stencil from GitHub - refer to the [CS15 GitHub Guide](https://docs.google.com/document/d/1tSxfUIn-Ro6Pr1X4y21BbYKdsiK-nlWW3pGDfyh7SQ8/edit?usp=sharing) for help with GitHub and GitHub Classroom. Once you have the URL of your personal GitHub repository, open the IntelliJ terminal. Move into the **`src/`** folder, then use the command **`git clone <URL>`**. Once you’ve cloned your personal repository from GitHub, you’ll need to rename the folder from **`lab7-<yourGitHubLogin>`** to just **`lab7`**. To do this, right click on the folder, then go to *Refactor, Rename*. You will have issues running your code until you make the change. ## Step 1: Generating Aliens To start, let’s see what is already created! If you run **`App.java`**, you should have a window that pops up. There are 4 buttons at the bottom of the window, Generate, In Line, Alternating Colors, and Remove Blue. We are going to start with generating the Aliens. To generate the **`Aliens`**, we are going to be working in the **`AlienArrayCreator`** class. At the top of the file you can see that we are declaring an array of type **`Alien`**. In the constructor, we need to initialize the array. We are going to want to have 10 Aliens on the screen. How should we initialize the array so that 10 aliens show up? Next, let’s head to the **`generateAlien`** method. We are going to want to loop through the array. Because we have a fixed size in the array, what kind of loop should we use? (scroll down for the answer) For loops to the rescue! Although a while would work perfectly fine, a for loop would probably make the most sense for the situation. Remember the syntax for a for loop is: ``` for (int i = 0; i < ???; i++){ // fill in the code you want to happen } ``` Inside the for loop, we want to create a new **`Alien`**, and assign that newly created **`Alien`** to a slot in the array. Don’t forget to add the **`Alien`** to pane (see the **`addToPane`** method in the **`Alien`** class). Make sure to check what the constructor of **`Alien`** takes in (**Hint:** you can choose whatever color you want for the alien!) ## Step 2: Line ‘em Up Grossssss…. our aliens are such a mess. Let’s line up the aliens so that they are in a neat little row. Let’s take a look at the **`lineUpAliens`** method. Check out the TODOs for what should happen inside the array. Remember, you can access the alien at the array by using the syntax **`arrayName[index]`**. We want the y position to be constant, but for the x value, we could do something like: ``` for (int i =0; i < ??; i ++) { circle.setX(i * distance between aliens + 30) } ``` **NOTE:** 30 is a buffer on the edge. ## Step 3: Color time! Now we are going to make our **`Aliens`** colored. Let’s go to the **`alternateAlienColors`** method. Our colors today are going to be SKYBLUE and LIGHTGREEN. Once again, let’s **loop through the array**. This time, we are going to check to see if the index is even, and, if so, color the **`Alien`** SKYBLUE. If the index is odd, then color the **`Alien`** LIGHTGREEN. You can check whether an index is odd or even by using the modulo operator (%). Modulo works by taking the remainder of two numbers. For example, >5 % 2 = 1 >4 % 2 = 0 What remainder do all odd numbers have in common? What remainder do all even numbers have in common? ## Step 4: Bye Bye Blue Now that we’ve added green and blue aliens, let’s work on getting rid of the blue one. Go to the **`removeBlue`** method and see the TODO comments. **Make sure to check for null values:** if there is nothing in the spot of the array, then don’t try to remove anything. Also, don’t forget to remove the alien both graphically and logically :) ## Step 5: Null Pointer, No Thank You **`NullPointerExceptions`** are the worst. They are no fun. In this section, add in checking for null cases to your methods. For example, you cannot remove the blue <code>Alien</code>s if there are no <code>Alien</code>s lined up or if you have already removed blue <code>Alien</code>s. You can try this out to see what happens! You want your program to be able to run safely, which means that you don’t try to access and call methods on objects that are null. Think about how you can check for whether an alien is null or not before trying to call methods on aliens in the array. ![Screenshot 2024-09-03 at 11.35.47 AM](https://hackmd.io/_uploads/BkSbaj4hA.png) # Part 2: 2D Arrays Let’s move into another dimension! Switch to the 2D Arrays tab at the top of the visualizer. In this part of the assignment you are going to generate aliens, like before, but store them in a 2D array and then line them up accordingly. ## Step 1: Generating Aliens Like before, the first step will be to initialize the 2D array. Just like you did with the 1D array, when you initialize a 2D array, you have to explicitly give the dimensions. You will want this array to have 35 aliens total, with the first dimension being 7 and the second dimension being 5. **Row major vs column Major** Oftentimes, when we talk about 2D arrays, it can be helpful to think of the array like a grid or a matrix. But this leads to the question of which dimension represents the rows, and which dimension represents the columns. Should an array of square[2][3] look like the left or the right? <img style="display: block; margin: auto;" src="https://hackmd.io/_uploads/rykZsiV3R.png" alt="Array Image"> Java memory thinks of 2D arrays as arrays of arrays, and doesn’t think about rows and columns. However, for our intents and purposes, YOU technically have the power to decide which dimension represents rows and which dimension represents the columns. In CS15, we tend to think of the first number representing the rows, so row **major** order. Both diagrams depict two arrays, each of size three. No matter the graphical layout, that is what is happening. However, on the left, we have **two** rows and **three** columns, whereas on the right, there are **two** columns and **three** rows. We highly recommend that you think about things in row **major** order (two rows of three columns). <img style="display: block; margin: auto;" src="https://hackmd.io/_uploads/B1Idho430.png" alt="Array Image 2"> **Back to generating the Aliens** Look at the **`generateAliens`** method. Like the 1D array you just worked with, we are going to loop through the array and populate it with new instances of **`Aliens`**. However, instead of using just one for loop, for the 2D array, you are going to use a double for loop. You will loop over the first dimension of the array, then the second. The general syntax for a double for loop is: for (int i = 0; i < ???; i++){ for(int j = 0; j < ???; j++){ // fill in the code you want to happen } } If you want to put something into a 2D array, you do it just like you did with the 1D array, with the square brackets []. But this time, you will add a second set of brackets, representing the second dimension. For example, if we are in row-column major, we can adjust the arrays using this format: array[row][column]. ## Step 2: Line ‘em Up Once again, we are going to want to line up the aliens. Move to the **`lineUpAliens`** method. This is where the distinction between row major and column major comes into play. We are first going to line up the aliens in row **major** order. This means you are going to want to have **7 rows**, each with **5 alien columns**. One thing that can be really confusing is keeping track of rows and columns along with x’s and y’s. We are taught for so long to think of coordinates in terms of (x, y). However, if you are now thinking about (row, col), remember that row corresponds to y, while col corresponds to x. With that being said, you can do a similar trick to lining up the aliens in a 2D array as you did [with the 1D array](https://cs.brown.edu/courses/cs015/lecture/pdf/CS15.Lecture_13_Arrays_and_ArrayLists.10.17.24.pdf). This time you will also have to think about setting the y position of the alien based on the row the alien is in. This time, you also want to complete a similar exercise in coloring the aliens ***during generation*** as you did in part 1. If the row index of the alien is even, make the alien SKYBLUE, if the row index of the alien is odd, make it LIGHTGREEN. ## Step 3: Switch it Up Let’s go back to the discussion of row major and column major. Right now, we have an array of aliens that is [7][5]. In a row major way of thinking there are 7 rows and 5 columns. You just lined the aliens up basing the y coordinate after the first dimension (row) and the x coordinate after the second dimension (column). Let’s turn this on its head. Instead, let’s think about this array as if it were column major. How can you switch the for loops to make it so that the aliens are lined up in a column-major order, i.e. there are 7 columns of aliens, where each column has 5 rows? Fill in the **`rowToCol`** method. **Important**: remember, the data structure of the array **does not change**. It still has 7 as the first dimension and 5 as the second dimension, i.e. a 7x5 array. It is **your** interpretation of the array that changes when you switch from row major to column major. ## Step 4: Evil Aliens Uh-oh, some of the generated aliens are actually evil! If there are **at least** 3 aliens in the same row (for row-major arrangement) or column (for column-major arrangement) that are evil aliens, all the aliens in that row/column become evil. We want to write methods that reveal these rows/columns of evil aliens. There are 2 stencil methods inside **`AlienArrayCreator2D`** class – **`checkEvilAliens`** and **`revealEvil`** which can help you with revealing the corrupted rows. You can check if an alien is evil by calling the Alien’s **`getIsEvil`** method. ### Step 4.1: Checking whether a row/column contains at least 3 evil aliens The **`checkEvilAliens`** method takes in a 1D array of Aliens. This could either be thought of as a row or column of aliens depending on the arrangement of your aliens on the grid. This method should return **`true`** if it determines that there are at least 3 evil aliens and **`false`** otherwise. One way of approaching this problem would be looping through the entire given 1D array and updating an evil alien counter variable every time an alien is evil and then returning **`true`** or **`false`** depending on whether the evil alien counter is greater than 2 or not. The pseudocode for that approach could be: ``` int counter = 0 for alien in Aliens: if alien is evil: counter++ if counter >= 3: return true else: return false ``` This approach is correct, however, think about the case where you are given an extreeeeeeemely long array of aliens and the first 3 aliens are evil. Is it necessary to keep looping once we have counted 3 aliens or can we **exit the method early** and return true as soon as the counter hits 3? How can we check for this condition inside the for-loop? **Important:** Think about when the method should return false. Do we return false *inside* the for-loop or *after* its entire execution? If we never encounter the counter being greater than 2 *inside* the loop can we immediately return false after the loop? Does the loop never returning true imply that there are less than 3 evil aliens? It is important to remember that returning from a method terminates the entire method. Therefore, any loops that may be occurring inside the method are *also* terminated immediately. ### Step 4.2 Revealing all the evil aliens The **`revealEvil`** method requires that you loop through all the rows or columns depending on the arrangement (the first dimension of the array in either case) and check whether a given row or column has at least 3 evil aliens. The **`checkEvilAliens`** method you wrote in the previous section can help with this! If you determine that the row/column contains *at least* 3 evil aliens, change the color of every alien in the row/column to RED. ### Step 4.3 Testing the checkEvilAliens method Great! You’ve now written a method that can **`checkEvilAliens`** but how do we write tests to verify it works? By writing unit tests for it!! 1. Open up the **`AlienArrayCreator2DTest.java`** file and follow the TODO instructions to test your **`checkEvilAliens`** method. 2. We’ve given you the basic stencil outline for working with these complicated tests that involve different classes dependent on each other. 3. Think about how you might go about populating the row Array with Aliens (hint: loops!!) 4. Think about what **`checkEvilAliens`** would return for different number of evil aliens in the row and test for these different conditions, i.e. &emsp; a. What should **`checkEvilAliens`** return if we have 0 evil aliens? &emsp; b. What should **`checkEvilAliens`** return if we have 2 evil aliens? &emsp; c. What should **`checkEvilAliens`** return if we have 3 evil aliens? &emsp; d. What should **`checkEvilAliens`** return if we have 4 evil aliens? The evil aliens should look a bit different than the others! Why is that? This helps us understand what the **`checkEvilAliens`** test is doing logically to determine whether the row Array of Aliens meets the criteria to be considered an evil row. If we can see that a row contains 4 evil-looking aliens, what can we expect **`checkEvilAliens`** to return?? :::success **Checkpoint**: Call your TA over and show them your completed Lab 7!! :::