added categorization game

website/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

website/src/assets/FacialRecognition/categorizationImgPath.txt

@@ -0,0 +1,26 @@
+./categorizationGameImgs/Ndole.jpg
+./categorizationGameImgs/buuz.jpg
+./categorizationGameImgs/cachupa.jpg
+./categorizationGameImgs/ceviche.jpg
+./categorizationGameImgs/halusky.jpg
+./categorizationGameImgs/hamburger.jpg
+./categorizationGameImgs/jambalaya.jpg
+./categorizationGameImgs/karekare.png
+./categorizationGameImgs/mapoDoufu.jpg
+./categorizationGameImgs/mole.png
+./categorizationGameImgs/mussakhan.webp
+./categorizationGameImgs/nihari.jpg
+./categorizationGameImgs/pabellónCriollo.webp
+./categorizationGameImgs/padThai.jpg
+./categorizationGameImgs/paellaValenciana.jpg
+./categorizationGameImgs/pepperPot.jpg
+./categorizationGameImgs/platoTipico.jpg
+./categorizationGameImgs/poke.jpg
+./categorizationGameImgs/raguAllaBolognese.jpg
+./categorizationGameImgs/ramen.webp
+./categorizationGameImgs/sadza.webp
+./categorizationGameImgs/sarmale.jpg
+./categorizationGameImgs/tacos.jpg
+./categorizationGameImgs/texasBBQ.jpg
+./categorizationGameImgs/warakEnab.jpg
+./categorizationGameImgs/zigni.jpg

website/src/caseStudies/FacialRecognition.js

@@ -2,10 +2,11 @@ import React from "react";
 import "../main.css";
 import teachLogo from "../assets/teachla-logo.svg";
 import PostsList from "../components/mainContent/PostsList";
-import CounterFrame from "../components/posts/FacialRecognition/CounterFrame";
+//import CounterFrame from "../components/posts/FacialRecognition/CounterFrame";
 import Timeline from "../components/posts/FacialRecognition/Timeline";
 import AccuracyChart from "../components/posts/FacialRecognition/AccuracyChart";
 import { VisibilityProvider } from "../components/mainContent/commonLogic";
