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
uclaacm · Feb 26, 2024 · bf859b9 · bf859b9
1 parent c711fcb
commit bf859b9
Show file tree

Hide file tree

Showing 20 changed files with 389 additions and 26 deletions.
diff --git a/public/LeftArrow.png b/public/LeftArrow.png
diff --git a/public/LeftArrow.svg b/public/LeftArrow.svg
diff --git a/public/RightArrow.png b/public/RightArrow.png
diff --git a/public/RightArrow.svg b/public/RightArrow.svg
diff --git 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 {
           <Route path="/exercise-2" element={<Exercise2 />} />
           <Route path="/exercise-3" element={<Exercise3 />} />
           <Route path="/exercise-4" element={<Exercise4 />} />
+          <Route path="/exercise-5" element={<Exercise5 />} />
           <Route path="/exercise-6" element={<Exercise6 />} />
           <Route path="/conclusion" element={<Conclusion />} />
           <Route path="*" element={<Error404 />} />

diff --git 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<string, string>;
   }>;
+  check?: boolean;
+  styles?: CSSProperties;
 }
 
-const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
+const RunCode: React.FC<RunCodeProps> = ({
+  displayText,
+  questions,
+  check = false,
+  styles,
+}) => {
   const [selections, setSelections] = useState<string[]>([]);
   const [answers, setAnswers] = useState<Array<boolean | null>>([]);
   const [alert, setAlert] = useState(false);
@@ -53,7 +62,7 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
   };
 
   return (
-    <div className="box-container">
+    <div className="box-container" style={styles}>
       {alert ? (
         <div className={alert ? 'copyalert fadeout' : 'hiddenalert'}>
           <p>Copied to Clipboard</p>
@@ -71,10 +80,8 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
 
       {questions.map((question, index) => {
         return (
-          <div
-            style={{ display: 'flex', flexDirection: 'column', gap: '1.5em' }}
-            key={index}
-          >
+          <div className="code-select-container" key={index}>
+            {question.question && <h3>{question.question}</h3>}
             <div className="code-select" key={index}>
               <SelectCode
                 choices={question.options}
@@ -108,6 +115,7 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
                 viewBox="0 0 26 33"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
+                className="lightbulb-icon"
               >
                 <path
                   d="M21.2731 2.73177C19.7784 1.59722 18.0282 0.784931 16.1501 0.354179C14.2719 -0.0765736 12.3133 -0.114926 10.4171 0.241919C7.89223 0.712625 5.57577 1.86493 3.76161 3.55265C1.94745 5.24036 0.717362 7.3874 0.227426 9.72136C-0.130356 11.4713 -0.0653411 13.2726 0.417832 14.9968C0.901004 16.7209 1.79043 18.3254 3.02268 19.6958C4.16627 20.8868 4.82177 22.4099 4.87535 24.0005V28.5003C4.87535 29.6937 5.38901 30.8382 6.30333 31.6821C7.21766 32.5259 8.45774 33 9.75079 33H16.2514C17.5444 33 18.7845 32.5259 19.6988 31.6821C20.6132 30.8382 21.1268 29.6937 21.1268 28.5003V24.2855C21.1814 22.5294 21.8804 20.8424 23.1095 19.5008C25.263 17.0421 26.2782 13.8983 25.9343 10.7527C25.5904 7.60714 23.9153 4.71389 21.2731 2.70178V2.73177ZM17.8765 28.5003C17.8765 28.8981 17.7053 29.2796 17.4005 29.5609C17.0958 29.8422 16.6824 30.0002 16.2514 30.0002H9.75079C9.31977 30.0002 8.90641 29.8422 8.60164 29.5609C8.29686 29.2796 8.12564 28.8981 8.12564 28.5003V27.0004H17.8765V28.5003ZM20.5905 17.6409C18.9564 19.4297 18.0031 21.6637 17.8765 24.0005H14.6262V19.5008C14.6262 19.103 14.455 18.7215 14.1502 18.4402C13.8455 18.1589 13.4321 18.0009 13.0011 18.0009C12.5701 18.0009 12.1567 18.1589 11.8519 18.4402C11.5472 18.7215 11.3759 19.103 11.3759 19.5008V24.0005H8.12564C8.08276 21.7028 7.16184 19.4929 5.52541 17.7609C4.44573 16.567 3.71969 15.1352 3.4181 13.6052C3.1165 12.0751 3.24963 10.4991 3.80452 9.0307C4.3594 7.56231 5.3171 6.25168 6.58423 5.22662C7.85135 4.20155 9.38467 3.49703 11.0347 3.18175C12.4527 2.91228 13.9179 2.93763 15.324 3.25595C16.7301 3.57427 18.0418 4.17758 19.1637 5.02207C20.2857 5.86656 21.1898 6.93104 21.8105 8.13823C22.4312 9.34542 22.7528 10.665 22.752 12.0012C22.764 14.0559 21.9997 16.0502 20.5905 17.6409Z"
@@ -133,7 +141,7 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
       })}
 
       <div className="run-button" onClick={() => handleClick()}>
-        <p className="run-text">Run</p>
+        <p className="run-text">{check ? 'Check' : 'Run'}</p>
       </div>
     </div>
   );

diff --git 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
@@ -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"
         >
           <img src={LeftArrow} alt="Left Arrow" />
         </button>
@@ -32,7 +32,7 @@ export default function SlideShow(props: SlideShowProps): JSX.Element {
               setImageNumber(imageNumber + 1);
             }
           }}
-          className="right"
+          className="slideshow-right"
         >
           <img src={RightArrow} alt="Right Arrow" />
         </button>

diff --git 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 (
-    <div>
+    <div className="terminal-container">
       {alert ? (
         <div className={alert ? 'copyalert fadeout' : 'hiddenalert'}>
           <p>Copied to Clipboard</p>
@@ -32,7 +33,7 @@ export default function Terminal(props: TerminalProps): JSX.Element {
         <></>
       )}
 
-      <div className="terminal">
+      <div className="terminal" style={props.styles}>
         <CopyToClipboard
           text={props.code}
           onCopy={() => {

diff --git a/src/pages/Conclusion.tsx b/src/pages/Conclusion.tsx
@@ -37,7 +37,7 @@ const Conclusion: FC = () => {
           </div>
         </div>
       </AppWrapper>
-      <NavButtons page={16} noNext={true}></NavButtons>
+      <NavButtons page={20} noNext={true}></NavButtons>
     </>
   );
 };

diff --git a/src/pages/Exercise2.tsx b/src/pages/Exercise2.tsx
@@ -134,7 +134,7 @@ const Exercise2: FC = () => {
           <div className="exercise2-div">
             <RunCode
               questions={questions2}
-              displayText={'string x = “basketball";'}
+              displayText={'string x = "basketball";'}
             />
           </div>
           <p>
@@ -147,7 +147,7 @@ const Exercise2: FC = () => {
           <div className="exercise2-div">
             <RunCode
               questions={questions3}
-              displayText={'string x = “basketball";'}
+              displayText={'string x = "basketball";'}
             />
           </div>