Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

1184 dynamic question adding #1189

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

1184 dynamic question adding #1189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b2d6d88
add-answer-dynamically for add question panel has been added.
rezatavakoli Aug 2, 2019
1adb58c
add-answer-dynamically has been added to edit-question
rezatavakoli Aug 5, 2019
abdc392
delete question problem has been solved
rezatavakoli Aug 5, 2019
13435d4
Merge branch 'master' into 1184-dynamic-question-adding
bwulff Sep 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 72 additions & 76 deletions components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
import addQuestion from '../../../../actions/questions/addQuestion';
import invertAddQuestionBoxFlag from '../../../../actions/questions/invertAddQuestionBoxFlag';
import { FormattedMessage, defineMessages } from 'react-intl';
import { log } from 'util';

class ContentQuestionAdd extends React.Component {

Expand All @@ -13,14 +14,8 @@ class ContentQuestionAdd extends React.Component {
this.state = {
title: '',
difficulty: 1,
answer1: '',
answer2: '',
answer3: '',
answer4: '',
correct1: false,
correct2: false,
correct3: false,
correct4: false,
answers: ['', ''],
corrects: [false, false],
explanation: '', //this.props.question.explanation,
userId: this.props.userId,
relatedObjectId: this.props.selector.sid,
Expand All @@ -30,15 +25,12 @@ class ContentQuestionAdd extends React.Component {
this.updateQuestionTitle = this.updateQuestionTitle.bind(this);
this.updateQuestionDifficulty = this.updateQuestionDifficulty.bind(this);
/* update answers */
this.updateAnswer1 = this.updateAnswer1.bind(this);
this.updateAnswer2 = this.updateAnswer2.bind(this);
this.updateAnswer3 = this.updateAnswer3.bind(this);
this.updateAnswer4 = this.updateAnswer4.bind(this);
this.updateAnswer = this.updateAnswer.bind(this);
/* update correct answer choice */
this.updateCorrect1 = this.updateCorrect1.bind(this);
this.updateCorrect2 = this.updateCorrect2.bind(this);
this.updateCorrect3 = this.updateCorrect3.bind(this);
this.updateCorrect4 = this.updateCorrect4.bind(this);
this.updateCorrect = this.updateCorrect.bind(this);

this.addAnswerClick = this.addAnswerClick.bind(this);
this.removeAnswerClick = this.removeAnswerClick.bind(this);

this.updateExplanation = this.updateExplanation.bind(this);
this.updateIsExamQuestion = this.updateIsExamQuestion.bind(this);
Expand Down Expand Up @@ -77,13 +69,13 @@ class ContentQuestionAdd extends React.Component {
},
onSuccess: this.saveButtonClick
};

// Custom form validation rule
$.fn.form.settings.rules.atleastoneanswer = (() => {
return (this.state.answer1 !== '' && this.state.correct1) ||
(this.state.answer2 !== '' && this.state.correct2) ||
(this.state.answer3 !== '' && this.state.correct3) ||
(this.state.answer4 !== '' && this.state.correct4);
let ruleState = (this.state.answers[0] !== '' && this.state.corrects[0]);
for(let i = 1; i < this.state.answers.length; i++) {
ruleState = ruleState || (this.state.answers[i] !== '' && this.state.corrects[i]);
}
return ruleState;
});
$(ReactDOM.findDOMNode(this.refs.questionadd_form)).form(questionValidation);
// $('.ui.form')
Expand All @@ -100,39 +92,56 @@ class ContentQuestionAdd extends React.Component {
this.context.executeAction(invertAddQuestionBoxFlag, {});
}

/* Update answer choice text */
updateAnswer1(e) {
this.setState({answer1: e.target.value});
}

updateAnswer2(e) {
this.setState({answer2: e.target.value});
}
getItemId(id, type) {
let result = 0;
if(type === 'response') {
result = id.replace('response', '');
} else if (type === 'answer') {
result = id.replace('answer', '');
} else if (type === 'remove') {
result = id.replace('remove', '');
}

updateAnswer3(e) {
this.setState({answer3: e.target.value});
return parseInt(result, 10) - 1;
}

updateAnswer4(e) {
//console.log(e.target.value);
this.setState({answer4: e.target.value});
addAnswerClick() {
this.setState((prevState) => ({
answers: [...prevState.answers, '']
}));
this.setState((prevState) => ({
corrects: [...prevState.corrects, false]
}));
}

/* Update correct choice among available answer choices */
updateCorrect1(e) {
this.setState({correct1: e.target.checked});
}
removeAnswerClick(e) {
let indexShouldBeRemoved = this.getItemId(e.currentTarget.id, 'remove');
const tmp_array_answers = [...this.state.answers];
tmp_array_answers.splice(indexShouldBeRemoved, 1);

updateCorrect2(e) {
this.setState({correct2: e.target.checked});
const tmp_array_corrects = [...this.state.corrects];
tmp_array_corrects.splice(indexShouldBeRemoved, 1);

this.setState({
answers: tmp_array_answers,
corrects: tmp_array_corrects
});
}

updateCorrect3(e) {
this.setState({correct3: e.target.checked});
/* Update answer choice text */
updateAnswer(e) {
const tmp_array = [...this.state.answers];
let indexShouldBeChanged = this.getItemId(e.target.id, 'response');
tmp_array[indexShouldBeChanged] = e.target.value;
this.setState({answers:tmp_array});
}

updateCorrect4(e) {
this.setState({correct4: e.target.checked});
/* Update correct choice among available answer choices */
updateCorrect(e) {
const tmp_array = [...this.state.corrects];
let indexShouldBeChanged = this.getItemId(e.target.id, 'answer');
tmp_array[indexShouldBeChanged] = e.target.checked;
this.setState({corrects:tmp_array});
}

updateExplanation(e) {
Expand All @@ -156,6 +165,18 @@ class ContentQuestionAdd extends React.Component {
const answerChoiceWidth = {
width: '680px',
};
let answers = this.state.answers.map((item, index) =>
<div className="inline field">
<div className="ui checkbox">
<input type="checkbox" name={'example' + (index+1)} checked={this.state.corrects[index]?'checked':''} id={'answer' + (index+1)} tabIndex="0" className="hidden" onChange={this.updateCorrect}/>
<label htmlFor={'answer' + (index+1)}></label>
</div>
<i id={'remove' + (index+1)} onClick={this.removeAnswerClick} className="ui delete icon" />
<input style={answerChoiceWidth} type="text" value={item} name={'response' + (index+1)} id={'response' + (index+1)} onChange={this.updateAnswer}/>
<label htmlFor={'response' + (index+1)}></label>
</div>
);

return (
<div className="ui bottom attached">
<div className="ui padded segment">
Expand Down Expand Up @@ -218,38 +239,13 @@ class ContentQuestionAdd extends React.Component {
id='ContentQuestionAdd.form.answer_choices'
defaultMessage='Answer Choices' />
</legend>
<div className="inline field">
<div className="ui checkbox">
<input type="checkbox" name="example1" id="answer1" tabIndex="0" className="hidden" onChange={this.updateCorrect1}/>
<label htmlFor="answer1"></label>
</div>
<input style={answerChoiceWidth} type="text" name="response1" id="response1" onChange={this.updateAnswer1}/>
<label htmlFor="response1"></label>
</div>
<div className="inline field">
<div className="ui checkbox">
<input type="checkbox" name="example2" id="answer2" tabIndex="0" className="hidden" onChange={this.updateCorrect2}/>
<label htmlFor="answer2"></label>
</div>
<input style={answerChoiceWidth} type="text" name="response2" id="response2" onChange={this.updateAnswer2}/>
<label htmlFor="response2"></label>
</div>
<div className="inline field">
<div className="ui checkbox">
<input type="checkbox" name="example3" id="answer3" tabIndex="0" className="hidden" onChange={this.updateCorrect3}/>
<label htmlFor="answer3"></label>
</div>
<input type="text" style={answerChoiceWidth} name="response3" id="response3" onChange={this.updateAnswer3}/>
<label htmlFor="response3"></label>
</div>
<div className="inline field">
<div className="ui checkbox">
<input type="checkbox" name="example4" id="answer4" tabIndex="0" className="hidden" onChange={this.updateCorrect4}/>
<label htmlFor="answer4"></label>
</div>
<input type="text" style={answerChoiceWidth} name="response4" id="response4" onChange={this.updateAnswer4}/>
<label htmlFor="response4"></label>
</div>
{answers}
<button type="button" className="ui right floated compact button primary" onClick={this.addAnswerClick} >
<i className="small plus icon" />
<FormattedMessage
id='ContentQuestionAdd.form.button_add_answer'
defaultMessage='Add Answer' />
</button>
</fieldset>
</div>
<div className="field">
Expand Down
Loading