From 5c09e8ea10533ec260db8ea4af11414d507e33d8 Mon Sep 17 00:00:00 2001 From: Chengheng Li Date: Tue, 20 Feb 2024 18:46:48 -0800 Subject: [PATCH 1/7] add draft --- public/Component 12.svg | 314 ++++++++++++++++++++++++++++++++++++++ public/Frame 265.svg | 133 ++++++++++++++++ src/App.tsx | 2 + src/pages/Exercise4.tsx | 132 ++++++++++++++++ src/styles/Exercise4.scss | 32 ++++ src/types/globalTypes.ts | 3 + 6 files changed, 616 insertions(+) create mode 100644 public/Component 12.svg create mode 100644 public/Frame 265.svg create mode 100644 src/pages/Exercise4.tsx create mode 100644 src/styles/Exercise4.scss diff --git a/public/Component 12.svg b/public/Component 12.svg new file mode 100644 index 00000000..601e6b75 --- /dev/null +++ b/public/Component 12.svg @@ -0,0 +1,314 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Frame 265.svg b/public/Frame 265.svg new file mode 100644 index 00000000..a7b02fd9 --- /dev/null +++ b/public/Frame 265.svg @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index fff83b15..0cb73184 100644 --- a/src/App.tsx +++ b/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 Home from './pages/Home'; import Lesson1 from './pages/Lesson1'; import Lesson10 from './pages/Lesson10'; @@ -42,6 +43,7 @@ function App(): JSX.Element { } /> } /> } /> + } /> } /> } /> diff --git a/src/pages/Exercise4.tsx b/src/pages/Exercise4.tsx new file mode 100644 index 00000000..05f5ebdf --- /dev/null +++ b/src/pages/Exercise4.tsx @@ -0,0 +1,132 @@ +import { FC, useState, useEffect } from 'react'; +import '../styles/Exercise4.scss'; +import Exercise4Diagram2 from '../../public/Component 12.svg'; +import Exercise4Diagram1 from '../../public/Frame 265.svg'; +import Pipi from '../../public/Pipi.svg'; +import AppWrapper from '../components/AppWrapper'; +import Box from '../components/Box'; +import Grid from '../components/Grid'; +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 Exercise4: FC = () => { + const [confetti, setConfetti] = useState(false); + const [leftOffset, setLeftOffset] = useState(0); + const [topOffset, setTopOffset] = useState(0); + 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 fixPipiPosition = () => { + const box = document.getElementsByClassName('exercise3-wrap')[0]; + const rect = box.getBoundingClientRect(); + setLeftOffset(rect.left + window.scrollX); + setTopOffset(rect.top + window.scrollY + 15); + }; + + useEffect(() => { + fixPipiPosition(); + window.addEventListener('resize', fixPipiPosition); + }, []); + + return ( + <> + +
+

Exercise 4: Creating Pointers

+

+ 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! +

+

+ Let’s take our example from Exercise 1 here: +

+
+ Exercise 4 Diagram +
+

+ 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. +

+

+ How can we move the pointer to the address of box b and dereference it? +

+ + +
+
+
+
+

+ 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. +

+ +

How can we move the pointer to the address that box b contains?

+
+ +
+ +

+ By going from box to box, we can see how it is not too hard to access + these boxes in one dimension, but let’s see now how we can access them + in multiple dimensions! +

+ +

+ 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! +

+ +
+ Exercise 4 Diagram +
+ + +

+ Suppose that Pipi wants to access box m on row 3, column 6, which is address 54. +

+ +

How can we move the pointer to the address of box m and dereference it?

+ +

+ 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! +

+
+ + + + + ); +}; + +export default Exercise4; diff --git a/src/styles/Exercise4.scss b/src/styles/Exercise4.scss new file mode 100644 index 00000000..242d839c --- /dev/null +++ b/src/styles/Exercise4.scss @@ -0,0 +1,32 @@ +.exercise3-wrap { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + margin-top: 2.5em; + } + + .exercise3-pipi { + position: absolute; + z-index: 2; + } + + .exercise3-box { + margin-top: 150px; + } + + .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; + } + } \ No newline at end of file diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts index 4cee054e..2044ca4a 100644 --- a/src/types/globalTypes.ts +++ b/src/types/globalTypes.ts @@ -22,6 +22,7 @@ export enum HeaderSections { LESSON_9 = 'Lesson 9', LESSON_10 = 'Lesson 10', EXERCISE_2 = 'Exercise 2', + EXERCISE_4 = 'Exercise 4', CONCLUSION = 'Conclusion', } @@ -43,6 +44,7 @@ export enum PageURLs { EXERCISE_1 = '/exercise-1', EXERCISE_2 = '/exercise-2', EXERCISE_3 = '/exercise-3', + EXERCISE_4 = '/exercise-4', CONCLUSION = '/conclusion', } @@ -65,5 +67,6 @@ export enum PageOrder { '/exercise-1', '/exercise-2', '/exercise-3', + '/exercise-4', '/conclusion', } From d1b46d446093fbed934a921aa64d7eefe03a6573 Mon Sep 17 00:00:00 2001 From: Chengheng Li Date: Tue, 20 Feb 2024 18:48:52 -0800 Subject: [PATCH 2/7] add draft --- src/pages/Exercise4.tsx | 84 ++++++++++++++++----------------------- src/styles/Exercise4.scss | 58 +++++++++++++-------------- 2 files changed, 63 insertions(+), 79 deletions(-) diff --git a/src/pages/Exercise4.tsx b/src/pages/Exercise4.tsx index 05f5ebdf..e806cb64 100644 --- a/src/pages/Exercise4.tsx +++ b/src/pages/Exercise4.tsx @@ -1,11 +1,9 @@ -import { FC, useState, useEffect } from 'react'; +import { FC } from 'react'; import '../styles/Exercise4.scss'; import Exercise4Diagram2 from '../../public/Component 12.svg'; import Exercise4Diagram1 from '../../public/Frame 265.svg'; -import Pipi from '../../public/Pipi.svg'; import AppWrapper from '../components/AppWrapper'; -import Box from '../components/Box'; -import Grid from '../components/Grid'; + import NavButtons from '../components/NavButtons'; import RunCode from '../components/RunCode'; import { HeaderSections } from '../types/globalTypes'; @@ -26,54 +24,35 @@ const question = [ ]; const Exercise4: FC = () => { - const [confetti, setConfetti] = useState(false); - const [leftOffset, setLeftOffset] = useState(0); - const [topOffset, setTopOffset] = useState(0); - 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 fixPipiPosition = () => { - const box = document.getElementsByClassName('exercise3-wrap')[0]; - const rect = box.getBoundingClientRect(); - setLeftOffset(rect.left + window.scrollX); - setTopOffset(rect.top + window.scrollY + 15); - }; - - useEffect(() => { - fixPipiPosition(); - window.addEventListener('resize', fixPipiPosition); - }, []); - return ( <>

Exercise 4: Creating Pointers

- 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! -

-

- Let’s take our example from Exercise 1 here: + 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!

+

Let’s take our example from Exercise 1 here:

Exercise 4 Diagram

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. + 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.

- How can we move the pointer to the address of box b and dereference it? + How can we move the pointer to the address of box b and dereference + it?

-
-
-
+

Now that Pipi is at box b, they want to continue searching boxes, @@ -82,7 +61,9 @@ const Exercise4: FC = () => { down inside of box b.

-

How can we move the pointer to the address that box b contains?

+

+ How can we move the pointer to the address that box b contains? +

{

- By going from box to box, we can see how it is not too hard to access - these boxes in one dimension, but let’s see now how we can access them - in multiple dimensions! + By going from box to box, we can see how it is not too hard to + access these boxes in one dimension, but let’s see now how we can + access them in multiple dimensions!

- 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! + 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!

Exercise 4 Diagram
-

- Suppose that Pipi wants to access box m on row 3, column 6, which is address 54. + Suppose that Pipi wants to access box m on row 3, column 6, which is + address 54.

-

How can we move the pointer to the address of box m and dereference it?

+

+ How can we move the pointer to the address of box m and dereference + it? +

- 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! + 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!

- diff --git a/src/styles/Exercise4.scss b/src/styles/Exercise4.scss index 242d839c..c99be0f5 100644 --- a/src/styles/Exercise4.scss +++ b/src/styles/Exercise4.scss @@ -1,32 +1,32 @@ .exercise3-wrap { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - margin-top: 2.5em; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + margin-top: 2.5em; +} + +.exercise3-pipi { + position: absolute; + z-index: 2; +} + +.exercise3-box { + margin-top: 150px; +} + +.exercise-4-diagram { + margin: 7vh 0; + text-align: center; + + img { + width: 65vw; } - - .exercise3-pipi { - position: absolute; - z-index: 2; + + @media only screen and (max-width: 850px) { + align-items: center; + display: grid; + justify-items: center; + + margin: 0; } - - .exercise3-box { - margin-top: 150px; - } - - .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; - } - } \ No newline at end of file +} From f5290a8869d239cb2264aa052f9646d51c9f185a Mon Sep 17 00:00:00 2001 From: Chengheng Li Date: Tue, 20 Feb 2024 20:11:01 -0800 Subject: [PATCH 3/7] add final version --- src/components/RunCode.tsx | 8 +++- src/pages/Exercise4.tsx | 78 ++++++++++++++++++++++++++++++-------- src/styles/Exercise4.scss | 53 +++++++++++++++++++------- 3 files changed, 109 insertions(+), 30 deletions(-) diff --git a/src/components/RunCode.tsx b/src/components/RunCode.tsx index 5bd7d2d2..ea3b71d7 100644 --- a/src/components/RunCode.tsx +++ b/src/components/RunCode.tsx @@ -41,7 +41,13 @@ const RunCode: React.FC = ({ displayText, questions }) => { return (
-

{displayText}

+ {displayText != '' && ( +

+ 

+            {displayText}
+
+

+ )} {questions.map((question, index) => { return ( diff --git a/src/pages/Exercise4.tsx b/src/pages/Exercise4.tsx index e806cb64..8dcc119d 100644 --- a/src/pages/Exercise4.tsx +++ b/src/pages/Exercise4.tsx @@ -8,7 +8,49 @@ import NavButtons from '../components/NavButtons'; import RunCode from '../components/RunCode'; import { HeaderSections } from '../types/globalTypes'; -const question = [ +const question1 = [ + { + 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', + }, + { + 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 question2 = [ + { + 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 question3 = [ { options: [ '*basketballPtr = soccerBall;', @@ -36,7 +78,7 @@ const Exercise4: FC = () => { when not to! Help Pipi figure out the correct way to do pointer arithmetic!

-

Let’s take our example from Exercise 1 here:

+

Let's take our example from Exercise 1 here:

Exercise 4 Diagram
@@ -51,9 +93,13 @@ const Exercise4: FC = () => { it? -
-
+
+
+

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 @@ -64,19 +110,14 @@ const Exercise4: FC = () => {

How can we move the pointer to the address that box b contains?

-
- +
+

By going from box to box, we can see how it is not too hard to - access these boxes in one dimension, but let’s see now how we can - access them in multiple dimensions! + access these boxes in one dimension, but let's see now how we + can access them in multiple dimensions!

@@ -99,7 +140,14 @@ const Exercise4: FC = () => { How can we move the pointer to the address of box m and dereference it? - +

+ +

Note that with multi-dimensional arrays, we can only use the bracket syntax multiple times if the array was declared as a @@ -108,7 +156,7 @@ const Exercise4: FC = () => {

- + ); }; diff --git a/src/styles/Exercise4.scss b/src/styles/Exercise4.scss index c99be0f5..68d0b01d 100644 --- a/src/styles/Exercise4.scss +++ b/src/styles/Exercise4.scss @@ -1,17 +1,5 @@ -.exercise3-wrap { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - margin-top: 2.5em; -} - -.exercise3-pipi { - position: absolute; - z-index: 2; -} - -.exercise3-box { - margin-top: 150px; +.terminal { + width: 95%; } .exercise-4-diagram { @@ -30,3 +18,40 @@ 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 */ +} From 66a1ef0c7121011dc4506a2f9e1365987d6bb044 Mon Sep 17 00:00:00 2001 From: Chengheng Li Date: Tue, 20 Feb 2024 20:17:14 -0800 Subject: [PATCH 4/7] add exercise to index --- src/components/Sidebar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index b7aae7c1..e39ae712 100644 --- a/src/components/Sidebar.tsx +++ b/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; From 80a2aec7e8fcabc0848c50b40da5a2dcda537111 Mon Sep 17 00:00:00 2001 From: Chengheng Li Date: Sun, 25 Feb 2024 14:41:30 -0800 Subject: [PATCH 5/7] add exercises questions --- src/App.tsx | 2 + src/pages/Exercise4.tsx | 125 ++++++++++++++++++++++++++++------------ 2 files changed, 89 insertions(+), 38 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 28c54339..9e37671c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,6 +44,8 @@ function App(): JSX.Element { } /> } /> } /> + } /> + } /> } /> } /> diff --git a/src/pages/Exercise4.tsx b/src/pages/Exercise4.tsx index 8dcc119d..41a8f713 100644 --- a/src/pages/Exercise4.tsx +++ b/src/pages/Exercise4.tsx @@ -11,58 +11,107 @@ import { HeaderSections } from '../types/globalTypes'; const question1 = [ { options: [ - '*basketballPtr = soccerBall;', - 'basketballPtr = soccerBall;', - 'basketballPtr = &soccerBall;', - '&basketballPtr = soccerBall;', + 'int b = ptr + 8;', + 'int b = *ptr + 8;', + 'int b = *(ptr + 8);', + 'int b = ptr[8];', + 'int b = *ptr[8];', ], - answer: '*basketballPtr = soccerBall;', - correctText: - 'Correct! This correctly dereferences the pointer and sets the basketball to a soccer ball.', - wrongText: 'Not quite', - }, + 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: [ - '*basketballPtr = soccerBall;', - 'basketballPtr = soccerBall;', - 'basketballPtr = &soccerBall;', - '&basketballPtr = soccerBall;', + '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];', ], - answer: '*basketballPtr = soccerBall;', - correctText: - 'Correct! This correctly dereferences the pointer and sets the basketball to a soccer ball.', - wrongText: 'Not quite', + 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 = [ + 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: [ - '*basketballPtr = soccerBall;', - 'basketballPtr = soccerBall;', - 'basketballPtr = &soccerBall;', - '&basketballPtr = soccerBall;', + '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];', ], - answer: '*basketballPtr = soccerBall;', - correctText: - 'Correct! This correctly dereferences the pointer and sets the basketball to a soccer ball.', - wrongText: 'Not quite', + 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 question3 = [ { options: [ - '*basketballPtr = soccerBall;', - 'basketballPtr = soccerBall;', - 'basketballPtr = &soccerBall;', - '&basketballPtr = soccerBall;', + '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];', ], - answer: '*basketballPtr = soccerBall;', - correctText: - 'Correct! This correctly dereferences the pointer and sets the basketball to a soccer ball.', - wrongText: 'Not quite', - }, + 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 = () => { From 8ceb1b8f10aee0b9b9cce78e672b89b9e863ad32 Mon Sep 17 00:00:00 2001 From: Chengheng Li Date: Sun, 25 Feb 2024 14:45:49 -0800 Subject: [PATCH 6/7] lint fix --- src/pages/Exercise4.tsx | 157 +++++++++++++++++++++++++++------------- 1 file changed, 105 insertions(+), 52 deletions(-) diff --git a/src/pages/Exercise4.tsx b/src/pages/Exercise4.tsx index 41a8f713..4e9bd449 100644 --- a/src/pages/Exercise4.tsx +++ b/src/pages/Exercise4.tsx @@ -17,18 +17,30 @@ const question1 = [ 'int b = ptr[8];', 'int b = *ptr[8];', ], - answers: [ - '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.'] + [ + '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;', @@ -37,39 +49,56 @@ const question1 = [ 'int b = ptr[8];', 'int b = *ptr[8];', ], - answers: [ - '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.'] + [ + '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: [ +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;', - '*ptr += ptr;', + 'Not quite, this ends up actually assigning box b to hold the pointer to box b!', ], - answers: [ - 'ptr+= *ptr;', + [ + '*ptr += ptr;', + 'Not quite, this will actually set the address inside box b to the address of the next box!', ], - 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 = [ { @@ -80,16 +109,28 @@ const question3 = [ 'int b = ptr[2][5];', 'int b = ptr[3][6];', ], - answers: [ - 'int b = *(ptr + 2*ROW_WIDTH+5);', - 'int b = ptr[2][5];', - ], + 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!'] + [ + '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!', + ], ]), }, { @@ -100,18 +141,30 @@ const question3 = [ 'int b = ptr[2][5];', 'int b = ptr[3][6];', ], - answers: [ - 'int b = *(ptr + 2*ROW_WIDTH+5);', - 'int b = ptr[2][5];', - ], + 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!'] + [ + '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 = () => { From ea5e612465fe9cb3ec30580e3ab513c7e731cc76 Mon Sep 17 00:00:00 2001 From: Daniel Kao Date: Sun, 25 Feb 2024 19:47:04 -0800 Subject: [PATCH 7/7] rename files --- public/{Group 228.svg => ConclusionDiagram.svg} | 0 public/{Frame 265.svg => Exercise4Diagram1.svg} | 0 public/{Component 12.svg => Exercise4Diagram2.svg} | 0 src/components/Sidebar.tsx | 2 +- src/pages/Conclusion.tsx | 4 ++-- src/pages/Exercise4.tsx | 4 ++-- 6 files changed, 5 insertions(+), 5 deletions(-) rename public/{Group 228.svg => ConclusionDiagram.svg} (100%) rename public/{Frame 265.svg => Exercise4Diagram1.svg} (100%) rename public/{Component 12.svg => Exercise4Diagram2.svg} (100%) diff --git a/public/Group 228.svg b/public/ConclusionDiagram.svg similarity index 100% rename from public/Group 228.svg rename to public/ConclusionDiagram.svg diff --git a/public/Frame 265.svg b/public/Exercise4Diagram1.svg similarity index 100% rename from public/Frame 265.svg rename to public/Exercise4Diagram1.svg diff --git a/public/Component 12.svg b/public/Exercise4Diagram2.svg similarity index 100% rename from public/Component 12.svg rename to public/Exercise4Diagram2.svg diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index e39ae712..7a710ee4 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -114,7 +114,7 @@ export default function Sidebar(props: sidebarProps): JSX.Element { link: PageURLs.EXERCISE_3, }, { - name: '4: Creating Pointers', + name: '4. Creating Pointers', link: PageURLs.EXERCISE_4, }, ]; diff --git a/src/pages/Conclusion.tsx b/src/pages/Conclusion.tsx index c5cb6024..47510d88 100644 --- a/src/pages/Conclusion.tsx +++ b/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 = () => {

- Diagram + Diagram
diff --git a/src/pages/Exercise4.tsx b/src/pages/Exercise4.tsx index 4e9bd449..1850be46 100644 --- a/src/pages/Exercise4.tsx +++ b/src/pages/Exercise4.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import '../styles/Exercise4.scss'; -import Exercise4Diagram2 from '../../public/Component 12.svg'; -import Exercise4Diagram1 from '../../public/Frame 265.svg'; +import Exercise4Diagram2 from '../../public/Exercise4Diagram2.svg'; +import Exercise4Diagram1 from '../../public/Exercise4Diagram1.svg'; import AppWrapper from '../components/AppWrapper'; import NavButtons from '../components/NavButtons';