diff --git a/public/LeftArrow.png b/public/LeftArrow.png deleted file mode 100644 index bf0ce3ed..00000000 Binary files a/public/LeftArrow.png and /dev/null differ diff --git a/public/LeftArrow.svg b/public/LeftArrow.svg new file mode 100644 index 00000000..76b4d1b8 --- /dev/null +++ b/public/LeftArrow.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/RightArrow.png b/public/RightArrow.png deleted file mode 100644 index 399ab7d8..00000000 Binary files a/public/RightArrow.png and /dev/null differ 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', }