Mission editing slang (#503)

* Removed previous button on first question, added divider

* Yarn format

* Changeded help description

* fix import for firefox

* max width for globals

* symbols aligned

* increase abstraction

removed numberRange from textArea
Reduced save frequency of solutionTemplate

* manage questions give warning

* UI change for deployment tab

* fixed maxGrade and maxXP calculation

* added local/global switch

* adjust mcq options

* split question template tab

added suggested answer editing

* swap answer and solutionTemplate

internal change

* add reading

* add grading deployment

* clone question shift question added

* fixed symbol formating

Author: gerhean

src/components/incubator/EditingWorkspace.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import { InterpreterOutput, IWorkspaceState } from '../../reducers/states';
 import { history } from '../../utils/history';
-import { assessmentCategoryLink } from '../../utils/paramParseHelpers';
 import {
   retrieveLocalAssessment,
   storeLocalAssessment,
@@ -55,7 +54,6 @@ export type OwnProps = {
   questionId: number;
   assessmentOverview: IAssessmentOverview;
   updateAssessmentOverview: (overview: IAssessmentOverview) => void;
-  listingPath?: string;
   notAttempted: boolean;
   closeDate: string;
 };
@@ -110,12 +108,7 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
    */
   public componentDidMount() {
     if (this.props.assessment) {
-      const question: IQuestion = this.props.assessment.questions[this.formatedQuestionId()];
-      const editorValue =
-        question.type === QuestionTypes.programming
-          ? ((question as IProgrammingQuestion).solutionTemplate as string)
-          : '//If you see this, this is a bug. Please report bug.';
-      this.props.handleEditorValueChange(editorValue);
+      this.resetEditorValue();
       this.setState({
         originalMaxGrade: this.getMaxMarks('maxGrade'),
         originalMaxXp: this.getMaxMarks('maxXp')
@@ -295,6 +288,15 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
     this.props.handleClearContext(library);
   };
 
+  private resetEditorValue = () => {
+    const question: IQuestion = this.state.assessment!.questions[this.formatedQuestionId()];
+    const editorValue =
+      question.type === QuestionTypes.programming
+        ? ((question as IProgrammingQuestion).solutionTemplate as string)
+        : '//If you see this, this is a bug. Please report bug.';
+    this.props.handleEditorValueChange(editorValue);
+  };
+
   private handleSave = () => {
     this.setState({
       hasUnsavedChanges: false
@@ -345,7 +347,9 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
     this.setState({
       assessment: assessmentVal
     });
+    this.handleRefreshLibrary();
     this.handleSave();
+    this.resetEditorValue();
   };
 
   private handleChangeActiveTab = (tab: number) => {
@@ -522,9 +526,7 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
     props: AssessmentWorkspaceProps,
     questionId: number
   ) => {
-    const listingPath =
-      this.props.listingPath ||
-      `/academy/${assessmentCategoryLink(this.state.assessment!.category)}`;
+    const listingPath = '/incubator';
     const assessmentWorkspacePath = listingPath + `/${this.state.assessment!.id.toString()}`;
     return {
       handleEditorEval: this.props.handleEditorEval,

src/components/incubator/assessmentTemplates.ts

@@ -97,6 +97,7 @@ export const mcqTemplate = (): IMCQQuestion => {
     ],
     id: 2,
     library: emptyLibrary(),
+    graderLibrary: emptyLibrary(),
     type: 'mcq',
     solution: 0,
     grader: {

src/components/incubator/editingWorkspaceSideContent/DeploymentTab.tsx

@@ -48,7 +48,6 @@ export class DeploymentTab extends React.Component<IProps, { activeTab: number }
           {this.props.label + ' Deployment'}
           <br />
           {this.deploymentTab()}
-          }
         </div>
       );
     } else {
@@ -71,26 +70,20 @@ export class DeploymentTab extends React.Component<IProps, { activeTab: number }
     // const deploymentDisp = this.props.isGlobalDeployment ? 'Global Deployment' : 'Local Deployment';
     const symbols = deployment.external.symbols.map((symbol, i) => (
       <tr key={i}>
-        <td style={{ width: '520px' }}>
-          {this.textareaContent(deploymentPath.concat(['external', 'symbols', i]))}
+        <td>{this.textareaContent(deploymentPath.concat(['external', 'symbols', i]))}</td>
+        <td style={{ width: '100px' }}>
+          {controlButton('Delete', IconNames.MINUS, this.handleSymbolDelete(i))}
         </td>
-        <td>{controlButton('Delete', IconNames.MINUS, this.handleSymbolDelete(i))}</td>
       </tr>
     ));
 
     const globals = deployment.globals.map((symbol, i) => (
       <tr key={i}>
-        <td className="col-xs-3" style={{ height: '2rem', width: '10rem', overflow: 'auto' }}>
-          <div style={{ height: '2rem', width: '10rem', overflow: 'auto' }}>
-            {this.textareaContent(deploymentPath.concat(['globals', i, 0]))}
-          </div>
+        <td style={{ width: '170px' }}>
+          {this.textareaContent(deploymentPath.concat(['globals', i, 0]))}
         </td>
-        <td className="col-xs-7" style={{ height: '2rem', width: '20rem', overflow: 'auto' }}>
-          <div style={{ height: '2rem', width: '20rem', overflow: 'auto' }}>
-            {this.globalValueTextareaContent(i)}
-          </div>
-        </td>
-        <td className="col-xs-2">
+        <td>{this.globalValueTextareaContent(i)}</td>
+        <td style={{ width: '90px' }}>
           {controlButton('Delete', IconNames.MINUS, this.handleGlobalDelete(i))}
         </td>
       </tr>
@@ -109,7 +102,9 @@ export class DeploymentTab extends React.Component<IProps, { activeTab: number }
         <br />
         <div>Symbols:</div>
         <br />
-        <table style={{ width: '100%' }}>{symbols}</table>
+        <table style={{ width: '100%' }}>
+          <tbody>{symbols}</tbody>
+        </table>
         {controlButton('New Symbol', IconNames.PLUS, this.handleNewSymbol)}
       </React.Fragment>
     );
@@ -118,7 +113,9 @@ export class DeploymentTab extends React.Component<IProps, { activeTab: number }
       <React.Fragment>
         <div>Globals:</div>
         <br />
-        <table style={{ width: '100%' }}>{globals}</table>
+        <table style={{ width: '100%', borderSpacing: '5px' }}>
+          <tbody>{globals}</tbody>
+        </table>
         {controlButton('New Global', IconNames.PLUS, this.handleNewGlobal)}
       </React.Fragment>
     );
@@ -191,7 +188,7 @@ export class DeploymentTab extends React.Component<IProps, { activeTab: number }
       global[1] = altEval(global[2]!);
       this.props.updateAssessment(assessment);
     } catch (e) {
-      global[2] = 'Invalid Expression';
+      global[2] = '"Invalid Expression"';
     }
   };
 

src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx

@@ -2,6 +2,7 @@ import { ButtonGroup, Classes, Dialog, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 
+import { history } from '../../../utils/history';
 import { IAssessment } from '../../assessment/assessmentShape';
 import { controlButton } from '../../commons';
 import Markdown from '../../commons/Markdown';
@@ -38,8 +39,19 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
   }
 
   private manageQuestionTab = () => {
+    const index = this.props.questionId;
     return (
       <div>
+        {controlButton(
+          'Clone Current Question',
+          IconNames.DOCUMENT,
+          this.confirmSave(
+            this.makeQuestion(() =>
+              deepCopy(this.props.assessment.questions[this.props.questionId])
+            )
+          )
+        )}
+        <br />
         {controlButton(
           'Insert Programming Question',
           IconNames.FONT,
@@ -50,28 +62,57 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
           IconNames.CONFIRM,
           this.confirmSave(this.makeQuestion(mcqTemplate))
         )}
+        <br />
         {controlButton(
           'Delete Current Question',
           IconNames.REMOVE,
-          this.confirmSave(this.deleteQn)
+          this.confirmSave(this.deleteQuestion)
         )}
+        <br />
+        {index > 0
+          ? controlButton(
+              'Shift Question Left',
+              IconNames.CARET_LEFT,
+              this.confirmSave(this.shiftQuestion(-1))
+            )
+          : undefined}
+        {index < this.props.assessment.questions.length - 1
+          ? controlButton(
+              'Shift Question Right',
+              IconNames.CARET_RIGHT,
+              this.confirmSave(this.shiftQuestion(1))
+            )
+          : undefined}
       </div>
     );
   };
 
-  private makeQuestion = (template: () => any) => () => {
+  private shiftQuestion = (dir: number) => () => {
     const assessment = this.props.assessment;
     const index = this.props.questionId;
-    let questions = assessment.questions;
-    questions = questions
-      .slice(0, index)
-      .concat([template()])
-      .concat(questions.slice(index));
+    const newIndex = index + dir;
+    if (newIndex >= 0 && newIndex < assessment.questions.length) {
+      const question = assessment.questions[index];
+      const questions = assessment.questions;
+      questions[index] = questions[newIndex];
+      questions[newIndex] = question;
+      assessment.questions = questions;
+      this.props.updateAssessment(assessment);
+      history.push('/incubator/-1/' + newIndex.toString());
+    }
+  };
+
+  private makeQuestion = (template: () => any) => () => {
+    const assessment = this.props.assessment;
+    const index = this.props.questionId + 1;
+    const questions = assessment.questions;
+    questions.splice(index, 0, template());
     assessment.questions = questions;
     this.props.updateAssessment(assessment);
+    history.push('/incubator/-1/' + index.toString());
   };
 
-  private deleteQn = () => {
+  private deleteQuestion = () => {
     const assessment = this.props.assessment;
     let questions = assessment.questions;
     const index = this.props.questionId;
@@ -129,4 +170,8 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
   );
 }
 
+const deepCopy = (arr: any) => {
+  return JSON.parse(JSON.stringify(arr));
+};
+
 export default ManageQuestionTab;

src/components/incubator/index.tsx

@@ -67,7 +67,7 @@ class Assessment extends React.Component<IAssessmentProps, State> {
         };
         return (
           <div className="Academy">
-            <EditingWorkspaceContainer {...assessmentProps} listingPath="/incubator" />
+            <EditingWorkspaceContainer {...assessmentProps} />
           </div>
         );
       }