currently, a long text in the plain word section category of the EssayContainer will cause different sections to be divided onto newlines rather than combining all of the different word section items into one paragraph.

Store data for the ads in a js file in the form of jsx, and then create a component that displays the data inside the social media activity!

self explanatory, but for reference look at the progress bar on case 2

Right now, the React Router only accepts one page. We should separate the Navbar at the top and wrap everything else inside a Router to support multiple pages, along with adjusting the CSS appropriately for different sections as necessary!

something like this probably

Add 6 frames in the Facial Recognition case study section, and fill them with random/made-up titles and texts (to be filled in the future).

This should be a relatively quick change.

In the conclusion frame of the Facebook Ads case study, the blue arrows to navigate between the cards work as intended, but we'd like for the arrows to turn gray if they shouldn't be clicked. Specifically, the left arrow should be gray on the 1st card (can't go left of the first) and the right arrow should be gray on the 3rd card (can't go right on the last).

(In the below image, right arrow should be gray since we shouldn't be able to click it)

The relevant code is in website/src/components/posts/Facebook/conclusion/ConclusionGraphic.js. There seems to already be some pre-existing code that tries to achieve this, but it currently does not work.

in a fixed (short) amount of time, user is told to group the image that pops up, either as a "triangle" or "rectangle" (or some other types of shapes). At first, the two groups are heavily associated with a certain color (many triangles are green and many rectangles are red, for example). Later, we introduce new colors that could confuse the user: a green rectangle, a red triangle, a blue rectangle etc. Once the time limit ends, the user is given statistics on how they did

Adding the state logic inside of context for commonLogic would help reduce having to rewrite code for when we implement more case studies in the future.

In the College App case study, our interactive essay activity has users change certain words in a given essay to output a "score", denoting how male or female leaning the overall essay is. Since this "score" is ambiguous, we'd like to change it to be a scrolling/sliding bar, that changes position based on the numerical score.

The current version looks like:

We'd like the final version to be something like:

where the circle in the middle slides left and right based on the numeric score.

You could implement this using react useEffects/hooks, or alternatively, there's likely some React library that could be used for this.

organize content inside css files so that classes are in relevant css files instead of being kind of all over the place...

ex: .progress-button and related classes are in mainContent.css, while `.progress-bar' is in AppMain.css

Using the word embeddings GloVe package and gensim, make it so that users can input custom words and get their relation to masculine vs feminine which will be used to determine score.

instead of percentage: 30 it should say percentage: 30%, or maybe 30% if that's possible

Add a new frame/box in the College App case study section, and have it contain the graph shown here:

The source of this graph is
(http://cockrell.utexas.edu/media/xt-adaptive-images/1600/images/wep-stats/HistoricalGrad.jpg)

We'd like to not use an image of the graph, but rather the graph library that was used for the Facebook gender graph (refer to website/src/components/posts/Facebook/genderGraph). Go through the Facebook graph and understand how it's implemented, then implement this graph using the given data in an identical way.

It's OK if the first iteration of the graph doesn't look exactly like the origin, if some of the CSS/styling is off, etc. Think of this as a first draft.

add some text!

• Change the increment case to pick 100 to 1000 ads, and sort at the end of the increment case.
• rn, making sorting a separate action type leads to race conditions and there's no guarantee that our dispatches will finish running sequentially

Add this at the end of each case study so that people know where to go next!

In the college app case study, in the frame that contains the interactive essay activity, change the frame to match this title/text.
You don't need to explain the proxy definitions or anything - just include that first paragraph.

Clicking on the "white" button is hard to see, especially compared to clicking "black". Maybe we can make the phone app's background a more prominent yellow so that the white will contrast more? or we can make the "white" button have a grey background onclick instead of white.

It isn't obvious what "refreshes" mean in the social media activity, so explain that it represents "refreshing" your social media feed and seeing which ad pops up each time

In the college admissions case study, the essay activity's corresponding graph currently looks like this:

Besides the overlapping labels, it's very unclear what the graph is trying to show. Go deeper into how the graph is implemented via the machine learning model data, and

• Add an x-axis, y-axis label (He similarity vs She similarity)
• Draw a faint dotted line on the graph following y=x, so its easy to see which points lean more "He" vs "She"
• (Optional) Find a way to address the overlapping labels. One possibility is to do something similar to this where the labels float above. Or, to hide labels when they overlap and only display upon hovering. Or even, change the original words in the essay so that the various options don't all have the same he/she score. While this is mostly optional (for now, eventually we'd need a change here), at least try to propose a way to fix the issue.

1. In the College App case study, change the first frame to the introduction frame shown in this picture, with the corresponding text:

This is present in the Figma (on slack channel), and you should be able to directly copy/paste from there. Make sure to get the styling, etc. right including bold/underlined text.

2. Change the background color of this case-study page to the yellow shown in the image above. The exact hue should be on the Figma.

Received feedback that the content appears very large on the screen, which I agree with

Right now, the user can change the displayed gender/race on the screen within ProfileCreator without actually changing the dataset used to calculate ads displayed. To prevent this from happening, we should gray out the gender and race buttons when the generate profile has been pressed, disabling changes, and only enable changes again once "Reset Profile" has been pressed. (So change depending on the value of profileCreated.)

In its current state, our logic for determining whether or not the progress bar on the left should display is causing the entire CaseStudyFacebook component to re-render multiple times even when we don't have to change the display state of the bar due to state changes within our custom hook for window dimensions.

By memoizing whether or not we should change the progress bar by turning it into separate state variable, we can prevent unnecessary re-renders and improve webpage performance.

A word in the “essay” should be highlighted. Clicking on either of the three buttons will change the essay so that the highlighted portion now contains the word inside the button.

we can probably find a react library for this

content is in figma

We'd like to implement a new game for our College Apps case study section, where users are presented one-by-one with images of shapes, and need to group them as either a "triangle" or "rectangle". At first, the two groups are heavily associated with a certain color (many triangles are green and many rectangles are red, for example). Later, we introduce new colors that could confuse the user: a green rectangle, a red triangle, a blue rectangle etc. Once the time limit ends, the user is given statistics on how they did.

For now - add a new frame to the college app case study section and title it as shown.

Now, add two buttons named Group 1, Group 2 on bottom left/bottom right as shown here:

The above is the eventual vision of this. For now, just display some text in the middle instead of an image. Have it so that if the user clicks Group 1, the score increments by 10, otherwise if they click Group 2, it decrements by 5. The text doesn't need to change or anything yet.

Within the Landing Page, separate brief explanations of each case study into individual posts, and provide a <Link> from within each post (maybe within the title?) to let the user navigate to separate case studies from brief summaries on the Landing Page in addition to the current Navbar in place.

We can make the Navbar prettier by flipping the direction of the arrow depending on whether or not the Navbar is open and signifying to the user somehow (other than a color change, maybe a small dot or something?) which page they are currently on.