created fundamental structure of matching game

Author: charlenehuang1

website/src/assets/College/MatchingGame.css

@@ -0,0 +1,5 @@
+button {
+  background-color: skyblue;
+  border-radius: 5px;
+  padding: 10px;
+}

website/src/assets/College/MatchingGame.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { useState } from "react";
+import "./MatchingGame.css";
+import placeholderThumbnail from "../placeholderThumbnail.png";
+
+export const MatchingGame = () => {
+  const [score, setScore] = useState(0);
+
+  function processGroup1Click() {
+    setScore(score + 10);
+  }
+
+  function processGroup2Click() {
+    setScore(score - 5);
+    console.log(score);
+  }
+
+  return (
+    <>
+      <br></br>
+      <h1>Let's play a game!</h1>
+
+      <p>Score: {score}</p>
+
+      <img src={placeholderThumbnail} width={250} height={250} alt="game"></img>
+      <br></br>
+      <button onClick={processGroup1Click}>Group 1</button>
+
+      <button onClick={processGroup2Click}>Group 2</button>
+
+      <br></br>
+    </>
+  );
+};

website/src/assets/College/collegeLabContent.js

@@ -3,6 +3,7 @@ import React from "react";
 import "../../main.css";
 import EssayContainer from "../../components/posts/CollegeAdmissions/essay/EssayContainer";
 import WomenEnrollmentContainer from "../../components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js";
+import { MatchingGame } from "./MatchingGame.js";
 
 export default [
   {
@@ -140,7 +141,39 @@ export default [
       ],
     },
   },
-
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Thinking Like an ML Model",
+      header: "Thinking Like an ML Model",
+      headerLink: true,
+      linkTo: "facebook",
+      subheader:
+        "Why did the model take factors unrelated to competence into account?",
+      bodyText: [
+        {
+          body: (
+            <p className="bold">
+              The computer isn't really looking for gender. So why does it learn
+              to take that into account without being told to do so?
+              <br></br>
+              <br></br>
+              Here's an interactive example that emulates how machine learning
+              models "learn".
+              <br></br>
+              <br></br>
+              Grouping exercise!
+              <br></br>
+              Explain why you make mistakes.
+              <br></br>
+              Explain how that's similar to how ML models make mistakes.
+              <MatchingGame />
+            </p>
+          ),
+        },
+      ],
+    },
+  },
   {
     post: {
       profilePic: teachLogo,