From 1aaf58a7d755d2e6a80e49c4d1ce1b8d0a952270 Mon Sep 17 00:00:00 2001
From: Yuqi Huang <yuki19@g.ucla.edu>
Date: Wed, 24 Jan 2024 11:53:22 -0800
Subject: [PATCH] exercise3_tophalf_7

---
 src/pages/Exercise3.tsx   | 173 +++++++++++++++++++-------------------
 src/styles/Exercise3.scss |  71 ++++++++--------
 2 files changed, 124 insertions(+), 120 deletions(-)

diff --git a/src/pages/Exercise3.tsx b/src/pages/Exercise3.tsx
index 554b1511..41ed3422 100644
--- a/src/pages/Exercise3.tsx
+++ b/src/pages/Exercise3.tsx
@@ -1,4 +1,4 @@
-import {FC, useState} from 'react';
+import { FC, useState } from 'react';
 import AppWrapper from '../components/AppWrapper';
 import { HeaderSections } from '../types/globalTypes';
 import '../styles/Exercise3.scss';
@@ -8,92 +8,91 @@ import Grid from '../components/Grid';
 import HintBox from '../components/HintBox';
 import NavButtons from '../components/NavButtons';
 
-
 const Exercise3: FC = () => {
-    const [confetti, setConfetti] = useState(false);
-    const nums = Array.from({length: 24}, (_, index)=>index+1);
-    const itemSpace = [1, 3, 1, 3, 2, 4, 2, 1, 1, 2, 1, 2, 1];
-    const selectedValue = '';
-    return(
-        <>
-            <AppWrapper section={HeaderSections.EXERCISE_3}>
-                <div className="page-wrapper">
-                    <h1>Exercise 3</h1>
-                    <p>
-                    For this exercise, you will be helping Pipi
-                    find the basketball that was stored in the
-                    last lesson and replacing it with a soccer ball.
-                    </p>
-                    <h2>Instructions</h2>
-                    <p>
-                        Take PiPi to{' '}
-                        <span className="highlight">Box I</span>
-                        {' '}by clicking on the correct address.
-                    </p>
-                    <HintBox text=""/>
-                    <div className="wrap">
-                        <div className="Exercise-box">
-                            <Grid
-                                addressNums={nums}
-                                itemSpaceArray={itemSpace}
-                                size={40}
-                                handleCorrect={setConfetti}
-                            >
-                                <div></div>
-                               <Box letter="j" num={3} conf={false}></Box>
-                                <div></div>
-                                <Box letter="k" num={3} conf={false}></Box>
-                                <div></div>
-                                <Box letter="l" num={4} conf={confetti}></Box>
-                                <div></div>
-                                <Box letter="m" num={1} conf={false}></Box>
-                                <div></div>
-                                <Box letter="n" num={2} conf={false}></Box>
-                                <div></div>
-                                <Box letter="o" num={3} conf={false}></Box>
-                            </Grid>
-                        </div>
-                        <img
-                            className="pipi"
-                            src={Pipi}
-                            alt="Pipi"
-                            style={{
-                                position: 'absolute',
-                                top: '620px', // Adjust as needed
-                                left: '165px', // Adjust as needed
-                                height: '150px', // Set desired height
-                                width: 'auto', // Maintain aspect ratio
-                                zIndex: 2
-                            }}
-                        />
-                    </div>
-                    <h3>
-                    Pipi now wants to replace the basketball with a soccer ball.
-                    What is the corresponding code to do this?
-                    </h3>
-                    <div className="frame">
-                        <p className='text1'>
-                        SoccerBall soccerBall; // ignore the type difference here
-                        </p>
-                        <select
-                            id="sampleDropdown"
-                            className="button"
-                            value={selectedValue}
-                            //onChange={handleChange}
-                        >
-                            <option value="" disabled selected>Select</option>
-                            <option value="option2">*basketballPtr = soccerBall;</option>
-                            <option value="option3">basketballPtr = soccerBall;</option>
-                            <option value="option4">basketballPtr = &soccerBall;</option>
-                            <option value="option5">&basketballPtr = soccerBall;</option>
-                        </select>
-                    </div>
-                    <div className='padding'></div>
-                </div>
-            </AppWrapper>
-            <NavButtons page={15}></NavButtons>
-        </>
-    );
+  const [confetti, setConfetti] = useState(false);
+  const nums = Array.from({ length: 24 }, (_, index) => index + 1);
+  const itemSpace = [1, 3, 1, 3, 2, 4, 2, 1, 1, 2, 1, 2, 1];
+  const selectedValue = '';
+  return (
+    <>
+      <AppWrapper section={HeaderSections.EXERCISE_3}>
+        <div className="page-wrapper">
+          <h1>Exercise 3</h1>
+          <p>
+            For this exercise, you will be helping Pipi find the basketball that
+            was stored in the last lesson and replacing it with a soccer ball.
+          </p>
+          <h2>Instructions</h2>
+          <p>
+            Take PiPi to <span className="highlight">Box I</span> by clicking on
+            the correct address.
+          </p>
+          <HintBox text="" />
+          <div className="wrap">
+            <div className="Exercise-box">
+              <Grid
+                addressNums={nums}
+                itemSpaceArray={itemSpace}
+                size={40}
+                handleCorrect={setConfetti}
+              >
+                <div></div>
+                <Box letter="j" num={3} conf={false}></Box>
+                <div></div>
+                <Box letter="k" num={3} conf={false}></Box>
+                <div></div>
+                <Box letter="l" num={4} conf={confetti}></Box>
+                <div></div>
+                <Box letter="m" num={1} conf={false}></Box>
+                <div></div>
+                <Box letter="n" num={2} conf={false}></Box>
+                <div></div>
+                <Box letter="o" num={3} conf={false}></Box>
+              </Grid>
+            </div>
+            <img
+              className="pipi"
+              src={Pipi}
+              alt="Pipi"
+              style={{
+                position: 'absolute',
+                top: '620px', // Adjust as needed
+                left: '165px', // Adjust as needed
+                height: '150px', // Set desired height
+                width: 'auto', // Maintain aspect ratio
+                zIndex: 2,
+              }}
+            />
+          </div>
+          <h3>
+            Pipi now wants to replace the basketball with a soccer ball. What is
+            the corresponding code to do this?
+          </h3>
+          <div className="frame">
+            <p className="text1">
+              SoccerBall soccerBall; // ignore the type difference here
+            </p>
+            <select
+              id="sampleDropdown"
+              className="button"
+              value={selectedValue}
+              //onChange={handleChange}
+            >
+              <option value="" disabled selected>
+                Select
+              </option>
+              <option value="option2">*basketballPtr = soccerBall;</option>
+              <option value="option3">basketballPtr = soccerBall;</option>
+              <option value="option4">basketballPtr = &soccerBall;</option>
+              <option value="option5">&basketballPtr = soccerBall;</option>
+            </select>
+          </div>
+          <div className="padding"></div>
+        </div>
+      </AppWrapper>
+      <NavButtons page={15}></NavButtons>
+    </>
+  );
 };
 
