Redesign MCQ choosing (#263)

* Use minimal, spread out mcq options

- One option on each line, spaced out.
- minimal button that only shows a differnce when it is active.

* Make MCQ not display question

Additionally:
- Spread out the options

* Remove mcq question css

* Add solution and hint types

* Add getButtonIntent function

* Fix import order

* Update mock questions

* Add notification for ungraded questions

* Format files

* Make mock question's graded hints null

* Make review changes

Author: remo5000

src/components/assessment/assessmentShape.ts

@@ -52,6 +52,7 @@ export interface IProgrammingQuestion extends IQuestion {
 }
 
 export interface IMCQQuestion extends IQuestion {
+  solution: number | null
   answer: number | null
   choices: MCQChoice[]
   type: 'mcq'
@@ -67,7 +68,7 @@ export interface IQuestion {
 
 export type MCQChoice = {
   content: string
-  hint: string
+  hint: string | null
 }
 
 /* The two kinds of Questions available */

src/components/workspace/MCQChooser.tsx

@@ -1,6 +1,7 @@
-import { Button, Card, Text, Tooltip } from '@blueprintjs/core'
+import { Button, Card, Intent, Text } from '@blueprintjs/core'
 import * as React from 'react'
 
+import { showSuccessMessage, showWarningMessage } from '../../utils/notification'
 import { IMCQQuestion } from '../assessment/assessmentShape'
 
 export interface IMCQChooserProps {
@@ -23,26 +24,19 @@ class MCQChooser extends React.PureComponent<IMCQChooserProps, State> {
     const options = this.props.mcq.choices.map((choice, i) => (
       <Button
         key={i}
-        className="mcq-option col-xs-6"
+        className="mcq-option col-xs-12"
         active={i === this.state.mcqOption}
+        intent={this.getButtonIntent(i, this.state.mcqOption, this.props.mcq.solution)}
         onClick={this.onButtonClickFactory(i)}
+        minimal={true}
       >
-        <Tooltip content={choice.hint}>
-          <Text className="Text"> {choice.content} </Text>
-        </Tooltip>
+        <Text className="Text"> {choice.content} </Text>
       </Button>
     ))
     return (
-      <div className="MCQChooser">
-        <Card className="mcq-content-parent row center-xs">
-          <div className="col-xs-12">
-            <div className="mcq-task-parent row center-xs ">
-              <Card className="mcq-task col-xs-12" elevation={2}>
-                <Text className="Text"> {this.props.mcq.content} </Text>
-              </Card>
-            </div>
-            <div className="row mcq-options-parent center-xs">{options}</div>
-          </div>
+      <div className="MCQChooser row">
+        <Card className="mcq-content-parent col-xs-12 middle-xs">
+          <div className="row mcq-options-parent between-xs">{options}</div>
         </Card>
       </div>
     )
@@ -53,16 +47,49 @@ class MCQChooser extends React.PureComponent<IMCQChooserProps, State> {
    * and mcq submission with a given answer id.
    *
    * Post-condition: the local state will be updated to store the
-   * mcq option selected.
+   * mcq option selected, and a notification will be displayed with
+   * a hint, if the question is ungraded.
    *
    * @param i the id of the answer
    */
   private onButtonClickFactory = (i: number) => (e: any) => {
     this.props.handleMCQSubmit(i)
+    if (this.props.mcq.solution && i === this.props.mcq.solution) {
+      showSuccessMessage(this.props.mcq.choices[i].hint!, 4000)
+    } else if (this.props.mcq.solution && i !== this.props.mcq.solution) {
+      showWarningMessage(this.props.mcq.choices[i].hint!, 4000)
+    }
     this.setState({
       mcqOption: i
     })
   }
+
+  /**
+   * Handles the logic for what intent an MCQ option should show up as.
+   * This is dependent on the presence of an actual solution (for ungraded assessments),
+   * the current selection, and whether the selected option is active.
+   *
+   * @param currentOption the current button key, corresponding to a choice ID
+   * @param chosenOption the mcq option that is chosen in the state, i.e what should show up as "selected"
+   * @param solution the solution to the mcq, if any
+   */
+  private getButtonIntent = (
+    currentOption: number,
+    chosenOption: number | null,
+    solution: number | null
+  ): Intent => {
+    const active = currentOption === chosenOption
+    const correctOptionSelected = active && solution && currentOption === solution
+    if (!solution) {
+      return Intent.NONE
+    } else if (active && correctOptionSelected) {
+      return Intent.SUCCESS
+    } else if (active && !correctOptionSelected) {
+      return Intent.DANGER
+    } else {
+      return Intent.NONE
+    }
+  }
 }
 
 export default MCQChooser

src/mocks/assessmentAPI.ts

@@ -153,7 +153,7 @@ export const mockAssessmentQuestions: Array<IProgrammingQuestion | IMCQQuestion>
   {
     answer: 3,
     content:
-      'This is the 3rd question. Oddly enough, it is an MCQ question that uses the curves library!',
+      'This is the 3rd question. Oddly enough, it is an ungraded MCQ question that uses the curves library!',
     choices: [
       {
         content: 'A',
@@ -174,7 +174,35 @@ export const mockAssessmentQuestions: Array<IProgrammingQuestion | IMCQQuestion>
     ],
     id: 2,
     library: mockCurveLibrary,
-    type: 'mcq'
+    type: 'mcq',
+    solution: 2
+  },
+  {
+    answer: 3,
+    content:
+      'This is the 4rth question. Oddly enough, it is a graded MCQ question that uses the curves library!',
+    choices: [
+      {
+        content: 'A',
+        hint: null
+      },
+      {
+        content: 'B',
+        hint: null
+      },
+      {
+        content: 'C',
+        hint: null
+      },
+      {
+        content: 'D',
+        hint: null
+      }
+    ],
+    id: 2,
+    library: mockCurveLibrary,
+    type: 'mcq',
+    solution: null
   }
 ]
 

src/styles/_workspace.scss

@@ -82,19 +82,15 @@ $code-color-error: #ff4444;
     .mcq-content-parent {
       height: 100%;
       overflow: auto;
-    }
-    .mcq-options-parent {
-      margin-bottom: 20px;
-    }
-    .mcq-option {
-      // use of !important to override a 'not' selector by BluePrint
-      background-color: $cadet-color-3 !important;
       padding: 20px;
-    }
-    .mcq-task-parent {
-      margin-bottom: 20px;
-      .pt-card {
-        background-color: $cadet-color-3;
+      .mcq-options-parent {
+        height: 100%;
+        .mcq-option {
+          padding: 20px;
+        }
+        .mcq-option:focus {
+          outline: 0;
+        }
       }
     }
     .pt-card {