Skip to content
Snippets Groups Projects
Commit 0a50ed4e authored by jtimotei's avatar jtimotei
Browse files

Working dynamic panel mcq placed in panel edit

parent 38538182
No related branches found
No related tags found
1 merge request!31Layout side panel
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>
)
}
......
.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
......@@ -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>
}
......
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