make select the default, make people select an answer

src/components/RunCode.tsx

@@ -28,6 +28,7 @@ const RunCode: React.FC<RunCodeProps> = ({
   const [selections, setSelections] = useState<string[]>([]);
   const [answers, setAnswers] = useState<Array<boolean | null>>([]);
   const [alert, setAlert] = useState(false);
+  const unanswered = 'Please select an answer';
 
   const alertFunction = () => {
     setAlert(true);
@@ -40,8 +41,8 @@ const RunCode: React.FC<RunCodeProps> = ({
     if (selections.length == 0) {
       const tempArr: string[] = [];
       const ansArr: Array<boolean | null> = [];
-      questions.forEach((question) => {
-        tempArr.push(question.options[0]);
+      questions.forEach(() => {
+        tempArr.push('');
         ansArr.push(null);
       });
       setSelections(tempArr);
@@ -123,7 +124,9 @@ const RunCode: React.FC<RunCodeProps> = ({
                 />
               </svg>
               <p style={{ color: answers[index] ? '#31A74B' : '#a80000' }}>
-                {question.answerText.get(selections[index])}
+                {selections[index] == ''
+                  ? unanswered
+                  : question.answerText.get(selections[index])}
               </p>
               <div style={{ display: answers[index] ? 'flex' : 'none' }}>
                 <CopyToClipboard

src/components/SelectCode.tsx

@@ -12,7 +12,7 @@ interface SelectCodeProps {
 }
 
 const SelectCode: React.FC<SelectCodeProps> = ({ choices, handleClick }) => {
-  const [display, setDisplay] = useState(choices[0] || '');
+  const [display, setDisplay] = useState('');
 
   const handleChange = (e: SelectChangeEvent) => {
     setDisplay(e.target.value);
@@ -29,6 +29,11 @@ const SelectCode: React.FC<SelectCodeProps> = ({ choices, handleClick }) => {
           inputProps={{ 'aria-label': 'Without label' }}
           className="select-input"
         >
+          <MenuItem value="">
+            <pre>
+              <code>Select</code>
+            </pre>
+          </MenuItem>
           {choices.map((choice, index) => (
             <MenuItem
               value={choice}

src/pages/Exercise2.tsx

@@ -65,6 +65,33 @@ const questions2 = [
       ],
     ]),
   },
+  {
+    options: [
+      'char &ptr = *x;',
+      'string *ptr = &x;',
+      'string *ptr = *x;',
+      'char *ptr = &x;',
+    ],
+    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.',
+      ],
+    ]),
+  },
 ];
 
 const questions3 = [
@@ -130,7 +157,10 @@ const Exercise2: FC = () => {
           <div className="exercise-2-diagram">
             <img src={Exercise2Diagram2} alt="Exercise 2 Diagram" />
           </div>
-          <h2>How do we create a pointer to the basketball string?</h2>
+          <h2>
+            How do we create a pointer to the basketball string? (Hint: there
+            are 2 answers here!)
+          </h2>
           <div className="exercise2-div">
             <RunCode
               questions={questions2}

src/styles/SelectCode.scss

@@ -6,7 +6,7 @@
   font-family: $niramit;
   font-size: 1.6vw;
   height: fit-content;
-  width: fit-content;
+  width: 70%;
 
   @media (max-width: 600px) {
     font-size: 4vw;