add copy to clipboard to runcode component and finish rest of exercise 6

package.json

@@ -13,8 +13,8 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.3",
     "@mui/material": "^5.14.16",
-    "@types/react": "^18.2.32",
-    "@types/react-dom": "^18.2.15",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
     "@types/react-syntax-highlighter": "^15.5.10",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
@@ -29,24 +29,24 @@
     "stylelint-config-prettier": "^9.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.4",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.11",
     "@types/react-copy-to-clipboard": "^5.0.5",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.9.0",
     "babel-loader": "^9.1.2",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.26.0",
     "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.33.2",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.10.0",
     "eslint": "^8.53.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
@@ -62,7 +62,7 @@
     "stylelint-config-sass-guidelines": "^9.0.0",
     "stylelint-config-standard": "^29.0.0",
     "ts-loader": "^9.5.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.85.1",
     "webpack-cli": "^5.1.4",

src/components/RunCode.tsx

@@ -3,20 +3,30 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import React, { useEffect, useState } from 'react';
 import SelectCode from './SelectCode';
 import '../styles/RunCode.scss';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { FaRegCopy } from 'react-icons/fa';
 
 interface RunCodeProps {
   displayText: string;
   questions: Array<{
     options: string[];
-    answer: string;
-    correctText: string;
-    wrongText: string;
+    answer?: string;
+    answers?: string[];
+    answerText: Map<string, string>;
   }>;
 }
 
 const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
   const [selections, setSelections] = useState<string[]>([]);
   const [answers, setAnswers] = useState<Array<boolean | null>>([]);
