Change Submission Semantics (#178)

* Change ControlBar to show 'Done'

* Change controlBarProps for playground

* Fix prop typo in ControlBar

* Change controlBarProps for GradingWorkspace

* Change controlBarProps for AssessmentWorkspace

* Make control bar's has* properties mandatory

* Add mandatory properties to Playground

* Alphabetisize AssessmentWorkspace props

* Alphabetisize GradingWorkspace controlbar props

and one additional prop for AssessmentWorkspace as well.

* Move library definition to question

Even MCQ questions need library to use the REPL

* Pass sourceChapter as a prop for AssessmentWorkspace

* Add make GradingWorkspace pass in chapter prop

* Fix questionId overflow for GradingWorkspace

* Format GradingWorkspace

Author: remo5000

src/components/Playground.tsx

@@ -61,9 +61,11 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         handleReplEval: this.props.handleReplEval,
         handleReplOutputClear: this.props.handleReplOutputClear,
         hasChapterSelect: true,
+        hasDoneButton: false,
         hasNextButton: false,
         hasPreviousButton: false,
-        hasSubmitButton: false,
+        hasSaveButton: false,
+        hasShareButton: true,
         isRunning: this.props.isRunning,
         queryString: this.props.queryString,
         sourceChapter: this.props.sourceChapter

src/components/academy/grading/GradingWorkspace.tsx

@@ -64,10 +64,15 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       )
     }
 
+    /* If questionId is out of bounds, set it to the max. */
+    const questionId =
+      this.props.questionId >= this.props.grading.length
+        ? this.props.grading.length - 1
+        : this.props.questionId
     /* Get the question to be graded */
