Skip to content

Commit

Permalink
fix exercise format option switching
Browse files Browse the repository at this point in the history
  • Loading branch information
@jivey
jivey committed Jun 21, 2021
1 parent 10316f5 commit 1e3ec13
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 10 deletions.
20 changes: 16 additions & 4 deletions exercises/specs/components/__snapshots__/exercise.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ exports[`Exercises component renders and matches snapshot 1`] = `
<div>
<input
checked={false}
disabled={true}
id="input-open-ended"
name="0-formats"
onChange={[Function]}
Expand All @@ -169,6 +170,7 @@ exports[`Exercises component renders and matches snapshot 1`] = `
<div>
<input
checked={true}
disabled={false}
id="input-multiple-choice"
name="0-formats"
onChange={[Function]}
Expand All @@ -184,6 +186,7 @@ exports[`Exercises component renders and matches snapshot 1`] = `
<div>
<input
checked={false}
disabled={false}
id="input-true-false"
name="0-formats"
onChange={[Function]}
Expand Down Expand Up @@ -1929,6 +1932,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={false}
disabled={true}
id="input-open-ended"
name="0-formats"
onChange={[Function]}
Expand All @@ -1944,6 +1948,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={true}
disabled={false}
id="input-multiple-choice"
name="0-formats"
onChange={[Function]}
Expand All @@ -1959,6 +1964,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={false}
disabled={false}
id="input-true-false"
name="0-formats"
onChange={[Function]}
Expand Down Expand Up @@ -2365,6 +2371,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={false}
disabled={true}
id="input-open-ended"
name="1-formats"
onChange={[Function]}
Expand All @@ -2380,6 +2387,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={true}
disabled={false}
id="input-multiple-choice"
name="1-formats"
onChange={[Function]}
Expand All @@ -2395,6 +2403,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={false}
disabled={false}
id="input-true-false"
name="1-formats"
onChange={[Function]}
Expand Down Expand Up @@ -3134,6 +3143,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={false}
disabled={true}
id="input-open-ended"
name="2-formats"
onChange={[Function]}
Expand All @@ -3149,6 +3159,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={true}
disabled={false}
id="input-multiple-choice"
name="2-formats"
onChange={[Function]}
Expand All @@ -3164,6 +3175,7 @@ exports[`Exercises component renders with intro and a multiple questions when ex
<div>
<input
checked={false}
disabled={false}
id="input-true-false"
name="2-formats"
onChange={[Function]}
Expand Down Expand Up @@ -5129,22 +5141,22 @@ exports[`Exercises component resets fields when model is new 1`] = `
</div>
<Question onRemove={[Function: onRemove]} onMove={[Function: onMove]} question={{...}}>
<div className=\\"question\\">
<QuestionFormatType question={{...}}>
<QuestionFormatType question={{...}} addAnswer={[Function: addAnswer] { isMobxAction: true }}>
<div className=\\"format-type\\">
<div>
<input type=\\"radio\\" id=\\"input-open-ended\\" name=\\"0-formats\\" value=\\"open-ended\\" onChange={[Function: updateRadioFormat] { isMobxAction: true }} checked={false} />
<input type=\\"radio\\" id=\\"input-open-ended\\" name=\\"0-formats\\" value=\\"open-ended\\" onChange={[Function: updateRadioFormat] { isMobxAction: true }} checked={false} disabled={true} />
<label htmlFor=\\"input-open-ended\\">
Open Ended
</label>
</div>
<div>
<input type=\\"radio\\" id=\\"input-multiple-choice\\" name=\\"0-formats\\" value=\\"multiple-choice\\" onChange={[Function: updateRadioFormat] { isMobxAction: true }} checked={true} />
<input type=\\"radio\\" id=\\"input-multiple-choice\\" name=\\"0-formats\\" value=\\"multiple-choice\\" onChange={[Function: updateRadioFormat] { isMobxAction: true }} checked={true} disabled={false} />
<label htmlFor=\\"input-multiple-choice\\">
Multiple Choice
</label>
</div>
<div>
<input type=\\"radio\\" id=\\"input-true-false\\" name=\\"0-formats\\" value=\\"true-false\\" onChange={[Function: updateRadioFormat] { isMobxAction: true }} checked={false} />
<input type=\\"radio\\" id=\\"input-true-false\\" name=\\"0-formats\\" value=\\"true-false\\" onChange={[Function: updateRadioFormat] { isMobxAction: true }} checked={false} disabled={false} />
<label htmlFor=\\"input-true-false\\">
True/False
</label>
Expand Down
13 changes: 9 additions & 4 deletions exercises/src/components/exercise/question-format-type.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const StyledTwoStepInfo = styled(Popover)`
class QuestionFormatType extends React.Component {
static propTypes = {
question: PropTypes.instanceOf(Question).isRequired,
addAnswer: PropTypes.func,
};

constructor(props) {
Expand All @@ -25,6 +26,9 @@ class QuestionFormatType extends React.Component {
}

@action.bound updateRadioFormat(ev) {
if (ev.target.value === 'multiple-choice' && this.props.question.answers.length === 0) {
this.props.addAnswer()
}
this.props.question.setExclusiveFormat(ev.target.value);
}

Expand All @@ -44,9 +48,9 @@ class QuestionFormatType extends React.Component {
overlay={
<StyledTwoStepInfo>
<p>
A two-step question requires students to recall an answer from memory
before viewing the multiple-choice options.
Our research shows that retrieval practice helps to improve knowledge retention.
A two-step question requires students to recall an answer from memory
before viewing the multiple-choice options.
Our research shows that retrieval practice helps to improve knowledge retention.
</p>
</StyledTwoStepInfo>
}
Expand All @@ -73,6 +77,7 @@ class QuestionFormatType extends React.Component {
value={id}
onChange={this.updateRadioFormat}
checked={question.hasFormat(id)}
disabled={id === 'open-ended' && question.answers.length > 0}
/>
<label htmlFor={`input-${id}`}>
{name}
Expand All @@ -89,7 +94,7 @@ class QuestionFormatType extends React.Component {
onChange={this.setChoiceRequired}
/>
<label htmlFor="input-rq">
Two Step Question
Two Step Question
</label>
{this.renderTwoStepInfo()}
</div>
Expand Down
4 changes: 2 additions & 2 deletions exercises/src/components/exercise/question.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ class Question extends React.Component {
To save your work, you must fill out the {validity.part}
</Alert>)}

<QuestionFormatType question={question} />
<QuestionFormatType question={question} addAnswer={this.addAnswer} />
{!question.exercise.isMultiPart && (
<div className="question-stimulus">
<label>
Expand Down Expand Up @@ -136,7 +136,7 @@ class Question extends React.Component {
</div>
<div>
<label>
Detailed Solution
Detailed Solution
</label>
<textarea onChange={this.updateSolution} value={question.collaborator_solution_html} />
</div>
Expand Down

0 comments on commit 1e3ec13

Please sign in to comment.