Show programming solution

src/components/academy/grading/GradingEditor.tsx

@@ -23,6 +23,7 @@ export type DispatchProps = {
 
 export type OwnProps = {
   comment: string
+  solution: number | string | null
   questionId: number
   submissionId: number
   initialGrade: number
@@ -91,6 +92,11 @@ class GradingEditor extends React.Component<GradingEditorProps, State> {
             message={'You have changes that may not be saved. Are you sure you want to leave?'}
           />
         ) : null}
+        {this.props.solution !== null ? (
+          <div className="grading-editor-solution">
+            <pre> {this.props.solution.toString()} </pre>
+          </div>
+        ) : null}
         <div className="grading-editor-input-parent">
           <table>
             <tbody>

src/components/academy/grading/GradingWorkspace.tsx

@@ -185,6 +185,7 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
         body: (
           <GradingEditor
             comment={props.grading![questionId].grade.comment}
+            solution={props.grading![questionId].question.solution}
             questionId={props.grading![questionId].question.id}
             submissionId={props.submissionId}
             initialGrade={props.grading![questionId].grade.grade}

src/components/academy/grading/gradingShape.ts

@@ -52,10 +52,12 @@ export type GradingQuestion = {
  *
  * @property comment This property is already present in GradingQuestion,
  *   and thus does not need to be used here, and is set to null
+ * @property solution this can be either the answer to the MCQ, the solution to
+ *   a programming question, or null.
  */
 interface IAnsweredQuestion extends IQuestion {
   comment: null
-  solution?: number
+  solution: number | string | null
   answer: string | number | null
   solutionTemplate?: string
   choices?: MCQChoice[]

src/mocks/gradingAPI.ts

@@ -85,6 +85,7 @@ Hello and welcome to this assessment! This is the *0th question*.
       id: 0,
       library: mockLibrary,
       solutionTemplate: '0th question mock solution template',
+      solution: 'This is how the 0th question is `solved`',
       type: 'programming'
     },
     maxGrade: 1000,
@@ -105,6 +106,7 @@ Hello and welcome to this assessment! This is the *0th question*.
       id: 1,
       library: mockLibrary,
       solutionTemplate: '1st question mock solution template',
+      solution: null,
       type: 'programming'
     },
     maxGrade: 200,

src/sagas/backend.ts

@@ -462,7 +462,11 @@ async function getGrading(submissionId: number, tokens: Tokens): Promise<Grading
           comment: null,
           id: question.id,
           library: castLibrary(question.library),
-          solution: question.answer,
+          solution: gradingQuestion.solution
+            ? gradingQuestion.solution
+            : question.solution !== undefined
+              ? question.solution
+              : null,
           solutionTemplate: question.solutionTemplate,
           type: question.type as QuestionType
         },

src/styles/_academy.scss

@@ -152,6 +152,13 @@
 }
 
 .GradingEditor {
+  .grading-editor-solution {
+    pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      word-break: break-word;
+    }
+  }
   .grading-editor-input-parent {
     /** Center the text for numeric input and showing grades. */
     table {