Merge branch 'dev' of https://github.com/CPSECapstone/webrew into studentOverviewBreakdown

Author: Robert Middleton

package-lock.json

@@ -1,6 +1,11 @@
 .App {
    text-align: left;
    height: 100%;
+   background-color: #fff;
+}
+
+.side {
+   background-color: #fff;
 }
 
 .App-logo {
@@ -46,4 +51,4 @@
    .content-container {
       background-color: ghostwhite;
    }
-}
+}

src/App/App.scss

@@ -57,12 +57,14 @@ function App() {
          <Navigation />
          <div className="main container-fluid">
             <div className="row h-100">
-               <div className="sidebar-container col-md-2">
-                  <img src={StudentPicture} alt="" style={{ width: 180, height: 180 }} />
-                  {fname}
+               <div className="sidebar-container col-md-2 p-0 side">
+                  <div className="img-container">
+                     <img src={StudentPicture} alt="" className="img-fluid" />
+                  </div>
+                  <div className="pl-2 pt-2 pr-2">{fname}</div>
                   <Sidebar />
                </div>
-               <div className="content-container col-md-10">
+               <div className="content-container col-md-10 p-0">
                   <Content />
                </div>
             </div>

src/App/App.tsx

@@ -5,17 +5,16 @@
    flex-direction: column;
    align-items: center;
    padding: 22px;
+   background-color: #fff;
 }
 
-
 .sidebar .menu-container {
    width: 80px;
    margin-bottom: 10px;
    color: ghostwhite;
    text-align: center;
    align-self: center;
    padding-top: 22px !important;
-
 }
 
 .menu-container .menu-icon {
@@ -31,4 +30,4 @@
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
-}
+}

src/Components/Sidebar/Sidebar.css

@@ -0,0 +1,30 @@
+import { InputGroup, FormControl } from 'react-bootstrap';
+
+function FrBlock({
+   title,
+   question,
+   answer,
+   cssKey,
+}: {
+   title: string;
+   question: string;
+   answer: string;
+   cssKey: number;
+}) {
+   return (
+      <div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
+         <div className="col-md-6 text-center py-5 mx-auto">
+            <h3 className="text-left mb-3">{title}</h3>
+            <InputGroup className="mb-3">
+               <div className="question-container p-4 shadow w-100">
+                  <p className="text-left">{question}</p>
+                  <br />
+                  <FormControl value={answer} disabled />
+               </div>
+            </InputGroup>
+         </div>
+      </div>
+   );
+}
+
+export default FrBlock;

src/Components/TaskBlocks/FrBlock/FrBlock.tsx

@@ -1,12 +1,18 @@
 import '../TaskBlock.css';
 
-function ImageBlock({ title, contents }: { title: string; contents: string }) {
+function ImageBlock({
+   title,
+   contents,
+   cssKey,
+}: {
+   title: string;
+   contents: string;
+   cssKey: number;
+}) {
    return (
-      <div className="row">
-         <div className="col-md-12 my-2 p-3">
-            <h2 className="text-left">
-               <b>{title || 'N/A'}</b>
-            </h2>
+      <div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
+         <div className="col-md-6 text-center py-5 mx-auto">
+            <h3 className="text-left mb-3">{title}</h3>
             {contents ? (
                <div className="container" id="img-container">
                   <img src={contents} alt={contents} className="img-fluid" />

src/Components/TaskBlocks/ImageBlock/ImageBlock.tsx

@@ -1,12 +1,10 @@
 import '../TaskBlock.css';
 
-function IntroBlock({ instructions }: { instructions: string }) {
+function IntroBlock({ instructions, cssKey }: { instructions: string; cssKey: number }) {
    return (
-      <div className="row">
-         <div className="col-md-12 my-2 p-3">
-            <h2 className="text-left">
-               <b>Introduction</b>
-            </h2>
+      <div className="white row">
+         <div className="col-md-6 text-center py-5 mx-auto">
+            <h3 className="text-left mb-3">Introduction</h3>
             <p className="text-left">{instructions || 'No instructions given.'}</p>
          </div>
       </div>

src/Components/TaskBlocks/IntroBlock/IntroBlock.tsx

@@ -0,0 +1,48 @@
+import { RadioGroup, FormControlLabel, Radio } from '@material-ui/core';
+import { QuestionOption } from '../../../__generated__/types';
+
+function renderQuestionOptions(options: QuestionOption[], answers: number[]) {
+   const correctChoices = new Set<number>(answers);
+
+   return options.map((option: QuestionOption, index: number) => {
+      const styleName = `${correctChoices.has(option.id) ? 'option-correct ' : ''}option col-md-12`;
+
+      return (
+         <div className="row my-2">
+            <div className={styleName}>
+               <input type="radio" value={index} id={`${option.id}`} name="radio" />
+               <label htmlFor={`${option.id}`}>{option.description}</label>
+            </div>
+         </div>
+      );
+   });
+}
+
+function McBlock({
+   title,
+   question,
+   options,
+   answers,
+   cssKey,
+}: {
+   title: string;
+   question: string;
+   options: QuestionOption[];
+   answers: number[];
+   cssKey: number;
+}) {
+   return (
+      <div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
+         <div className="col-md-6 text-center py-5 mx-auto">
+            <h3 className="text-left mb-3">{title}</h3>
+            <div className="question-container p-4 shadow w-100">
+               <p className="text-left">{question}</p>
+               <br />
+               <div className="mx-4">{renderQuestionOptions(options, answers)}</div>
+            </div>
+         </div>
+      </div>
+   );
+}
+
+export default McBlock;

src/Components/TaskBlocks/McBlock/McBlock.tsx

@@ -1,10 +1,3 @@
-.col-md-12 {
-   background-color: rgb(224, 224, 224);
-   border-radius: 5px;
-   border: 1px;
-   border-color: #007bff;
-}
-
 #img-container {
    background-color: #fff;
    border-radius: 5px;
@@ -24,3 +17,41 @@
    padding: 5px 20px;
    background-color: #383838;
 }
+
+.white {
+   background-color: #fff;
+}
+
+.gray {
+   background-color: #f2f2f2;
+}
+
+h3 {
+   color: #4274f3;
+}
+
+.question-container {
+   border-radius: 7px;
+   background-color: #fff;
+}
+
+.option {
+   background-color: #f2f2f2;
+   border-radius: 25px;
+}
+
+.question-container .option-correct {
+   background-color: #4274f3;
+   color: #fff;
+}
+
+input[type='radio'] {
+   visibility: hidden;
+}
+label {
+   cursor: pointer;
+   font-size: smaller;
+}
+input:checked + label {
+   color: #4274f3;
+}