454 exercise6 (#467)

* exercise-6 multiline setup

* fix multiline selector

* further add dropdown options

* minor fix

---------

Co-authored-by: Chengheng Li <li471115381@gmail.com>

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 Exercise6 from './pages/Exercise6';
 import Home from './pages/Home';
 import Lesson1 from './pages/Lesson1';
 import Lesson10 from './pages/Lesson10';
@@ -42,6 +43,7 @@ function App(): JSX.Element {
           <Route path="/exercise-1" element={<Exercise1 />} />
           <Route path="/exercise-2" element={<Exercise2 />} />
           <Route path="/exercise-3" element={<Exercise3 />} />
+          <Route path="/exercise-6" element={<Exercise6 />} />
           <Route path="/conclusion" element={<Conclusion />} />
           <Route path="*" element={<Error404 />} />
         </Routes>

src/components/SelectCode.tsx

@@ -36,7 +36,9 @@ const SelectCode: React.FC<SelectCodeProps> = ({ choices, handleClick }) => {
               className="menu-item"
               sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
             >
-              {choice}
+              <pre>
+                <code>{choice}</code>
+              </pre>
             </MenuItem>
           ))}
         </Select>

src/pages/Exercise6.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import '../styles/Exercise6.scss';
+import RunCode from '../components/RunCode';
+
+const question = [
+  {
+    options: [
+      'head = new Node();\nhead->next = new Node();\nhead->next = head;\ntail = head->next;',
+      'head = new Node();\nhead->next = new Node();\nhead->next = head;\ntail = head->next;',
+      '*head = new Node();\n*(head->next) = new Node();\n*(head->next->prev) = *head;\ntail = *head->next;',
+      'head = new Node();\nhead-> next = new Node();\ntail = head->next;\nhead->next->prev = head;',
+    ],
+    answer:
+      'head = new Node();\nhead-> next = new Node();\ntail = head->next;\nhead->next->prev = head;',
+    correctText:
+      'Correct! Let’s go through this line by line. The first line creates a new node and assigns head to point to it. The second line creates a second node and assigns the head node’s next pointer to point to it. The third line assigns tail to point at the second node, since it copies the head node’s next pointer. The fourth line actually simplifies to tail->prev = *head, since from the third line we know tail = head->next, it assigns the previous pointer of the tail node to point back to the head node.',
+    wrongText: 'Not quite',
+  },
+];
+
+const Exercise6: FC = () => {
+  return (
+    <div className="exercise6-div">
+      <RunCode
+        questions={question}
+        displayText={
+          'Which code segment correctly starts the linked list?\n Node* head; // head Node, assume Node class is defined\nNode* tail; // tail Node'
+        }
+      />
+    </div>
+  );
+};
+
+export default Exercise6;

src/styles/Exercise6.scss

@@ -0,0 +1,4 @@
+.exercise6-div {
+  white-space: pre-wrap;
+  word-break: break-all;
+}

src/styles/SelectCode.scss

@@ -2,7 +2,7 @@
   border: 1px;
   border-color: #cfcfcf;
   font-size: 1.6vw;
-  height: 5vh;
+  height: fit-content;
   width: fit-content;
 
   @media (max-width: 600px) {