-    const question = this.props.grading[this.props.questionId].question as IQuestion
+    const question = this.props.grading[questionId].question as IQuestion
     const workspaceProps: WorkspaceProps = {
-      controlBarProps: this.controlBarProps(this.props),
+      controlBarProps: this.controlBarProps(this.props, questionId),
       editorProps:
         question.type === QuestionTypes.programming
           ? {
@@ -84,7 +89,7 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       handleSideContentHeightChange: this.props.handleSideContentHeightChange,
       mcq: question as IMCQQuestion,
       sideContentHeight: this.props.sideContentHeight,
-      sideContentProps: this.sideContentProps(this.props),
+      sideContentProps: this.sideContentProps(this.props, questionId),
       replProps: {
         output: this.props.output,
         replValue: this.props.replValue,
@@ -100,29 +105,31 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
   }
 
   /** Pre-condition: Grading has been loaded */
-  private sideContentProps: (p: GradingWorkspaceProps) => SideContentProps = (
-    props: GradingWorkspaceProps
+  private sideContentProps: (p: GradingWorkspaceProps, q: number) => SideContentProps = (
+    props: GradingWorkspaceProps,
+    questionId: number
   ) => ({
     activeTab: props.activeTab,
     handleChangeActiveTab: props.handleChangeActiveTab,
     tabs: [
       {
-        label: `Grading: Question ${props.questionId}`,
+        label: `Grading: Question ${questionId}`,
         icon: IconNames.TICK,
         /* Render an editor with the xp given to the current question. */
-        body: <GradingEditor maximumXP={props.grading![props.questionId].maximumXP} />
+        body: <GradingEditor maximumXP={props.grading![questionId].maximumXP} />
       },
       {
-        label: `Task ${props.questionId}`,
+        label: `Task ${questionId}`,
         icon: IconNames.NINJA,
-        body: <Text> {props.grading![props.questionId].question.content} </Text>
+        body: <Text> {props.grading![questionId].question.content} </Text>
       }
     ]
   })
 
   /** Pre-condition: Grading has been loaded */
-  private controlBarProps: (p: GradingWorkspaceProps) => ControlBarProps = (
-    props: GradingWorkspaceProps
+  private controlBarProps: (p: GradingWorkspaceProps, q: number) => ControlBarProps = (
+    props: GradingWorkspaceProps,
+    questionId: number
   ) => {
     const listingPath = `/academy/grading`
     const gradingWorkspacePath = listingPath + `/${this.props.submissionId}`
@@ -133,18 +140,16 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       handleReplEval: this.props.handleReplEval,
       handleReplOutputClear: this.props.handleReplOutputClear,
       hasChapterSelect: false,
-      hasNextButton: this.props.questionId < this.props.grading!.length - 1,
-      hasPreviousButton: this.props.questionId > 0,
+      hasDoneButton: questionId === this.props.grading!.length - 1,
+      hasNextButton: questionId < this.props.grading!.length - 1,
+      hasPreviousButton: questionId > 0,
       hasSaveButton: false,
       hasShareButton: false,
-      hasSubmitButton: this.props.questionId === this.props.grading!.length - 1,
       isRunning: this.props.isRunning,
-      onClickNext: () =>
-        history.push(gradingWorkspacePath + `/${(this.props.questionId + 1).toString()}`),
-      onClickPrevious: () =>
-        history.push(gradingWorkspacePath + `/${(this.props.questionId - 1).toString()}`),
-      onClickSubmit: () => history.push(listingPath),
-      sourceChapter: 2 // TODO dynamic library changing
+      onClickDone: () => history.push(listingPath),
+      onClickNext: () => history.push(gradingWorkspacePath + `/${(questionId + 1).toString()}`),
+      onClickPrevious: () => history.push(gradingWorkspacePath + `/${(questionId - 1).toString()}`),
+      sourceChapter: this.props.grading![questionId].question.library.chapter
     }
   }
 }

src/components/academy/grading/gradingShape.ts

@@ -1,4 +1,4 @@
-import { AssessmentCategory, IQuestion, Library, MCQChoice } from '../../assessment/assessmentShape'
+import { AssessmentCategory, IQuestion, MCQChoice } from '../../assessment/assessmentShape'
 
 /**
  * Information on a Grading, for a particular student submission
@@ -44,7 +44,6 @@ export type GradingQuestion = {
 interface IAnsweredQuestion extends IQuestion {
   solution?: number
   answer?: string | number
-  library?: Library
   solutionTemplate?: string
   choices?: MCQChoice[]
 }

src/components/assessment/AssessmentWorkspace.tsx

@@ -159,17 +159,17 @@ class AssessmentWorkspace extends React.Component<
       handleReplEval: this.props.handleReplEval,
       handleReplOutputClear: this.props.handleReplOutputClear,
       hasChapterSelect: false,
+      hasDoneButton: questionId === this.props.assessment!.questions.length - 1,
       hasNextButton: questionId < this.props.assessment!.questions.length - 1,
       hasPreviousButton: questionId > 0,
       hasSaveButton: true,
       hasShareButton: false,
-      hasSubmitButton: questionId === this.props.assessment!.questions.length - 1,
       isRunning: this.props.isRunning,
+      onClickDone: () => history.push(listingPath),
       onClickNext: () => history.push(assessmentWorkspacePath + `/${(questionId + 1).toString()}`),
       onClickPrevious: () =>
         history.push(assessmentWorkspacePath + `/${(questionId - 1).toString()}`),
-      onClickSubmit: () => history.push(listingPath),
-      sourceChapter: 2 // TODO dynamic library changing
+      sourceChapter: this.props.assessment!.questions[questionId].library.chapter
     }
   }
 }

src/components/assessment/assessmentShape.ts

@@ -34,7 +34,6 @@ export enum AssessmentCategories {
 export type AssessmentCategory = keyof typeof AssessmentCategories
 
 export interface IProgrammingQuestion extends IQuestion {
-  library: Library
   solutionTemplate: string
   type: 'programming'
 }
@@ -47,6 +46,7 @@ export interface IMCQQuestion extends IQuestion {
 export interface IQuestion {
   content: string
   id: number
+  library: Library
   type: QuestionType
 }
 

src/components/workspace/ControlBar.tsx

@@ -8,12 +8,12 @@ import { sourceChapters } from '../../reducers/states'
 import { controlButton } from '../commons'
 
 export type ControlBarProps = {
-  hasChapterSelect?: boolean
-  hasNextButton?: boolean
-  hasPreviousButton?: boolean
-  hasSaveButton?: boolean
-  hasShareButton?: boolean
-  hasSubmitButton?: boolean
+  hasChapterSelect: boolean
+  hasNextButton: boolean
+  hasPreviousButton: boolean
+  hasSaveButton: boolean
+  hasShareButton: boolean
+  hasDoneButton: boolean
   isRunning: boolean
   queryString?: string
   sourceChapter: number
@@ -26,7 +26,7 @@ export type ControlBarProps = {
   onClickNext?(): any
   onClickPrevious?(): any
   onClickSave?(): any
-  onClickSubmit?(): any
+  onClickDone?(): any
 }
 
 interface IChapter {
@@ -41,7 +41,7 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
     hasPreviousButton: false,
     hasSaveButton: false,
     hasShareButton: true,
-    hasSubmitButton: false,
+    hasDoneButton: false,
     onClickNext: () => {},
     onClickPrevious: () => {},
     onClickSave: () => {}
@@ -120,8 +120,8 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
     const nextButton = this.props.hasNextButton
       ? controlButton('Next', IconNames.ARROW_RIGHT, this.props.onClickNext, { iconOnRight: true })
       : undefined
-    const submitButton = this.props.hasSubmitButton
-      ? controlButton('Submit', IconNames.TICK_CIRCLE, this.props.onClickSubmit, {
+    const submitButton = this.props.hasDoneButton
+      ? controlButton('Done', IconNames.TICK_CIRCLE, this.props.onClickDone, {
           iconOnRight: true
         })
       : undefined

src/mocks/assessmentAPI.ts

@@ -117,6 +117,7 @@ export const mockAssessmentQuestions: Array<IProgrammingQuestion | IMCQQuestion>
       }
     ],
     id: 2,
+    library: mockLibrary,
     type: 'mcq'
   }
 ]

src/mocks/gradingAPI.ts

@@ -111,6 +111,7 @@ const mockGrading: Grading = [
         }
       ],
       id: 2,
+      library: mockLibrary,
       type: 'mcq'
     },
     maximumXP: 100,