exercise3 tophalf created (#431)

* exercise-3_top_half

* exercise-3_tophalf_2

* exercise3_tophalf_3

* exercise3_tophalf_4

* exercise3_tophalf_5

* exercise3_tophalf_6

* exercise3_tophalf_7

* exercise3_tophalf_7

* exercise3_tophalf_9

* exercise3_tophalf_10

* exercise3_tophalf_11

* exercise3_tophalf_13

* exercise3_tophalf_14

src/App.tsx

@@ -3,6 +3,7 @@ import Demo from './pages/Demo';
 import Error404 from './pages/Error404';
 import Exercise1 from './pages/Exercise1';
 import Exercise2 from './pages/Exercise2';
+import Exercise3 from './pages/Exercise3';
 import Home from './pages/Home';
 import Lesson1 from './pages/Lesson1';
 import Lesson10 from './pages/Lesson10';
@@ -39,6 +40,7 @@ function App(): JSX.Element {
           <Route path="/lesson-10" element={<Lesson10 />} />
           <Route path="/exercise-1" element={<Exercise1 />} />
           <Route path="/exercise-2" element={<Exercise2 />} />
+          <Route path="/exercise-3" element={<Exercise3 />} />
           <Route path="*" element={<Error404 />} />
         </Routes>
       </BrowserRouter>

src/components/Sidebar.tsx

@@ -110,7 +110,7 @@ export default function Sidebar(props: sidebarProps): JSX.Element {
       link: PageURLs.EXERCISE_2,
     },
     {
-      name: '3. Exercise 3',
+      name: '3. Dereferencing Pointers',
       link: PageURLs.EXERCISE_3,
     },
   ];

src/pages/Exercise3.tsx

@@ -0,0 +1,89 @@
+import { FC, useState } from 'react';
+import '../styles/Exercise3.scss';
+import Pipi from '../../public/Pipi.svg';
+import AppWrapper from '../components/AppWrapper';
+import Box from '../components/Box';
+import Grid from '../components/Grid';
+import HintBox from '../components/HintBox';
+import NavButtons from '../components/NavButtons';
+import RunCode from '../components/RunCode';
+import { HeaderSections } from '../types/globalTypes';
+
+const question = [
+  {
+    options: [
+      '*basketballPtr = soccerBall;',
+      'basketballPtr = soccerBall;',
+      'basketballPtr = &soccerBall;',
+      '&basketballPtr = soccerBall;',
+    ],
+    answer: '*basketballPtr = soccerBall;',
+    correctText:
+      'Correct! This correctly dereferences the pointer and sets the basketball to a soccer ball.',
+    wrongText: 'Not quite',
+  },
+];
+
+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];
+  return (
+    <>
+      <AppWrapper section={HeaderSections.EXERCISE_3}>
+        <div className="page-wrapper">
+          <h1>Dereferencing Pointers</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 j</span> by clicking on
+            the correct address.
+          </p>
+          <HintBox text="Click on the first address occupied by the box (the leftmost one)." />
+          <div className="wrap">
+            <div className="Exercise-box">
+              <Grid
+                addressNums={nums}
+                itemSpaceArray={itemSpace}
+                size={40}
+                handleCorrect={setConfetti}
+              >
+                <div></div>
+                <Box letter="h" num={3} conf={false}></Box>
+                <div></div>
+                <Box letter="i" num={3} conf={false}></Box>
+                <div></div>
+                <Box letter="j" num={4} conf={confetti}></Box>
+                <div></div>
+                <Box letter="k" num={1} conf={false}></Box>
+                <div></div>
+                <Box letter="l" num={2} conf={false}></Box>
+                <div></div>
+                <Box letter="m" num={3} conf={false}></Box>
+              </Grid>
+            </div>
+            <img className="pipi" src={Pipi} alt="Pipi" />
+          </div>
+          <h3>
+            Pipi now wants to replace the basketball with a soccer ball. What is
+            the corresponding code to do this?
+          </h3>
+          <div className="exercise3-div">
+            <RunCode
+              questions={question}
+              displayText={
+                'SoccerBall soccerBall; // ignore the type difference here'
+              }
+            />
+          </div>
+        </div>
+      </AppWrapper>
+      <NavButtons page={16}></NavButtons>
+    </>
+  );
+};
+
+export default Exercise3;

src/styles/Exercise3.scss

@@ -0,0 +1,13 @@
+.wrap {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin-bottom: 2.5em;
+  margin-top: 2.5em;
+}
+
+.pipi {
+  position: absolute;
+  top: 515px;
+  z-index: 2;
+}

src/types/globalTypes.ts

@@ -13,6 +13,7 @@ export enum HeaderSections {
   LESSON_2 = 'Lesson 2',
   LESSON_3 = 'Lesson 3',
   EXERCISE_1 = 'Exercise 1',
+  EXERCISE_3 = 'Exercise 3',
   LESSON_4 = 'Lesson 4',
   LESSON_5 = 'Lesson 5',
   LESSON_6 = 'Lesson 6',
@@ -61,4 +62,5 @@ export enum PageOrder {
   '/lesson-10',
   '/exercise-1',
   '/exercise-2',
+  '/exercise-3',
 }