Working dynamic panel mcq placed in panel edit

client/components/PaneMCQ.jsx

 import React from 'react'
 import Switch from 'react-bulma-switch/full'
+import './PanelMCQ.css'
 
 /**
  * PanelMCQ is a component that allows the user to generate mcq options
@@ -13,7 +14,6 @@ class PanelMCQ extends React.Component {
     this.updateNumberOptions = this.updateNumberOptions.bind(this)
 
     this.state = {
-      isMCQ: false,
       chosenLabelType: 2,
       nrPossibleAnswers: 2,
       labelTypes: ['None', 'True/False', 'A, B, C ...', '1, 2, 3 ...']
@@ -25,7 +25,6 @@ class PanelMCQ extends React.Component {
       let prob = newProps.problem
       return {
         problemId: prob.id,
-        isMCQ: prob.mc_options.length > 0,
         nrPossibleAnswers: prob.mc_options.length || 2,
         chosenLabelType: PanelMCQ.deriveLabelType(prob.mc_options),
       }
@@ -126,13 +125,9 @@ class PanelMCQ extends React.Component {
   render () {
     return (
       <React.Fragment>
-        <div className='panel-block'>
-          <div className='field'>
+        <div className='panel-block mcq-block'>
             <label className='label'> Multiple choice question </label>
             <Switch color='info' outlined value={this.props.problem.mc_options.length > 0} onChange={(e) => {
-              this.setState({
-                isMCQ: true
-              })
               if (e.target.checked) {
                 let npa = this.state.nrPossibleAnswers
                 let labels = this.generateLabels(npa, 0)
@@ -141,34 +136,33 @@ class PanelMCQ extends React.Component {
                 this.props.deleteMCOs(this.props.problem.mc_options.length)
               }
             }} />
-            { this.state.isMCQ ? (
-              <React.Fragment>
-                <label>Number options</label>
-                <div className='control'>
-                  <input type='number'  value={this.state.nrPossibleAnswers} min='1'
-                         max={this.props.totalNrAnswers} className='input' onChange={this.onChangeNPA} />
-                </div>
-                <label>Labels</label>
-                <div className='control'>
-                  <div className='select is-hovered is-fullwidth'>
-                    {(function () {
-                      var optionList = this.state.labelTypes.map(
-                        (label, i) => <option key={i} value={String(i)}>{label}</option>
-                      )
-                      return (
-                        <div className='select is-hovered is-fullwidth'>
-                          <select value={this.state.chosenLabelType} onChange={this.onChangeLabelType}>
-                            {optionList}
-                          </select>
-                        </div>
-                      )
-                    }.bind(this)())}
-                  </div>
-                </div>
-              </React.Fragment>) : null
-            }
-          </div>
         </div>
+        { this.props.problem.mc_options.length > 0 ? (
+          <React.Fragment>
+            <div className='panel-block mcq-block'>
+              <label>Number options</label>
+              <input type='number'  value={this.state.nrPossibleAnswers} min='1'
+                     max={this.props.totalNrAnswers} className='input' onChange={this.onChangeNPA} />
+            </div>
+            <div className='panel-block mcq-block'>
+              <label>Labels</label>
+              <div className='select is-hovered is-fullwidth'>
+                {(function () {
+                  var optionList = this.state.labelTypes.map(
+                    (label, i) => <option key={i} value={String(i)}>{label}</option>
+                  )
+                  return (
+                    <div className='select is-hovered is-fullwidth'>
+                      <select value={this.state.chosenLabelType} onChange={this.onChangeLabelType}>
+                        {optionList}
+                      </select>
+                    </div>
+                  )
+                }.bind(this)())}
+              </div>
+            </div>
+          </React.Fragment>) : null
+        }
       </React.Fragment>
     )
   }

client/components/PanelMCQ.css

+.panel-block.mcq-block {
+    justify-content: space-between;
+    border-top: none;
+}
+
+.mcq-block input, .mcq-block .select {
+    max-width: 130px;
+}
\ No newline at end of file

client/views/Exam.jsx

@@ -2,8 +2,6 @@ import React from 'react'
 
 import Notification from 'react-bulma-notification'
 
-import Switch from 'react-bulma-switch/full'
-
 import Hero from '../components/Hero.jsx'
 import './Exam.css'
 import GeneratedExamPreview from '../components/GeneratedExamPreview.jsx'
@@ -330,7 +328,7 @@ class Exams extends React.Component {
   }
 
 
-  deleteMCO = (widgetId, index, nrMCOs) => {
+  deleteMCOs = (widgetId, index, nrMCOs) => {
     let widget = this.state.widgets[widgetId]
     if (nrMCOs <= 0 || !widget.problem.mc_options.length) return;
 
@@ -362,66 +360,11 @@ class Exams extends React.Component {
             })
           }
         }, () => {
-          this.deleteMCO(widgetId, index, nrMCOs-1)
+          this.deleteMCOs(widgetId, index, nrMCOs-1)
         })
       })
   }
 
-
-  deleteMCOs = (widgetId, startIndex, nrMCOs) => {
-    let options = [...widget.problem.mc_options]
-    options.splice(startIndex, nrMCOs)
-
-    this.deleteMCO(widgetId, startIndex, nrMCOs)
-  }
-
-  /**
-   * This function deletes the mc options coupled to a problem.
-   */
-  deleteMCWidget = () => {
-    const widget = this.state.widgets[this.state.selectedWidgetId]
-    const options = widget.problem.mc_options
-    if (options.length > 0) {
-      options.forEach((option) => {
-        api.del('mult-choice/' + option.id)
-          .catch(err => {
-            console.log(err)
-            err.json().then(res => {
-              this.setState({
-                deletingMCWidget: false
-              })
-              Notification.error('Could not delete multiple choice option' +
-                (res.message ? ': ' + res.message : ''))
-              // update to try and get a consistent state
-              this.props.updateExam(this.props.examID)
-            })
-          }).then(res => {
-            let index = widget.problem.feedback.findIndex(e => { return e.id === res.feedback_id })
-            let feedback = widget.problem.feedback[index]
-            feedback.deleted = true
-            this.updateFeedbackAtIndex(feedback, widget, index)
-          })
-      })
-
-      // remove the mc options from the state
-      // note that this can happen before they are removed in the DB due to async calls
-      this.setState((prevState) => {
-        return {
-          widgets: update(prevState.widgets, {
-            [widget.id]: {
-              problem: {
-                mc_options: {
-                  $set: []
-                }
-              }
-            }
-          }),
-          deletingMCWidget: false
-        }
-      })
-    }
-  }
-
   /**
    * This method creates a mc option widget object and adds it to the corresponding problem
    * @param problemWidget The widget the mc option belongs to
@@ -663,7 +606,7 @@ class Exams extends React.Component {
                         this.setState((prevState) => {
                           return {
                             widgets: update(prevState.widgets, {
-                              [selectedWidget.id]: {
+                              [selectedWidgetId]: {
                                 'problem': {
                                   'mc_options': {
                                     [index]: {
@@ -860,7 +803,12 @@ class Exams extends React.Component {
           this.state.widgets[this.state.selectedWidgetId].problem.name}"`}
         confirmText='Delete multiple choice options'
         onCancel={() => this.setState({deletingMCWidget: false})}
-        onConfirm={() => this.deleteMCO(this.state.selectedWidgetId, 0)}
+        onConfirm={() => {
+          this.setState({
+            deletingMCWidget: false
+          })
+          this.deleteMCOs(this.state.selectedWidgetId, 0)
+        }}
       />
     </div>
   }