Labels and number inputs on one line

client/components/PaneMCQ.jsx

@@ -62,7 +62,7 @@ class PanelMCQ extends React.Component {
   // this function is called when the input is changed for the number of possible answers
   onChangeNPA (e) {
     let value = parseInt(e.target.value)
-    if (!isNaN(value)) {
+    if (!isNaN(value) && value <= this.props.totalNrAnswers) {
       if (this.state.chosenLabelType === 1) {
         value = 2
       }
@@ -140,25 +140,27 @@ class PanelMCQ extends React.Component {
         { 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 className='inline-mcq-edit'>
+                <label>#</label>
+                <input type='number'  value={this.state.nrPossibleAnswers} min='1'
+                       max={this.props.totalNrAnswers} className='input' onChange={this.onChangeNPA} />
+              </div>
+              <div className='inline-mcq-edit'>
+                <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>
             </div>
           </React.Fragment>) : null

client/components/PanelMCQ.css

 .panel-block.mcq-block {
     justify-content: space-between;
-    border-top: none;
+}
+
+.mcq-block .inline-mcq-edit {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.mcq-block .inline-mcq-edit label {
+    margin-right: 4px;
+}
+
+.mcq-block .inline-mcq-edit:first-of-type {
+    margin-right: 20px;
 }
 
 .mcq-block input, .mcq-block .select {

client/views/Exam.jsx

@@ -476,7 +476,8 @@ class Exams extends React.Component {
     let selectedWidget = selectedWidgetId && this.state.widgets[selectedWidgetId]
     let problem = selectedWidget && selectedWidget.problem
     let isMCQ = (problem && problem.mc_options.length > 0) || false
-    let widgetEditDisabled = (this.state.previewing || !problem) || (this.props.exam.finalized && containsMCOptions)
+    let widgetEditDisabled = (this.state.previewing || !problem)
+      || (this.props.exam.finalized && problem.mc_options.length > 0)
     let isGraded = problem && problem.graded
     let widgetDeleteDisabled = widgetEditDisabled || isGraded
 
@@ -529,7 +530,7 @@ class Exams extends React.Component {
 
   PanelEdit = (props) => {
     const selectedWidgetId = this.state.selectedWidgetId
-    let totalNrAnswers = 12 // the upper limit for the nr of possible answer boxes
+    let totalNrAnswers = 9 // the upper limit for the nr of possible answer boxes
 
     return (
       <nav className='panel'>