From b2d6d88ecd0d96b9cd996a458cc212c55ed52feb Mon Sep 17 00:00:00 2001
From: Mohammadreza Tavakoli <mohamadreza.tavakoli1989@gmail.com>
Date: Fri, 2 Aug 2019 17:37:14 +0200
Subject: [PATCH 1/3] add-answer-dynamically for add question panel has been
 added.

---
 .../ContentQuestionAdd.js                     | 113 +++++++++++++++---
 services/questions.js                         |  17 +--
 2 files changed, 99 insertions(+), 31 deletions(-)

diff --git a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js
index 28d415669..e855629b0 100644
--- a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js
+++ b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js
@@ -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 {
 
@@ -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,
@@ -30,16 +25,21 @@ class ContentQuestionAdd extends React.Component {
         this.updateQuestionTitle = this.updateQuestionTitle.bind(this);
         this.updateQuestionDifficulty = this.updateQuestionDifficulty.bind(this);
         /* update answers */
+        this.updateAnswer = this.updateAnswer.bind(this);
         this.updateAnswer1 = this.updateAnswer1.bind(this);
         this.updateAnswer2 = this.updateAnswer2.bind(this);
         this.updateAnswer3 = this.updateAnswer3.bind(this);
         this.updateAnswer4 = this.updateAnswer4.bind(this);
         /* update correct answer choice */
+        this.updateCorrect = this.updateCorrect.bind(this);
         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.addAnswerClick = this.addAnswerClick.bind(this);
+        this.removeAnswerClick = this.removeAnswerClick.bind(this);
+
         this.updateExplanation = this.updateExplanation.bind(this);
         this.updateIsExamQuestion = this.updateIsExamQuestion.bind(this);
         this.saveButtonClick = this.saveButtonClick.bind(this);
@@ -77,13 +77,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')
@@ -100,7 +100,50 @@ class ContentQuestionAdd extends React.Component {
         this.context.executeAction(invertAddQuestionBoxFlag, {});
     }
 
+    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', '');
+        }
+
+        return parseInt(result, 10) - 1;
+    }
+
+    addAnswerClick() {
+        this.setState((prevState) => ({
+            answers: [...prevState.answers, '']
+        }));
+        this.setState((prevState) => ({
+            corrects: [...prevState.corrects, false]
+        }));
+    }
+
+    removeAnswerClick(e) {
+        let indexShouldBeRemoved = this.getItemId(e.currentTarget.id, 'remove');
+        const tmp_array_answers = [...this.state.answers];
+        tmp_array_answers.splice(indexShouldBeRemoved, 1);
+
+        const tmp_array_corrects = [...this.state.corrects];
+        tmp_array_corrects.splice(indexShouldBeRemoved, 1);
+        
+        this.setState({
+            answers: tmp_array_answers,
+            corrects: tmp_array_corrects
+        });
+    }
+
     /* 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});
+    }
+
     updateAnswer1(e) {
         this.setState({answer1: e.target.value});
     }
@@ -118,6 +161,13 @@ class ContentQuestionAdd extends React.Component {
         this.setState({answer4: e.target.value});
     }
 
+    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});
+    }
+
     /* Update correct choice among available answer choices */
     updateCorrect1(e) {
         this.setState({correct1: e.target.checked});
@@ -156,6 +206,24 @@ class ContentQuestionAdd extends React.Component {
         const answerChoiceWidth = {
             width: '680px',
         };
+        console.log(this.state.answers);
+        let answers = this.state.answers.map((item, index) =>
+        <div className="inline field">
+            <div className="ui checkbox">
+                <input  type="checkbox" name={'example' + (index+1)} id={'answer' + (index+1)} tabIndex="0" className="hidden" onChange={this.updateCorrect}/>
+                <label htmlFor={'answer' + (index+1)}></label>
+            </div>
+            <button type="button" id={'remove' + (index+1)} className="ui secondary labeled close icon button" onClick={this.removeAnswerClick}>
+                    <i className="icon close" />
+                    <FormattedMessage
+                        id='ContentQuestionAdd.form.button_remove'
+                        defaultMessage='Remove' />
+            </button>
+            <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">
@@ -218,23 +286,24 @@ class ContentQuestionAdd extends React.Component {
                                         id='ContentQuestionAdd.form.answer_choices'
                                         defaultMessage='Answer Choices' />
                                 </legend>
-                                <div className="inline field">
+                                {/* <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> */}
+                                {answers}
+                                {/* <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> */}
+                                {/* <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>
@@ -249,7 +318,13 @@ class ContentQuestionAdd extends React.Component {
                                     </div>
                                     <input type="text" style={answerChoiceWidth} name="response4" id="response4" onChange={this.updateAnswer4}/>
                                     <label htmlFor="response4"></label>
-                                </div>
+                                </div> */}
+                                <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">
diff --git a/services/questions.js b/services/questions.js
index 881eb0da3..0e50dbd67 100644
--- a/services/questions.js
+++ b/services/questions.js
@@ -70,19 +70,12 @@ export default {
         req.reqId = req.reqId ? req.reqId : -1;
         log.info({Id: req.reqId, Service: __filename.split('/').pop(), Resource: resource, Operation: 'create', Method: req.method});
         let args = params.params? params.params : params;
-
+        
         let choices = [];
-        if (args.question.answer1 !== '') {
-            choices.push({'choice': args.question.answer1, 'is_correct': args.question.correct1});
-        }
-        if (args.question.answer2 !== '') {
-            choices.push({'choice': args.question.answer2, 'is_correct': args.question.correct2});
-        }
-        if (args.question.answer3 !== '') {
-            choices.push({'choice': args.question.answer3, 'is_correct': args.question.correct3});
-        }
-        if (args.question.answer4 !== '') {
-            choices.push({'choice': args.question.answer4, 'is_correct': args.question.correct4});
+        for(let i = 0; i < args.question.answers.length; i++) {
+            if (args.question.answers[i] !== '') {
+                choices.push({'choice': args.question.answers[i], 'is_correct': args.question.corrects[i]});
+            }
         }
 
         if (resource === 'questions.add') {

From 1adb58cc90aeef8b6a779e7167dad6533fd313e8 Mon Sep 17 00:00:00 2001
From: Mohammadreza Tavakoli <mohamadreza.tavakoli1989@gmail.com>
Date: Mon, 5 Aug 2019 14:15:09 +0200
Subject: [PATCH 2/3] add-answer-dynamically has been added to edit-question

---
 .../ContentQuestionAdd.js                     |  85 +---------
 .../ContentQuestionEdit.js                    | 149 +++++++++---------
 services/questions.js                         |  20 +--
 3 files changed, 82 insertions(+), 172 deletions(-)

diff --git a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js
index e855629b0..6331ce80b 100644
--- a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js
+++ b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionAdd.js
@@ -26,16 +26,8 @@ class ContentQuestionAdd extends React.Component {
         this.updateQuestionDifficulty = this.updateQuestionDifficulty.bind(this);
         /* update answers */
         this.updateAnswer = this.updateAnswer.bind(this);
-        this.updateAnswer1 = this.updateAnswer1.bind(this);
-        this.updateAnswer2 = this.updateAnswer2.bind(this);
-        this.updateAnswer3 = this.updateAnswer3.bind(this);
-        this.updateAnswer4 = this.updateAnswer4.bind(this);
         /* update correct answer choice */
         this.updateCorrect = this.updateCorrect.bind(this);
-        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.addAnswerClick = this.addAnswerClick.bind(this);
         this.removeAnswerClick = this.removeAnswerClick.bind(this);
@@ -144,23 +136,7 @@ class ContentQuestionAdd extends React.Component {
         this.setState({answers:tmp_array});
     }
 
-    updateAnswer1(e) {
-        this.setState({answer1: e.target.value});
-    }
-
-    updateAnswer2(e) {
-        this.setState({answer2: e.target.value});
-    }
-
-    updateAnswer3(e) {
-        this.setState({answer3: e.target.value});
-    }
-
-    updateAnswer4(e) {
-        //console.log(e.target.value);
-        this.setState({answer4: e.target.value});
-    }
-
+    /* Update correct choice among available answer choices */
     updateCorrect(e) {
         const tmp_array = [...this.state.corrects];
         let indexShouldBeChanged = this.getItemId(e.target.id, 'answer');
@@ -168,23 +144,6 @@ class ContentQuestionAdd extends React.Component {
         this.setState({corrects:tmp_array});
     }
 
-    /* Update correct choice among available answer choices */
-    updateCorrect1(e) {
-        this.setState({correct1: e.target.checked});
-    }
-
-    updateCorrect2(e) {
-        this.setState({correct2: e.target.checked});
-    }
-
-    updateCorrect3(e) {
-        this.setState({correct3: e.target.checked});
-    }
-
-    updateCorrect4(e) {
-        this.setState({correct4: e.target.checked});
-    }
-
     updateExplanation(e) {
         this.setState({explanation: e.target.value});
     }
@@ -206,19 +165,13 @@ class ContentQuestionAdd extends React.Component {
         const answerChoiceWidth = {
             width: '680px',
         };
-        console.log(this.state.answers);
         let answers = this.state.answers.map((item, index) =>
         <div className="inline field">
             <div className="ui checkbox">
-                <input  type="checkbox" name={'example' + (index+1)} id={'answer' + (index+1)} tabIndex="0" className="hidden" onChange={this.updateCorrect}/>
+                <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>
-            <button type="button" id={'remove' + (index+1)} className="ui secondary labeled close icon button" onClick={this.removeAnswerClick}>
-                    <i className="icon close" />
-                    <FormattedMessage
-                        id='ContentQuestionAdd.form.button_remove'
-                        defaultMessage='Remove' />
-            </button>
+            <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>
@@ -286,39 +239,7 @@ 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> */}
                                 {answers}
-                                {/* <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> */}
                                 <button type="button" className="ui right floated compact button primary" onClick={this.addAnswerClick} >
                                         <i className="small plus icon" />
                                         <FormattedMessage
diff --git a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js
index c98d2953f..4de803c0b 100644
--- a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js
+++ b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js
@@ -11,18 +11,14 @@ class ContentQuestionEdit extends React.Component {
     constructor(props) {
         super(props);
         const numAnswers = this.props.question.answers.length;
+        const initAnswers = this.props.question.answers.map((item) => item.answer);
+        const initCorrects = this.props.question.answers.map((item) => item.correct);
         this.state = {
             qid: this.props.question.id,
             title: this.props.question.title,
             difficulty: this.props.question.difficulty,
-            answer1: this.props.question.answers[0].answer,
-            answer2: numAnswers > 1 ? this.props.question.answers[1].answer: '',
-            answer3: numAnswers > 2 ? this.props.question.answers[2].answer: '',
-            answer4: numAnswers > 3 ? this.props.question.answers[3].answer: '',
-            correct1: this.props.question.answers[0].correct,
-            correct2: numAnswers > 1 ? this.props.question.answers[1].correct: false,
-            correct3: numAnswers > 2 ? this.props.question.answers[2].correct: false,
-            correct4: numAnswers > 3 ? this.props.question.answers[3].correct: false,
+            answers: initAnswers,
+            corrects: initCorrects,
             explanation: this.props.question.explanation,
             userId: this.props.userId,
             relatedObjectId: this.props.question.relatedObjectId,
@@ -32,15 +28,12 @@ class ContentQuestionEdit 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);
@@ -83,10 +76,11 @@ class ContentQuestionEdit extends React.Component {
 
         // 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.questionedit_form)).form(questionValidation);
         // $('.ui.form')
@@ -126,39 +120,56 @@ class ContentQuestionEdit extends React.Component {
         }, (reason) => {/*do nothing*/}).catch(swal.noop);
     }
 
-    /* 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) {
@@ -182,6 +193,19 @@ class ContentQuestionEdit 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">
@@ -253,38 +277,13 @@ class ContentQuestionEdit extends React.Component {
                                         id='ContentQuestionEdit.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" defaultChecked={this.state.correct1} onChange={this.updateCorrect1}/>
-                                        <label htmlFor="answer1"></label>
-                                    </div>
-                                    <input style={answerChoiceWidth} type="text" name="response1" id="response1" defaultValue={this.state.answer1}  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" defaultChecked={this.state.correct2} onChange={this.updateCorrect2}/>
-                                        <label htmlFor="answer2"></label>
-                                    </div>
-                                    <input style={answerChoiceWidth} type="text" name="response2" id="response2" defaultValue={this.state.answer2}  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" defaultChecked={this.state.correct3} onChange={this.updateCorrect3}/>
-                                        <label htmlFor="answer3"></label>
-                                    </div>
-                                    <input type="text" style={answerChoiceWidth} name="response3" id="response3" defaultValue={this.state.answer3} 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" defaultChecked={this.state.correct4} onChange={this.updateCorrect4}/>
-                                        <label htmlFor="answer4"></label>
-                                    </div>
-                                    <input type="text" style={answerChoiceWidth} name="response4" id="response4" defaultValue={this.state.answer4} 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">
diff --git a/services/questions.js b/services/questions.js
index 0e50dbd67..be005ed63 100644
--- a/services/questions.js
+++ b/services/questions.js
@@ -118,21 +118,11 @@ export default {
         if (resource === 'questions.update') {
             let choices = [];
             let answers = [];//There is a problem with different names used on the platform and service
-            if (args.question.answer1 !== '') {
-                choices.push({'choice': args.question.answer1, 'is_correct': args.question.correct1});
-                answers.push({'answer': args.question.answer1, 'correct': args.question.correct1});
-            }
-            if (args.question.answer2 !== '') {
-                choices.push({'choice': args.question.answer2, 'is_correct': args.question.correct2});
-                answers.push({'answer': args.question.answer2, 'correct': args.question.correct2});
-            }
-            if (args.question.answer3 !== '') {
-                choices.push({'choice': args.question.answer3, 'is_correct': args.question.correct3});
-                answers.push({'answer': args.question.answer3, 'correct': args.question.correct3});
-            }
-            if (args.question.answer4 !== '') {
-                choices.push({'choice': args.question.answer4, 'is_correct': args.question.correct4});
-                answers.push({'answer': args.question.answer4, 'correct': args.question.correct4});
+            for(let i = 0; i < args.question.answers.length; i++) {
+                if (args.question.answers[i] !== '') {
+                    choices.push({'choice': args.question.answers[i], 'is_correct': args.question.corrects[i]});
+                    answers.push({'answer': args.question.answers[i], 'correct': args.question.corrects[i]});
+                }
             }
 
             rp.put({

From abdc39286d328c2c12e0e6cfa0b79720974d1135 Mon Sep 17 00:00:00 2001
From: Mohammadreza Tavakoli <mohamadreza.tavakoli1989@gmail.com>
Date: Mon, 5 Aug 2019 14:19:42 +0200
Subject: [PATCH 3/3] delete question problem has been solved

---
 .../ContentQuestionsPanel/ContentQuestionEdit.js              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js
index 4de803c0b..fc62fbffd 100644
--- a/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js
+++ b/components/Deck/ContentModulesPanel/ContentQuestionsPanel/ContentQuestionEdit.js
@@ -109,12 +109,12 @@ class ContentQuestionEdit extends React.Component {
             }
         });
         swal({
-            title: context.intl.formatMessage(swal_messages.text),
+            title: this.context.intl.formatMessage(swal_messages.text),
             type: 'warning',
             showCancelButton: true,
             confirmButtonColor: '#3085d6',
             cancelButtonColor: '#d33',
-            confirmButtonText: context.intl.formatMessage(swal_messages.confirmButtonText),
+            confirmButtonText: this.context.intl.formatMessage(swal_messages.confirmButtonText),
         }).then((accepted) => {
             this.context.executeAction(deleteQuestion, {questionId: this.state.qid});
         }, (reason) => {/*do nothing*/}).catch(swal.noop);