Skip to content
Snippets Groups Projects
Commit 2dae7e51 authored by jtimotei's avatar jtimotei
Browse files

Labels and number inputs on one line

parent 0a50ed4e
No related branches found
No related tags found
1 merge request!31Layout side panel
......@@ -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
......
.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 {
......
......@@ -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'>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment