451 exercise4

src/App.tsx

@@ -5,6 +5,7 @@ import Error404 from './pages/Error404';
 import Exercise1 from './pages/Exercise1';
 import Exercise2 from './pages/Exercise2';
 import Exercise3 from './pages/Exercise3';
+import Exercise4 from './pages/Exercise4';
 import Exercise6 from './pages/Exercise6';
 import Home from './pages/Home';
 import Lesson1 from './pages/Lesson1';
@@ -43,6 +44,7 @@ function App(): JSX.Element {
           <Route path="/exercise-1" element={<Exercise1 />} />
           <Route path="/exercise-2" element={<Exercise2 />} />
           <Route path="/exercise-3" element={<Exercise3 />} />
+          <Route path="/exercise-4" element={<Exercise4 />} />
           <Route path="/exercise-6" element={<Exercise6 />} />
           <Route path="/conclusion" element={<Conclusion />} />
           <Route path="*" element={<Error404 />} />

src/components/RunCode.tsx

@@ -45,7 +45,13 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
 
   return (
     <div className="box-container">
-      <p className="code">{displayText}</p>
+      {displayText != '' && (
+        <p className="code">
+          <pre>
+            <code>{displayText}</code>
+          </pre>
+        </p>
+      )}
 
       {questions.map((question, index) => {
         return (

src/components/Sidebar.tsx

@@ -113,6 +113,10 @@ export default function Sidebar(props: sidebarProps): JSX.Element {
       name: '3. Dereferencing Pointers',
       link: PageURLs.EXERCISE_3,
     },
+    {
+      name: '4. Creating Pointers',
+      link: PageURLs.EXERCISE_4,
+    },
   ];
   const hiddenX = -357;
   const showX = 0;

src/pages/Conclusion.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import '../styles/Conclusion.scss';
 import { Link } from 'react-router-dom';
-import Group228 from '../../public/Group 228.svg';
+import ConclusionDiagram from '../../public/ConclusionDiagram.svg';
 import AppWrapper from '../components/AppWrapper';
 import NavButtons from '../components/NavButtons';
 import { HeaderSections } from '../types/globalTypes';
@@ -27,7 +27,7 @@ const Conclusion: FC = () => {
           </p>
 
           <div className="exercise-1-diagram diagram">
-            <img src={Group228} alt="Diagram" />
+            <img src={ConclusionDiagram} alt="Diagram" />
           </div>
 
           <div className="conclusion-footer ">

src/pages/Exercise4.tsx

@@ -0,0 +1,266 @@
+import { FC } from 'react';
+import '../styles/Exercise4.scss';
+import Exercise4Diagram2 from '../../public/Exercise4Diagram2.svg';
+import Exercise4Diagram1 from '../../public/Exercise4Diagram1.svg';
+import AppWrapper from '../components/AppWrapper';
+
+import NavButtons from '../components/NavButtons';
+import RunCode from '../components/RunCode';
+import { HeaderSections } from '../types/globalTypes';
+
+const question1 = [
+  {
+    options: [
+      'int b = ptr + 8;',
+      'int b = *ptr + 8;',
+      'int b = *(ptr + 8);',
+      'int b = ptr[8];',
+      'int b = *ptr[8];',
+    ],
+    answers: ['int b = *(ptr + 8);', 'int b = ptr[8];'],
+    answerText: new Map([
+      [
+        'int b = ptr + 8;',
+        'Not quite, this would set b equal to the pointer address of 3+8=11.',
+      ],
+      [
+        'int b = *ptr + 8;',
+        'Not quite, this would set b equal to the value of the pointer at the current location, which would be garbage since there is no box there, plus 8.',
+      ],
+      [
+        'int b = *(ptr + 8);',
+        'Correct! This will move the pointer to address 11 and then dereference it to access box b.',
+      ],
+      [
+        'int b = ptr[8];',
+        'Correct! This will move the pointer to address 11 and then dereference it to access box b. Note how the bracket syntax will implicitly dereference the pointer.',
+      ],
+      [
+        'int b = *ptr[8];',
+        'Not quite, remember the bracket syntax implicitly dereferences the pointer.',
+      ],
+    ]),
+  },
+  {
+    options: [
+      'int b = ptr + 8;',
+      'int b = *ptr + 8;',
+      'int b = *(ptr + 8);',
+      'int b = ptr[8];',
+      'int b = *ptr[8];',
+    ],
+    answers: ['int b = *(ptr + 8);', 'int b = ptr[8];'],
+    answerText: new Map([
+      [
+        'int b = ptr + 8;',
+        'Not quite, this would set b equal to the pointer address of 3+8=11.',
+      ],
+      [
+        'int b = *ptr + 8;',
+        'Not quite, this would set b equal to the value of the pointer at the current location, which would be garbage since there is no box there, plus 8.',
+      ],
+      [
+        'int b = *(ptr + 8);',
+        'Correct! This will move the pointer to address 11 and then dereference it to access box b.',
+      ],
+      [
+        'int b = ptr[8];',
+        'Correct! This will move the pointer to address 11 and then dereference it to access box b. Note how the bracket syntax will implicitly dereference the pointer.',
+      ],
+      [
+        'int b = *ptr[8];',
+        'Not quite, remember the bracket syntax implicitly dereferences the pointer.',
+      ],
+    ]),
+  },
+];
+
+const question2 = [
+  {
+    options: ['ptr= *ptr;', 'ptr+= *ptr;', '*ptr = ptr;', '*ptr += ptr;'],
+    answers: ['ptr+= *ptr;'],
+    answerText: new Map([
+      [
+        'ptr= *ptr;',
+        'Not quite, this will set the pointer to the offset between box b and the next box.',
+      ],
+      [
+        'ptr+= *ptr;',
+        'Correct! This will allow Pipi to move the correct amount to the next box.',
+      ],
+      [
+        '*ptr = ptr;',
+        'Not quite, this ends up actually assigning box b to hold the pointer to box b!',
+      ],
+      [
+        '*ptr += ptr;',
+        'Not quite, this will actually set the address inside box b to the address of the next box!',
+      ],
+    ]),
+  },
+];
+
+const question3 = [
+  {
+    options: [
+      'int m = *(ptr + 2 + 5);',
+      'int b = *(ptr + 2*ROW_WIDTH+5);',
+      'int b = *(ptr + 2+ 5*ROW_WIDTH);',
+      'int b = ptr[2][5];',
+      'int b = ptr[3][6];',
+    ],
+    answers: ['int b = *(ptr + 2*ROW_WIDTH+5);', 'int b = ptr[2][5];'],
+    answerText: new Map([
+      [
+        'int m = *(ptr + 2 + 5);',
+        'Not quite, this would set m equal to the box at address 9, at which there is no box and there would instead be garbage.',
+      ],
+      [
+        'int b = *(ptr + 2*ROW_WIDTH+5);',
+        'Correct! This will correctly move the pointer down 2 rows and over 6 columns to get to address 54. An easy way to check here is to plug in the numbers, where you get 1 + 2*24 + 5 = 54, which is the correct address.',
+      ],
+      [
+        'int b = *(ptr + 2+ 5*ROW_WIDTH);',
+        'Not quite, this would move the pointer 6 rows down, which is out of bounds. Note that out of bounds errors are particularly bad with C and C++ because they can cause undefined behavior.',
+      ],
+      [
+        'int b = ptr[2][5];',
+        'Correct! This will correctly move the pointer down 2 rows and over 5 columns to get to address 54. An easy way to check here is to plug in the numbers, where you get 1 + 2*24 + 5 = 54, which is the correct address.',
+      ],
+      [
+        'int b = ptr[3][6];',
+        'Not quite, remember that C++ indexes array starting at 0!',
+      ],
+    ]),
+  },
+  {
+    options: [
+      'int m = *(ptr + 2 + 5);',
+      'int b = *(ptr + 2*ROW_WIDTH+5);',
+      'int b = *(ptr + 2+ 5*ROW_WIDTH);',
+      'int b = ptr[2][5];',
+      'int b = ptr[3][6];',
+    ],
+    answers: ['int b = *(ptr + 2*ROW_WIDTH+5);', 'int b = ptr[2][5];'],
+    answerText: new Map([
+      [
+        'int m = *(ptr + 2 + 5);',
+        'Not quite, this would set m equal to the box at address 9, at which there is no box and there would instead be garbage.',
+      ],
+      [
+        'int b = *(ptr + 2*ROW_WIDTH+5);',
+        'Correct! This will correctly move the pointer down 2 rows and over 6 columns to get to address 54. An easy way to check here is to plug in the numbers, where you get 1 + 2*24 + 5 = 54, which is the correct address.',
+      ],
+      [
+        'int b = *(ptr + 2+ 5*ROW_WIDTH);',
+        'Not quite, this would move the pointer 6 rows down, which is out of bounds. Note that out of bounds errors are particularly bad with C and C++ because they can cause undefined behavior.',
+      ],
+      [
+        'int b = ptr[2][5];',
+        'Correct! This will correctly move the pointer down 2 rows and over 5 columns to get to address 54. An easy way to check here is to plug in the numbers, where you get 1 + 2*24 + 5 = 54, which is the correct address.',
+      ],
+      [
+        'int b = ptr[3][6];',
+        'Not quite, remember that C++ indexes array starting at 0!',
+      ],
+    ]),
+  },
+];
+
+const Exercise4: FC = () => {
+  return (
+    <>
+      <AppWrapper section={HeaderSections.EXERCISE_4}>
+        <div className="page-wrapper">
+          <h1>Exercise 4: Creating Pointers</h1>
+          <p>
+            For this exercise, you will be doing math with pointers to calculate
+            the correct points in memory to access. Pipi wants to do arithmetic
+            with pointers, but is getting confused with when to dereference and
+            when not to! Help Pipi figure out the correct way to do pointer
+            arithmetic!
+          </p>
+          <p>Let&apos;s take our example from Exercise 1 here:</p>
+          <div className="exercise-4-diagram">
+            <img src={Exercise4Diagram1} alt="Exercise 4 Diagram" />
+          </div>
+          <p>
+            As we know, to get to box b, Pipi has to go to address 11 and move 8
+            address spaces to get there from their current position. In order to
+            access box b, pipi must move the pointer to it using pointer
+            arithmetic.
+          </p>
+          <h2>
+            How can we move the pointer to the address of box b and dereference
+            it?
+          </h2>
+
+          <div className="exercise4-div">
+            <RunCode
+              questions={question1}
+              displayText={'Box *ptr; // initialized to point to address 3'}
+            />
+          </div>
+
+          <p>
+            Now that Pipi is at box b, they want to continue searching boxes,
+            but does not know which address to go to! Luckily, the number of
+            addresses that Pipi needs to move to get to the next box is written
+            down inside of box b.
+          </p>
+
+          <h2>
+            How can we move the pointer to the address that box b contains?
+          </h2>
+          <div className="exercise4-div">
+            <RunCode questions={question2} displayText={''} />
+          </div>
+
+          <p>
+            By going from box to box, we can see how it is not too hard to
+            access these boxes in one dimension, but let&apos;s see now how we
+            can access them in multiple dimensions!
+          </p>
+
+          <p>
+            Pipi is back on the top shelf of the warehouse and has multiple rows
+            of boxes to get to! As we know, multi-dimensional arrays are
+            actually the same things as 1-dimensional arrays in memory, it is
+            just how we access them that is different!
+          </p>
+
+          <div className="exercise-4-diagram">
+            <img src={Exercise4Diagram2} alt="Exercise 4 Diagram" />
+          </div>
+
+          <p>
+            Suppose that Pipi wants to access box m on row 3, column 6, which is
+            address 54.
+          </p>
+
+          <h2>
+            How can we move the pointer to the address of box m and dereference
+            it?
+          </h2>
+          <div className="exercise4-div">
+            <RunCode
+              questions={question3}
+              displayText={
+                '{\nconst int ROW_WIDTH = 24;  // common constant declaration of the row width\nfor a multi-dimensional array\nBox *ptr = 1; // the pointer starts at address 1'
+              }
+            />
+          </div>
+          <p>
+            Note that with multi-dimensional arrays, we can only use the bracket
+            syntax multiple times if the array was declared as a
+            multidimensional array and not a single dimensional array because
+            otherwise, the program would not know the width of each row!
+          </p>
+        </div>
+      </AppWrapper>
+      <NavButtons page={17}></NavButtons>
+    </>
+  );
+};
+
+export default Exercise4;

src/styles/Exercise4.scss

@@ -0,0 +1,57 @@
+.terminal {
+  width: 95%;
+}
+
+.exercise-4-diagram {
+  margin: 7vh 0;
+  text-align: center;
+
+  img {
+    width: 65vw;
+  }
+
+  @media only screen and (max-width: 850px) {
+    align-items: center;
+    display: grid;
+    justify-items: center;
+
+    margin: 0;
+  }
+}
+
+.exercise4-div {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 60px;
+}
+
+/* Additional responsive adjustments */
+@media (max-width: 768px) {
+  .exercise4-wrap,
+  .exercise4-pipi,
+  .exercise4-box {
+    flex-direction: column;
+  }
+
+  .exercise4-div {
+    flex-direction: column;
+    margin-bottom: 30px; /* Adjusted for better spacing on smaller screens */
+  }
+}
+
+/* Ensuring terminal and other components are responsive */
+@media (max-width: 850px) {
+  .terminal,
+  .exercise-4-diagram img,
+  .exercise4-div {
+    margin: 0 auto; /* Center align for better aesthetics */
+    width: 90%; /* Adjust width for smaller screens */
+  }
+}
+
+/* Justifying paragraph text across all screens */
+p {
+  text-align: justify;
+  text-align-last: left; /* Adjusts the alignment of the last line in a justified text block */
+}