Modify instructions page styling

quiz.example.json

@@ -6,9 +6,7 @@
       "8 bytes",
       "16 bytes",
       "32 bytes",
-      "64 bytes",
-      "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-      "Screm, bibr screm!"
+      "64 bytes"
     ],
     "correct": 1
   },

src/components/core/UI/Code.react.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import classes from './style/Code.module.css';
+
+const Code = ({children}) => {
+  return <pre className={classes.Code}>{children}</pre>;
+};
+
+export default Code;

src/components/core/UI/style/Card.module.css

@@ -24,9 +24,10 @@
 }
 
 .instructions {
-  width: 40rem;
-  height: 40rem;
+  width: 45rem;
+  height: 80vh;
   border: none;
   border-radius: 1.5rem;
   box-shadow: 2.5px 5px 15px rgba(0, 0, 0, 0.25);
+  padding: 1em 1em 1em 1.75em;
 }

src/components/core/UI/style/Code.module.css

@@ -0,0 +1,4 @@
+.Code {
+  background-color: #eeeeee;
+  padding: 1em;
+}

src/landing/Landing.jsx

@@ -10,6 +10,29 @@ import {randomizeArray} from '../service/util/util';
 import IconWrapper from '../components/core/UI/IconWrapper.react';
 import classes from './Landing.module.css';
 import Modal from '../components/core/UI/Modal.react';
+import Code from '../components/core/UI/Code.react';
+
+const instructionsText = `[
+  {
+    "question": "In Java, how many bytes is a long?",
+    "options": [
+      "4 bytes",
+      "8 bytes",
+      "16 bytes",
+      "32 bytes",
+      "64 bytes",
+    ],
+    "correct": 1
+  },
+  {
+    "question": "True or False: A string is a primitive datatype in Java.",
+    "options": [
+      "True",
+      "False"
+    ],
+    "correct": 1
+  }
+]`;
 
 const Landing = () => {
   const [isLoading, setLoading] = useState(false);
@@ -63,22 +86,25 @@ const Landing = () => {
           {isViewingInstructions && (
             <Modal hideModal={handleHideModal}>
               <Card instructions>
-                <VerticalLayout center="middle">
-                  <Text type="body1"> In order to use this tool, your .json quiz file must be formatted in a specific way.
-                  </Text>
-                  <Text type='body1'>
-                    Format your questions and multiple choice answers as shown in the example below, specifying the correct answer by its index in the options array.
-                  </Text>
-
-
-
+                <div className={classes.Instructions}>
+                  <VerticalLayout center="middle">
+                    <Text type="body1">
+                      In order to use this tool, your .json quiz file must be
+                      formatted in a specific way.
+                    </Text>
+                    <Text type="body1">
+                      Format your questions and multiple choice answers as shown
+                      in the example below, specifying the correct answer by its
+                      index in the options array.
+                    </Text>
+                    <Code>{instructionsText}</Code>
                     <Button
                       type="button"
                       value="got it"
                       onClick={handleHideModal}
                     ></Button>
-
-                </VerticalLayout>
+                  </VerticalLayout>
+                </div>
               </Card>
             </Modal>
           )}

src/landing/Landing.module.css

@@ -3,4 +3,10 @@
 }
 .format_link {
   margin-top: 2rem;
+}
+
+.Instructions {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
 }

src/quiz/components/style/QuestionList.module.css

@@ -1,4 +1,4 @@
 .QuestionList {
-  overflow-y: scroll;
+  overflow-y: auto;
   word-break: break-all;
 }