+import CategorizationGame from "../components/posts/FacialRecognition/CategorizationGame";
 
 export default function FacialRecognition() {
   return (
@@ -60,11 +61,11 @@ const FacialRecognitionInfo = [
     post: {
       profilePic: teachLogo,
       profilePicName: "Profile Picture - Frame 1",
-      header: "Facial Recognition Game",
+      header: "Food Rating Game",
       subheader: "Understanding Bias Through Categorization",
       bodyText: [
         {
-          body: <CounterFrame />,
+          body: <CategorizationGame />,
         },
       ],
     },
@@ -107,7 +108,7 @@ const FacialRecognitionInfo = [
       ],
     },
   },
-  
+
   {
     post: {
       profilePic: teachLogo,
@@ -122,7 +123,7 @@ const FacialRecognitionInfo = [
     },
   },
 
-{
+  {
     post: {
       profilePic: teachLogo,
       profilePicName: "Profile Picture - Frame 3b",
@@ -134,7 +135,7 @@ const FacialRecognitionInfo = [
         },
       ],
     },
- },
+  },
 
   {
     post: {

website/src/components/posts/FacialRecognition/CategorizationGame.css

@@ -0,0 +1,57 @@
+.food-img {
+  width: 350px;
+  height: 250px;
+  object-fit: cover;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  border-radius: 8px;
+}
+
+.instructions {
+  text-align: center;
+}
+
+.not-selected, .selected, .next-button{
+  padding: 10px 20px;
+  margin: 10px;
+  background-color: #cbe4ff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+}
+
+.selected {
+  background-color: #0080ff;
+  color: white;
+}
+
+.next-button {
+  width: 40%;
+  font-size: 16px;
+}
+
+.not-selected:hover, .next-button:hover {
+  background-color: #a7c9ff;
+}
+
+.interactive-section {
+  display: block;
+  justify-content: center;
+  text-align: center;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+  text-align: center;
+  font-size: 13px;
+}
+
+.rating-result span {
+  color: #c88200;
+  font-size: 20px;
+}

website/src/components/posts/FacialRecognition/CategorizationGame.js

@@ -0,0 +1,221 @@
+import { StarIcon } from "@phosphor-icons/react";
+import React, { useState } from "react";
+import "./CategorizationGame.css";
+
+function CategorizationGame() {
+  const [gameCompleted, setGameCompleted] = useState(false);
+  // Note: the image paths are hardcoded in due to no backend; if the img files are moved from public, the start of each string must also be modified to reflect the path
+  const foodPictures = [
+    "./categorizationGameImgs/Ndole.jpg",
+    "./categorizationGameImgs/buuz.jpg",
+    "./categorizationGameImgs/cachupa.jpg",
+    "./categorizationGameImgs/ceviche.jpg",
+    "./categorizationGameImgs/halusky.jpg",
+    "./categorizationGameImgs/hamburger.jpg",
+    "./categorizationGameImgs/jambalaya.jpg",
+    "./categorizationGameImgs/karekare.png",
+    "./categorizationGameImgs/mapoDoufu.jpg",
+    "./categorizationGameImgs/mole.png",
+    "./categorizationGameImgs/mussakhan.webp",
+    "./categorizationGameImgs/nihari.jpg",
+    "./categorizationGameImgs/padThai.jpg",
+    "./categorizationGameImgs/paellaValenciana.jpg",
+    "./categorizationGameImgs/pepperPot.jpg",
+    "./categorizationGameImgs/platoTipico.jpg",
+    "./categorizationGameImgs/poke.jpg",
+    "./categorizationGameImgs/raguAllaBolognese.jpg",
+    "./categorizationGameImgs/ramen.webp",
+    "./categorizationGameImgs/sadza.webp",
+    "./categorizationGameImgs/sarmale.jpg",
+    "./categorizationGameImgs/tacos.jpg",
+    "./categorizationGameImgs/texasBBQ.jpg",
+    "./categorizationGameImgs/warakEnab.jpg",
+    "./categorizationGameImgs/zigni.jpg",
+  ];
+  const [familarRatingSum, setFamiliarRatingSum] = useState(0);
+  const [unfamilarRatingSum, setUnfamiliarRatingSum] = useState(0);
+  const [familiarCount, setFamiliarCount] = useState(0);
+  const [unfamiliarCount, setUnfamiliarCount] = useState(0);
+  const [currentRating, setCurrentRating] = useState(null);
+  const [yes, setYes] = useState(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const next = () => {
+    if (gameCompleted) {
+      return;
+    }
+    setErrorMessage("");
+    if (yes == null) {
+      setErrorMessage("Please select yes or no before continuing.");
+      return;
+    }
+    if (currentRating == null) {
+      setErrorMessage("Please select a rating before continuing.");
+      return;
+    }
+    if (yes) {
+      setFamiliarRatingSum(familarRatingSum + currentRating);
+      setFamiliarCount(familiarCount + 1);
+    } else {
+      setUnfamiliarRatingSum(unfamilarRatingSum + currentRating);
+      setUnfamiliarCount(unfamiliarCount + 1);
+    }
+    if (currentIndex + 1 >= foodPictures.length) {
+      setCurrentIndex(currentIndex + 1);
+      setGameCompleted(true);
+      return;
+    }
+    setYes(null);
+    setCurrentRating(null);
+    setCurrentIndex(currentIndex + 1);
+  };
+
+  return (
+    <div>
+      <p className="instructions">
+        Imagine you're a famous food critic on a cooking competition. Without
+        considering plating or fanciness, rate each dish based on how appetizing
+        it looks and be critical! We only want the best dishes to win!
+      </p>
+      <br />
+      <p>
+        {currentIndex}/{foodPictures.length}
+      </p>
+      <img
+        src={
+          gameCompleted
+            ? foodPictures[foodPictures.length - 1]
+            : foodPictures[currentIndex]
+        }
+        alt="Food Item"
+        className="food-img"
+      />
+      <div className="interactive-section">
+        {gameCompleted ? (
+          <>
+            <h2>Game Completed!</h2>
+            <h4>Important Notes:</h4>
+            <p>
+              There are many factors that might influence ratings besides
+              familiarity. We tried to limit these by choosing photos with
+              saturated colors and nice plating. We wanted you to have a split
+              between familiar and unfamiliar foods, so we chose some commonly
+              eaten dishes in the US as well as random countries' national or
+              popular dishes. As humans, we all have a little bias, and it was
+              tricky finding pictures that really represent a dish when you
+              haven't eaten it. National dishes might not be the country's most
+              popular dish either. If there's a dish or country you recognize
+              with a picture that can be improved, let us know!
+            </p>
+          </>
+        ) : (
+          <>
+            <p className="instructions">
+              Have you eaten this food or something very similar before?
+            </p>
+            <br />
+            <button
+              className={yes === true ? "selected" : "not-selected"}
+              onClick={() => {
+                setYes(true);
+              }}
+            >
+              Yes
+            </button>
+            <button
+              className={yes === false ? "selected" : "not-selected"}
+              onClick={() => {
+                setYes(false);
+              }}
+            >
+              No
+            </button>
+          </>
+        )}
+        <br />
+        <div className="rating">
+          <StarIcon
+            onClick={() => {
+              setCurrentRating(1);
+            }}
+            size={70}
+            weight={currentRating >= 1 ? "fill" : "bold"}
+            color="#fcbe03"
+          />
+          <StarIcon
+            onClick={() => {
+              setCurrentRating(2);
+            }}
+            size={70}
+            weight={currentRating >= 2 ? "fill" : "bold"}
+            color="#fcbe03"
+          />
+          <StarIcon
+            onClick={() => {
+              setCurrentRating(3);
+            }}
+            size={70}
+            weight={currentRating >= 3 ? "fill" : "bold"}
+            color="#fcbe03"
+          />
+          <StarIcon
+            onClick={() => {
+              setCurrentRating(4);
+            }}
+            size={70}
+            weight={currentRating >= 4 ? "fill" : "bold"}
+            color="#fcbe03"
+          />
+          <StarIcon
+            onClick={() => {
+              setCurrentRating(5);
+            }}
+            size={70}
+            weight={currentRating >= 5 ? "fill" : "bold"}
+            color="#fcbe03"
+          />
+        </div>
+        {!gameCompleted && (
+          <button className="next-button" onClick={next}>
+            Next
+          </button>
+        )}
+        <br />
+        <p className="error-message">{errorMessage}</p>
+      </div>
+      {gameCompleted && (
+        <>
+          <h2>Results:</h2>
+          <h4 className="rating-result">
+            Average rating for familiar foods:{" "}
+            <span>
+              {familiarCount > 0
+                ? (familarRatingSum / familiarCount).toFixed(4)
+                : "no data avaliable"}
+            </span>
+          </h4>
+          <h4 className="rating-result">
+            Average rating for unfamiliar foods:{" "}
+            <span>
+              {unfamiliarCount > 0
+                ? (unfamilarRatingSum / unfamiliarCount).toFixed(4)
+                : "no data avaliable"}
+            </span>
+          </h4>
+          <h4>Takeaways:</h4>
+          <p>
+            Is there any difference between your ratings for familiar and
+            unfamiliar foods?
+          </p>
+          <p>
+            Was it harder to imagine what unfamiliar foods might taste like,
+            especially if you couldn't recognize the ingredients?
+          </p>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default CategorizationGame;