From bf859b9ef30dbb002d719d2eca922a65ac213847 Mon Sep 17 00:00:00 2001 From: Dankco <78634083+Dankco@users.noreply.github.com> Date: Mon, 26 Feb 2024 13:15:04 -0800 Subject: [PATCH] 452 Make Exercise 5 Page (#460) * make first half of exercise 5 * make bottom half of exercise 5 page * fix lint * change css name * update answertext * fix lint * fix merge conflicts * add back in style * fix lint * fix page order * add period to lesson 10 --- public/LeftArrow.png | Bin 4067 -> 0 bytes public/LeftArrow.svg | 18 ++ public/RightArrow.png | Bin 4089 -> 0 bytes public/RightArrow.svg | 18 ++ src/App.tsx | 2 + src/components/RunCode.tsx | 24 ++- src/components/Sidebar.tsx | 4 + src/components/SlideShow.tsx | 8 +- src/components/Terminal.tsx | 7 +- src/pages/Conclusion.tsx | 2 +- src/pages/Exercise2.tsx | 4 +- src/pages/Exercise5.tsx | 277 ++++++++++++++++++++++++++++++ src/pages/Exercise6.tsx | 2 +- src/pages/Lesson10.tsx | 2 +- src/styles/Exercise5.scss | 11 ++ src/styles/RunCode.scss | 12 ++ src/styles/SelectCode.scss | 3 + src/styles/SlideShow.scss | 10 +- src/styles/Terminal/Terminal.scss | 4 + src/types/globalTypes.ts | 7 +- 20 files changed, 389 insertions(+), 26 deletions(-) delete mode 100644 public/LeftArrow.png create mode 100644 public/LeftArrow.svg delete mode 100644 public/RightArrow.png create mode 100644 public/RightArrow.svg create mode 100644 src/pages/Exercise5.tsx create mode 100644 src/styles/Exercise5.scss diff --git a/public/LeftArrow.png b/public/LeftArrow.png deleted file mode 100644 index bf0ce3ed965b60b592d9bed751b95148ff8052a1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4067 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 + + + + + + + + + + + + + + + + + diff --git a/public/RightArrow.png b/public/RightArrow.png deleted file mode 100644 index 399ab7d818529bacc326a7312bbd5255ca5b5305..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4089 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 diff --git a/public/RightArrow.svg b/public/RightArrow.svg new file mode 100644 index 00000000..ce322c5e --- /dev/null +++ b/public/RightArrow.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 9e37671c..890ec605 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import Exercise1 from './pages/Exercise1'; import Exercise2 from './pages/Exercise2'; import Exercise3 from './pages/Exercise3'; import Exercise4 from './pages/Exercise4'; +import Exercise5 from './pages/Exercise5'; import Exercise6 from './pages/Exercise6'; import Home from './pages/Home'; import Lesson1 from './pages/Lesson1'; @@ -45,6 +46,7 @@ function App(): JSX.Element { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/RunCode.tsx b/src/components/RunCode.tsx index 7d9b8e12..af976bf1 100644 --- a/src/components/RunCode.tsx +++ b/src/components/RunCode.tsx @@ -1,5 +1,6 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'; -import React, { useEffect, useState } from 'react'; + +import React, { CSSProperties, useEffect, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { FaRegCopy } from 'react-icons/fa'; import SelectCode from './SelectCode'; @@ -8,14 +9,22 @@ import '../styles/RunCode.scss'; interface RunCodeProps { displayText: string; questions: Array<{ + question?: string; options: string[]; answer?: string; answers?: string[]; answerText: Map; }>; + check?: boolean; + styles?: CSSProperties; } -const RunCode: React.FC = ({ displayText, questions }) => { +const RunCode: React.FC = ({ + displayText, + questions, + check = false, + styles, +}) => { const [selections, setSelections] = useState([]); const [answers, setAnswers] = useState>([]); const [alert, setAlert] = useState(false); @@ -53,7 +62,7 @@ const RunCode: React.FC = ({ displayText, questions }) => { }; return ( -
+
{alert ? (

Copied to Clipboard

@@ -71,10 +80,8 @@ const RunCode: React.FC = ({ displayText, questions }) => { {questions.map((question, index) => { return ( -
+
+ {question.question &&

{question.question}

}
= ({ displayText, questions }) => { viewBox="0 0 26 33" fill="none" xmlns="http://www.w3.org/2000/svg" + className="lightbulb-icon" > = ({ displayText, questions }) => { })}
handleClick()}> -

Run

+

{check ? 'Check' : 'Run'}

); diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 90845a59..6df99e70 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -117,6 +117,10 @@ export default function Sidebar(props: sidebarProps): JSX.Element { name: '4. Creating Pointers', link: PageURLs.EXERCISE_4, }, + { + name: '5. Passing Confusion', + link: PageURLs.EXERCISE_5, + }, { name: '6. Linking Objects with Pointers', link: PageURLs.EXERCISE_6, diff --git a/src/components/SlideShow.tsx b/src/components/SlideShow.tsx index bc804e74..2562fb30 100644 --- a/src/components/SlideShow.tsx +++ b/src/components/SlideShow.tsx @@ -1,9 +1,9 @@ import '../styles/SlideShow.scss'; import { useState } from 'react'; import FilledDot from '../../public/FilledDot.png'; -import LeftArrow from '../../public/LeftArrow.png'; +import LeftArrow from '../../public/LeftArrow.svg'; import RegDot from '../../public/RegDot.png'; -import RightArrow from '../../public/RightArrow.png'; +import RightArrow from '../../public/RightArrow.svg'; export interface SlideShowProps { images: JSX.Element[]; } @@ -19,7 +19,7 @@ export default function SlideShow(props: SlideShowProps): JSX.Element { setImageNumber(imageNumber - 1); } }} - className="left" + className="slideshow-left" > Left Arrow @@ -32,7 +32,7 @@ export default function SlideShow(props: SlideShowProps): JSX.Element { setImageNumber(imageNumber + 1); } }} - className="right" + className="slideshow-right" > Right Arrow diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index e2eef191..08059d24 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { CSSProperties, useState } from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { FaRegCopy } from 'react-icons/fa'; import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; @@ -8,6 +8,7 @@ import '../styles/Terminal/Terminal.scss'; export interface TerminalProps { code: string; + styles?: CSSProperties; } SyntaxHighlighter.registerLanguage('cpp', cpp); @@ -23,7 +24,7 @@ export default function Terminal(props: TerminalProps): JSX.Element { }; return ( -
+
{alert ? (

Copied to Clipboard

@@ -32,7 +33,7 @@ export default function Terminal(props: TerminalProps): JSX.Element { <> )} -
+
{ diff --git a/src/pages/Conclusion.tsx b/src/pages/Conclusion.tsx index 47510d88..025b9f74 100644 --- a/src/pages/Conclusion.tsx +++ b/src/pages/Conclusion.tsx @@ -37,7 +37,7 @@ const Conclusion: FC = () => {
- + ); }; diff --git a/src/pages/Exercise2.tsx b/src/pages/Exercise2.tsx index 2fc8bfc3..24ac729c 100644 --- a/src/pages/Exercise2.tsx +++ b/src/pages/Exercise2.tsx @@ -134,7 +134,7 @@ const Exercise2: FC = () => {

@@ -147,7 +147,7 @@ const Exercise2: FC = () => {

diff --git a/src/pages/Exercise5.tsx b/src/pages/Exercise5.tsx new file mode 100644 index 00000000..5023dca5 --- /dev/null +++ b/src/pages/Exercise5.tsx @@ -0,0 +1,277 @@ +import { FC } from 'react'; +import '../styles/Exercise5.scss'; +import AppWrapper from '../components/AppWrapper'; +import NavButtons from '../components/NavButtons'; +import RunCode from '../components/RunCode'; +import SlideShow from '../components/SlideShow'; +import Terminal from '../components/Terminal'; +import { HeaderSections } from '../types/globalTypes'; + +const code1 = `void dream1(int a){ + a+=1; +}`; +const code2 = `void dream2(int &a){ + a+=2; +}`; +const code3 = `void dream3(int *a){ + *a+=3; +}`; +const code4 = `void dream4(int *a){ + int b = 5; + a = &b; + *a+=4; +}`; + +const questions1 = [ + { + question: 'The input is passed by?', + options: ['value', 'reference', 'pointer'], + answer: 'value', + answerText: new Map([ + [ + 'value', + 'Correct! Nothing special is happening, so it is pass by value.', + ], + ['reference', 'Not quite! There is no & sign before the variable a.'], + ['pointer', 'There is no * sign before the variable a.'], + ]), + }, + { + question: + 'When we call the function dream1 with variable num, will num be changed?', + options: ['No', 'Yes'], + answer: 'No', + answerText: new Map([ + ['Yes', 'Correct! The function will only change the copy of num.'], + [ + 'No', + 'Not quite! When a variable is passed by value, the function does not affect the variable.', + ], + ]), + }, +]; +const questions2 = [ + { + question: 'The input is passed by?', + options: ['value', 'reference', 'pointer'], + answer: 'reference', + answerText: new Map([ + [ + 'value', + 'Correct! The & in the function parameter signals pass by reference.', + ], + ['reference', 'Not quite! There is an & sign before the variable a.'], + ['pointer', 'Not quite! There is an & sign before the variable a.'], + ]), + }, + { + question: + 'When we call the function dream2 with variable num, will num be changed?', + options: ['No', 'Yes'], + answer: 'Yes', + answerText: new Map([ + [ + 'Yes', + 'Correct! The change made to "a" inside the function is reflected in the variable num.', + ], + [ + 'No', + 'Not quite! The variable is passed by reference, so the function can modify it.', + ], + ]), + }, +]; +const questions3 = [ + { + question: 'The input is passed by?', + options: ['value', 'reference', 'pointer'], + answer: 'pointer', + answerText: new Map([ + ['value', 'Not quite! There is * in the function parameter.'], + ['reference', 'Not quite! There is * in the function parameter.'], + [ + 'pointer', + 'Correct! The * in the function parameter signals pass by pointer.', + ], + ]), + }, + { + question: + 'When we call the function dream1 with variable num, will num be changed?', + options: ['No', 'Yes'], + answer: 'Yes', + answerText: new Map([ + [ + 'No', + 'Not quite! What pointer “a” points to, which is num, is being changed.', + ], + [ + 'Yes', + 'Correct! What pointer “a” points to, which is num, is being changed.', + ], + ]), + }, +]; +const questions4 = [ + { + question: 'The input is passed by?', + options: ['value', 'reference', 'pointer'], + answer: 'pointer', + answerText: new Map([ + ['value', 'Not quite! There is * in the function parameter.'], + ['reference', 'Not quite! There is * in the function parameter.'], + [ + 'pointer', + 'Correct! The * in the function parameter signals pass by pointer.', + ], + ]), + }, + { + question: + 'When we call the function dream4 with variable num, will num be changed?', + options: ['No', 'Yes'], + answer: 'No', + answerText: new Map([ + [ + 'No', + 'Correct! When “a” is dereferenced, it points to b instead of “num”, so the change of value has nothing to do with num.', + ], + [ + 'Yes', + 'Not quite! Although “a” is dereferenced, it does not point to “num” anymore.', + ], + ]), + }, +]; +const questions5 = [ + { + question: 'After Pipi runs the main function, what is the value of a?', + options: ['20', '80'], + answer: '80', + answerText: new Map([ + [ + '80', + `Correct! The "&" before the "num" variable in the "quadruple" function + definition shows that the argument is passed by reference. + The change made to num inside the function is reflected in the variable a.`, + ], + [ + '20', + `Not quite! The "&" before the "num" variable in the "quadruple" + function definition shows that the argument is passed by reference.`, + ], + ]), + }, + { + question: 'After Pipi runs the main function, what is the value of b?', + options: ['20', '40'], + answer: '20', + answerText: new Map([ + [ + '20', + `Correct! The function double takes its parameter by value, + meaning it operates on a copy of b. Changes within the double + function do not affect the original value of b.`, + ], + [ + '40', + `Not quite! Note that this is not pass by reference or pass by pointer. + We are passing b normally, the function makes a copy of b, and the copy + is being modified.`, + ], + ]), + }, + { + question: 'After Pipi runs the main function, what is the value of b?', + options: ['20', '60'], + answer: '60', + answerText: new Map([ + [ + '60', + `Correct! We pass a pointer to the triple function. + The function makes a copy of that pointer, dereferences it, + and modifies the value it points to.`, + ], + [ + '20', + `Not Quite! The function takes a pointer and modifies the value the + pointer points to by dereferencing it.`, + ], + ]), + }, +]; + +const codeblock = ` +#include + +void quadruple (int &num){ + num *= 4; +} + +void double(int x) { + x *= 2; +} + +void triple (int* money){ + *money *= 3; +} + + +int main() { + int a = 20; + int b = 20; + int c = 20 + quadruple(a); + double (b); + triple(&c); +} +`; + +const Exercise5: FC = () => { + const passingCode = []; + passingCode.push( + + ); + passingCode.push( + + ); + passingCode.push( + + ); + passingCode.push( + + ); + + return ( + <> + +
+

Exercise 5: Passing Confusion

+

+ For this exercise, you will be passing parameters by value, + reference, and pointer and examining the difference between these. + Pipi is looking at a bunch of code and doesn't understand what + is going on! Help Pipi find the correct solution. +

+

+ Pipi now wants to replace the basketball with a soccer ball. What is + the corresponding code to do this? +

+ +
+ + +
+
+ + + + ); +}; + +export default Exercise5; diff --git a/src/pages/Exercise6.tsx b/src/pages/Exercise6.tsx index 59b47a15..e017d624 100644 --- a/src/pages/Exercise6.tsx +++ b/src/pages/Exercise6.tsx @@ -204,7 +204,7 @@ const Exercise6: FC = () => {

- + ); }; diff --git a/src/pages/Lesson10.tsx b/src/pages/Lesson10.tsx index 26bb4d83..db68bbcd 100644 --- a/src/pages/Lesson10.tsx +++ b/src/pages/Lesson10.tsx @@ -41,7 +41,7 @@ const Lesson10: FC = () => {

Dynamic Memory Allocation

Let’s take a look at another common application of pointers: dynamic - memory allocation + memory allocation.

Allocating memory is just saying to the computer that you want to diff --git a/src/styles/Exercise5.scss b/src/styles/Exercise5.scss new file mode 100644 index 00000000..f05fd9e7 --- /dev/null +++ b/src/styles/Exercise5.scss @@ -0,0 +1,11 @@ +.exercise5-div { + align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + + @media screen and (max-width: 850px) { + flex-direction: column; + } +} diff --git a/src/styles/RunCode.scss b/src/styles/RunCode.scss index f4e89e30..7bd53bb8 100644 --- a/src/styles/RunCode.scss +++ b/src/styles/RunCode.scss @@ -13,6 +13,12 @@ } } +.code-select-container { + display: flex; + flex-direction: column; + gap: 1.5em; +} + .code-select { align-items: center; display: flex; @@ -54,3 +60,9 @@ position: static; // Make button static for small screens } } + +// fix size of svg to be min of 20 px +.lightbulb-icon { + height: auto; + min-width: 20px; +} diff --git a/src/styles/SelectCode.scss b/src/styles/SelectCode.scss index fe7b6e61..a67ef484 100644 --- a/src/styles/SelectCode.scss +++ b/src/styles/SelectCode.scss @@ -1,6 +1,9 @@ +@import './global'; + .select-box { border: 1px; border-color: #cfcfcf; + font-family: $niramit; font-size: 1.6vw; height: fit-content; width: fit-content; diff --git a/src/styles/SlideShow.scss b/src/styles/SlideShow.scss index ca4497a3..26098b3b 100644 --- a/src/styles/SlideShow.scss +++ b/src/styles/SlideShow.scss @@ -1,8 +1,8 @@ @import './global'; // Variables //======================================= -$side-margins: 0%; -$bottom-margin: 35%; +$side-margins: -10%; +$bottom-margin: 45%; $top-padding: 7vh; $bottom-padding: 10vh; $img-height: 400px; @@ -22,24 +22,26 @@ $img-height: 400px; } } -.left { +.slideshow-left { background: none; border: 0; bottom: $bottom-margin; left: $side-margins; position: absolute; + z-index: 1; &:hover { cursor: pointer; } } -.right { +.slideshow-right { background: none; border: 0; bottom: $bottom-margin; position: absolute; right: $side-margins; + z-index: 1; &:hover { cursor: pointer; diff --git a/src/styles/Terminal/Terminal.scss b/src/styles/Terminal/Terminal.scss index 47612a27..cc45797b 100644 --- a/src/styles/Terminal/Terminal.scss +++ b/src/styles/Terminal/Terminal.scss @@ -5,6 +5,10 @@ width: 80%; } +.terminal-container { + width: 100%; +} + .copybutton { position: absolute; right: 14px; diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts index dcdeb88d..3082776b 100644 --- a/src/types/globalTypes.ts +++ b/src/types/globalTypes.ts @@ -13,7 +13,10 @@ export enum HeaderSections { LESSON_2 = 'Lesson 2', LESSON_3 = 'Lesson 3', EXERCISE_1 = 'Exercise 1', + EXERCISE_2 = 'Exercise 2', EXERCISE_3 = 'Exercise 3', + EXERCISE_4 = 'Exercise 4', + EXERCISE_5 = 'Exercise 5', EXERCISE_6 = 'Exercise 6', LESSON_4 = 'Lesson 4', LESSON_5 = 'Lesson 5', @@ -22,8 +25,6 @@ export enum HeaderSections { LESSON_8 = 'Lesson 8', LESSON_9 = 'Lesson 9', LESSON_10 = 'Lesson 10', - EXERCISE_2 = 'Exercise 2', - EXERCISE_4 = 'Exercise 4', CONCLUSION = 'Conclusion', } @@ -46,6 +47,7 @@ export enum PageURLs { EXERCISE_2 = '/exercise-2', EXERCISE_3 = '/exercise-3', EXERCISE_4 = '/exercise-4', + EXERCISE_5 = '/exercise-5', EXERCISE_6 = '/exercise-6', CONCLUSION = '/conclusion', } @@ -70,6 +72,7 @@ export enum PageOrder { '/exercise-2', '/exercise-3', '/exercise-4', + '/exercise-5', '/exercise-6', '/conclusion', }