Use Markdown to render MCQ content (#294)

* Use JSX.Element for notifications

* Use Markdown for MCQ content and hints

* Update mocks

Author: remo5000

src/components/workspace/MCQChooser.tsx

@@ -1,8 +1,9 @@
-import { Button, Card, Intent, Text } from '@blueprintjs/core'
+import { Button, Card, Intent } from '@blueprintjs/core'
 import * as React from 'react'
 
 import { showSuccessMessage, showWarningMessage } from '../../utils/notification'
 import { IMCQQuestion } from '../assessment/assessmentShape'
+import Markdown from '../commons/Markdown'
 
 export interface IMCQChooserProps {
   mcq: IMCQQuestion
@@ -30,7 +31,7 @@ class MCQChooser extends React.PureComponent<IMCQChooserProps, State> {
         onClick={this.onButtonClickFactory(i)}
         minimal={true}
       >
-        <Text className="Text"> {choice.content} </Text>
+        <Markdown content={choice.content} />
       </Button>
     ))
     return (
@@ -61,10 +62,11 @@ class MCQChooser extends React.PureComponent<IMCQChooserProps, State> {
     }
     const shouldDisplayMessage = this.props.mcq.solution && this.props.mcq.choices[i].hint
     if (shouldDisplayMessage) {
+      const hintElement = <Markdown content={this.props.mcq.choices[i].hint!} />
       if (i === this.props.mcq.solution) {
-        showSuccessMessage(this.props.mcq.choices[i].hint!, 4000)
+        showSuccessMessage(hintElement, 4000)
       } else {
-        showWarningMessage(this.props.mcq.choices[i].hint!, 4000)
+        showWarningMessage(hintElement, 4000)
       }
     }
   }

src/mocks/assessmentAPI.ts

@@ -194,11 +194,11 @@ What's your favourite dinner food?
       'This is the 3rd question. Oddly enough, it is an ungraded MCQ question that uses the curves library! Option C has a null hint!',
     choices: [
       {
-        content: 'A',
-        hint: 'hint A'
+        content: '**Option** `A`',
+        hint: '_hint_ A is `here`'
       },
       {
-        content: 'B',
+        content: '### B',
         hint: 'hint B'
       },
       {

src/utils/notification.ts

@@ -4,15 +4,15 @@ const notification = Toaster.create({
   position: Position.TOP
 })
 
-export const showSuccessMessage = (message: string, timeout: number = 2000) => {
+export const showSuccessMessage = (message: string | JSX.Element, timeout: number = 2000) => {
   notification.show({
     intent: Intent.SUCCESS,
     message,
     timeout
   })
 }
 
-export const showWarningMessage = (message: string, timeout: number = 2000) => {
+export const showWarningMessage = (message: string | JSX.Element, timeout: number = 2000) => {
   notification.show({
     intent: Intent.WARNING,
     message,