+  const [alert, setAlert] = useState(false);
+
+  const alertFunction = () => {
+    setAlert(true);
+    setTimeout(() => {
+      setAlert(false);
+    }, 1500);
+  };
 
   useEffect(() => {
     if (selections.length == 0) {
@@ -34,13 +44,24 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
   const handleClick = () => {
     const temp = answers;
     questions.forEach((question, index) => {
-      temp[index] = selections[index] == question.answer;
+      if (question.answer !== undefined) {
+        temp[index] = selections[index] == question.answer;
+      } else if (question.answers !== undefined) {
+        temp[index] = question.answers.includes(selections[index]);
+      }
     });
     setAnswers([...temp]);
   };
 
   return (
     <div className="box-container">
+      {alert ? (
+        <div className={alert ? 'copyalert fadeout' : 'hiddenalert'}>
+          <p>Copied to Clipboard</p>
+        </div>
+      ) : (
+        <></>
+      )}
       <p className="code">{displayText}</p>
 
       {questions.map((question, index) => {
@@ -89,8 +110,18 @@ const RunCode: React.FC<RunCodeProps> = ({ displayText, questions }) => {
                 />
               </svg>
               <p style={{ color: answers[index] ? '#31A74B' : '#a80000' }}>
-                {answers[index] ? question.correctText : question.wrongText}
+                {question.answerText.get(selections[index])}
               </p>
+              <div style = {{display: answers[index] ? 'flex' : 'none'}}>
+                <CopyToClipboard
+                  text={question.answer}
+                  onCopy={() => {
+                    alertFunction();
+                  }}
+                >
+                  <FaRegCopy className="copybutton" />
+                </CopyToClipboard>
+              </div>
             </div>
           </div>
         );

src/pages/Exercise2.tsx

@@ -16,9 +16,24 @@ const questions1 = [
       'Basketball *ptr = *basketball;',
     ],
     answer: 'Basketball *ptr = &basketball;',
-    correctText:
-      'Correct! The * operator is used to declare a pointer before the equal sign and the & operator is used to get the address of the variable after the equal sign.',
-    wrongText: 'Not quite.',
+    answerText: new Map([
+      [
+        'Basketball *ptr = &basketball;',
+        'Correct! The * operator is used to declare a pointer before the equal sign and the & operator is used to get the address of the variable after the equal sign.',
+      ],
+      [
+        'Basketball &ptr = &basketball;',
+        'Not quite. Remember that the & operator is used to declare a reference before the equal sign.',
+      ],
+      [
+        'Basketball &ptr = *basketball;',
+        'Not quite. Remember that the & operator is used to declare a reference before the equal sign and that the * operator after the equal sign dereferences a variable, meaning that you would try to find the value at memory address 3!',
+      ],
+      [
+        'Basketball *ptr = *basketball;',
+        'Not quite. Remember that the * operator after the equal sign dereferences a variable, meaning that you would try to find the value at memory address 3!',
+      ],
+    ]),
   },
 ];
 
@@ -30,10 +45,25 @@ const questions2 = [
       'string *ptr = *x;',
       'char *ptr = &x;',
     ],
-    answer: 'string *ptr = &x;',
-    correctText:
-      'Correct! You can actually declare it as either a char or string pointer.',
-    wrongText: 'Not quite.',
+    answers: ['string *ptr = &x;', 'char *ptr = &x;'],
+    answerText: new Map([
+      [
+        'char &ptr = *x;',
+        'Not quite. Remember that the & operator is used to declare a reference before the equal sign and that the * operator after the equal sign dereferences a variable, meaning that you would try to find the value at memory address 3!',
+      ],
+      [
+        'string *ptr = &x;',
+        'Correct! You can actually declare it as either a char or string pointer.',
+      ],
+      [
+        'string *ptr = *x;',
+        'Not quite. Remember that the * operator after the equal sign dereferences a variable, meaning that you would try to find the value at memory address 3!',
+      ],
+      [
+        'char *ptr = &x;',
+        'Correct! You can actually declare it as either a char or string pointer.',
+      ],
+    ]),
   },
 ];
 
@@ -46,9 +76,24 @@ const questions3 = [
       'Basketball *basketballPtrPtr = basketballPtr;',
     ],
     answer: 'Basketball **basketballPtrPtr = &basketballPtr;',
-    correctText:
-      'Correct! You want to take the address of the pointer itself and assign that to a double pointer. Note the double * notation here indicating a double pointer.',
-    wrongText: 'Not quite.',
+    answerText: new Map([
+      [
+        'Basketball **basketballPtrPtr = basketballPtr;',
+        'Not quite, this tries to assign a single pointer to a double pointer, which will result in a type error',
+      ],
+      [
+        'Basketball **basketballPtrPtr = &basketballPtr;',
+        'Correct! You want to take the address of the pointer itself and assign that to a double pointer. Note the double * notation here indicating a double pointer.',
+      ],
+      [
+        'Basketball  *basketballPtrPtr = *basketballPtr;',
+        'Not quite, this is actually invalid because it tries to assign a basketball to a basketball pointer. Remember that the * operator dereferences the pointer on the right hand side of the equal sign.',
+      ],
+      [
+        'Basketball *basketballPtrPtr = basketballPtr;',
+        'Not quite, this ends up creating another pointer that just points directly to the basketball, since it copies the pointer',
+      ],
+    ]),
   },
 ];
 

src/pages/Exercise3.tsx

@@ -18,9 +18,24 @@ const question = [
       '&basketballPtr = soccerBall;',
     ],
     answer: '*basketballPtr = soccerBall;',
-    correctText:
-      'Correct! This correctly dereferences the pointer and sets the basketball to a soccer ball.',
-    wrongText: 'Not quite',
+    answerText: new Map([
+      [
+        '*basketballPtr = soccerBall;',
+        'Correct! This correctly dereferences the pointer and sets the basketball to a soccer ball.',
+      ],
+      [
+        'basketballPtr = soccerBall;',
+        'Not quite, this is invalid and makes the pointer equal the soccer ball, instead of the basketball. We need to dereference the pointer.',
+      ],
+      [
+        'basketballPtr = &soccerBall;',
+        'Not quite, although this is valid, this makes the pointer just point at the soccer ball instead of replacing the basketball with the soccer ball',
+      ],
+      [
+        '&basketballPtr = soccerBall;',
+        'Not quite, this is invalid and makes the address of the pointer the soccer ball instead',
+      ],
+    ]),
   },
 ];