From de759121102bffd2d58380b1673a1fe805709156 Mon Sep 17 00:00:00 2001
From: Kai Zhe <yewkaizhe@hotmail.com>
Date: Tue, 26 Mar 2019 23:00:09 +0800
Subject: [PATCH 1/2] changed manage questions ui

---
 .../ManageQuestionTab.tsx                     | 62 +++++++++++--------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx b/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx
index 18bf036033..5a346c60e3 100644
--- a/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx
+++ b/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { Button, ButtonGroup, Classes, Dialog, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 
@@ -33,63 +33,74 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
     return (
       <div>
         {this.confirmSaveOverlay()}
-        {this.manageQuestionTab()}
+        {this.props.assessment.questions.map((q, index) => (
+          <div key={index}>
+          Question {index + 1}
+          <br />
+          <Button
+              className="mcq-option col-xs-12"
+              minimal={true}
+            >
+              <Markdown content={q.content.length > 200 ? q.content.substring(0, 200) + "..." : q.content} />
+            </Button>
+          {this.manageQuestionTab(index)}
+          <br />
+        </div>
+        ))}
       </div>
     );
   }
 
-  private manageQuestionTab = () => {
-    const index = this.props.questionId;
+  private manageQuestionTab = (index: number) => {
     return (
       <div>
         {controlButton(
-          'Clone Current Question',
+          `Clone Question ${index + 1}`,
           IconNames.DOCUMENT,
           this.confirmSave(
             this.makeQuestion(() =>
-              deepCopy(this.props.assessment.questions[this.props.questionId])
+              deepCopy(this.props.assessment.questions[index]),
+              index
             )
           )
         )}
+        {controlButton(
+          `Delete Question ${index + 1}`,
+          IconNames.REMOVE,
+          this.confirmSave(this.deleteQuestion(index))
+        )}
         <br />
         {controlButton(
           'Insert Programming Question',
           IconNames.FONT,
-          this.confirmSave(this.makeQuestion(programmingTemplate))
+          this.confirmSave(this.makeQuestion(programmingTemplate, index))
         )}
         {controlButton(
           'Insert MCQ Question',
           IconNames.CONFIRM,
-          this.confirmSave(this.makeQuestion(mcqTemplate))
-        )}
-        <br />
-        {controlButton(
-          'Delete Current Question',
-          IconNames.REMOVE,
-          this.confirmSave(this.deleteQuestion)
+          this.confirmSave(this.makeQuestion(mcqTemplate, index))
         )}
         <br />
         {index > 0
           ? controlButton(
-              'Shift Question Left',
-              IconNames.CARET_LEFT,
-              this.confirmSave(this.shiftQuestion(-1))
+              `Shift Question ${index + 1} Up`,
+              IconNames.CARET_UP,
+              this.confirmSave(this.shiftQuestion(-1, index))
             )
           : undefined}
         {index < this.props.assessment.questions.length - 1
           ? controlButton(
-              'Shift Question Right',
-              IconNames.CARET_RIGHT,
-              this.confirmSave(this.shiftQuestion(1))
+              `Shift Question ${index + 1} Down`,
+              IconNames.CARET_DOWN,
+              this.confirmSave(this.shiftQuestion(1, index))
             )
           : undefined}
       </div>
     );
   };
 
-  private shiftQuestion = (dir: number) => () => {
+  private shiftQuestion = (dir: number, index: number) => () => {
     const assessment = this.props.assessment;
-    const index = this.props.questionId;
     const newIndex = index + dir;
     if (newIndex >= 0 && newIndex < assessment.questions.length) {
       const question = assessment.questions[index];
@@ -102,9 +113,9 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
     }
   };
 
-  private makeQuestion = (template: () => any) => () => {
+  private makeQuestion = (template: () => any, index: number) => () => {
     const assessment = this.props.assessment;
-    const index = this.props.questionId + 1;
+    index = index + 1;
     const questions = assessment.questions;
     questions.splice(index, 0, template());
     assessment.questions = questions;
@@ -112,10 +123,9 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
     history.push('/incubator/-1/' + index.toString());
   };
 
-  private deleteQuestion = () => {
+  private deleteQuestion = (index: number) => () => {
     const assessment = this.props.assessment;
     let questions = assessment.questions;
-    const index = this.props.questionId;
     if (questions.length > 1) {
       questions = questions.slice(0, index).concat(questions.slice(index + 1));
     }

From 74dbeda71d336abd3eb56d7d535121cf85ba2945 Mon Sep 17 00:00:00 2001
From: Kai Zhe <yewkaizhe@hotmail.com>
Date: Tue, 26 Mar 2019 23:01:23 +0800
Subject: [PATCH 2/2] yarn format

---
 .../ManageQuestionTab.tsx                     | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx b/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx
index 5a346c60e3..1c58fd8c24 100644
--- a/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx
+++ b/src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx
@@ -35,17 +35,16 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
         {this.confirmSaveOverlay()}
         {this.props.assessment.questions.map((q, index) => (
           <div key={index}>
-          Question {index + 1}
-          <br />
-          <Button
-              className="mcq-option col-xs-12"
-              minimal={true}
-            >
-              <Markdown content={q.content.length > 200 ? q.content.substring(0, 200) + "..." : q.content} />
+            Question {index + 1}
+            <br />
+            <Button className="mcq-option col-xs-12" minimal={true}>
+              <Markdown
+                content={q.content.length > 200 ? q.content.substring(0, 200) + '...' : q.content}
+              />
             </Button>
-          {this.manageQuestionTab(index)}
-          <br />
-        </div>
+            {this.manageQuestionTab(index)}
+            <br />
+          </div>
         ))}
       </div>
     );
@@ -58,10 +57,7 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
           `Clone Question ${index + 1}`,
           IconNames.DOCUMENT,
           this.confirmSave(
-            this.makeQuestion(() =>
-              deepCopy(this.props.assessment.questions[index]),
-              index
-            )
+            this.makeQuestion(() => deepCopy(this.props.assessment.questions[index]), index)
           )
         )}
         {controlButton(