-export default Exercise3;
\ No newline at end of file
+export default Exercise3;
diff --git a/src/styles/Exercise3.scss b/src/styles/Exercise3.scss
index 9d1ec68e..19bb047b 100644
--- a/src/styles/Exercise3.scss
+++ b/src/styles/Exercise3.scss
@@ -1,45 +1,50 @@
 .wrap {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin-bottom: 2.5em;
-    margin-top: 2.5em;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin-bottom: 2.5em;
+  margin-top: 2.5em;
+}
+
+.pipi{
+    position: absolute;
+    margin-top: -100px;
 }
 
 .frame {
-    background: #8596BE26;
-    border-radius: 5px;
-    height: 359px;
-    left: 161px;
-    position: absolute; /* This is crucial for top to work */
-    top: 900px; /* Adjust this value to move the frame */
-    width: 1118px;
-    z-index: 1;
+  background: #8596be26;
+  border-radius: 5px;
+  height: 359px;
+  left: 161px;
+  position: absolute; /* This is crucial for top to work */
+  top: 900px; /* Adjust this value to move the frame */
+  width: 1118px;
+  z-index: 1;
 }
 
-.text1{
-    height: 29px;
-    margin-left: 50px;
-    margin-top: 50px;
-    width: 1021px;
+.text1 {
+  height: 29px;
+  margin-left: 50px;
+  margin-top: 50px;
+  width: 1021px;
 }
 
-.padding{
-    height: 10px;
-    margin-top: 400px;
-    z-index: 1;
+.padding {
+  height: 10px;
+  margin-top: 400px;
+  z-index: 1;
 }
 
 .button {
-	background: #EEE;
-	border: 2px solid #A0A3A3;
-	border-radius: 4px;
-	color: #14396A;
-	font-family: "Helvetica", "Arial", sans-serif;
-    font-size: 22px;
-    height: 40px;
-    margin-left: 50px;
-	padding: 2px 40px;
-    text-align: left;
-    width: 501px;
+  background: #eee;
+  border: 2px solid #a0a3a3;
+  border-radius: 4px;
+  color: #14396a;
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  font-size: 22px;
+  height: 40px;
+  margin-left: 50px;
+  padding: 2px 40px;
+  text-align: left;
+  width: 501px;
 }